feat: Reader working, some work still need to be done

assets/react/app/presentation/pages/MangaDetailPage.jsx

@@ -1,9 +1,8 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
-import { MockMangaRepository } from '../../infrastructure/api/mockMangaRepository.js';
-import { GetMangaDetail } from '../../application/useCases/getMangaDetail.js';
 import { Layout } from '../components/Layout/Layout.jsx';
 import { Toolbar } from '../components/Toolbar/Toolbar.jsx';
+import { useManga } from '../context/MangaContext.jsx';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { 
   faStar, 
@@ -15,32 +14,26 @@ import {
   faShare
 } from '@fortawesome/free-solid-svg-icons';
 
-const mangaRepository = new MockMangaRepository();
-const getMangaDetail = new GetMangaDetail(mangaRepository);
-
 export function MangaDetailPage() {
   const { slug } = useParams();
   const navigate = useNavigate();
-  const [manga, setManga] = useState(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
+  const { 
+    detailedMangas, 
+    loading, 
+    error, 
+    loadMangaDetail,
+    getMangaFromCollection
+  } = useManga();
 
-  const handleRefresh = async () => {
-    setLoading(true);
-    try {
-      const mangaDetail = await getMangaDetail.execute(slug);
-      setManga(mangaDetail);
-    } catch (err) {
-      setError('Failed to load manga details');
-      console.error(err);
-    } finally {
-      setLoading(false);
-    }
-  };
+  const manga = detailedMangas[slug];
+  const collectionManga = getMangaFromCollection(slug);
 
   useEffect(() => {
-    handleRefresh();
-  }, [slug]);
+    // Si on n'a pas les détails du manga, on les charge
+    if (!manga) {
+      loadMangaDetail(slug);
+    }
+  }, [slug, manga, loadMangaDetail]);
 
   const handleMangaClick = (mangaSlug) => {
     navigate(`/manga/${mangaSlug}`);
@@ -53,7 +46,7 @@ export function MangaDetailPage() {
   const toolbarConfig = {
     leftSection: [
       { icon: faArrowLeft, onClick: () => navigate(-1) },
-      { icon: faRefresh, onClick: handleRefresh }
+      { icon: faRefresh, onClick: () => loadMangaDetail(slug) }
     ],
     rightSection: [
       { icon: faBookmark, onClick: () => {} },
@@ -70,6 +63,12 @@ export function MangaDetailPage() {
     return <div className="text-red-500 text-center p-4">{error}</div>;
   }
 
+  // Utiliser les données de base de la collection pendant le chargement des détails
+  const displayManga = manga || collectionManga;
+  if (!displayManga) {
+    return <div className="text-center p-4">Manga not found</div>;
+  }
+
   return (
     <Layout onMangaClick={handleMangaClick} onAddMangaClick={handleAddMangaClick}>
       <Toolbar {...toolbarConfig} className="sticky top-16 z-10" />
@@ -78,8 +77,8 @@ export function MangaDetailPage() {
       <div className="relative h-[400px]">
         <div className="absolute inset-0">
           <img 
-            src={manga.imageUrl} 
-            alt={manga.title}
+            src={displayManga.imageUrl} 
+            alt={displayManga.title}
             className="w-full h-full object-cover"
           />
           <div className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent" />
@@ -88,23 +87,23 @@ export function MangaDetailPage() {
         <div className="relative h-full container mx-auto px-4 flex items-end pb-8">
           <div className="text-white">
             <div className="flex items-center gap-4 mb-2">
-              <h1 className="text-4xl font-bold">{manga.title}</h1>
+              <h1 className="text-4xl font-bold">{displayManga.title}</h1>
               <span className="px-2 py-1 bg-green-500 rounded-full text-sm">
-                {manga.status}
+                {displayManga.status}
               </span>
             </div>
             
             <div className="flex items-center gap-6 mb-4">
               <div className="flex items-center">
                 <FontAwesomeIcon icon={faStar} className="text-yellow-400 mr-2" />
-                <span>{manga.rating}</span>
+                <span>{displayManga.rating}</span>
               </div>
-              <span>{manga.publicationYear}</span>
-              <span>{manga.author}</span>
+              <span>{displayManga.publicationYear}</span>
+              <span>{displayManga.author}</span>
             </div>
             
             <div className="flex flex-wrap gap-2 mb-4">
-              {manga.genres.map((genre, index) => (
+              {displayManga.genres.map((genre, index) => (
                 <span 
                   key={index}
                   className="px-3 py-1 bg-gray-700/50 rounded-full text-sm"
@@ -115,69 +114,74 @@ export function MangaDetailPage() {
             </div>
             
             <p className="max-w-3xl text-gray-200">
-              {manga.description}
+              {displayManga.description}
             </p>
           </div>
         </div>
       </div>
 
-      {/* Chapters section */}
-      <div className="container mx-auto px-4 py-8">
-        {Array.from(manga.chapters.entries()).map(([volume, chapters]) => (
-          <div key={volume} className="mb-8">
-            <h2 className="text-xl font-semibold mb-4">
-              Volume {volume || 'Unknown'}
-              <span className="text-sm text-gray-500 ml-2">
-                ({chapters.length} chapters)
-              </span>
-            </h2>
-            
-            <div className="bg-white rounded-lg shadow overflow-hidden">
-              <table className="w-full">
-                <thead className="bg-gray-50">
-                  <tr>
-                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                      #
-                    </th>
-                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                      Title
-                    </th>
-                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                      Added
-                    </th>
-                    <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
-                      Actions
-                    </th>
-                  </tr>
-                </thead>
-                <tbody className="divide-y divide-gray-200">
-                  {chapters.map((chapter) => (
-                    <tr key={chapter.id} className="hover:bg-gray-50">
-                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
-                        {chapter.number}
-                      </td>
-                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
-                        {chapter.title}
-                      </td>
-                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                        {new Date(chapter.createdAt).toLocaleDateString()}
-                      </td>
-                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-right">
-                        <button className="text-gray-400 hover:text-gray-600 mx-2">
-                          <FontAwesomeIcon icon={faDownload} />
-                        </button>
-                        <button className="text-gray-400 hover:text-gray-600 mx-2">
-                          <FontAwesomeIcon icon={faEye} />
-                        </button>
-                      </td>
+      {/* Chapters section - only shown when full details are loaded */}
+      {manga && manga.chapters && (
+        <div className="container mx-auto px-4 py-8">
+          {Array.from(manga.chapters.entries()).map(([volume, chapters]) => (
+            <div key={volume} className="mb-8">
+              <h2 className="text-xl font-semibold mb-4">
+                Volume {volume || 'Unknown'}
+                <span className="text-sm text-gray-500 ml-2">
+                  ({chapters.length} chapters)
+                </span>
+              </h2>
+              
+              <div className="bg-white rounded-lg shadow overflow-hidden">
+                <table className="w-full">
+                  <thead className="bg-gray-50">
+                    <tr>
+                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        #
+                      </th>
+                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        Title
+                      </th>
+                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        Added
+                      </th>
+                      <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        Actions
+                      </th>
                     </tr>
-                  ))}
-                </tbody>
-              </table>
+                  </thead>
+                  <tbody className="divide-y divide-gray-200">
+                    {chapters.map((chapter) => (
+                      <tr key={chapter.id} className="hover:bg-gray-50">
+                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+                          {chapter.number}
+                        </td>
+                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+                          {chapter.title}
+                        </td>
+                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                          {new Date(chapter.createdAt).toLocaleDateString()}
+                        </td>
+                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-right">
+                          <button 
+                            onClick={() => navigate(`/reader/${chapter.id}`)}
+                            className="text-gray-400 hover:text-gray-600 mx-2"
+                          >
+                            <FontAwesomeIcon icon={faEye} />
+                          </button>
+                          <button className="text-gray-400 hover:text-gray-600 mx-2">
+                            <FontAwesomeIcon icon={faDownload} />
+                          </button>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
             </div>
-          </div>
-        ))}
-      </div>
+          ))}
+        </div>
+      )}
     </Layout>
   );
 }