toggle favorite inspiration working + tab my favorite

public/content/inspirations/1_shape-of-the-nature/20878a95a67b25e122365f351f1ec1a7.jpg.txt

@@ -2,7 +2,7 @@ Alt:
 
 ----
 
-Favoriteforusers: 
+Favoriteforusers: - user://HfuumN8s
 
 ----
 

public/content/inspirations/1_shape-of-the-nature/37a038883c87973036232aa0e43f6da2.png.txt

@@ -1,3 +1,11 @@
+Alt: 
+
+----
+
+Favoriteforusers: 
+
+----
+
 Description: 
 
 ----

public/content/inspirations/1_shape-of-the-nature/d82f18573c439d6edd434ffca62471a7.png.txt

@@ -2,7 +2,10 @@ Alt:
 
 ----
 
-Favoriteforusers: - user://WWjXgPWk
+Favoriteforusers:
+
+- user://WWjXgPWk
+- user://HfuumN8s
 
 ----
 

public/site/config/routes/toggle-favorite.php

@@ -28,10 +28,10 @@ return [
       $array = $favoriteForUsers->toArray();
       $yaml = Data::encode($array, 'yaml');
 
-      $file->update([
+      $newFile = $file->update([
         'favoriteForUsers' => $yaml
       ]);
       
-      return json_encode('Image ' . $action . ' favoris de l\'utilisateur ' . $user->email() . '.');
+      return json_encode($newFile->favoriteForUsers()->value());
   }
 ];

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
+  api.fetchRoute(toggleFavoriteRoute, "POST", data).then((newValue) => {
-    .fetchRoute(toggleFavoriteRoute, "POST", data)
+    item.favoriteForUsers = newValue;
-    .then((res) => console.log(res));
+  });
 });
 </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;