chore: move cell hook into custom cell component

frontend/appflowy_tauri/src/appflowy_app/components/_shared/database-hooks/useCell.ts

@@ -3,12 +3,12 @@ import { CellCache } from '../../../stores/effects/database/cell/cell_cache';
 import { FieldController } from '../../../stores/effects/database/field/field_controller';
 import { CellControllerBuilder } from '../../../stores/effects/database/cell/controller_builder';
 import { DateCellDataPB, SelectOptionCellDataPB, URLCellDataPB } from '../../../../services/backend';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 export const useCell = (cellIdentifier: CellIdentifier, cellCache: CellCache, fieldController: FieldController) => {
   const [data, setData] = useState<DateCellDataPB | URLCellDataPB | SelectOptionCellDataPB | string | undefined>();
 
-  const loadCell = async () => {
+  useEffect(() => {
     const builder = new CellControllerBuilder(cellIdentifier, cellCache, fieldController);
     const cellController = builder.build();
     cellController.subscribeChanged({
@@ -19,10 +19,14 @@ export const useCell = (cellIdentifier: CellIdentifier, cellCache: CellCache, fi
 
     // ignore the return value, because we are using the subscription
     void cellController.getCellData();
+
+    // dispose the cell controller when the component is unmounted
+    return () => {
+      void cellController.dispose();
     };
+  }, []);
 
   return {
-    loadCell,
     data,
   };
 };

frontend/appflowy_tauri/src/appflowy_app/components/board/BoardCell.tsx

@@ -1,9 +1,7 @@
-import { useCell } from '../_shared/database-hooks/useCell';
 import { CellIdentifier } from '../../stores/effects/database/cell/cell_bd_svc';
 import { CellCache } from '../../stores/effects/database/cell/cell_cache';
 import { FieldController } from '../../stores/effects/database/field/field_controller';
-import { useEffect } from 'react';
+import { FieldType } from '../../../services/backend';
-import { DateCellDataPB, FieldType, SelectOptionCellDataPB } from '../../../services/backend';
 import { BoardOptionsCell } from './BoardOptionsCell';
 import { BoardDateCell } from './BoardDateCell';
 import { BoardTextCell } from './BoardTextCell';
@@ -17,23 +15,28 @@ export const BoardCell = ({
   cellCache: CellCache;
   fieldController: FieldController;
 }) => {
-  const { loadCell, data } = useCell(cellIdentifier, cellCache, fieldController);
-  useEffect(() => {
-    void (async () => {
-      await loadCell();
-    })();
-  }, []);
-
   return (
     <>
       {cellIdentifier.fieldType === FieldType.SingleSelect ||
       cellIdentifier.fieldType === FieldType.MultiSelect ||
       cellIdentifier.fieldType === FieldType.Checklist ? (
-        <BoardOptionsCell value={data as SelectOptionCellDataPB | undefined}></BoardOptionsCell>
+        <BoardOptionsCell
+          cellIdentifier={cellIdentifier}
+          cellCache={cellCache}
+          fieldController={fieldController}
+        ></BoardOptionsCell>
       ) : cellIdentifier.fieldType === FieldType.DateTime ? (
-        <BoardDateCell value={data as DateCellDataPB | undefined}></BoardDateCell>
+        <BoardDateCell
+          cellIdentifier={cellIdentifier}
+          cellCache={cellCache}
+          fieldController={fieldController}
+        ></BoardDateCell>
       ) : (
-        <BoardTextCell value={data as string | undefined}></BoardTextCell>
+        <BoardTextCell
+          cellIdentifier={cellIdentifier}
+          cellCache={cellCache}
+          fieldController={fieldController}
+        ></BoardTextCell>
       )}
     </>
   );

frontend/appflowy_tauri/src/appflowy_app/components/board/BoardDateCell.tsx

@@ -1,5 +1,18 @@
 import { DateCellDataPB } from '../../../services/backend';
+import { useCell } from '../_shared/database-hooks/useCell';
+import { CellIdentifier } from '../../stores/effects/database/cell/cell_bd_svc';
+import { CellCache } from '../../stores/effects/database/cell/cell_cache';
+import { FieldController } from '../../stores/effects/database/field/field_controller';
 
-export const BoardDateCell = ({ value }: { value: DateCellDataPB | undefined }) => {
+export const BoardDateCell = ({
-  return <div>{value?.date || ''}</div>;
+  cellIdentifier,
+  cellCache,
+  fieldController,
+}: {
+  cellIdentifier: CellIdentifier;
+  cellCache: CellCache;
+  fieldController: FieldController;
+}) => {
+  const { data } = useCell(cellIdentifier, cellCache, fieldController);
+  return <div>{(data as DateCellDataPB | undefined)?.date || ''}</div>;
 };

frontend/appflowy_tauri/src/appflowy_app/components/board/BoardOptionsCell.tsx

@@ -1,5 +1,25 @@
-import { SelectOptionCellDataPB, SelectOptionColorPB } from '../../../services/backend';
+import { SelectOptionCellDataPB } from '../../../services/backend';
+import { useCell } from '../_shared/database-hooks/useCell';
+import { CellIdentifier } from '../../stores/effects/database/cell/cell_bd_svc';
+import { CellCache } from '../../stores/effects/database/cell/cell_cache';
+import { FieldController } from '../../stores/effects/database/field/field_controller';
 
-export const BoardOptionsCell = ({ value }: { value: SelectOptionCellDataPB | undefined }) => {
+export const BoardOptionsCell = ({
-  return <>{value?.select_options?.map((option, index) => <div key={index}>{option?.name || ''}</div>) || ''}</>;
+  cellIdentifier,
+  cellCache,
+  fieldController,
+}: {
+  cellIdentifier: CellIdentifier;
+  cellCache: CellCache;
+  fieldController: FieldController;
+}) => {
+  const { data } = useCell(cellIdentifier, cellCache, fieldController);
+
+  return (
+    <>
+      {(data as SelectOptionCellDataPB | undefined)?.select_options?.map((option, index) => (
+        <div key={index}>{option?.name || ''}</div>
+      )) || ''}
+    </>
+  );
 };

frontend/appflowy_tauri/src/appflowy_app/components/board/BoardTextCell.tsx

@@ -1,3 +1,18 @@
-export const BoardTextCell = ({ value }: { value: string | undefined }) => {
+import { CellIdentifier } from '../../stores/effects/database/cell/cell_bd_svc';
-  return <div>{value || ''}</div>;
+import { CellCache } from '../../stores/effects/database/cell/cell_cache';
+import { FieldController } from '../../stores/effects/database/field/field_controller';
+import { useCell } from '../_shared/database-hooks/useCell';
+
+export const BoardTextCell = ({
+  cellIdentifier,
+  cellCache,
+  fieldController,
+}: {
+  cellIdentifier: CellIdentifier;
+  cellCache: CellCache;
+  fieldController: FieldController;
+}) => {
+  const { data } = useCell(cellIdentifier, cellCache, fieldController);
+
+  return <div>{(data as string | undefined) || ''}</div>;
 };