fix: add proper external data handling to ObjectKanban and regression tests

Copilot · hotlong · Copilot · commit c7a194ee5f02 · 2026-03-21T12:37:33.000Z
- ObjectKanban now accepts explicit `data` and `loading` props with `hasExternalData` guard (matching ObjectCalendar's pattern) to skip internal fetch when parent provides pre-fetched data - Remove stale console.log in ObjectKanban - Add OData `{ value: [] }` format test for ListView - Add regression tests for duplicate data in Calendar and Kanban views - Update CHANGELOG.md Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com> Agent-Logs-Url: https://github.com/objectstack-ai/objectui/sessions/7998282e-22f9-4b45-aca5-8f86440779c9
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,6 +13,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- **Duplicate Data in Calendar and Kanban Views** (`@object-ui/plugin-view`, `@object-ui/plugin-kanban`, `@object-ui/plugin-list`): Fixed a bug where Calendar and Kanban views displayed every record twice. The root cause was that `ObjectView` (plugin-view) unconditionally fetched data even when a `renderListView` callback was provided — causing parallel duplicate requests since `ListView` (plugin-list) independently fetches its own data. The duplicate fetch results triggered re-renders that destabilised child component rendering, leading to duplicate events in the calendar and duplicate cards on the kanban board. Additionally, `ObjectKanban` lacked proper external-data handling (`data`/`loading` props with `hasExternalData` guard), unlike `ObjectCalendar` which already had this pattern. Fixes: (1) `ObjectView` now skips its own fetch when `renderListView` is provided, (2) `ObjectKanban` now accepts explicit `data`/`loading` props and skips internal fetch when external data is supplied (matching `ObjectCalendar`'s pattern), (3) `ListView` now handles `{ value: [] }` OData response format consistently with `extractRecords` utility. Includes regression tests.
+
 - **CI Build Fix: Replace dynamic `require()` with static imports** (`@object-ui/plugin-view`): Replaced module-level `require('@object-ui/react')` calls in `index.tsx` and `ObjectView.tsx` with static `import` statements. The dynamic `require()` pattern is not supported by Next.js Turbopack, causing the docs site build to fail during SSR prerendering of the `/docs/components/complex/view-switcher` page with `Error: dynamic usage of require is not supported`. Since `@object-ui/react` is already a declared dependency and other files in the package use static imports from it, replacing the `require()` with static imports is safe and eliminates the SSR compatibility issue.
 
 - **CI Build Fix: Remove unused `...rest` parameter** (`@object-ui/plugin-calendar`): Removed unused `...rest` destructured parameter from `ObjectCalendar` component props (TS6133), which caused the declaration file generation to emit a TypeScript error during the build.
diff --git a/apps/console/src/__tests__/DuplicateData.test.tsx b/apps/console/src/__tests__/DuplicateData.test.tsx
@@ -0,0 +1,196 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import { ObjectView } from '../components/ObjectView';
+import { SchemaRendererProvider } from '@object-ui/react';
+import '@object-ui/plugin-grid';
+import '@object-ui/plugin-kanban';
+import '@object-ui/plugin-calendar';
+import '@object-ui/plugin-list';
+
+vi.mock('@object-ui/components', async () => {
+    const actual = await vi.importActual('@object-ui/components');
+    return { ...actual };
+});
+
+vi.mock('@object-ui/react', async (importOriginal) => {
+    const actual = await importOriginal<any>();
+    return {
+        ...actual,
+        useDataScope: () => undefined,
+    };
+});
+
+const mockSetSearchParams = vi.fn();
+let mockSearchParams = new URLSearchParams();
+let mockViewId = 'calendar';
+
+vi.mock('react-router-dom', () => ({
+    useParams: () => ({ objectName: 'todo_task', viewId: mockViewId }),
+    useSearchParams: () => [mockSearchParams, mockSetSearchParams],
+    useNavigate: () => vi.fn(),
+}));
+
+// Use dates in current month so events show on the visible calendar
+const now = new Date();
+const year = now.getFullYear();
+const month = String(now.getMonth() + 1).padStart(2, '0');
+
+const records = [
+    { id: 't1', name: 'Set up CI/CD pipeline', due_date: `${year}-${month}-16T09:00:00`, status: 'todo' },
+    { id: 't2', name: 'Design dashboard', due_date: `${year}-${month}-18T10:00:00`, status: 'in_progress' },
+    { id: 't3', name: 'Fix mobile responsive', due_date: `${year}-${month}-20T14:00:00`, status: 'done' },
+];
+
+let mockDataSource: any;
+
+const mockObjects = [
+    {
+        name: 'todo_task',
+        label: 'Task',
+        fields: {
+            name: { label: 'Name', type: 'text' },
+            due_date: { label: 'Due Date', type: 'datetime' },
+            status: {
+                label: 'Status', type: 'select',
+                options: [
+                    { value: 'todo', label: 'To Do' },
+                    { value: 'in_progress', label: 'In Progress' },
+                    { value: 'done', label: 'Done' },
+                ],
+            },
+        },
+        listViews: {
+            all: {
+                name: 'all',
+                label: 'All Tasks',
+                type: 'grid',
+                columns: ['name', 'due_date', 'status'],
+            },
+            calendar: {
+                name: 'calendar',
+                label: 'Calendar',
+                type: 'calendar',
+                columns: ['name', 'due_date', 'status'],
+                calendar: {
+                    startDateField: 'due_date',
+                    titleField: 'name',
+                },
+            },
+            board: {
+                name: 'board',
+                label: 'Board',
+                type: 'kanban',
+                columns: ['name', 'due_date', 'status'],
+                kanban: {
+                    groupField: 'status',
+                    titleField: 'name',
+                },
+            },
+        },
+    },
+];
+
+describe('Duplicate Data Prevention', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+        mockSearchParams = new URLSearchParams();
+        mockDataSource = {
+            find: vi.fn().mockResolvedValue(records),
+            findOne: vi.fn().mockResolvedValue({}),
+            create: vi.fn().mockResolvedValue({}),
+            update: vi.fn().mockResolvedValue({}),
+            delete: vi.fn().mockResolvedValue(true),
+            getObjectSchema: vi.fn().mockResolvedValue({
+                name: 'todo_task',
+                label: 'Task',
+                fields: mockObjects[0].fields,
+            }),
+        };
+    });
+
+    describe('Calendar view', () => {
+        beforeEach(() => {
+            mockViewId = 'calendar';
+        });
+
+        it('should not show duplicate events in calendar view', async () => {
+            render(
+                <SchemaRendererProvider dataSource={mockDataSource}>
+                    <ObjectView dataSource={mockDataSource} objects={mockObjects} onEdit={vi.fn()} />
+                </SchemaRendererProvider>
+            );
+
+            // Calendar region should render
+            await waitFor(() => {
+                const calendarRegion = document.querySelector('[aria-label="Calendar"]');
+                expect(calendarRegion).toBeInTheDocument();
+            }, { timeout: 5000 });
+
+            // Wait for events to appear
+            await waitFor(() => {
+                expect(screen.getByText('Set up CI/CD pipeline')).toBeInTheDocument();
+            }, { timeout: 5000 });
+
+            // Each event should appear exactly ONCE (no duplicates)
+            expect(screen.getAllByText('Set up CI/CD pipeline')).toHaveLength(1);
+            expect(screen.getAllByText('Design dashboard')).toHaveLength(1);
+            expect(screen.getAllByText('Fix mobile responsive')).toHaveLength(1);
+        });
+
+        it('should not show duplicate events with wrapped response format', async () => {
+            // ObjectStack adapter returns { data: [...], total, page, pageSize }
+            mockDataSource.find.mockResolvedValue({
+                data: records,
+                total: records.length,
+                page: 1,
+                pageSize: 100,
+                hasMore: false,
+            });
+
+            render(
+                <SchemaRendererProvider dataSource={mockDataSource}>
+                    <ObjectView dataSource={mockDataSource} objects={mockObjects} onEdit={vi.fn()} />
+                </SchemaRendererProvider>
+            );
+
+            await waitFor(() => {
+                expect(screen.getByText('Set up CI/CD pipeline')).toBeInTheDocument();
+            }, { timeout: 5000 });
+
+            expect(screen.getAllByText('Set up CI/CD pipeline')).toHaveLength(1);
+            expect(screen.getAllByText('Design dashboard')).toHaveLength(1);
+        });
+    });
+
+    describe('Kanban view', () => {
+        beforeEach(() => {
+            mockViewId = 'board';
+        });
+
+        it('should not show duplicate cards in kanban view', async () => {
+            render(
+                <SchemaRendererProvider dataSource={mockDataSource}>
+                    <ObjectView dataSource={mockDataSource} objects={mockObjects} onEdit={vi.fn()} />
+                </SchemaRendererProvider>
+            );
+
+            // Wait for kanban cards to render
+            await waitFor(() => {
+                expect(screen.getByText('Set up CI/CD pipeline')).toBeInTheDocument();
+            }, { timeout: 5000 });
+
+            // Each card should appear exactly ONCE (no duplicates)
+            expect(screen.getAllByText('Set up CI/CD pipeline')).toHaveLength(1);
+            expect(screen.getAllByText('Design dashboard')).toHaveLength(1);
+            expect(screen.getAllByText('Fix mobile responsive')).toHaveLength(1);
+        });
+    });
+});
diff --git a/packages/plugin-kanban/src/ObjectKanban.tsx b/packages/plugin-kanban/src/ObjectKanban.tsx
@@ -18,6 +18,10 @@ export interface ObjectKanbanProps {
   schema: KanbanSchema;
   dataSource?: DataSource;
   className?: string; // Allow override
+  /** Pre-fetched records passed by a parent (e.g. ListView). When provided, skips internal data fetching. */
+  data?: any[];
+  /** Loading state propagated from a parent. Respected only when `data` is also provided. */
+  loading?: boolean;
   onRowClick?: (record: any) => void;
   onCardClick?: (record: any) => void;
 }
