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

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

@@ -1,10 +1,9 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { MangaGrid } from '../components/MangaGrid.jsx';
 import { Layout } from '../components/Layout/Layout.jsx';
 import { Toolbar } from '../components/Toolbar/Toolbar.jsx';
-import { MockMangaRepository } from '../../infrastructure/api/mockMangaRepository.js';
-import { GetMangaCollection } from '../../application/useCases/getMangaCollection.js';
+import { useManga } from '../context/MangaContext.jsx';
 import { 
   faRefresh, 
   faSearch,
@@ -14,31 +13,13 @@ import {
   faFilter
 } from '@fortawesome/free-solid-svg-icons';
 
-const mangaRepository = new MockMangaRepository();
-const getMangaCollection = new GetMangaCollection(mangaRepository);
-
 export function HomePage() {
   const navigate = useNavigate();
-  const [mangaCollection, setMangaCollection] = useState(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
-
-  const handleRefresh = async () => {
-    setLoading(true);
-    try {
-      const collection = await getMangaCollection.execute(1);
-      setMangaCollection(collection);
-    } catch (err) {
-      setError('Failed to load mangas');
-      console.error(err);
-    } finally {
-      setLoading(false);
-    }
-  };
+  const { collection, loading, error, loadCollection } = useManga();
 
   useEffect(() => {
-    handleRefresh();
-  }, []);
+    loadCollection();
+  }, [loadCollection]);
 
   const handleMangaClick = (slug) => {
     navigate(`/manga/${slug}`);
@@ -50,7 +31,7 @@ export function HomePage() {
 
   const toolbarConfig = {
     leftSection: [
-      { icon: faRefresh, label: 'Refresh', onClick: handleRefresh },
+      { icon: faRefresh, label: 'Refresh', onClick: loadCollection },
       { icon: faSearch, label: 'Search', onClick: () => {} }
     ],
     rightSection: [
@@ -73,7 +54,7 @@ export function HomePage() {
     <Layout onMangaClick={handleMangaClick} onAddMangaClick={handleAddMangaClick}>
       <Toolbar {...toolbarConfig} className="sticky top-16 z-10" />
       <div className="container mx-auto px-4">
-        <MangaGrid mangas={mangaCollection.items} onMangaClick={handleMangaClick} />
+        <MangaGrid mangas={collection?.items || []} onMangaClick={handleMangaClick} />
       </div>
     </Layout>
   );