diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/database-hooks/useDatabase.ts b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/database-hooks/useDatabase.ts index adc75c9b22..b3fc047ed5 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/database-hooks/useDatabase.ts +++ b/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(); + const [rows, setRows] = useState([]); 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 }; }; diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/database-hooks/useRow.ts b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/database-hooks/useRow.ts index 3694d3fb84..659596612d 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/database-hooks/useRow.ts +++ b/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(); - 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, }; }; diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/board/Board.hooks.ts b/frontend/appflowy_tauri/src/appflowy_app/components/board/Board.hooks.ts index c5c2f42d5a..f02a16d34f 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/board/Board.hooks.ts +++ b/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([]); const [movingRowId, setMovingRowId] = useState(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]); diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/board/Board.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/board/Board.tsx index bd20cdbf64..3869138342 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/board/Board.tsx +++ b/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([]); - - useEffect(() => { - if (!controller) return; - - void (async () => { - controller.subscribe({ - onRowsChanged: (rowInfos) => { - setRows(rowInfos); - }, - onFieldsChanged: (fieldInfos) => { - void loadFields(fieldInfos); - }, - }); - await controller.open(); - })(); - }, [controller]); - return ( <>
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/board/BoardBlock.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/board/BoardBlock.tsx index 03373b58f9..29bc1bc2a1 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/board/BoardBlock.tsx +++ b/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 = ({ diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/board/BoardCard.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/board/BoardCard.tsx index 772f23f128..a6afd395fb 100644 --- a/frontend/appflowy_tauri/src/appflowy_app/components/board/BoardCard.tsx +++ b/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(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 = (e) => { setGhostLeft(ghostLeft + e.movementX); setGhostTop(ghostTop + e.movementY);