fix: correct handling of router links in profile for selected favorit…

…es and removeFavorite operations.
imprvhub · May 8, 2024 · e29f415 · e29f415
1 parent 6d4a9ac
commit e29f415
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 12 deletions.
diff --git a/components/Hero.vue b/components/Hero.vue
@@ -21,7 +21,6 @@
             :alt="name">
         </div>
       </div>
-
       <div :class="$style.pane">
         <transition
           appear
@@ -104,7 +103,7 @@
                   />
                 </svg>
               </span>
-              <span class="txt">Add To Favorites</span>
+              <span class="txt">{{ isFavorite ? 'Remove from Favorites' : 'Add to Favorites' }}</span>
             </button>
 
           </div>
@@ -121,7 +120,7 @@
 </template>
 <script>
 import supabase from '@/services/supabase';
-import { name, stars, yearStart, cert, backdrop, poster, trailer } from '~/mixins/Details';
+import { name, stars, yearStart, cert, backdrop, poster, trailer, id  } from '~/mixins/Details';
 import Modal from '~/components/Modal';
 
 export default {
@@ -137,6 +136,7 @@ export default {
     poster,
     backdrop,
     trailer,
+    id,
   ],
 
   props: {
@@ -153,10 +153,12 @@ export default {
       isFavorite: false,
       hasAccessToken: false,
 
+
       nameForDb: null,
       starsForDb: null,
       posterForDb: null,
       yearStartForDb: null,
+      idForDb: null,
     };
   },
 
@@ -183,6 +185,7 @@ export default {
     this.nameForDb = this.name;
     this.starsForDb = this.stars;
     this.yearStartForDb = this.yearStart;
+    this.idForDb = this.id;
   },
 
   methods: {
@@ -236,6 +239,7 @@ export default {
       }
     },
 
+
     openModal() {
       this.modalVisible = true;
     },
@@ -298,16 +302,22 @@ export default {
       }
     },
 
-
     removeFavorite(favoritesJson, favId) {
       const updatedFavorites = { ...favoritesJson };
       for (const key in updatedFavorites) {
-        updatedFavorites[key] = updatedFavorites[key].filter(id => String(id) !== favId && !String(id).endsWith(favId));
+        if (Array.isArray(updatedFavorites[key])) {
+          updatedFavorites[key] = updatedFavorites[key].filter(item => {
+            if (typeof item === 'object') {
+              return Object.keys(item)[0] !== favId;
+            } else {
+              return item !== favId;
+            }
+          });
+        }
       }
       return updatedFavorites;
     },
 
-
     addFavorite(favoritesJson, favId) {
       const { type, id } = this.parseFavId(favId);
       const category = type === 'movie' ? 'movies' : 'tv';
@@ -345,6 +355,7 @@ export default {
                 starsForDb: this.starsForDb,
                 yearStartForDb: this.yearStartForDb,
                 posterForDb: this.posterForDb,
+                idForDb: this.id,
               }
             }
           };
@@ -356,6 +367,7 @@ export default {
               starsForDb: this.starsForDb,
               yearStartForDb: this.yearStartForDb,
               posterForDb: this.posterForDb,
+              idForDb: this.id,
             };
           } else {
             favoritesJson[category][index].push({
@@ -365,6 +377,7 @@ export default {
                   starsForDb: this.starsForDb,
                   yearStartForDb: this.yearStartForDb,
                   posterForDb: this.posterForDb,
+                  idForDb: this.id,
                 }
               }
             });
@@ -378,6 +391,7 @@ export default {
               starsForDb: this.starsForDb,
               yearStartForDb: this.yearStartForDb,
               posterForDb: this.posterForDb,
+              idForDb: this.id,
             }
           }
         });

diff --git a/mixins/Details.js b/mixins/Details.js
@@ -1,5 +1,13 @@
 import { apiImgUrl } from '~/api';
 
+export const id =  {
+  computed: {
+    id () {
+      return this.item.id;
+    }
+  }
+
+}
 
 export const name = {
   computed: {

diff --git a/pages/profile/index.vue b/pages/profile/index.vue
@@ -6,10 +6,10 @@
       <br>
       <div v-if="moviesFetched.length > 0 || tvFetched.length > 0">
         <div class="column">
-          <h2>Películas Favoritas</h2>
+          <h2 v-if="moviesFetched.length > 0" class="text-white text-center">Favorite Movies</h2>
           <div class="movie-grid">
             <div v-for="(movie, index) in moviesFetched" :key="index" class="movie-card">
-              <a :href="'https://sonarflix.netlify.app/' + movieKey">
+              <a :href="'https://sonarflix.netlify.app/movie/' + movie.details.idForDb">
                 <img :src="movie.details.posterForDb" alt="Movie Poster" class="poster" />
               </a>
               <p>{{ movie.details.nameForDb }}</p>
@@ -20,10 +20,10 @@
         </div>
         <br>
         <div class="column">
-          <h2>Programas de TV Favoritos</h2>
+          <h2 v-if="tvFetched.length > 0" class="text-white text-center">Favorite TV Shows</h2>
           <div class="tv-show-grid">
             <div v-for="(tvShow, index) in tvFetched" :key="index" class="tv-show-card">
-              <a :href="'https://sonarflix.netlify.app/' + tvKey">
+              <a :href="'https://sonarflix.netlify.app/tv/' + tvShow.details.idForDb">
                 <img :src="tvShow.details.posterForDb" alt="TV Show Poster" class="poster" />
               </a>
               <p>{{ tvShow.details.nameForDb }}</p>
@@ -34,12 +34,12 @@
         </div>
       </div>
       <div v-else>
-        <p>No hay favoritos o lista agregada hasta el momento.</p>
+        <p>No favorites or list added yet.</p>
       </div>
       <br>
       <div class="button-container">
         <button class="button button--icon" @click="signOut">
-          <span class="txt">Cerrar sesión</span>
+          <span class="txt">Log out</span>
         </button>
       </div>
     </section>