Cleanup + Add redirect

src/hooks/useFilteredMovies.ts

@@ -8,32 +8,27 @@ import { computed } from "vue";
 
 export default function useFilteredMovies(
   movies: Ref<IMovie[]>,
-  wishlist: Ref<IWishlist>,
+  wishlist: Ref<IWishlist>, //Ref<Record<string, number>[]>,
   isWishlist: boolean
 ) {
   //TODO: Implement loading state
-  const filteredMovies = ref<IMovie[]>();
+  const filteredMovies = ref<IMovie[]>(movies.value);
   const listeners: IListeners = { wishlist: () => {} };
 
-  console.log(movies.value, wishlist.value);
-  //   const { value: wishIds } = computed(() => Object.values(wishlist.value));
-  //   const excWishlist = ({ id }: IMovie) => !wishIds.includes(id);
-  //   const incWishlist = ({ id }: IMovie) => wishIds.includes(id);
-//   const includesId = (id: number) => wishlist.value.map((wish) => Object.values(wish)[0]).includes(id);
-  const includesId = (id: number) => Object.values(wishlist.value).includes(id);
+  const includesId = (id: number) => {
+    // if (Array.isArray(wishlist.value))
+    //   return wishlist.value.map((wish) => Object.values(wish)[0]).includes(id);
+    return Object.values(wishlist.value).includes(id);
+  };
 
 
   const excWishlist = ({ id }: IMovie) => !includesId(id);
   const incWishlist = ({ id }: IMovie) => includesId(id);
-    // Object.values(wishlist.value).includes(id);
 
   const filterMovies = () => {
-    console.log("wishlist", wishlist.value);
     if (!wishlist.value || wishlist.value.length === 0) {
-      console.log("nothing to filter");
-      return;
+      return console.log("nothing to filter");
     }
-
     filteredMovies.value = movies.value.filter(
       isWishlist ? incWishlist : excWishlist
     );

src/hooks/useMovies.ts

@@ -27,6 +27,6 @@ export default function useMovies() {
 
   onMounted(fetchMovies);
   onBeforeUnmount(() => unsubscibeListeners(listeners));
-//   watch(movies, () => console.log("movies", movies.value));
+
   return { movies };
 }

src/hooks/useWishlist.ts

@@ -33,24 +33,21 @@ export default function useWishlist() {
   const fetchWishlist = () => {
     listeners.wishlist = onValue(wishlistRef, (snapshot) => {
       if (snapshot.exists()) {
+        // wishlist.value = Object.entries(snapshot.val()).map(([key, value]) => ({
+        //   [key]: value as number,
+        // }));
         wishlist.value = snapshot.val();
-        // wishlist.value = Object.values(snapshot.val());
-        console.log(`New wishlist`, wishlist.value);
-        // console.log(snapshot.val());
       }
     });
   };
 
-  // const wishIds = watch(wishlist, () => Object.values(wishlist.value) as number[]);
-  // console.log({wishIds: wishIds.value})
-
   onMounted(fetchWishlist);
   onBeforeUnmount(() => unsubscibeListeners(listeners));
 
+  // const isEmpty = computed(() => wishlist.value.length === 0);
   const isEmpty = computed(() => Object.keys(wishlist.value).length === 0);
 
   const addWish = (id: number) => {
-    console.log("ADDED TO WISHLIST", id);
     push(wishlistRef, id);
   };
 
@@ -60,15 +57,15 @@ export default function useWishlist() {
   //TODO: Lookinto if all mounting/unmounting can happen in the views for better loading?
   const deleteWish = (deleteId: number) => {
     if (Object.values(wishlist).length === 0) {
-      console.log("No wishlist, shoult not be able to delete anything");
+      return console.log("No wishlist, shoult not be able to delete anything");
     }
+
     // const newList = wishlist.value.filter(({ id }) => deleteId !== id);
     const newList = Object.fromEntries(
       Object.entries(wishlist.value).filter(
         ([_, movieId]) => movieId !== deleteId
       )
     );
-    console.log("newlist:", newList);
     set(wishlistRef, newList);
   };
   return { wishlist, isEmpty, addWish, deleteWish };

src/tools/databaseTools.ts

@@ -13,14 +13,7 @@ export function getCurrentUser(): Promise<User | null> {
   });
 }
 
-// export async function getUsername(): Promise<string | null | undefined> {
-//   return (await getCurrentUser())?.displayName
-//     ?.toLowerCase()
-//     .split(" ")
-//     .join("_");
-// }
-
 export function getUsername(user: User | null) {
-  if (!user) return ""
-  return user.displayName!.toLowerCase().split(" ").join("_")
+  if (!user) return "";
+  return user.displayName!.toLowerCase().split(" ").join("_");
 }

src/views/Wishlist.vue

@@ -2,6 +2,7 @@
   <h1>Favorites</h1>
   <div v-if="isEmpty">
     <h3>No movies in wishlist</h3>
+    <button @click="redirect">Add new movies</button>
   </div>
   <table v-else>
     <thead>
@@ -19,10 +20,14 @@
   </table>
 </template>
 <script setup lang="ts">
+import { useRouter } from "vue-router";
 import { useFilteredMovies, useMovies, useWishlist } from "../hooks";
 
 const { movies } = useMovies();
 const { wishlist, deleteWish, isEmpty } = useWishlist();
 const { filteredMovies } = useFilteredMovies(movies, wishlist, true);
-console.log("No wishes", isEmpty.value);
+const router = useRouter();
+
+const redirect = () => router.push({ name: "movies" });
+// console.log("No wishes", isEmpty.value);
 </script>