load and save pages

src/pages/catalogue/types/Types.ts

@@ -10,3 +10,4 @@ export type CatalogItemType = {
 };
 
 export type CatalogResponseType = BaseResponse<CatalogItemType[]>;
+export type CatalogByIdResponseType = BaseResponse<CatalogItemType>;

src/pages/editor/Editor.tsx

@@ -1,11 +1,43 @@
-import { type FC, useState } from 'react'
+import { type FC, useEffect, useState } from 'react'
 import { clx } from '@/helpers/utils'
 import EditorSidebar from './components/EditorSidebar'
 import EditorCanvas from './components/EditorCanvas'
 import LayersPanel from './components/LayersPanel'
+import { useGetCatalogById, useUpdateCatalog } from '../home/hooks/useHomeData'
+import { useParams } from 'react-router-dom'
+import { useEditorStore } from './store/editorStore'
 
 const Editor: FC = () => {
+
+    const { id } = useParams()
     const [isLayersPanelOpen, setIsLayersPanelOpen] = useState(false)
+    const { loadPages, pages } = useEditorStore()
+    const { data } = useGetCatalogById(id!)
+    const { scheduleUpdate } = useUpdateCatalog()
+
+    useEffect(() => {
+        if (data?.data && data?.data?.content) {
+            const json = JSON.parse(data?.data?.content)
+            if (json) {
+                loadPages(json)
+            }
+        }
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [data?.data])
+
+    useEffect(() => {
+        if (!id) return
+        if (!pages || pages.length === 0) return
+
+        scheduleUpdate({
+            id,
+            content: JSON.stringify(pages),
+        })
+        // عمداً scheduleUpdate را در وابستگی‌ها نیاوردیم تا از لوپ ذخیره‌سازی جلوگیری شود
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [id, pages])
+
 
     return (
         <div className={clx(

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;
 };