@@ -26,19 +30,32 @@ export const ObjectKanban: React.FC<ObjectKanbanProps> = ({
   schema,
   dataSource,
   className,
+  data: externalData,
+  loading: externalLoading,
   onRowClick,
   onCardClick,
   ...props
 }) => {
+  // When a parent (e.g. ListView) pre-fetches data and passes it via the `data` prop,
+  // we must not trigger a second fetch. Detect external data by checking for an array.
+  const hasExternalData = Array.isArray(externalData);
+
   const [fetchedData, setFetchedData] = useState<any[]>([]);
   const [objectDef, setObjectDef] = useState<any>(null);
   // loading state
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(hasExternalData ? (externalLoading ?? false) : false);
   const [error, setError] = useState<Error | null>(null);
 
   // Resolve bound data if 'bind' property exists
   const boundData = useDataScope(schema.bind);
 
+  // Sync external data changes from parent (e.g. ListView re-fetches after filter change)
+  useEffect(() => {
+    if (hasExternalData && externalLoading !== undefined) {
+      setLoading(externalLoading);
+    }
+  }, [externalLoading, hasExternalData]);
+
   // Fetch object definition for metadata (labels, options)
   useEffect(() => {
     let isMounted = true;
@@ -56,6 +73,9 @@ export const ObjectKanban: React.FC<ObjectKanbanProps> = ({
   }, [schema.objectName, dataSource]);
 
   useEffect(() => {
+    // Skip internal fetch when data is managed by a parent component
+    if (hasExternalData) return;
+
     let isMounted = true;
     const fetchData = async () => {
         if (!dataSource || typeof dataSource.find !== 'function' || !schema.objectName) return;
@@ -72,8 +92,6 @@ export const ObjectKanban: React.FC<ObjectKanbanProps> = ({
             // Handle { value: [] } OData shape or { data: [] } shape or direct array
             const data = extractRecords(results);
 
-            console.log(`[ObjectKanban] Extracted data (length: ${data.length})`);
-
             if (isMounted) {
                 setFetchedData(data);
             }
@@ -86,15 +104,14 @@ export const ObjectKanban: React.FC<ObjectKanbanProps> = ({
     };
 
     // Trigger fetch if we have an objectName AND verify no inline/bound data overrides it
-    // And NO props.data passed from ListView
-    if (schema.objectName && !boundData && !schema.data && !(props as any).data) {
+    if (schema.objectName && !boundData && !schema.data) {
         fetchData();
     }
     return () => { isMounted = false; };
-  }, [schema.objectName, dataSource, boundData, schema.data, schema.filter, (props as any).data, objectDef]);
+  }, [schema.objectName, dataSource, boundData, schema.data, schema.filter, hasExternalData, objectDef]);
 
-  // Determine which data to use: props.data -> bound -> inline -> fetched
-  const rawData = (props as any).data || boundData || schema.data || fetchedData;
+  // Determine which data to use: external -> bound -> inline -> fetched
+  const rawData = (hasExternalData ? externalData : undefined) || boundData || schema.data || fetchedData;
 
   // Enhance data with title mapping and ensure IDs
   const effectiveData = useMemo(() => {
diff --git a/packages/plugin-list/src/__tests__/DataFetch.test.tsx b/packages/plugin-list/src/__tests__/DataFetch.test.tsx
@@ -113,6 +113,35 @@ describe('ListView Data Fetch', () => {
     });
   });
 
+  // =========================================================================
+  // OData { value: [] } response format (duplicate data fix)
+  // =========================================================================
+  describe('OData value response format', () => {
+    it('should extract records from { value: [] } OData response', async () => {
+      const items = [
+        { id: '1', name: 'Alice' },
+        { id: '2', name: 'Bob' },
+      ];
+      mockDataSource.find.mockResolvedValue({ value: items, '@odata.count': 2 });
+
+      const schema: ListViewSchema = {
+        type: 'list-view',
+        objectName: 'contacts',
+        viewType: 'grid',
+        fields: ['name'],
+      };
+
+      renderWithProvider(<ListView schema={schema} dataSource={mockDataSource} />);
+
+      await vi.waitFor(() => {
+        expect(screen.getByTestId('record-count-bar')).toBeInTheDocument();
+      });
+
+      // Records should be extracted and rendered (not empty)
+      expect(screen.queryByTestId('empty-state')).not.toBeInTheDocument();
+    });
+  });
+
   // =========================================================================
   // $expand race condition fix (Issue #939 Bug 1)
   // =========================================================================
