Rename and cleanup

src/App.vue

@@ -12,9 +12,9 @@ const loginName = ref("");
 // const currentUser = ref(await getCurrentUser())
 const authListener = auth.onAuthStateChanged(function (user) {
   if (user) {
-    loginName.value = user.displayName || "Unknown name"; // if we have a user
+    loginName.value = user.displayName || "Unknown name"; 
   } else {
-    loginName.value = ""; // if we do not
+    loginName.value = "";
   }
 });
 

src/router/index.ts

@@ -20,7 +20,7 @@ const router = createRouter({
     {
       path: "/favorites",
       name: "favorites",
-      component: () => import("../views/Favorites.vue"),
+      component: () => import("../views/Wishlist.vue"),
       meta: {
         requiresAuth: true,
       },

src/types.ts

@@ -9,4 +9,8 @@ export interface IMovie {
 
 export interface IListeners {
   [key: string]: Unsubscribe;
-}
\ No newline at end of file
+}
+
+export interface IWishlist {
+  [key: string]: number;
+}

src/views/Favorites.vue

-<template>
-  <h1>Favorites</h1>
-  <!-- <div v-if="wishlist.length === 0"> -->
-  <h3>No movies in wishlist</h3>
-  <!-- <button @click="redirect">Go to movies</button> -->
-  <!-- </div> -->
-  <!-- <div v-else>DISPLAY WISHLIST</div> -->
-</template>
-<script setup lang="ts">
-import { getAuth } from "@firebase/auth";
-import {
-  getDatabase,
-  ref as fb_ref,
-  onValue,
-  get,
-  set,
-  child,
-} from "firebase/database";
-import { onBeforeUnmount, ref } from "vue";
-import { useRouter } from "vue-router";
-import { getUsername } from "../tools/databaseTools";
-import { IMovie } from "../types";
-
-
-const wishlist = ref<IMovie[]>([]);
-const db = getDatabase();
-const username = getUsername(getAuth().currentUser); //.onAuthStateChanged()
-const wishlistRef = fb_ref(db, `users/${username}`);
-// get(whishlistRef).then((snapshot) => {
-//   if (snapshot.exists())
-// })
-const redirect = () => useRouter().push({ name: "movies" });
-
-const moviesListener = onValue(wishlistRef, (snapshot) => {
-  if (!snapshot.exists()) {
-    console.log("SNAPSHOT DOES NOT EXIST");
-    // set(wishlistRef, {"wishlist"), {}).catch((e) => console.log(e));
-  } else {
-    console.log(`snapshot: ${snapshot.val()}`);
-    set(wishlistRef, null).catch((e) => console.log(e));
-    wishlist.value = snapshot.val();
-  }
-});
-
-onBeforeUnmount(() => {
-  moviesListener();
-});
-</script>

src/views/Wishlist.vue

+<template>
+  <h1>Favorites</h1>
+  <div v-if="wishlist.length === 0">
+    <h3>No movies in wishlist</h3>
+  </div>
+  <table v-else>
+    <thead>
+      <th>Title</th>
+      <th>Year</th>
+      <th>Genre</th>
+      <th>Add to wishlist</th>
+    </thead>
+    <tr v-for="movie in filteredMovies" :key="movie.id">
+      <td>{{ movie.title }}</td>
+      <td>{{ movie.year }}</td>
+      <td>{{ movie.genre }}</td>
+      <td><button @click="deleteWish(movie.id)">WISHLIST</button></td>
+    </tr>
+  </table>
+</template>
+<script setup lang="ts">
+import { useFilteredMovies, useMovies, useWishlist } from "../hooks";
+
+const { movies } = useMovies();
+const { wishlist, deleteWish } = useWishlist();
+const { filteredMovies } = useFilteredMovies(movies, wishlist, true);
+
+</script>