refactor: refactored useAttributesActions hook
This commit is contained in:
@ -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<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 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 = ({
|
||||
</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({
|
||||
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 = ({
|
||||
</Text>
|
||||
),
|
||||
confirmProps: { color: "red" },
|
||||
onConfirm: () =>
|
||||
deleteAttribute.mutate({ path: { pk: attribute.id } }),
|
||||
onConfirm: () => crud.onDelete(attribute.id),
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
179
src/app/module-editor/[moduleId]/hooks/useAttributesCrud.tsx
Normal file
179
src/app/module-editor/[moduleId]/hooks/useAttributesCrud.tsx
Normal file
@ -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;
|
||||
Reference in New Issue
Block a user