Merge pull request #1097 from objectstack-ai/copilot/fix-calendar-duplicate-events

Author: hotlong

packages/plugin-calendar/src/ObjectCalendar.tsx

@@ -47,6 +47,10 @@ export interface ObjectCalendarProps {
   schema: ObjectGridSchema | CalendarSchema;
   dataSource?: DataSource;
   className?: string;
+  /** Pre-fetched records passed by a parent (e.g. ObjectView). When provided, skips internal data fetching. */
+  data?: any[];
+  /** Loading state propagated from a parent. Respected only when `data` is also provided. */
+  loading?: boolean;
   onEventClick?: (record: any) => void;
   onRowClick?: (record: any) => void;
   onDateClick?: (date: Date) => void;
@@ -142,6 +146,8 @@ export const ObjectCalendar: React.FC<ObjectCalendarProps> = ({
   schema,
   dataSource,
   className,
+  data: externalData,
+  loading: externalLoading,
   onEventClick,
   onRowClick,
   onDateClick,
@@ -151,8 +157,12 @@ export const ObjectCalendar: React.FC<ObjectCalendarProps> = ({
   locale,
   ...rest
 }) => {
-  const [data, setData] = useState<any[]>([]);
-  const [loading, setLoading] = useState(true);
+  // When the parent (e.g. ObjectView) 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 [data, setData] = useState<any[]>(hasExternalData ? externalData! : []);
+  const [loading, setLoading] = useState(hasExternalData ? (externalLoading ?? false) : true);
   const [error, setError] = useState<Error | null>(null);
   const [objectSchema, setObjectSchema] = useState<any>(null);
   const [currentDate, setCurrentDate] = useState(new Date());
@@ -187,8 +197,24 @@ export const ObjectCalendar: React.FC<ObjectCalendarProps> = ({
   const objectSchemaRef = useRef<any>(null);
   objectSchemaRef.current = objectSchema;
 
+  // Sync external data/loading changes from parent (e.g. ObjectView re-fetches after filter change)
+  useEffect(() => {
+    if (hasExternalData) {
+      setData(externalData!);
+    }
+  }, [externalData, hasExternalData]);
+
+  useEffect(() => {
+    if (hasExternalData && externalLoading !== undefined) {
+      setLoading(externalLoading);
+    }
+  }, [externalLoading, hasExternalData]);
+
   // Fetch data based on provider
   useEffect(() => {
+    // Skip internal fetch when data is managed by a parent component
+    if (hasExternalData) return;
+
     let isMounted = true;
     const fetchData = async () => {
       try {
@@ -203,16 +229,6 @@ export const ObjectCalendar: React.FC<ObjectCalendarProps> = ({
           return;
         }
 
-        // Prioritize data passed from parent (ListView)
-        if ((schema as any).data || (rest as any).data) {
-            const passedData = (schema as any).data || (rest as any).data;
-            if (Array.isArray(passedData)) {
-                setData(passedData);
-                setLoading(false);
-                return;
-            }
-        }
-
         if (!dataSource || typeof dataSource.find !== 'function') {
           throw new Error('DataSource required for object/api providers');
         }
@@ -249,7 +265,7 @@ export const ObjectCalendar: React.FC<ObjectCalendarProps> = ({
 
     fetchData();
     return () => { isMounted = false; };
-  }, [dataConfig, dataSource, hasInlineData, schema.filter, schema.sort, refreshKey]);
+  }, [hasExternalData, dataConfig, dataSource, hasInlineData, schema.filter, schema.sort, refreshKey]);
 
   // Fetch object schema for field metadata
   useEffect(() => {

packages/plugin-calendar/src/index.tsx

@@ -24,7 +24,7 @@ export type { CalendarViewProps, CalendarEvent } from './CalendarView';
 import './calendar-view-renderer';
 
 // Register object-calendar component
-export const ObjectCalendarRenderer: React.FC<{ schema: any; [key: string]: any }> = ({ schema, data: _data, loading: _loading, ...props }) => {
+export const ObjectCalendarRenderer: React.FC<{ schema: any; [key: string]: any }> = ({ schema, ...props }) => {
   const { dataSource } = useSchemaContext() || {};
   return <ObjectCalendar schema={schema} dataSource={dataSource} {...props} />;
 };

packages/plugin-calendar/src/registration.test.tsx

@@ -10,9 +10,11 @@ vi.mock('@object-ui/react', () => ({
 
 // Mock the implementation
 vi.mock('./ObjectCalendar', () => ({
-  ObjectCalendar: ({ dataSource }: any) => (
+  ObjectCalendar: ({ dataSource, data, loading }: any) => (
     <div data-testid="calendar-mock">
         {dataSource ? `DataSource: ${dataSource.type}` : 'No DataSource'}
+        {data !== undefined ? ` Data: ${JSON.stringify(data)}` : ''}
+        {loading !== undefined ? ` Loading: ${loading}` : ''}
     </div>
   )
 }));
@@ -22,4 +24,18 @@ describe('Plugin Calendar Registration', () => {
     render(<ObjectCalendarRenderer schema={{ type: 'object-calendar' }} />);
     expect(screen.getByTestId('calendar-mock')).toHaveTextContent('DataSource: mock-datasource');
   });
+
+  it('renderer passes data and loading props through to ObjectCalendar (no double-fetch)', () => {
+    const preloadedData = [{ id: 1, name: 'Event A' }];
+    render(
+      <ObjectCalendarRenderer
+        schema={{ type: 'object-calendar' }}
+        data={preloadedData}
+        loading={false}
+      />
+    );
+    const el = screen.getByTestId('calendar-mock');
+    expect(el).toHaveTextContent('Data: [{"id":1,"name":"Event A"}]');
+    expect(el).toHaveTextContent('Loading: false');
+  });
 });

packages/plugin-view/src/ObjectView.tsx

@@ -22,7 +22,7 @@
  * - ViewSwitcher for toggling between view types
  */
 
-import React, { useEffect, useState, useCallback, useMemo } from 'react';
+import React, { useEffect, useState, useCallback, useMemo, useRef } from 'react';
 import type {
   ObjectViewSchema,
   ObjectGridSchema,
@@ -219,6 +219,11 @@ export const ObjectView: React.FC<ObjectViewProps> = ({
   onViewAction,
 }) => {
   const [objectSchema, setObjectSchema] = useState<Record<string, unknown> | null>(null);
+  // Assigned in the render body (not in an effect) so the fetchData effect always
+  // reads the latest objectSchema without needing it as a dependency. This matches
+  // the same pattern used in ObjectCalendar's objectSchemaRef.
+  const objectSchemaRef = useRef<Record<string, unknown> | null>(null);
+  objectSchemaRef.current = objectSchema;
   const [isFormOpen, setIsFormOpen] = useState(false);
   const [formMode, setFormMode] = useState<FormMode>('create');
   const [selectedRecord, setSelectedRecord] = useState<Record<string, unknown> | null>(null);
@@ -322,8 +327,11 @@ export const ObjectView: React.FC<ObjectViewProps> = ({
           ? sortConfig.map(s => ({ field: s.field, order: s.direction }))
           : (currentNamedViewConfig?.sort || activeView?.sort || schema.table?.defaultSort || undefined);
 
-        // Auto-inject $expand for lookup/master_detail fields
-        const expand = buildExpandFields((objectSchema as any)?.fields);
+        // Auto-inject $expand for lookup/master_detail fields.
+        // Use a ref instead of the state variable to avoid re-running this effect
+        // every time the object schema loads — that would cause a double-fetch and
+        // duplicate events in child views like the calendar.
+        const expand = buildExpandFields((objectSchemaRef.current as any)?.fields);
         const results = await dataSource.find(schema.objectName, {
           $filter: finalFilter.length > 0 ? finalFilter : undefined,
           $orderby: sort,
@@ -339,6 +347,8 @@ export const ObjectView: React.FC<ObjectViewProps> = ({
             items = (results as any).data;
           } else if (Array.isArray((results as any).records)) {
             items = (results as any).records;
+          } else if (Array.isArray((results as any).value)) {
+            items = (results as any).value;
           }
         }
 
@@ -352,8 +362,9 @@ export const ObjectView: React.FC<ObjectViewProps> = ({
 
     fetchData();
     return () => { isMounted = false; };
+    // objectSchema intentionally omitted from deps — read via ref to prevent double-fetch
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [schema.objectName, dataSource, currentViewType, filterValues, sortConfig, refreshKey, currentNamedViewConfig, activeView, renderListView, objectSchema]);
+  }, [schema.objectName, dataSource, currentViewType, filterValues, sortConfig, refreshKey, currentNamedViewConfig, activeView, renderListView]);
 
   // Determine layout mode
   const layout = schema.layout || 'drawer';