viewer connect api

src/pages/catalogue/components/CatalogueItem.tsx

@@ -24,10 +24,12 @@ const CatalogueItem: FC<Props> = ({ item }) => {
                 </div>
             </div>
             <div className='flex justify-end gap-1 items-center'>
+                <Link to={Paths.viewer + `/${item.id}`}>
                     <div className='size-6 bg-[#EAECF4] rounded-md flex justify-center items-center'>
                         <Eye size={18} color='#0047FF' />
                     </div>
-                <Link to={Paths.editor + `/id=${item.id}`}>
+                </Link>
+                <Link to={Paths.editor + `/${item.id}`}>
                     <div className='size-6 bg-[#EAECF4] rounded-md flex justify-center items-center'>
                         <Edit size={18} color='#0047FF' />
                     </div>

src/pages/viewer/Viewer.tsx

@@ -2,36 +2,37 @@ import { type FC, useEffect, useState } from 'react';
 import BookViewer from './components/BookViewer';
 import { transformViewerDataToPages } from './utils/dataTransformer';
 import type { PageData } from './types';
+import { useParams } from 'react-router-dom';
+import { useGetCatalogById } from '@/pages/home/hooks/useHomeData';
 
 const Viewer: FC = () => {
+    const { id } = useParams<{ id: string }>();
+    const { data, isLoading, error: queryError } = useGetCatalogById(id ?? '');
     const [pages, setPages] = useState<PageData[]>([]);
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState<string | null>(null);
 
     useEffect(() => {
-        const loadViewerData = async () => {
+        if (!data?.data?.content || !id) return;
         try {
-                setLoading(true);
+            const parsed = JSON.parse(data.data.content);
-                const response = await fetch('/viewer-data.json');
+            const pagesArray = Array.isArray(parsed) ? parsed : [];
-                if (!response.ok) {
+            const transformedPages = transformViewerDataToPages(
-                    throw new Error('خطا در بارگذاری داده‌ها');
+                { pages: pagesArray } as Parameters<typeof transformViewerDataToPages>[0]
-                }
+            );
-                const data = await response.json();
-                const transformedPages = transformViewerDataToPages(data);
             setPages(transformedPages);
-                setError(null);
         } catch (err) {
-                setError(err instanceof Error ? err.message : 'خطای نامشخص');
+            console.error('خطا در پردازش محتوای کاتالوگ:', err);
-                console.error('خطا در بارگذاری viewer-data.json:', err);
-            } finally {
-                setLoading(false);
         }
-        };
+    }, [data?.data?.content, id]);
 
-        loadViewerData();
+    if (!id) {
-    }, []);
+        return (
+            <div className="w-full h-full flex items-center justify-center">
+                <div className="text-gray-600">شناسه کاتالوگ مشخص نیست</div>
+            </div>
+        );
+    }
 
-    if (loading) {
+    if (isLoading) {
         return (
             <div className="w-full h-full flex items-center justify-center">
                 <div className="text-gray-600">در حال بارگذاری...</div>
@@ -39,10 +40,10 @@ const Viewer: FC = () => {
         );
     }
 
-    if (error) {
+    if (queryError) {
         return (
             <div className="w-full h-full flex items-center justify-center">
-                <div className="text-red-600">خطا: {error}</div>
+                <div className="text-red-600">خطا: {queryError.message}</div>
             </div>
         );
     }

src/router/MainRouter.tsx

@@ -33,7 +33,7 @@ const MainRouter = () => {
                         <Routes>
                             <Route path={Paths.home} element={<Home />} />
                             <Route path={Paths.editor + '/:id'} element={<Editor />} />
-                            <Route path={Paths.viewer} element={<Viewer />} />
+                            <Route path={Paths.viewer + '/:id'} element={<Viewer />} />
                             <Route path={Paths.catalog.list} element={<CatalogueList />} />
                         </Routes>
                     </div>