fix: kanban board rendering

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

@@ -12,14 +12,13 @@ export const useCell = (cellIdentifier: CellIdentifier, cellCache: CellCache, fi
     if (!cellIdentifier || !cellCache || !fieldController) return;
     const builder = new CellControllerBuilder(cellIdentifier, cellCache, fieldController);
     const cellController = builder.build();
-    cellController.subscribeChanged({
-      onCellChanged: (value) => {
-        setData(value.unwrap());
-      },
-    });
 
-    // ignore the return value, because we are using the subscription
-    void cellController.getCellData();
+    void (async () => {
+      const cellData = await cellController.getCellData();
+      if (cellData.some) {
+        setData(cellData.unwrap());
+      }
+    })();
 
     return () => {
       void cellController.dispose();

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

@@ -5,9 +5,18 @@ import { NewBoardBlock } from './NewBoardBlock';
 import { useDatabase } from '../_shared/database-hooks/useDatabase';
 import { ViewLayoutTypePB } from '@/services/backend';
 import { DragDropContext } from 'react-beautiful-dnd';
+import { useState } from 'react';
+import { RowInfo } from '$app/stores/effects/database/row/row_cache';
 
 export const Board = ({ viewId }: { viewId: string }) => {
   const { controller, rows, groups, onNewRowClick, onDragEnd } = useDatabase(viewId, ViewLayoutTypePB.Board);
+  const [showBoardRow, setShowBoardRow] = useState(false);
+  const [boardRowInfo, setBoardRowInfo] = useState<RowInfo>();
+
+  const onOpenRow = (rowInfo: RowInfo) => {
+    setBoardRowInfo(rowInfo);
+    setShowBoardRow(true);
+  };
 
   return (
     <>
@@ -30,20 +39,20 @@ export const Board = ({ viewId }: { viewId: string }) => {
               groups &&
               groups.map((group, index) => (
                 <BoardBlock
-                  groupId={group.groupId}
                   key={index}
                   viewId={viewId}
                   controller={controller}
-                  rows={group.rows}
-                  title={group.name}
+                  group={group}
                   allRows={rows}
                   onNewRowClick={() => onNewRowClick(index)}
+                  onOpenRow={onOpenRow}
                 />
               ))}
             <NewBoardBlock onClick={() => console.log('new block')}></NewBoardBlock>
           </div>
         </div>
       </DragDropContext>
+
     </>
   );
 };

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

@@ -3,31 +3,29 @@ import AddSvg from '../_shared/svg/AddSvg';
 import { BoardCard } from './BoardCard';
 import { RowInfo } from '../../stores/effects/database/row/row_cache';
 import { DatabaseController } from '../../stores/effects/database/database_controller';
-import { RowPB } from '@/services/backend';
 import { Droppable } from 'react-beautiful-dnd';
+import { DatabaseGroupController } from '$app/stores/effects/database/group/group_controller';
 
 export const BoardBlock = ({
-  groupId,
   viewId,
   controller,
-  title,
-  rows,
   allRows,
   onNewRowClick,
+  onOpenRow,
+  group,
 }: {
-  groupId: string;
   viewId: string;
   controller: DatabaseController;
-  title: string;
-  rows: RowPB[];
   allRows: readonly RowInfo[];
   onNewRowClick: () => void;
+  onOpenRow: (rowId: RowInfo) => void;
+  group: DatabaseGroupController;
 }) => {
   return (
     <div className={'flex h-full w-[250px] flex-col rounded-lg bg-surface-1'}>
       <div className={'flex items-center justify-between p-4'}>
         <div className={'flex items-center gap-2'}>
-          <span>{title}</span>
+          <span>{group.name}</span>
           <span className={'text-shade-4'}>()</span>
         </div>
         <div className={'flex items-center gap-2'}>
@@ -39,17 +37,24 @@ export const BoardBlock = ({
           </button>
         </div>
       </div>
-      <Droppable droppableId={groupId}>
+      <Droppable droppableId={group.groupId}>
         {(provided) => (
           <div
             className={'flex flex-1 flex-col gap-1 overflow-auto px-2'}
             {...provided.droppableProps}
             ref={provided.innerRef}
           >
-            {rows.map((row_pb, index) => {
+            {group.rows.map((row_pb, index) => {
               const row = allRows.find((r) => r.row.id === row_pb.id);
               return row ? (
-                <BoardCard viewId={viewId} controller={controller} index={index} key={index} rowInfo={row}></BoardCard>
+                <BoardCard
+                  viewId={viewId}
+                  controller={controller}
+                  index={index}
+                  key={index}
+                  rowInfo={row}
+                  onOpenRow={onOpenRow}
+                ></BoardCard>
               ) : (
                 <span key={index}></span>
               );

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

@@ -10,11 +10,13 @@ export const BoardCard = ({
   viewId,
   controller,
   rowInfo,
+  onOpenRow,
 }: {
   index: number;
   viewId: string;
   controller: DatabaseController;
   rowInfo: RowInfo;
+  onOpenRow: (rowId: RowInfo) => void;
 }) => {
   const { cells } = useRow(viewId, controller, rowInfo);
 
@@ -25,7 +27,7 @@ export const BoardCard = ({
           ref={provided.innerRef}
           {...provided.draggableProps}
           {...provided.dragHandleProps}
-          onClick={() => console.log('on click')}
+          onClick={() => onOpenRow(rowInfo)}
           className={`relative cursor-pointer select-none rounded-lg border border-shade-6 bg-white px-3 py-2 transition-transform duration-100 hover:bg-main-selector `}
         >
           <button className={'absolute right-4 top-2.5 h-5 w-5 rounded hover:bg-surface-2'}>