load and save pages

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(