fix: fixed rerender of boards component after changes in statuses

src/app/deals/components/Boards/Boards.tsx

@@ -14,7 +14,9 @@ const Boards = () => {
         return <Board board={board} />;
     };
 
-    const onDragEnd = (itemId: number, newLexorank: string) => {};
+    const onDragEnd = (itemId: number, newLexorank: string) => {
+        console.log("onDragEnd:", itemId, newLexorank);
+    };
 
     return (
         <ScrollArea

src/app/deals/components/StatusColumn/StatusColumn.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useMemo } from "react";
 import { useDroppable } from "@dnd-kit/core";
 import {
     SortableContext,
@@ -18,11 +18,8 @@ type BoardSectionProps = {
 
 const StatusColumn = ({ id, title, deals }: BoardSectionProps) => {
     const { setNodeRef } = useDroppable({ id });
-    const [sortedDeals, setSortedDeals] = useState<DealSchema[]>([]);
 
-    useEffect(() => {
-        setSortedDeals(sortByLexorank(deals));
-    }, [deals]);
+    const sortedDeals = useMemo(() => sortByLexorank(deals), [deals]);
 
     return (
         <Box style={{ backgroundColor: "#eee", padding: 2 }}>

src/app/deals/components/StatusColumnsDnd/StatusColumnsDnd.tsx

@@ -18,7 +18,7 @@ import { LexoRank } from "lexorank";
 import { Group } from "@mantine/core";
 import DealCard from "@/app/deals/components/DealCard/DealCard";
 import StatusColumn from "@/app/deals/components/StatusColumn/StatusColumn";
-import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
+import { useStatusesContext } from "@/app/deals/contexts/StatusesContext";
 import { DealSchema } from "@/types/DealSchema";
 import { getNewLexorank, sortByLexorank } from "@/utils/lexorank";
 
@@ -31,8 +31,8 @@ type Props = {
 };
 
 const StatusColumnsDnd: FC<Props> = props => {
-    const { statuses, deals, setDeals } = useBoardsContext();
-    const [activeDealId, setActiveDealId] = useState<null | number>(null);
+    const { statuses, deals, setDeals } = useStatusesContext();
+    const [activeDeal, setActiveDeal] = useState<DealSchema | null>(null);
 
     const sensors = useSensors(
         useSensor(PointerSensor),
@@ -42,7 +42,9 @@ const StatusColumnsDnd: FC<Props> = props => {
     );
 
     const handleDragStart = ({ active }: DragStartEvent) => {
-        setActiveDealId(active.id as number);
+        setActiveDeal(
+            deals.find(deal => deal.id === (active.id as number)) ?? null
+        );
     };
 
     const getStatusByDealId = (dealId: number) => {
@@ -158,7 +160,7 @@ const StatusColumnsDnd: FC<Props> = props => {
     };
 
     const handleDragEnd = ({ active, over }: DragOverEvent) => {
-        setActiveDealId(null);
+        setActiveDeal(null);
         if (!over?.id) return;
 
         const activeDealId = Number(active.id);
@@ -175,10 +177,6 @@ const StatusColumnsDnd: FC<Props> = props => {
         props.onDealDragEnd(activeDealId, overStatusId, newLexorank);
     };
 
-    const deal = activeDealId
-        ? deals.find(deal => deal.id === activeDealId)
-        : null;
-
     return (
         <DndContext
             sensors={sensors}
@@ -200,7 +198,7 @@ const StatusColumnsDnd: FC<Props> = props => {
                     />
                 ))}
                 <DragOverlay dropAnimation={defaultDropAnimation}>
-                    {deal ? <DealCard deal={deal} /> : null}
+                    {activeDeal ? <DealCard deal={activeDeal} /> : null}
                 </DragOverlay>
             </Group>
         </DndContext>

src/app/deals/contexts/BoardsContext.tsx

@@ -9,21 +9,13 @@ import React, {
 } from "react";
 import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
 import useBoards from "@/app/deals/hooks/useBoards";
-import useDeals from "@/app/deals/hooks/useDeals";
-import useStatuses from "@/app/deals/hooks/useStatuses";
 import { BoardSchema } from "@/types/BoardSchema";
-import { DealSchema } from "@/types/DealSchema";
-import { StatusSchema } from "@/types/StatusSchema";
 
 type BoardsContextState = {
     boards: BoardSchema[];
     setBoards: React.Dispatch<React.SetStateAction<BoardSchema[]>>;
     selectedBoard: BoardSchema | null;
     setSelectedBoard: React.Dispatch<React.SetStateAction<BoardSchema | null>>;
-    statuses: StatusSchema[];
-    setStatuses: React.Dispatch<React.SetStateAction<StatusSchema[]>>;
-    deals: DealSchema[];
-    setDeals: React.Dispatch<React.SetStateAction<DealSchema[]>>;
 };
 
 const BoardsContext = createContext<BoardsContextState | undefined>(undefined);
@@ -34,8 +26,6 @@ const useBoardsContextState = () => {
         null
     );
     const { selectedProject: project } = useProjectsContext();
-    const { statuses, setStatuses } = useStatuses();
-    const { deals, setDeals } = useDeals();
 
     useEffect(() => {
         if (boards.length > 0 && selectedBoard === null) {
@@ -58,10 +48,6 @@ const useBoardsContextState = () => {
         setBoards,
         selectedBoard,
         setSelectedBoard,
-        statuses,
-        setStatuses,
-        deals,
-        setDeals,
     };
 };
 

src/app/deals/contexts/StatusesContext.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import React, { createContext, FC, useContext } from "react";
+import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
+import useDeals from "@/app/deals/hooks/useDeals";
+import useStatuses from "@/app/deals/hooks/useStatuses";
+import { DealSchema } from "@/types/DealSchema";
+import { StatusSchema } from "@/types/StatusSchema";
+
+type StatusesContextState = {
+    statuses: StatusSchema[];
+    setStatuses: React.Dispatch<React.SetStateAction<StatusSchema[]>>;
+    deals: DealSchema[];
+    setDeals: React.Dispatch<React.SetStateAction<DealSchema[]>>;
+};
+
+const StatusesContext = createContext<StatusesContextState | undefined>(
+    undefined
+);
+
+const useStatusesContextState = () => {
+    const { statuses, setStatuses } = useStatuses();
+    const { deals, setDeals } = useDeals();
+    const { selectedBoard } = useBoardsContext();
+
+    return {
+        statuses,
+        setStatuses,
+        deals,
+        setDeals,
+    };
+};
+
+type StatusesContextProviderProps = {
+    children: React.ReactNode;
+};
+
+export const StatusesContextProvider: FC<StatusesContextProviderProps> = ({
+    children,
+}) => {
+    const state = useStatusesContextState();
+
+    return (
+        <StatusesContext.Provider value={state}>
+            {children}
+        </StatusesContext.Provider>
+    );
+};
+
+export const useStatusesContext = () => {
+    const context = useContext(StatusesContext);
+    if (!context) {
+        throw new Error(
+            "useStatusesContext must be used within a StatusesContextProvider"
+        );
+    }
+    return context;
+};

src/app/deals/page.tsx

@@ -4,6 +4,7 @@ import Header from "@/app/deals/components/Header/Header";
 import StatusColumns from "@/app/deals/components/StatusColumns/StatusColumns";
 import { BoardsContextProvider } from "@/app/deals/contexts/BoardsContext";
 import { ProjectsContextProvider } from "@/app/deals/contexts/ProjectsContext";
+import { StatusesContextProvider } from "@/app/deals/contexts/StatusesContext";
 import PageBlock from "@/components/PageBlock/PageBlock";
 import PageContainer from "@/components/PageContainer/PageContainer";
 
@@ -16,7 +17,9 @@ export default function DealsPage() {
                         <Header />
                         <Boards />
                         <Divider my={"xl"} />
-                        <StatusColumns />
+                        <StatusesContextProvider>
+                            <StatusColumns />
+                        </StatusesContextProvider>
                     </BoardsContextProvider>
                 </ProjectsContextProvider>
             </PageBlock>