@object-ui/plugin-view 3.1.2 → 3.1.4

package/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,
@@ -57,20 +57,13 @@ import {
 } from '@object-ui/components';
 import { Plus } from 'lucide-react';
 import { buildExpandFields } from '@object-ui/core';
+import { SchemaRenderer as ImportedSchemaRenderer } from '@object-ui/react';
 import { ViewSwitcher } from './ViewSwitcher';
 
 /**
- * Attempt to import SchemaRenderer from @object-ui/react.
- * Falls back to null if not available.
+ * SchemaRenderer from @object-ui/react, used to render sub-view schemas.
  */
-let SchemaRendererComponent: React.FC<any> | null = null;
-try {
-  // eslint-disable-next-line @typescript-eslint/no-require-imports
-  const mod = require('@object-ui/react');
-  SchemaRendererComponent = mod.SchemaRenderer || null;
-} catch {
-  // @object-ui/react not available
-}
+const SchemaRendererComponent: React.FC<any> = ImportedSchemaRenderer;
 
 export interface ObjectViewProps {
   /**
@@ -219,6 +212,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);
@@ -294,8 +292,12 @@ export const ObjectView: React.FC<ObjectViewProps> = ({
     let isMounted = true;
 
     const fetchData = async () => {
+      // When renderListView is provided, the custom list view (e.g. ListView)
+      // handles its own data fetching — skip to avoid duplicate requests and
+      // unnecessary re-renders that can cause duplicate records in child views.
+      if (renderListView) return;
       // Only fetch for non-grid views (ObjectGrid has its own data fetching)
-      if (currentViewType === 'grid' && !renderListView) return;
+      if (currentViewType === 'grid') return;
       if (!dataSource || !schema.objectName) return;
 
       setLoading(true);
@@ -322,8 +324,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 +344,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 +359,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';
@@ -384,7 +392,7 @@ export const ObjectView: React.FC<ObjectViewProps> = ({
       return;
     }
     if (layout === 'page' && schema.onNavigate) {
-      const recordId = record._id || record.id;
+      const recordId = record.id || record._id;
       schema.onNavigate(recordId as string | number, 'edit');
     } else {
       setFormMode('edit');
@@ -396,7 +404,7 @@ export const ObjectView: React.FC<ObjectViewProps> = ({
   // Handle view action (read a record)
   const handleView = useCallback((record: Record<string, unknown>) => {
     if (layout === 'page' && schema.onNavigate) {
-      const recordId = record._id || record.id;
+      const recordId = record.id || record._id;
       schema.onNavigate(recordId as string | number, 'view');
     } else {
       setFormMode('view');
@@ -418,7 +426,7 @@ export const ObjectView: React.FC<ObjectViewProps> = ({
         return; // Do nothing
       }
       if (navigationConfig.mode === 'new_window' || navigationConfig.openNewTab) {
-        const recordId = record._id || record.id;
+        const recordId = record.id || record._id;
         const url = `/${schema.objectName}/${encodeURIComponent(String(recordId))}`;
         window.open(url, '_blank');
         return;
@@ -436,7 +444,7 @@ export const ObjectView: React.FC<ObjectViewProps> = ({
         return;
       }
       if (navigationConfig.mode === 'page') {
-        const recordId = record._id || record.id;
+        const recordId = record.id || record._id;
         if (schema.onNavigate) {
           schema.onNavigate(recordId as string | number, 'view');
         }
@@ -727,7 +735,7 @@ export const ObjectView: React.FC<ObjectViewProps> = ({
   // Build form schema
   const buildFormSchema = (): ObjectFormSchema => {
     const recordId = selectedRecord
-      ? ((selectedRecord._id || selectedRecord.id) as string | number | undefined)
+      ? ((selectedRecord.id || selectedRecord._id) as string | number | undefined)
       : undefined;
 
     return {

package/src/__tests__/ObjectView.test.tsx

@@ -25,7 +25,7 @@ vi.mock('@object-ui/react', () => ({
 vi.mock('@object-ui/plugin-grid', () => ({
   ObjectGrid: ({ schema, onRowClick }: any) => (
     <div data-testid="object-grid" data-object={schema?.objectName}>
-      <button data-testid="grid-row" onClick={() => onRowClick?.({ _id: '1', name: 'Test' })}>
+      <button data-testid="grid-row" onClick={() => onRowClick?.({ id: '1', name: 'Test' })}>
         Row 1
       </button>
     </div>

package/src/__tests__/config-sync-integration.test.tsx

@@ -32,7 +32,7 @@ vi.mock('@object-ui/react', () => ({
 vi.mock('@object-ui/plugin-grid', () => ({
   ObjectGrid: ({ schema, onRowClick }: any) => (
     <div data-testid="object-grid" data-object={schema?.objectName}>
-      <button data-testid="grid-row" onClick={() => onRowClick?.({ _id: '1', name: 'Test' })}>
+      <button data-testid="grid-row" onClick={() => onRowClick?.({ id: '1', name: 'Test' })}>
         Row 1
       </button>
     </div>

package/src/index.tsx

@@ -8,6 +8,7 @@
 
 import React, { useContext } from 'react';
 import { ComponentRegistry } from '@object-ui/core';
+import { SchemaRendererContext as ImportedSchemaRendererContext } from '@object-ui/react';
 import { ObjectView } from './ObjectView';
 import { ViewSwitcher } from './ViewSwitcher';
 import { FilterUI } from './FilterUI';
@@ -25,22 +26,9 @@ export type { SharedViewLinkProps } from './SharedViewLink';
 
 /**
  * SchemaRendererContext is created by @object-ui/react.
- * We import it dynamically to avoid a circular dependency.
  * The context value provides { dataSource }.
- * A fallback context is created so hooks are never called conditionally.
  */
-const FallbackContext = React.createContext<any>(null);
-let SchemaRendererContext: React.Context<any> = FallbackContext;
-try {
-  // eslint-disable-next-line @typescript-eslint/no-require-imports
-  const mod = require('@object-ui/react');
-  // The context is re-exported from @object-ui/react
-  if (mod.SchemaRendererContext) {
-    SchemaRendererContext = mod.SchemaRendererContext;
-  }
-} catch {
-  // @object-ui/react not available — registry-based dataSource only
-}
+const SchemaRendererContext: React.Context<any> = ImportedSchemaRendererContext;
 
 // Register object-view component
 const ObjectViewRenderer: React.FC<{ schema: any }> = ({ schema }) => {