toggle favorite inspiration working + tab my favorite

src/components/inspirations/Image.vue

@@ -1,5 +1,9 @@
 <template>
-  <figure class="flex" :style="'--rows: ' + (index % 2 ? 2 : 3)">
+  <figure
+    v-if="currentTab === 'all' || isFavorite"
+    class="flex"
+    :style="'--rows: ' + (index % 2 ? 2 : 3)"
+  >
     <button
       class="favorite"
       aria-label="Ajouter aux favoris"
@@ -34,6 +38,7 @@ import { useApiStore } from "../../stores/api";
 const { item, inspirationUri } = defineProps({
   item: Object,
   inspirationUri: String,
+  currentTab: String,
 });
 
 const toggleFavoriteRoute = "/toggle-favorite.json";
@@ -47,9 +52,9 @@ watch(isFavorite, (value) => {
     userUuid: user.uuid,
     inspirationUri,
   };
-  api
-    .fetchRoute(toggleFavoriteRoute, "POST", data)
-    .then((res) => console.log(res));
+  api.fetchRoute(toggleFavoriteRoute, "POST", data).then((newValue) => {
+    item.favoriteForUsers = newValue;
+  });
 });
 </script>
 <style scoped>

src/views/Inspirations.vue

@@ -9,12 +9,16 @@
       <section :id="currentTab" class="inspiration">
         <Header :inspiration="currentInspiration" />
         <div class="grid masonry">
-          <Image
+          <template
             v-for="(item, index) in currentInspiration.media"
             :key="item.id"
-            :item="item"
-            :inspirationUri="currentInspiration.uri"
-          />
+          >
+            <Image
+              :item="item"
+              :inspirationUri="currentInspiration.uri"
+              :currentTab="currentTab"
+            />
+          </template>
         </div>
       </section>
     </main>
@@ -27,12 +31,14 @@ import Selector from "../components/inspirations/Selector.vue";
 import Header from "../components/inspirations/Header.vue";
 import Tabs from "../components/Tabs.vue";
 import Image from "../components/inspirations/Image.vue";
+import { useUserStore } from "../stores/user";
 import { ref, computed } from "vue";
 
 const { data } = defineProps({
   data: Object,
 });
 
+const user = useUserStore().user;
 const currentTab = ref("all");
 const tabs = computed(() => {
   return [
@@ -47,13 +53,18 @@ const tabs = computed(() => {
       label: "Mes Favoris",
       id: "favorites",
       icon: "favorite",
-      count: 6, // TODO: dynamiser (favorites.count)
+      count: favoriteImages.value.length, // TODO: dynamiser (favorites.count)
       isActive: currentTab.value === "favorites",
     },
   ];
 });
 
-const currentInspiration = data.inspirations[0];
+const currentInspiration = ref(data.inspirations[0]);
+const favoriteImages = computed(() => {
+  return currentInspiration.value.media.filter(
+    (image) => image.favoriteForUsers?.includes(user.uuid) ?? false
+  );
+});
 
 function changeTab(newValue) {
   currentTab.value = newValue;