feat: drawers registry

src/app/deals/components/shared/Header/Header.tsx

@@ -6,17 +6,16 @@ import Boards from "@/app/deals/components/shared/Boards/Boards";
 import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
 import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
 import ProjectSelect from "@/components/selects/ProjectSelect/ProjectSelect";
+import { useDrawersContext } from "@/drawers/DrawersContext";
 import useIsMobile from "@/hooks/useIsMobile";
 
 const Header = () => {
-    const {
-        projects,
-        setSelectedProjectId,
-        selectedProject,
-        setIsEditorDrawerOpened: setIsProjectsDrawerOpened,
-    } = useProjectsContext();
-    const { setIsEditorDrawerOpened } = useBoardsContext();
+    const { projects, setSelectedProjectId, refetchProjects, selectedProject } =
+        useProjectsContext();
+    const { refetchBoards } = useBoardsContext();
+    const { openDrawer } = useDrawersContext();
     const isMobile = useIsMobile();
+
     const getDesktopHeader = () => {
         return (
             <Flex
@@ -45,19 +44,44 @@ const Header = () => {
         );
     };
 
+    const selectProjectId = async (projectId: number | null) => {
+        await refetchProjects();
+        setSelectedProjectId(projectId);
+    };
+
+    const openProjectsEditorDrawer = () => {
+        openDrawer({
+            key: "projectsEditorDrawer",
+            props: {
+                setSelectedProjectId: selectProjectId,
+            },
+        });
+    };
+
+    const openBoardsEditorDrawer = () => {
+        if (!selectedProject) return;
+        openDrawer({
+            key: "projectBoardsEditorDrawer",
+            props: {
+                project: selectedProject,
+            },
+            onClose: refetchBoards,
+        });
+    };
+
     const getMobileHeader = () => {
         return (
             <>
                 <Group justify={"space-between"}>
                     <Box
                         p={"md"}
-                        onClick={() => setIsProjectsDrawerOpened(true)}>
+                        onClick={openProjectsEditorDrawer}>
                         <IconChevronLeft />
                     </Box>
                     <Text>{selectedProject?.name}</Text>
                     <Box
                         p={"md"}
-                        onClick={() => setIsEditorDrawerOpened(true)}>
+                        onClick={openBoardsEditorDrawer}>
                         <IconSettings />
                     </Box>
                 </Group>