From a383f218f113103fda35150178e088ea717669bc Mon Sep 17 00:00:00 2001 From: AlexSserb Date: Sun, 2 Nov 2025 12:21:55 +0400 Subject: [PATCH] refactor: refactored useAttributesActions hook --- .../[moduleId]/hooks/useAttributesActions.tsx | 150 +-------------- .../[moduleId]/hooks/useAttributesCrud.tsx | 179 ++++++++++++++++++ 2 files changed, 189 insertions(+), 140 deletions(-) create mode 100644 src/app/module-editor/[moduleId]/hooks/useAttributesCrud.tsx diff --git a/src/app/module-editor/[moduleId]/hooks/useAttributesActions.tsx b/src/app/module-editor/[moduleId]/hooks/useAttributesActions.tsx index 924aa51..8c23497 100644 --- a/src/app/module-editor/[moduleId]/hooks/useAttributesActions.tsx +++ b/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 { - AttributeSchema, - HttpValidationError, - ModuleSchemaOutput, -} from "@/lib/client"; -import { - addAttributeToModuleMutation, - createAttributeMutation, - deleteAttributeMutation, - removeAttributeFromModuleMutation, - updateAttributeLabelMutation, - updateAttributeMutation, -} from "@/lib/client/@tanstack/react-query.gen"; -import { notifications } from "@/lib/notifications"; +import useAttributesCrud from "@/app/module-editor/[moduleId]/hooks/useAttributesCrud"; +import { AttributeSchema, ModuleSchemaOutput } from "@/lib/client"; export type AttributesActions = { addAttributeToModule: (attribute: AttributeSchema) => void; @@ -33,77 +19,11 @@ type Props = { refetchAttributes: () => void; }; -const useAttributesActions = ({ - module, - refetchModule, - refetchAttributes, -}: Props): AttributesActions => { - const queryClient = useQueryClient(); - - const onError = (error: AxiosError) => { - 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 useAttributesActions = (props: Props): AttributesActions => { + const crud = useAttributesCrud(props); const addAttributeToModule = (attribute: AttributeSchema) => - toggleAttributeInModule(attribute, true); + crud.onToggleAttributeInModule(attribute, true); const removeAttributeFromModule = (attribute: AttributeSchema) => { modals.openConfirmModal({ @@ -115,16 +35,10 @@ const useAttributesActions = ({ ), 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({ - body: { - moduleId: module.id, - attributeId: attribute.id, - label: values.name, - }, - }), + crud.onUpdateLabel(attribute.id, 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 => - createAttribute.mutate({ - body: { - entity: values, - }, - }), + onCreate: crud.onCreate, isEditing: false, }, }); }; - const updateAttribute = useMutation({ - ...updateAttributeMutation(), - onError, - onSuccess: () => { - refetchAttributes(); - refetchModule(); - }, - }); - const onUpdate = (attribute: AttributeSchema) => { modals.openContextModal({ modal: "attributeEditorModal", title: "Редактирование атрибута", withCloseButton: true, innerProps: { - onChange: values => - updateAttribute.mutate({ - path: { - pk: attribute.id, - }, - body: { - entity: values, - }, - }), + onChange: values => crud.onUpdate(attribute.id, 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 = ({ ), confirmProps: { color: "red" }, - onConfirm: () => - deleteAttribute.mutate({ path: { pk: attribute.id } }), + onConfirm: () => crud.onDelete(attribute.id), }); }; diff --git a/src/app/module-editor/[moduleId]/hooks/useAttributesCrud.tsx b/src/app/module-editor/[moduleId]/hooks/useAttributesCrud.tsx new file mode 100644 index 0000000..5023aa3 --- /dev/null +++ b/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) => { + 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;