load and save pages

src/pages/home/hooks/useHomeData.ts

@@ -1,5 +1,6 @@
 import * as api from "../service/HomeService";
 import { useMutation, useQuery } from "@tanstack/react-query";
+import { useCallback, useEffect, useRef } from "react";
 
 export const useCreateCatalog = () => {
   return useMutation({
@@ -21,3 +22,41 @@ export const useGetCatalogById = (id: string) => {
     enabled: !!id,
   });
 };
+
+export const useUpdateCatalog = () => {
+  const mutation = useMutation({
+    mutationFn: api.updateCatalog,
+  });
+
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const scheduleUpdate = useCallback(
+    (
+      params: Parameters<typeof api.updateCatalog>[0],
+      delayMs = 3000
+    ) => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+
+      timeoutRef.current = setTimeout(() => {
+        mutation.mutate(params);
+      }, delayMs);
+    },
+    [mutation]
+  );
+
+  useEffect(
+    () => () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    },
+    []
+  );
+
+  return {
+    ...mutation,
+    scheduleUpdate,
+  };
+};

src/pages/home/service/HomeService.ts

@@ -1,6 +1,12 @@
 import axios from "@/config/axios";
-import type { CreateCatalogParamsType } from "../types/Types";
-import type { CatalogResponseType } from "@/pages/catalogue/types/Types";
+import type {
+  CreateCatalogParamsType,
+  UpdateCatalogParamsType,
+} from "../types/Types";
+import type {
+  CatalogByIdResponseType,
+  CatalogResponseType,
+} from "@/pages/catalogue/types/Types";
 
 export const createCatalog = async (params: CreateCatalogParamsType) => {
   const { data } = await axios.post("/catalogue", params);
@@ -13,6 +19,13 @@ export const getCatalogs = async () => {
 };
 
 export const getCatalogById = async (id: string) => {
-  const { data } = await axios.get(`/catalogue/${id}`);
+  const { data } = await axios.get<CatalogByIdResponseType>(`/catalogue/${id}`);
+  return data;
+};
+
+export const updateCatalog = async (params: UpdateCatalogParamsType) => {
+  const { data } = await axios.patch(`/catalogue/${params.id}`, {
+    content: params.content,
+  });
   return data;
 };

src/pages/home/types/Types.ts

@@ -2,4 +2,10 @@ export type CreateCatalogParamsType = {
   name: string;
   size: string;
   content?: string;
+  id?: string;
+};
+
+export type UpdateCatalogParamsType = {
+  id: string;
+  content: string;
 };