refactor: refactored useAttributesActions hook

src/app/module-editor/[moduleId]/hooks/useAttributesActions.tsx

@@ -1,22 +1,8 @@
 import React from "react";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { AxiosError } from "axios";
 import { Text } from "@mantine/core";
 import { modals } from "@mantine/modals";
-import {
+import useAttributesCrud from "@/app/module-editor/[moduleId]/hooks/useAttributesCrud";
-    AttributeSchema,
+import { AttributeSchema, ModuleSchemaOutput } from "@/lib/client";
-    HttpValidationError,
-    ModuleSchemaOutput,
-} from "@/lib/client";
-import {
-    addAttributeToModuleMutation,
-    createAttributeMutation,
-    deleteAttributeMutation,
-    removeAttributeFromModuleMutation,
-    updateAttributeLabelMutation,
-    updateAttributeMutation,
-} from "@/lib/client/@tanstack/react-query.gen";
-import { notifications } from "@/lib/notifications";
 
 export type AttributesActions = {
     addAttributeToModule: (attribute: AttributeSchema) => void;
@@ -33,77 +19,11 @@ type Props = {
     refetchAttributes: () => void;
 };
 
-const useAttributesActions = ({
+const useAttributesActions = (props: Props): AttributesActions => {
-    module,
+    const crud = useAttributesCrud(props);
-    refetchModule,
-    refetchAttributes,
-}: Props): AttributesActions => {
-    const queryClient = useQueryClient();
-
-    const onError = (error: AxiosError<HttpValidationError>) => {
-        console.error(error);
-        notifications.error({
-            message: error.response?.data?.detail as string | undefined,
-        });
-    };
-
-    const addAttrToModuleMutation = useMutation({
-        ...addAttributeToModuleMutation(),
-        onError,
-    });
-
-    const removeAttrFromModuleMutation = useMutation({
-        ...removeAttributeFromModuleMutation(),
-        onError,
-    });
-
-    const removeGetDealModuleAttrQuery = () => {
-        if (!module) return;
-
-        queryClient.removeQueries({
-            predicate: query => {
-                const key = query.queryKey[0] as {
-                    _id?: string;
-                    path?: { moduleId?: number };
-                };
-                const isMatch =
-                    key?._id === "getDealModuleAttributes" &&
-                    key?.path?.moduleId === module.id;
-                if (isMatch) console.log(isMatch);
-                return isMatch;
-            },
-        });
-    };
-
-    const toggleAttributeInModule = (
-        attribute: AttributeSchema,
-        isAdding: boolean
-    ) => {
-        if (!module) return;
-        const mutation = isAdding
-            ? addAttrToModuleMutation
-            : removeAttrFromModuleMutation;
-
-        mutation.mutate(
-            {
-                path: {
-                    moduleId: module.id,
-                    attributeId: attribute.id,
-                },
-            },
-            {
-                onSuccess: ({ message }) => {
-                    notifications.success({ message });
-                    refetchModule();
-                    refetchAttributes();
-                    removeGetDealModuleAttrQuery();
-                },
-            }
-        );
-    };
 
     const addAttributeToModule = (attribute: AttributeSchema) =>
-        toggleAttributeInModule(attribute, true);
+        crud.onToggleAttributeInModule(attribute, true);
 
     const removeAttributeFromModule = (attribute: AttributeSchema) => {
         modals.openConfirmModal({
@@ -115,16 +35,10 @@ const useAttributesActions = ({
                 </Text>
             ),
             confirmProps: { color: "red" },
-            onConfirm: () => toggleAttributeInModule(attribute, false),
+            onConfirm: () => crud.onToggleAttributeInModule(attribute, false),
         });
     };
 
-    const updateAttributeLabel = useMutation({
-        ...updateAttributeLabelMutation(),
-        onError,
-        onSuccess: refetchModule,
-    });
-
     const onEditAttributeLabel = (attribute: AttributeSchema) => {
         if (!module) return;
 
@@ -134,80 +48,37 @@ const useAttributesActions = ({
             withCloseButton: true,
             innerProps: {
                 onChange: values =>
-                    updateAttributeLabel.mutate({
+                    crud.onUpdateLabel(attribute.id, values.name),
-                        body: {
-                            moduleId: module.id,
-                            attributeId: attribute.id,
-                            label: values.name,
-                        },
-                    }),
                 value: { name: attribute.label },
             },
         });
     };
 
-    const createAttribute = useMutation({
-        ...createAttributeMutation(),
-        onError,
-        onSuccess: refetchAttributes,
-    });
-
     const onCreate = () => {
         modals.openContextModal({
             modal: "attributeEditorModal",
             title: "Создание атрибута",
             withCloseButton: true,
             innerProps: {
-                onCreate: values =>
+                onCreate: crud.onCreate,
-                    createAttribute.mutate({
-                        body: {
-                            entity: values,
-                        },
-                    }),
                 isEditing: false,
             },
         });
     };
 
-    const updateAttribute = useMutation({
-        ...updateAttributeMutation(),
-        onError,
-        onSuccess: () => {
-            refetchAttributes();
-            refetchModule();
-        },
-    });
-
     const onUpdate = (attribute: AttributeSchema) => {
         modals.openContextModal({
             modal: "attributeEditorModal",
             title: "Редактирование атрибута",
             withCloseButton: true,
             innerProps: {
-                onChange: values =>
+                onChange: values => crud.onUpdate(attribute.id, values),
-                    updateAttribute.mutate({
-                        path: {
-                            pk: attribute.id,
-                        },
-                        body: {
-                            entity: values,
-                        },
-                    }),
                 entity: attribute,
                 isEditing: true,
             },
         });
     };
 
-    const deleteAttribute = useMutation({
-        ...deleteAttributeMutation(),
-        onError,
-        onSuccess: () => {
-            refetchModule();
-            refetchAttributes();
-        },
-    });
-
     const onDelete = (attribute: AttributeSchema) => {
         modals.openConfirmModal({
             title: "Удаление атрибута",
@@ -217,8 +88,7 @@ const useAttributesActions = ({
                 </Text>
             ),
             confirmProps: { color: "red" },
-            onConfirm: () =>
+            onConfirm: () => crud.onDelete(attribute.id),
-                deleteAttribute.mutate({ path: { pk: attribute.id } }),
         });
     };
 

src/app/module-editor/[moduleId]/hooks/useAttributesCrud.tsx

@@ -0,0 +1,179 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { AxiosError } from "axios";
+import {
+    AttributeSchema,
+    CreateAttributeSchema,
+    HttpValidationError,
+    ModuleSchemaOutput,
+    UpdateAttributeSchema,
+} from "@/lib/client";
+import {
+    addAttributeToModuleMutation,
+    createAttributeMutation,
+    deleteAttributeMutation,
+    removeAttributeFromModuleMutation,
+    updateAttributeLabelMutation,
+    updateAttributeMutation,
+} from "@/lib/client/@tanstack/react-query.gen";
+import { notifications } from "@/lib/notifications";
+
+type Props = {
+    module?: ModuleSchemaOutput;
+    refetchModule: () => void;
+    refetchAttributes: () => void;
+};
+
+type AttributesCrud = {
+    onToggleAttributeInModule: (
+        attribute: AttributeSchema,
+        isAdding: boolean
+    ) => void;
+    onUpdateLabel: (attributeId: number, name: string) => void;
+    onCreate: (attribute: CreateAttributeSchema) => void;
+    onUpdate: (attributeId: number, values: UpdateAttributeSchema) => void;
+    onDelete: (attributeId: number) => void;
+};
+
+const useAttributesCrud = ({
+    module,
+    refetchModule,
+    refetchAttributes,
+}: Props): AttributesCrud => {
+    const queryClient = useQueryClient();
+
+    const onError = (error: AxiosError<HttpValidationError>) => {
+        console.error(error);
+        notifications.error({
+            message: error.response?.data?.detail as string | undefined,
+        });
+    };
+
+    const addAttrToModuleMutation = useMutation({
+        ...addAttributeToModuleMutation(),
+        onError,
+    });
+
+    const removeAttrFromModuleMutation = useMutation({
+        ...removeAttributeFromModuleMutation(),
+        onError,
+    });
+
+    const removeGetDealModuleAttrQuery = () => {
+        if (!module) return;
+
+        queryClient.removeQueries({
+            predicate: query => {
+                const key = query.queryKey[0] as {
+                    _id?: string;
+                    path?: { moduleId?: number };
+                };
+                const isMatch =
+                    key?._id === "getDealModuleAttributes" &&
+                    key?.path?.moduleId === module.id;
+                if (isMatch) console.log(isMatch);
+                return isMatch;
+            },
+        });
+    };
+
+    const onToggleAttributeInModule = (
+        attribute: AttributeSchema,
+        isAdding: boolean
+    ) => {
+        if (!module) return;
+        const mutation = isAdding
+            ? addAttrToModuleMutation
+            : removeAttrFromModuleMutation;
+
+        mutation.mutate(
+            {
+                path: {
+                    moduleId: module.id,
+                    attributeId: attribute.id,
+                },
+            },
+            {
+                onSuccess: ({ message }) => {
+                    notifications.success({ message });
+                    refetchModule();
+                    refetchAttributes();
+                    removeGetDealModuleAttrQuery();
+                },
+            }
+        );
+    };
+
+    const updateAttrLabelMutation = useMutation({
+        ...updateAttributeLabelMutation(),
+        onError,
+        onSuccess: refetchModule,
+    });
+
+    const onUpdateLabel = (attributeId: number, name: string) => {
+        if (!module) return;
+
+        updateAttrLabelMutation.mutate({
+            body: {
+                moduleId: module.id,
+                attributeId,
+                label: name,
+            },
+        });
+    };
+
+    const createAttrMutation = useMutation({
+        ...createAttributeMutation(),
+        onError,
+        onSuccess: refetchAttributes,
+    });
+
+    const onCreate = (values: CreateAttributeSchema) => {
+        createAttrMutation.mutate({
+            body: {
+                entity: values,
+            },
+        });
+    };
+
+    const updateAttrMutation = useMutation({
+        ...updateAttributeMutation(),
+        onError,
+        onSuccess: () => {
+            refetchAttributes();
+            refetchModule();
+        },
+    });
+
+    const onUpdate = (attributeId: number, values: UpdateAttributeSchema) => {
+        updateAttrMutation.mutate({
+            path: {
+                pk: attributeId,
+            },
+            body: {
+                entity: values,
+            },
+        });
+    };
+
+    const deleteAttrMutation = useMutation({
+        ...deleteAttributeMutation(),
+        onError,
+        onSuccess: () => {
+            refetchModule();
+            refetchAttributes();
+        },
+    });
+
+    const onDelete = (attributeId: number) =>
+        deleteAttrMutation.mutate({ path: { pk: attributeId } });
+
+    return {
+        onToggleAttributeInModule,
+        onUpdateLabel,
+        onCreate,
+        onUpdate,
+        onDelete,
+    };
+};
+
+export default useAttributesCrud;