From c8569d3c62e6bba63555d9ef814529ea9015221c Mon Sep 17 00:00:00 2001
From: ascarbek <ascarbek@gmail.com>
Date: Mon, 6 Mar 2023 17:47:37 +0600
Subject: [PATCH] chore: move cell hook into custom cell component

---
 .../_shared/database-hooks/useCell.ts         | 12 +++++---
 .../components/board/BoardCell.tsx            | 29 ++++++++++---------
 .../components/board/BoardDateCell.tsx        | 17 +++++++++--
 .../components/board/BoardOptionsCell.tsx     | 26 +++++++++++++++--
 .../components/board/BoardTextCell.tsx        | 19 ++++++++++--
 5 files changed, 79 insertions(+), 24 deletions(-)

diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/database-hooks/useCell.ts b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/database-hooks/useCell.ts
index f8abcb8734..57082f6f70 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/database-hooks/useCell.ts
+++ b/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,
   };
 };
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/board/BoardCell.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/board/BoardCell.tsx
index adb72ddec4..496fc30af7 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/board/BoardCell.tsx
+++ b/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 { DateCellDataPB, FieldType, SelectOptionCellDataPB } from '../../../services/backend';
+import { FieldType } 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>
       )}
     </>
   );
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/board/BoardDateCell.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/board/BoardDateCell.tsx
index 8a9df089ba..5047a8470a 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/board/BoardDateCell.tsx
+++ b/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 }) => {
-  return <div>{value?.date || ''}</div>;
+export const BoardDateCell = ({
+  cellIdentifier,
+  cellCache,
+  fieldController,
+}: {
+  cellIdentifier: CellIdentifier;
+  cellCache: CellCache;
+  fieldController: FieldController;
+}) => {
+  const { data } = useCell(cellIdentifier, cellCache, fieldController);
+  return <div>{(data as DateCellDataPB | undefined)?.date || ''}</div>;
 };
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/board/BoardOptionsCell.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/board/BoardOptionsCell.tsx
index 2c3e29a416..6c9b3d046d 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/board/BoardOptionsCell.tsx
+++ b/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 }) => {
-  return <>{value?.select_options?.map((option, index) => <div key={index}>{option?.name || ''}</div>) || ''}</>;
+export const BoardOptionsCell = ({
+  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>
+      )) || ''}
+    </>
+  );
 };
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/board/BoardTextCell.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/board/BoardTextCell.tsx
index 1cc6efb2fa..def0f1cd3a 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/board/BoardTextCell.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/board/BoardTextCell.tsx
@@ -1,3 +1,18 @@
-export const BoardTextCell = ({ value }: { value: string | undefined }) => {
-  return <div>{value || ''}</div>;
+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 { 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>;
 };