feat: projects create, update, delete

src/hooks/useProjectsList.ts

@@ -1,12 +1,22 @@
+import { useEffect, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
+import { ProjectSchema } from "@/lib/client";
 import { getProjectsOptions } from "@/lib/client/@tanstack/react-query.gen";
 
 const useProjectsList = () => {
+    const [projects, setProjects] = useState<ProjectSchema[]>([]);
+
     const { data, refetch, isLoading } = useQuery({
         ...getProjectsOptions(),
     });
-    const projects = !data ? [] : data.projects;
-    return { projects, refetch, isLoading };
+
+    useEffect(() => {
+        if (data?.projects) {
+            setProjects(data.projects);
+        }
+    }, [data?.projects]);
+
+    return { projects, setProjects, refetch, isLoading };
 };
 
 export default useProjectsList;

src/hooks/useProjectsOperations.tsx

@@ -0,0 +1,112 @@
+import React from "react";
+import { useMutation } from "@tanstack/react-query";
+import { AxiosError } from "axios";
+import { Text } from "@mantine/core";
+import { modals } from "@mantine/modals";
+import {
+    HttpValidationError,
+    ProjectSchema,
+    UpdateProjectSchema,
+} from "@/lib/client";
+import {
+    createProjectMutation,
+    deleteProjectMutation,
+    updateProjectMutation,
+} from "@/lib/client/@tanstack/react-query.gen";
+import { notifications } from "@/lib/notifications";
+
+type Props = {
+    projects: ProjectSchema[];
+    setProjects: React.Dispatch<React.SetStateAction<ProjectSchema[]>>;
+    refetchProjects: () => void;
+};
+
+export const useProjectsOperations = ({
+    projects,
+    setProjects,
+    refetchProjects,
+}: Props) => {
+    const onError = (error: AxiosError<HttpValidationError>) => {
+        console.error(error);
+        notifications.error({
+            message: error.response?.data?.detail as string | undefined,
+        });
+        refetchProjects();
+    };
+
+    const createProject = useMutation({
+        ...createProjectMutation(),
+        onError,
+        onSuccess: res => {
+            setProjects([...projects, res.project]);
+        },
+    });
+
+    const updateProject = useMutation({
+        ...updateProjectMutation(),
+        onError,
+    });
+
+    const deleteProject = useMutation({
+        ...deleteProjectMutation(),
+        onError,
+    });
+
+    const onCreateProject = (name: string) => {
+        createProject.mutate({
+            body: {
+                project: {
+                    name,
+                },
+            },
+        });
+    };
+
+    const onUpdateProject = (
+        projectId: number,
+        project: UpdateProjectSchema
+    ) => {
+        updateProject.mutate({
+            query: { projectId },
+            body: { project },
+        });
+
+        setProjects(boards =>
+            boards.map(oldProject =>
+                oldProject.id !== projectId
+                    ? oldProject
+                    : {
+                          id: oldProject.id,
+                          name: project.name ? project.name : oldProject.name,
+                      }
+            )
+        );
+    };
+
+    const onDeleteProject = (project: ProjectSchema) => {
+        modals.openConfirmModal({
+            title: "Удаление проекта",
+            children: (
+                <Text>
+                    Вы уверены, что хотите удалить проект "{project.name}"?
+                </Text>
+            ),
+            labels: { confirm: "Да", cancel: "Нет" },
+            confirmProps: { color: "red" },
+            onConfirm: () => {
+                deleteProject.mutate({
+                    query: { projectId: project.id },
+                });
+                setProjects(projects =>
+                    projects.filter(p => p.id !== project.id)
+                );
+            },
+        });
+    };
+
+    return {
+        onCreateProject,
+        onUpdateProject,
+        onDeleteProject,
+    };
+};