feat: page MangaDetails en vue.js

assets/vue/app/domain/manga/application/store/mangaStore.js

@@ -1,72 +1,89 @@
 import { defineStore } from 'pinia';
-import { ref } from 'vue';
 import { ApiMangaRepository } from '../../infrastructure/api/apiMangaRepository';
 
 const mangaRepository = new ApiMangaRepository();
 
-export const useMangaStore = defineStore('manga', () => {
-  const collection = ref(null);
-  const detailedMangas = ref({});
-  const loading = ref(false);
-  const error = ref(null);
-  const isBackgroundLoading = ref(false);
+export const useMangaStore = defineStore('manga', {
+  state: () => ({
+    // État pour la collection
+    collection: null,
+    // État pour les détails
+    currentManga: null,
+    chapters: [],
+    loading: false,
+    error: null,
+    isBackgroundLoading: false
+  }),
 
-  const loadCollection = async () => {
-    if (loading.value) return;
-    
-    loading.value = true;
-    error.value = null;
-    
-    try {
-      collection.value = await mangaRepository.getCollection();
-    } catch (err) {
-      error.value = err.message;
-      console.error('Failed to load collection:', err);
-    } finally {
-      loading.value = false;
+  actions: {
+    // Actions pour la collection
+    async loadCollection() {
+      if (this.loading) return;
+      
+      console.log('Starting loadCollection...');
+      this.loading = true;
+      this.error = null;
+      
+      try {
+        console.log('Fetching collection from repository...');
+        this.collection = await mangaRepository.getCollection();
+        console.log('Collection loaded:', this.collection);
+      } catch (err) {
+        this.error = err.message;
+        console.error('Failed to load collection:', err);
+      } finally {
+        this.loading = false;
+        console.log('loadCollection finished. Loading:', this.loading);
+      }
+    },
+
+    async refreshCollectionInBackground() {
+      if (this.isBackgroundLoading) return;
+      
+      this.isBackgroundLoading = true;
+      
+      try {
+        const updatedCollection = await mangaRepository.getCollection();
+        this.collection = updatedCollection;
+      } catch (err) {
+        console.error('Failed to refresh collection:', err);
+      } finally {
+        this.isBackgroundLoading = false;
+      }
+    },
+
+    // Actions pour les détails du manga
+    async fetchMangaDetails(mangaId) {
+      this.loading = true;
+      this.error = null;
+      try {
+        this.currentManga = await mangaRepository.getMangaById(mangaId);
+      } catch (error) {
+        this.error = error.message;
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    async fetchMangaChapters(mangaId) {
+      this.loading = true;
+      this.error = null;
+      try {
+        const response = await mangaRepository.getChapters(mangaId);
+        console.log('API Response:', response); // Pour déboguer
+        this.chapters = Array.isArray(response) ? response : 
+                       (response.items ? response.items : []);
+      } catch (error) {
+        this.error = error.message;
+        console.error('Failed to fetch chapters:', error);
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    clearCurrentManga() {
+      this.currentManga = null;
+      this.chapters = [];
     }
-  };
-
-  const refreshCollectionInBackground = async () => {
-    if (isBackgroundLoading.value) return;
-    
-    isBackgroundLoading.value = true;
-    
-    try {
-      const updatedCollection = await mangaRepository.getCollection();
-      collection.value = updatedCollection;
-    } catch (err) {
-      console.error('Failed to refresh collection:', err);
-    } finally {
-      isBackgroundLoading.value = false;
-    }
-  };
-
-  const loadMangaDetail = async (slug) => {
-    if (detailedMangas.value[slug]) return;
-    
-    try {
-      const manga = await mangaRepository.getMangaBySlug(slug);
-      detailedMangas.value[slug] = manga;
-    } catch (err) {
-      console.error(`Failed to load manga details for ${slug}:`, err);
-      throw err;
-    }
-  };
-
-  const getMangaFromCollection = (slug) => {
-    return collection.value?.items.find(manga => manga.slug === slug);
-  };
-
-  return {
-    collection,
-    detailedMangas,
-    loading,
-    error,
-    isBackgroundLoading,
-    loadCollection,
-    refreshCollectionInBackground,
-    loadMangaDetail,
-    getMangaFromCollection
-  };
+  }
 });