chore: refactor row hook

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

@@ -9,12 +9,14 @@ import {
 import { useAppDispatch, useAppSelector } from '../../../stores/store';
 import loadField from './loadField';
 import { FieldInfo } from '../../../stores/effects/database/field/field_controller';
+import { RowInfo } from '../../../stores/effects/database/row/row_cache';
 
 export const useDatabase = (viewId: string) => {
   const dispatch = useAppDispatch();
   const databaseStore = useAppSelector((state) => state.database);
   const boardStore = useAppSelector((state) => state.board);
   const [controller, setController] = useState<DatabaseController>();
+  const [rows, setRows] = useState<readonly RowInfo[]>([]);
 
   useEffect(() => {
     if (!viewId.length) return;
@@ -46,5 +48,21 @@ export const useDatabase = (viewId: string) => {
     console.log(fields, columns);
   };
 
-  return { loadFields, controller };
+  useEffect(() => {
+    if (!controller) return;
+
+    void (async () => {
+      controller.subscribe({
+        onRowsChanged: (rowInfos) => {
+          setRows(rowInfos);
+        },
+        onFieldsChanged: (fieldInfos) => {
+          void loadFields(fieldInfos);
+        },
+      });
+      await controller.open();
+    })();
+  }, [controller]);
+
+  return { loadFields, controller, rows };
 };

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

@@ -2,31 +2,42 @@ import { DatabaseController } from '../../../stores/effects/database/database_co
 import { RowController } from '../../../stores/effects/database/row/row_controller';
 import { RowInfo } from '../../../stores/effects/database/row/row_cache';
 import { CellIdentifier } from '../../../stores/effects/database/cell/cell_bd_svc';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 export const useRow = (viewId: string, databaseController: DatabaseController, rowInfo: RowInfo) => {
   const [cells, setCells] = useState<{ fieldId: string; cellIdentifier: CellIdentifier }[]>([]);
+  const [rowController, setRowController] = useState<RowController>();
 
-  const rowCache = databaseController.databaseViewCache.getRowCache();
-  const fieldController = databaseController.fieldController;
-  const rowController = new RowController(rowInfo, fieldController, rowCache);
+  useEffect(() => {
+    const rowCache = databaseController.databaseViewCache.getRowCache();
+    const fieldController = databaseController.fieldController;
+    const c = new RowController(rowInfo, fieldController, rowCache);
+    setRowController(c);
 
-  const loadRow = async () => {
-    const cellsPB = await rowController.loadCells();
-    const loadingCells: { fieldId: string; cellIdentifier: CellIdentifier }[] = [];
+    return () => {
+      // dispose row controller in future
+    };
+  }, []);
 
-    for (const [fieldId, cellIdentifier] of cellsPB.entries()) {
-      loadingCells.push({
-        fieldId,
-        cellIdentifier,
-      });
-    }
+  useEffect(() => {
+    if (!rowController) return;
 
-    setCells(loadingCells);
-  };
+    void (async () => {
+      const cellsPB = await rowController.loadCells();
+      const loadingCells: { fieldId: string; cellIdentifier: CellIdentifier }[] = [];
+
+      for (const [fieldId, cellIdentifier] of cellsPB.entries()) {
+        loadingCells.push({
+          fieldId,
+          cellIdentifier,
+        });
+      }
+
+      setCells(loadingCells);
+    })();
+  }, [rowController]);
 
   return {
-    loadRow: loadRow,
     cells: cells,
   };
 };

frontend/appflowy_tauri/src/appflowy_app/components/board/Board.hooks.ts

@@ -1,15 +1,14 @@
 import { useEffect, useState } from 'react';
 import { useAppDispatch, useAppSelector } from '../../stores/store';
 import { boardActions } from '../../stores/reducers/board/slice';
-import { IDatabase, IDatabaseRow, ISelectOption } from '../../stores/reducers/database/slice';
+import { ISelectOption, ISelectOptionType } from '../../stores/reducers/database/slice';
 
 export const useBoard = () => {
   const dispatch = useAppDispatch();
   const groupingFieldId = useAppSelector((state) => state.board);
   const database = useAppSelector((state) => state.database);
   const [title, setTitle] = useState('');
-  const [boardColumns, setBoardColumns] =
-    useState<(ISelectOption & { rows: (IDatabaseRow & { isGhost: boolean })[] })[]>();
+  const [boardColumns, setBoardColumns] = useState<ISelectOption[]>([]);
   const [movingRowId, setMovingRowId] = useState<string | undefined>(undefined);
   const [ghostLocation, setGhostLocation] = useState<{ column: number; row: number }>({ column: 0, row: 0 });
 
@@ -17,18 +16,7 @@ export const useBoard = () => {
     setTitle(database.title);
     if (database.fields[groupingFieldId]) {
       setBoardColumns(
-        database.fields[groupingFieldId].fieldOptions.selectOptions?.map((groupFieldItem) => {
-        /*  const rows = database.rows
-            .filter((row) => row.cells[groupingFieldId].data?.some((so) => so === groupFieldItem.selectOptionId))
-            .map((row) => ({
-              ...row,
-              isGhost: false,
-            }));*/
-          return {
-            ...groupFieldItem,
-            rows: [],
-          };
-        }) || []
+        (database.fields[groupingFieldId].fieldOptions as ISelectOptionType | undefined)?.selectOptions || []
       );
     }
   }, [database, groupingFieldId]);

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

@@ -4,11 +4,9 @@ import { BoardBlock } from './BoardBlock';
 import { NewBoardBlock } from './NewBoardBlock';
 import { useBoard } from './Board.hooks';
 import { useDatabase } from '../_shared/database-hooks/useDatabase';
-import { useEffect, useState } from 'react';
-import { RowInfo } from '../../stores/effects/database/row/row_cache';
 
 export const Board = ({ viewId }: { viewId: string }) => {
-  const { controller, loadFields } = useDatabase(viewId);
+  const { controller, rows } = useDatabase(viewId);
 
   const {
     title,
@@ -22,24 +20,6 @@ export const Board = ({ viewId }: { viewId: string }) => {
     ghostLocation,
   } = useBoard();
 
-  const [rows, setRows] = useState<readonly RowInfo[]>([]);
-
-  useEffect(() => {
-    if (!controller) return;
-
-    void (async () => {
-      controller.subscribe({
-        onRowsChanged: (rowInfos) => {
-          setRows(rowInfos);
-        },
-        onFieldsChanged: (fieldInfos) => {
-          void loadFields(fieldInfos);
-        },
-      });
-      await controller.open();
-    })();
-  }, [controller]);
-
   return (
     <>
       <div className='flex w-full items-center justify-between'>

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

@@ -1,10 +1,7 @@
 import { Details2Svg } from '../_shared/svg/Details2Svg';
 import AddSvg from '../_shared/svg/AddSvg';
-import { DatabaseFieldMap, IDatabaseColumn, IDatabaseRow } from '../../stores/reducers/database/slice';
 import { BoardCard } from './BoardCard';
 import { RowInfo } from '../../stores/effects/database/row/row_cache';
-import { useEffect } from 'react';
-import { useRow } from '../_shared/database-hooks/useRow';
 import { DatabaseController } from '../../stores/effects/database/database_controller';
 
 export const BoardBlock = ({

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

@@ -28,6 +28,8 @@ export const BoardCard = ({
   startMove: () => void;
   endMove: () => void;
 }) => {
+  const { cells } = useRow(viewId, controller, row);
+
   const databaseStore = useAppSelector((state) => state.database);
   const [isMoving, setIsMoving] = useState(false);
   const [isDown, setIsDown] = useState(false);
@@ -36,6 +38,7 @@ export const BoardCard = ({
   const [ghostLeft, setGhostLeft] = useState(0);
   const [ghostTop, setGhostTop] = useState(0);
   const el = useRef<HTMLDivElement>(null);
+
   useEffect(() => {
     if (el.current?.getBoundingClientRect && isMoving) {
       const { left, top, width, height } = el.current.getBoundingClientRect();
@@ -53,13 +56,6 @@ export const BoardCard = ({
     }
   }, [el, isMoving]);
 
-  const { loadRow, cells } = useRow(viewId, controller, row);
-  useEffect(() => {
-    void (async () => {
-      await loadRow();
-    })();
-  }, []);
-
   const onMouseMove: MouseEventHandler<HTMLDivElement> = (e) => {
     setGhostLeft(ghostLeft + e.movementX);
     setGhostTop(ghostTop + e.movementY);