refactor: drawers refactored

src/app/deals/drawers/DealEditorDrawer/DealEditorDrawer.tsx

@@ -5,14 +5,13 @@ import { Drawer } from "@mantine/core";
 import DealEditorBody from "@/app/deals/drawers/DealEditorDrawer/components/DealEditorBody";
 import Header from "@/app/deals/drawers/DealEditorDrawer/components/Header";
 import { DrawerProps } from "@/drawers/types";
-import { DealsCrud } from "@/hooks/cruds/useDealsCrud";
 import useIsMobile from "@/hooks/utils/useIsMobile";
-import { DealSchema, ProjectSchema } from "@/lib/client";
+import { DealSchema } from "@/lib/client";
 
 type Props = {
-    project: ProjectSchema;
-    deal: DealSchema;
-    dealsCrud: DealsCrud;
+    value: DealSchema;
+    onChange: (deal: DealSchema) => void;
+    onDelete: (deal: DealSchema, onSuccess: () => void) => void;
 };
 
 const DealEditorDrawer: FC<DrawerProps<Props>> = ({
@@ -21,7 +20,7 @@ const DealEditorDrawer: FC<DrawerProps<Props>> = ({
     props,
 }) => {
     const isMobile = useIsMobile();
-    const [deal, setDeal] = useState(props.deal);
+    const [deal, setDeal] = useState(props.value);
 
     return (
         <Drawer
@@ -44,10 +43,12 @@ const DealEditorDrawer: FC<DrawerProps<Props>> = ({
                 },
             }}>
             <DealEditorBody
-                {...props}
-                deal={deal}
-                setDeal={setDeal}
-                onClose={onClose}
+                value={deal}
+                onChange={deal => {
+                    setDeal(deal);
+                    props.onChange(deal);
+                }}
+                onDelete={value => props.onDelete(value, onClose)}
             />
         </Drawer>
     );

src/app/deals/drawers/DealEditorDrawer/components/DealEditorBody.tsx

@@ -2,16 +2,13 @@ import React, { FC } from "react";
 import { IconCircleDotted, IconEdit } from "@tabler/icons-react";
 import { Tabs, Text } from "@mantine/core";
 import GeneralTab from "@/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/GeneralTab";
-import { DealsCrud } from "@/hooks/cruds/useDealsCrud";
-import { DealSchema, ProjectSchema } from "@/lib/client";
+import { DealSchema } from "@/lib/client";
 import styles from "../DealEditorDrawer.module.css";
 
 type Props = {
-    project: ProjectSchema;
-    dealsCrud: DealsCrud;
-    deal: DealSchema;
-    setDeal: React.Dispatch<React.SetStateAction<DealSchema>>;
-    onClose: () => void;
+    value: DealSchema;
+    onChange: (deal: DealSchema) => void;
+    onDelete: (deal: DealSchema) => void;
 };
 
 const DealEditorBody: FC<Props> = props => {

src/app/deals/drawers/DealEditorDrawer/index.ts

@@ -1,3 +1,3 @@
-import ProjectsEditorDrawer from "@/app/deals/drawers/ProjectsEditorDrawer/ProjectsEditorDrawer";
+import ProjectsMobileEditorDrawer from "@/app/deals/drawers/ProjectsEditorDrawer/ProjectsMobileEditorDrawer";
 
-export default ProjectsEditorDrawer;
+export default ProjectsMobileEditorDrawer;

src/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/Footer.tsx

@@ -2,10 +2,11 @@ import { FC } from "react";
 import { isEqual } from "lodash";
 import { Button, Group } from "@mantine/core";
 import { UseFormReturnType } from "@mantine/form";
+import { DealForm } from "@/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/GeneralTab";
 import { DealSchema } from "@/lib/client";
 
 type Props = {
-    form: UseFormReturnType<Partial<DealSchema>>;
+    form: UseFormReturnType<DealForm>;
     initialValues: Partial<DealSchema>;
     onDelete: () => void;
 };

src/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/GeneralTab.tsx

@@ -4,27 +4,23 @@ import { useForm } from "@mantine/form";
 import Footer from "@/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/Footer";
 import BoardSelect from "@/components/selects/BoardSelect/BoardSelect";
 import StatusSelect from "@/components/selects/StatusSelect/StatusSelect";
-import { DealsCrud } from "@/hooks/cruds/useDealsCrud";
-import { DealSchema, ProjectSchema } from "@/lib/client";
+import { BoardSchema, DealSchema, StatusSchema } from "@/lib/client";
 import { utcDateTimeToLocalString } from "@/utils/datetime";
 
 type Props = {
-    project: ProjectSchema;
-    dealsCrud: DealsCrud;
-    deal: DealSchema;
-    setDeal: React.Dispatch<React.SetStateAction<DealSchema>>;
-    onClose: () => void;
+    value: DealSchema;
+    onChange: (deal: DealSchema) => void;
+    onDelete: (deal: DealSchema) => void;
 };
 
-const GeneralTab: FC<Props> = ({
-    project,
-    deal,
-    setDeal,
-    dealsCrud,
-    onClose,
-}) => {
-    const form = useForm<Partial<DealSchema>>({
-        initialValues: deal,
+export type DealForm = Omit<DealSchema, "board" | "status"> & {
+    board?: BoardSchema | undefined;
+    status?: StatusSchema | undefined;
+};
+
+const GeneralTab: FC<Props> = ({ value, onDelete, onChange }) => {
+    const form = useForm<DealForm>({
+        initialValues: value,
         validate: {
             name: value => !value && "Введите название",
             board: value => !value && "Выберите доску",
@@ -32,20 +28,13 @@ const GeneralTab: FC<Props> = ({
         },
     });
 
-    const onSubmit = (values: Partial<DealSchema>) => {
-        dealsCrud.onUpdate(deal.id, {
+    const onSubmit = (values: DealForm) => {
+        form.setInitialValues(values);
+        onChange({
             ...values,
-            boardId: values.board?.id,
-            statusId: values.status?.id,
+            board: values.board!,
+            status: values.status!,
         });
-        setDeal(prev => ({
-            ...prev,
-            ...values,
-        }));
-    };
-
-    const onDelete = () => {
-        dealsCrud.onDelete(deal, onClose);
     };
 
     return (
@@ -55,7 +44,9 @@ const GeneralTab: FC<Props> = ({
                     label={"Название"}
                     {...form.getInputProps("name")}
                 />
-                <Text>Создано: {utcDateTimeToLocalString(deal.createdAt)}</Text>
+                <Text>
+                    Создано: {utcDateTimeToLocalString(value.createdAt)}
+                </Text>
                 <BoardSelect
                     label={"Доска"}
                     {...form.getInputProps("board")}
@@ -63,7 +54,7 @@ const GeneralTab: FC<Props> = ({
                         form.setFieldValue("board", board ?? undefined);
                         form.setFieldValue("status", undefined);
                     }}
-                    projectId={project?.id}
+                    projectId={value.board.projectId}
                 />
                 <StatusSelect
                     label={"Статус"}
@@ -72,8 +63,8 @@ const GeneralTab: FC<Props> = ({
                 />
                 <Footer
                     form={form}
-                    initialValues={deal}
-                    onDelete={onDelete}
+                    initialValues={value}
+                    onDelete={() => onDelete(value)}
                 />
             </Stack>
         </form>