From b05c2024e721877a90d531829440a30fa35a87ae Mon Sep 17 00:00:00 2001
From: Kilu <lu@appflowy.io>
Date: Tue, 16 Jul 2024 14:28:42 +0800
Subject: [PATCH] fix: relation

---
 .../application/services/js-services/index.ts   |  4 +---
 .../components/cell/relation/RelationItems.tsx  | 17 ++++++++++++++---
 .../cell/relation/RelationPrimaryValue.tsx      |  4 ++--
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/frontend/appflowy_web_app/src/application/services/js-services/index.ts b/frontend/appflowy_web_app/src/application/services/js-services/index.ts
index 918541d729b0e..7b409a8bf75b5 100644
--- a/frontend/appflowy_web_app/src/application/services/js-services/index.ts
+++ b/frontend/appflowy_web_app/src/application/services/js-services/index.ts
@@ -101,9 +101,7 @@ export class AFClientService implements AFService {
       this.publishViewLoaded.add(name);
     }
 
-    if (!this.cacheDatabaseRowDocMap.has(name)) {
-      this.cacheDatabaseRowDocMap.set(name, rowMapDoc);
-    }
+    this.cacheDatabaseRowDocMap.set(name, rowMapDoc);
 
     return doc;
   }
diff --git a/frontend/appflowy_web_app/src/components/database/components/cell/relation/RelationItems.tsx b/frontend/appflowy_web_app/src/components/database/components/cell/relation/RelationItems.tsx
index 66d36b4691d0f..27ed5592ba3e8 100644
--- a/frontend/appflowy_web_app/src/components/database/components/cell/relation/RelationItems.tsx
+++ b/frontend/appflowy_web_app/src/components/database/components/cell/relation/RelationItems.tsx
@@ -9,7 +9,8 @@ import {
 import { RelationCell, RelationCellData } from '@/application/database-yjs/cell.type';
 import { ViewMeta } from '@/application/db/tables/view_metas';
 import { RelationPrimaryValue } from '@/components/database/components/cell/relation/RelationPrimaryValue';
-import React, { useCallback, useContext, useEffect, useState } from 'react';
+import { debounce } from 'lodash-es';
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 
 function RelationItems({ style, cell, fieldId }: { cell: RelationCell; fieldId: string; style?: React.CSSProperties }) {
   const viewId = useContext(DatabaseContext)?.iidIndex;
@@ -59,12 +60,20 @@ function RelationItems({ style, cell, fieldId }: { cell: RelationCell; fieldId:
         const { rows } = await getViewRowsMap(relatedViewId);
 
         setRows(rows);
-        handleUpdateRowIds(rows);
       } catch (e) {
         console.error(e);
       }
     })();
-  }, [getViewRowsMap, relatedViewId, relatedFieldId, handleUpdateRowIds]);
+  });
+
+  const debounceUpdateRowIds = useMemo(() => {
+    return debounce(handleUpdateRowIds, 500);
+  }, [handleUpdateRowIds]);
+
+  useEffect(() => {
+    if (!rows) return;
+    debounceUpdateRowIds(rows);
+  }, [rows, debounceUpdateRowIds]);
 
   useEffect(() => {
     const observerHandler = () => (rows ? handleUpdateRowIds(rows) : setRowIds([]));
@@ -80,6 +89,8 @@ function RelationItems({ style, cell, fieldId }: { cell: RelationCell; fieldId:
       try {
         const viewDoc = await loadView?.(relatedViewId);
 
+        console.log('View not loaded, fetching view', relatedViewId);
+
         if (!viewDoc) {
           throw new Error('No access');
         }
diff --git a/frontend/appflowy_web_app/src/components/database/components/cell/relation/RelationPrimaryValue.tsx b/frontend/appflowy_web_app/src/components/database/components/cell/relation/RelationPrimaryValue.tsx
index cb10266e23d00..d01e54f76a7f9 100644
--- a/frontend/appflowy_web_app/src/components/database/components/cell/relation/RelationPrimaryValue.tsx
+++ b/frontend/appflowy_web_app/src/components/database/components/cell/relation/RelationPrimaryValue.tsx
@@ -15,9 +15,9 @@ export function RelationPrimaryValue({ rowDoc, fieldId }: { rowDoc: YDoc; fieldI
     };
 
     onRowChange();
-    data?.observe(onRowChange);
+    data?.observeDeep(onRowChange);
     return () => {
-      data?.unobserve(onRowChange);
+      data?.unobserveDeep(onRowChange);
     };
   }, [rowDoc]);