refactoring

src/pages/CardsPage/contexts/CardPageContext.tsx

@@ -19,9 +19,7 @@ type CardPageContextStateProps = {
 
 const useCardPageContextState = (props: CardPageContextStateProps) => {
     const { refetchCards, defaultCardId } = props;
-    const [selectedCard, setSelectedCard] = useState<CardSchema | undefined>(
-        undefined,
-    );
+    const [selectedCard, setSelectedCard] = useState<CardSchema | undefined>(undefined);
 
     const refetchCard = () => {
         const cardId = selectedCard?.id ?? defaultCardId;

src/pages/CardsPage/contexts/DndContext.tsx

@@ -0,0 +1,91 @@
+import React, { createContext, FC, useContext, useState } from "react";
+import { CardSummary } from "../../../client";
+import DragState from "../enums/DragState.ts";
+import useCardsDnd from "../../../components/Dnd/Cards/CardsDndColumn/hooks/useCardsDnd.tsx";
+import useStatusesDnd from "../../../components/Dnd/Statuses/Statuses/hooks/useStatusesDnd.tsx";
+import { DragStart, DropResult } from "@hello-pangea/dnd";
+import useBoardsDnd from "../../../components/Dnd/Boards/Boards/hooks/useBoardsDnd.tsx";
+
+type DndContextState = {
+    summaries: CardSummary[],
+    dragState: DragState,
+    onDragStart: (start: DragStart) => void,
+    onDragEnd: (result: DropResult) => Promise<void>,
+};
+
+const DndContext = createContext<DndContextState | undefined>(undefined);
+
+type DndContextProps = {
+    summariesRaw: CardSummary[];
+    refetchSummaries: () => void;
+}
+
+const useDndContextState = ({
+                                summariesRaw,
+                                refetchSummaries,
+                            }: DndContextProps) => {
+    const [dragState, setDragState] = useState<DragState>(DragState.DRAG_ENDED);
+
+    const {
+        summaries,
+        onCardDragEnd,
+    } = useCardsDnd({
+        summariesRaw,
+        refetchSummaries,
+    });
+
+    const { onStatusDragEnd } = useStatusesDnd();
+
+    const { onBoardDragEnd } = useBoardsDnd();
+
+    const onDragEnd = async (result: DropResult) => {
+        setDragState(DragState.DRAG_ENDED);
+        if (result.draggableId.includes("status")) {
+            return onStatusDragEnd(result);
+        }
+        if (result.draggableId.includes("board")) {
+            return onBoardDragEnd(result);
+        }
+        return onCardDragEnd(result);
+    };
+
+    const onDragStart = (start: DragStart) => {
+        if (start.source.droppableId.includes("status")) {
+            setDragState(DragState.DRAG_STATUS);
+        } else if (start.source.droppableId.includes("board")) {
+            setDragState(DragState.DRAG_BOARD);
+        } else {
+            setDragState(DragState.DRAG_CARD);
+        }
+    };
+
+    return {
+        summaries,
+        dragState,
+        onDragStart,
+        onDragEnd,
+    };
+};
+
+type DndContextProviderProps = {
+    children: React.ReactNode;
+} & DndContextProps;
+
+export const DndContextProvider: FC<DndContextProviderProps> = ({ children, ...props }) => {
+    const state = useDndContextState(props);
+    return (
+        <DndContext.Provider value={state}>
+            {children}
+        </DndContext.Provider>
+    );
+};
+
+export const useDndContext = () => {
+    const context = useContext(DndContext);
+    if (!context) {
+        throw new Error(
+            "useDndContext must be used within a DndContextProvider",
+        );
+    }
+    return context;
+};

src/pages/CardsPage/enums/DragState.ts

@@ -2,6 +2,7 @@ enum DragState {
     DRAG_ENDED,
     DRAG_CARD,
     DRAG_STATUS,
+    DRAG_BOARD,
 }
 
 export default DragState;

src/pages/CardsPage/hooks/useDnd.tsx

@@ -1,63 +0,0 @@
-import { BoardSchema, CardSummary } from "../../../client";
-import { DragStart, DropResult } from "@hello-pangea/dnd";
-import { useState } from "react";
-import DragState from "../enums/DragState.ts";
-import useCardsDnd from "../../../components/Dnd/Cards/CardsDndColumn/hooks/useCardsDnd.tsx";
-import useStatusesDnd from "../../../components/Dnd/Statuses/Statuses/hooks/useStatusesDnd.tsx";
-
-
-type Props = {
-    selectedBoard: BoardSchema | null;
-    summariesRaw: CardSummary[];
-    refetchSummaries: () => void;
-    refetchBoards: () => void;
-}
-
-const useDnd = ({
-                    selectedBoard,
-                    summariesRaw,
-                    refetchSummaries,
-                    refetchBoards,
-                }: Props) => {
-    const [dragState, setDragState] = useState<DragState>(DragState.DRAG_ENDED);
-
-    const {
-        summaries,
-        onCardDragEnd,
-    } = useCardsDnd({
-        summariesRaw,
-        refetchSummaries,
-    })
-
-    const {
-        onStatusDragEnd,
-    } = useStatusesDnd({
-        board: selectedBoard,
-        refetch: refetchBoards,
-    });
-
-    const onDragEnd = async (result: DropResult) => {
-        setDragState(DragState.DRAG_ENDED);
-        if (result.draggableId.includes("status")) {
-            return onStatusDragEnd(result);
-        }
-        return onCardDragEnd(result);
-    }
-
-    const onDragStart = (start: DragStart) => {
-        if (start.source.droppableId.includes("status")) {
-            setDragState(DragState.DRAG_STATUS);
-        } else {
-            setDragState(DragState.DRAG_CARD);
-        }
-    }
-
-    return {
-        summaries,
-        dragState,
-        onDragStart,
-        onDragEnd,
-    };
-};
-
-export default useDnd;

src/pages/CardsPage/ui/CardsPage.tsx

@@ -13,37 +13,30 @@ import { useParams } from "@tanstack/react-router";
 import { PrefillCardsWithExcelContextProvider } from "../contexts/PrefillDealsWithExcelContext.tsx";
 import DisplayMode from "../enums/DisplayMode.ts";
 import CardsPageHeader from "../components/CardsPageHeader/CardsPageHeader.tsx";
-import Boards from "../../../components/Dnd/Boards/Boards/Boards.tsx";
-import useBoards from "../hooks/useBoards.tsx";
 import { ProjectsEditorContextProvider } from "../contexts/ProjectsEditorContext.tsx";
 import ProjectEditDrawer from "../drawers/ProjectEditDrawer/ProjectEditDrawer.tsx";
+import Boards from "../../../components/Dnd/Boards/Boards/Boards.tsx";
+import { DndContextProvider } from "../contexts/DndContext.tsx";
 
 export const CardsPage: FC = () => {
     const { data, form } = useCardsPageState();
-    const { boards, refetchBoards } = useBoards();
     const { dealId } = useParams({ strict: false });
     const { summariesRaw, refetch: refetchSummaries } = useCardSummaries();
 
-    const [displayMode, setDisplayMode] = useState<DisplayMode>(
-        DisplayMode.BOARD,
+    const [displayMode, setDisplayMode] = useState<DisplayMode>(DisplayMode.BOARD);
+
+    const tableBody = (
+        <CardsTable items={data} />
     );
 
-    const getTableBody = () => {
-        return (
-            <CardsTable items={data} />
-        );
-    };
-
-    const getBoardsBody = () => {
-        return (
-            <Boards
-                summariesRaw={summariesRaw}
-                refetchSummaries={refetchSummaries}
-                boards={boards}
-                refetchBoards={refetchBoards}
-            />
-        );
-    };
+    const boardsBody = (
+        <DndContextProvider
+            summariesRaw={summariesRaw}
+            refetchSummaries={refetchSummaries}
+        >
+            <Boards />
+        </DndContextProvider>
+    );
 
     const getBody = () => {
         return (
@@ -53,8 +46,8 @@ export const CardsPage: FC = () => {
                 animate={{ opacity: 1 }}
                 transition={{ duration: 0.2 }}>
                 {displayMode === DisplayMode.TABLE
-                    ? getTableBody()
-                    : getBoardsBody()
+                    ? tableBody
+                    : boardsBody
                 }
             </motion.div>
         );