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>