chore: dnd reordering

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

@@ -4,7 +4,7 @@ import { BoardBlock } from './BoardBlock';
 import { NewBoardBlock } from './NewBoardBlock';
 import { useDatabase } from '../_shared/database-hooks/useDatabase';
 import { ViewLayoutTypePB } from '@/services/backend';
-import { DragDropContext, Droppable } from 'react-beautiful-dnd';
+import { DragDropContext } from 'react-beautiful-dnd';
 
 export const Board = ({ viewId }: { viewId: string }) => {
   const { controller, rows, groups, onNewRowClick, onDragEnd } = useDatabase(viewId, ViewLayoutTypePB.Board);
@@ -29,10 +29,8 @@ export const Board = ({ viewId }: { viewId: string }) => {
             {controller &&
               groups &&
               groups.map((group, index) => (
-                <Droppable droppableId={group.groupId} key={index}>
-                  {(provided, snapshot) => (
-                    <div className={'h-full'} {...provided.droppableProps} ref={provided.innerRef}>
                 <BoardBlock
+                  groupId={group.groupId}
                   key={index}
                   viewId={viewId}
                   controller={controller}
@@ -41,9 +39,6 @@ export const Board = ({ viewId }: { viewId: string }) => {
                   allRows={rows}
                   onNewRowClick={() => onNewRowClick(index)}
                 />
-                    </div>
-                  )}
-                </Droppable>
               ))}
             <NewBoardBlock onClick={() => console.log('new block')}></NewBoardBlock>
           </div>

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

@@ -4,9 +4,10 @@ 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 { Draggable } from 'react-beautiful-dnd';
+import { Droppable } from 'react-beautiful-dnd';
 
 export const BoardBlock = ({
+  groupId,
   viewId,
   controller,
   title,
@@ -14,6 +15,7 @@ export const BoardBlock = ({
   allRows,
   onNewRowClick,
 }: {
+  groupId: string;
   viewId: string;
   controller: DatabaseController;
   title: string;
@@ -37,22 +39,24 @@ export const BoardBlock = ({
           </button>
         </div>
       </div>
-      <div className={'flex flex-1 flex-col gap-1 overflow-auto px-2'}>
+      <Droppable droppableId={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) => {
               const row = allRows.find((r) => r.row.id === row_pb.id);
               return row ? (
-            <Draggable draggableId={row_pb.id} index={index} key={index}>
+                <BoardCard viewId={viewId} controller={controller} index={index} key={index} rowInfo={row}></BoardCard>
-              {(provided, snapshot) => (
-                <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
-                  <BoardCard viewId={viewId} controller={controller} key={index} rowInfo={row}></BoardCard>
-                </div>
-              )}
-            </Draggable>
               ) : (
                 <span key={index}></span>
               );
             })}
           </div>
+        )}
+      </Droppable>
       <div className={'p-2'}>
         <button
           onClick={onNewRowClick}

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

@@ -3,12 +3,15 @@ import { RowInfo } from '../../stores/effects/database/row/row_cache';
 import { useRow } from '../_shared/database-hooks/useRow';
 import { DatabaseController } from '../../stores/effects/database/database_controller';
 import { BoardCell } from './BoardCell';
+import { Draggable } from 'react-beautiful-dnd';
 
 export const BoardCard = ({
+  index,
   viewId,
   controller,
   rowInfo,
 }: {
+  index: number;
   viewId: string;
   controller: DatabaseController;
   rowInfo: RowInfo;
@@ -16,7 +19,12 @@ export const BoardCard = ({
   const { cells } = useRow(viewId, controller, rowInfo);
 
   return (
+    <Draggable draggableId={rowInfo.row.id} index={index}>
+      {(provided) => (
         <div
+          ref={provided.innerRef}
+          {...provided.draggableProps}
+          {...provided.dragHandleProps}
           onClick={() => console.log('on click')}
           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 `}
         >
@@ -24,9 +32,9 @@ export const BoardCard = ({
             <Details2Svg></Details2Svg>
           </button>
           <div className={'flex flex-col gap-3'}>
-        {cells.map((cell, index) => (
+            {cells.map((cell, cellIndex) => (
               <BoardCell
-            key={index}
+                key={cellIndex}
                 cellIdentifier={cell.cellIdentifier}
                 cellCache={controller.databaseViewCache.getRowCache().getCellCache()}
                 fieldController={controller.fieldController}
@@ -34,5 +42,7 @@ export const BoardCard = ({
             ))}
           </div>
         </div>
+      )}
+    </Draggable>
   );
 };