feat: drawers registry

src/app/deals/drawers/ProjectsEditorDrawer/ProjectsEditorDrawer.tsx

@@ -1,16 +1,20 @@
 "use client";
 
 import React, { FC } from "react";
-import { Center, Divider, Drawer, rem, Stack, Text } from "@mantine/core";
-import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
-import CreateProjectButton from "@/app/deals/drawers/ProjectsEditorDrawer/components/CreateProjectButton";
-import ProjectMobile from "@/app/deals/drawers/ProjectsEditorDrawer/components/ProjectMobile";
+import { Center, Divider, Drawer, rem, Text } from "@mantine/core";
+import { ProjectsContextProvider } from "@/app/deals/contexts/ProjectsContext";
+import ProjectsDrawerBody from "@/app/deals/drawers/BoardStatusesEditorDrawer/components/ProjectsDrawerBody";
+import { DrawerProps } from "@/drawers/types";
 
-const ProjectsEditorDrawer: FC = () => {
-    const { projects, isEditorDrawerOpened, setIsEditorDrawerOpened } =
-        useProjectsContext();
-    const onClose = () => setIsEditorDrawerOpened(false);
+type Props = {
+    setSelectedProjectId: (projectId: number | null) => void;
+};
 
+const ProjectsEditorDrawer: FC<DrawerProps<Props>> = ({
+    opened,
+    onClose,
+    props: { setSelectedProjectId },
+}) => {
     return (
         <Drawer
             size={"100%"}
@@ -18,7 +22,7 @@ const ProjectsEditorDrawer: FC = () => {
             onClose={onClose}
             removeScrollProps={{ allowPinchZoom: true }}
             withCloseButton={false}
-            opened={isEditorDrawerOpened}
+            opened={opened}
             trapFocus={false}
             styles={{
                 body: {
@@ -32,15 +36,12 @@ const ProjectsEditorDrawer: FC = () => {
                 <Text>Проекты</Text>
             </Center>
             <Divider />
-            <Stack gap={0}>
-                {projects.map((project, index) => (
-                    <ProjectMobile
-                        key={index}
-                        project={project}
-                    />
-                ))}
-            </Stack>
-            <CreateProjectButton />
+            <ProjectsContextProvider>
+                <ProjectsDrawerBody
+                    setSelectedProjectId={setSelectedProjectId}
+                    onClose={onClose}
+                />
+            </ProjectsContextProvider>
         </Drawer>
     );
 };

src/app/deals/drawers/ProjectsEditorDrawer/components/CreateProjectButton.tsx

@@ -1,9 +1,10 @@
+import { FC } from "react";
 import { IconPlus } from "@tabler/icons-react";
 import { Box, Group, Text } from "@mantine/core";
 import { modals } from "@mantine/modals";
 import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
 
-const CreateProjectButton = () => {
+const CreateProjectButton: FC = () => {
     const { onCreateProject } = useProjectsContext();
 
     const onStartCreating = () => {

src/app/deals/drawers/ProjectsEditorDrawer/components/ProjectMobile.tsx

@@ -8,11 +8,16 @@ import styles from "./../ProjectsEditorDrawer.module.css";
 
 type Props = {
     project: ProjectSchema;
+    setSelectedProjectId: (projectId: number | null) => void;
+    closeDrawer: () => void;
 };
 
-const ProjectMobile: FC<Props> = ({ project }) => {
-    const { onUpdateProject, setSelectedProjectId, setIsEditorDrawerOpened } =
-        useProjectsContext();
+const ProjectMobile: FC<Props> = ({
+    project,
+    setSelectedProjectId,
+    closeDrawer,
+}) => {
+    const { onUpdateProject } = useProjectsContext();
 
     const startEditing = () => {
         modals.openContextModal({
@@ -28,7 +33,7 @@ const ProjectMobile: FC<Props> = ({ project }) => {
 
     const onClick = () => {
         setSelectedProjectId(project.id);
-        setIsEditorDrawerOpened(false);
+        closeDrawer();
     };
 
     return (