fix: fixed rerender of boards component after changes in statuses

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;
+};