feat: intégration de @tanstack/vue-query pour la gestion des requêtes dans l'application Vue, ajout de nouveaux composables pour les chapitres et les détails des mangas, et mise à jour du store pour une meilleure gestion des états de chargement et d'erreur

assets/vue/app/domain/manga/presentation/pages/MangaDetails.vue

@@ -3,84 +3,68 @@
         <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
     </div>
 
-    <div v-else-if="error" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
-        {{ error }}
+    <div v-else-if="error && !currentManga" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
+        {{ error.message || 'Une erreur est survenue.' }}
     </div>
 
     <div v-else-if="currentManga" class="relative">
+        <div v-if="isRefreshing" class="absolute top-2 right-2 text-gray-500">
+            <ArrowPathIcon class="h-5 w-5 animate-spin" />
+        </div>
         <MangaHeader :manga="currentManga" />
         <MangaVolumeList :volumes="volumes" :manga-slug="currentManga.slug" />
     </div>
+
+    <div v-else class="text-center text-gray-500 py-10"> Aucun manga sélectionné ou trouvé. </div>
 </template>
 
 <script setup>
-    import { computed, onMounted, onUnmounted, watch } from 'vue';
+    import { computed, onUnmounted, watch } from 'vue';
     import { useRoute } from 'vue-router';
-    import { useMangaStore } from '../../application/store/mangaStore';
-    import { storeToRefs } from 'pinia';
+    import { ArrowPathIcon } from '@heroicons/vue/24/outline';
+
+    import { useMangaDetails } from '../composables/useMangaDetails';
+    import { useMangaVolumes } from '../composables/useMangaVolumes';
+
     import MangaHeader from '../components/MangaHeader.vue';
     import MangaVolumeList from '../components/MangaVolumeList.vue';
 
+    import { useMangaStore } from '../../application/store/mangaStore';
+
     const route = useRoute();
-    const store = useMangaStore();
-    const { currentManga, chapters, loading, error } = storeToRefs(store);
+    const mangaStore = useMangaStore();
 
-    const volumes = computed(() => {
-        if (!chapters.value) return [];
+    const mangaId = computed(() => route.params.id || null);
 
-        const chaptersArray = Array.isArray(chapters.value)
-            ? chapters.value
-            : chapters.value.items
-            ? chapters.value.items
-            : [];
+    const {
+        data: currentManga,
+        isLoading: isLoadingDetails,
+        isFetching: isRefreshingDetails,
+        error: errorDetails
+    } = useMangaDetails(mangaId);
 
-        const volumeMap = new Map();
+    const {
+        volumes,
+        isLoading: isLoadingVolumes,
+        isFetching: isRefreshingVolumes,
+        error: errorVolumes
+    } = useMangaVolumes(mangaId);
 
-        chaptersArray.forEach(chapter => {
-            const volumeNumber = chapter.volume || 'Unknown';
-            if (!volumeMap.has(volumeNumber)) {
-                volumeMap.set(volumeNumber, {
-                    number: volumeNumber,
-                    downloadedChapter: 0,
-                    totalChapter: 0,
-                    chapters: []
-                });
-            }
+    const loading = computed(() => isLoadingDetails.value || isLoadingVolumes.value);
+    const isRefreshing = computed(() => isRefreshingDetails.value || isRefreshingVolumes.value);
+    const error = computed(() => errorDetails.value || errorVolumes.value);
 
-            volumeMap.get(volumeNumber).chapters.push({
-                ...chapter,
-                isAvailable: Boolean(chapter.isAvailable)
-            });
-        });
-
-        for (const volume of volumeMap.values()) {
-            volume.downloadedChapter = volume.chapters.filter(c => c.isAvailable).length;
-            volume.totalChapter = volume.chapters.length;
-        }
-
-        return Array.from(volumeMap.values()).sort((a, b) => b.number - a.number);
-    });
-
-    const loadData = async () => {
-        const mangaId = route.params.id;
-        await Promise.all([store.fetchMangaDetails(mangaId), store.fetchMangaChapters(mangaId)]);
-    };
-
-    // Ajouter le watcher sur l'ID de la route
     watch(
-        () => route.params.id,
-        (newId, oldId) => {
-            if (newId !== oldId) {
-                loadData();
+        mangaId,
+        newId => {
+            if (newId) {
+                mangaStore.setCurrentMangaId(newId);
             }
-        }
+        },
+        { immediate: true }
     );
 
-    onMounted(() => {
-        loadData();
-    });
-
     onUnmounted(() => {
-        store.clearCurrentManga();
+        mangaStore.clearCurrentMangaFocus();
     });
 </script>