Working adding and deletion

src/hooks/useFilteredMovies.ts

 import { getDatabase, onValue, push, ref as fbRef } from "@firebase/database";
 import { ref, watch, onMounted, onBeforeUnmount, Ref } from "@vue/runtime-dom";
 import { getUsername } from "../tools/databaseTools";
-import { IListeners, IMovie } from "../types";
+import { IListeners, IMovie, IWishlist } from "../types";
 import { getAuth } from "@firebase/auth";
 import unsubscibeListeners from "../tools/unsubscribeListeners";
+import { computed } from "vue";
 
 export default function useFilteredMovies(
   movies: Ref<IMovie[]>,
-  wishlist: Ref<number[]>
+  wishlist: Ref<IWishlist>,
+  isWishlist: boolean
 ) {
-  const filteredMovies = ref<IMovie[]>([]);
+  //TODO: Implement loading state
+  const filteredMovies = ref<IMovie[]>();
   const listeners: IListeners = { wishlist: () => {} };
 
-  const nonWishList = ({ id }: IMovie) => !wishlist.value.includes(id);
+  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 excWishlist = ({ id }: IMovie) => !includesId(id);
+  const incWishlist = ({ id }: IMovie) => includesId(id);
+    // Object.values(wishlist.value).includes(id);
 
   const filterMovies = () => {
-    if (!wishlist.value || wishlist.value.length === 0) return;
-    filteredMovies.value = movies.value.filter(nonWishList);
+    console.log("wishlist", wishlist.value);
+    if (!wishlist.value || wishlist.value.length === 0) {
+      console.log("nothing to filter");
+      return;
+    }
+
+    filteredMovies.value = movies.value.filter(
+      isWishlist ? incWishlist : excWishlist
+    );
   };
 
   //TODO: add search query
 
-  watch(wishlist, filterMovies);
+  // Hack, shouldn't it change when ever the ref changed?
+  // So shouldn't have to excplitely use watch
+  watch(movies, filterMovies);
 
+  watch(wishlist, filterMovies);
   onBeforeUnmount(() => unsubscibeListeners(listeners));
 
   return { filteredMovies };

src/hooks/useMovies.ts

@@ -3,18 +3,15 @@ import { getAuth } from "@firebase/auth";
 import { ref } from "@vue/reactivity";
 import { IListeners, IMovie } from "../types";
 import { getDatabase, ref as fbRef } from "@firebase/database";
-import { onMounted, onBeforeUnmount, Ref } from "@vue/runtime-dom";
+import { onMounted, onBeforeUnmount, Ref, watch } from "@vue/runtime-dom";
 import { onValue } from "firebase/database";
 import unsubscibeListeners from "../tools/unsubscribeListeners";
 
 export default function useMovies() {
-  const movies = ref([] as IMovie[]);
-  //   const wishlist = ref<number[]>([]);
-  //   const username = getUsername(getAuth().currentUser); //.onAuthStateChanged()
-  // const username = ref("");
+  //TODO: Include Loading param
+  const movies = ref<IMovie[]>([]);
 
   const db = getDatabase();
-  //   const wishlistRef = fbRef(db, `users/${username}/wishlist`);
   const moviesRef = fbRef(db, "movies-list/");
   const listeners: IListeners = { movies: () => {} };
 
@@ -30,5 +27,6 @@ export default function useMovies() {
 
   onMounted(fetchMovies);
   onBeforeUnmount(() => unsubscibeListeners(listeners));
-  return { movies } as {movies:Ref<IMovie[]>};
+//   watch(movies, () => console.log("movies", movies.value));
+  return { movies };
 }

src/hooks/useWishlist.ts

-import { getDatabase, onValue, push, ref as fbRef } from "@firebase/database";
-import { ref, watch, onMounted, onBeforeUnmount, Ref } from "@vue/runtime-dom";
+import {
+  getDatabase,
+  onValue,
+  push,
+  ref as fbRef,
+  set,
+  update,
+} from "@firebase/database";
+import {
+  ref,
+  watch,
+  onMounted,
+  onBeforeUnmount,
+  Ref,
+  computed,
+} from "@vue/runtime-dom";
 import { getUsername } from "../tools/databaseTools";
-import { IListeners, IMovie } from "../types";
+import { IListeners, IMovie, IWishlist } from "../types";
 import { getAuth } from "@firebase/auth";
 import unsubscibeListeners from "../tools/unsubscribeListeners";
 
-export default function useWishlist(movies: Ref<IMovie[]>) {
-  const wishlist = ref<number[]>([]);
-  const username = getUsername(getAuth().currentUser); 
+export default function useWishlist() {
+  //TODO: Include Loading param
+  const wishlist = ref<IWishlist>({});
+  // const wishlist = ref<Record<string, number>[]>([]);
+  const username = getUsername(getAuth().currentUser);
 
   const db = getDatabase();
   const wishlistRef = fbRef(db, `users/${username}/wishlist`);
@@ -17,24 +33,43 @@ export default function useWishlist(movies: Ref<IMovie[]>) {
   const fetchWishlist = () => {
     listeners.wishlist = onValue(wishlistRef, (snapshot) => {
       if (snapshot.exists()) {
-        wishlist.value = Object.values(snapshot.val());
-        console.log(`New wishlist`);
-        console.log(snapshot.val());
+        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(() => Object.keys(wishlist.value).length === 0);
+
   const addWish = (id: number) => {
-    console.log("ADDED TO WISHLIST");
-    console.log(id);
+    console.log("ADDED TO WISHLIST", id);
     push(wishlistRef, id);
   };
 
-  const deleteWish = (id: number) => {
-    console.log("IMPLEMENT DELETE WISH")
-  }
-  return { wishlist, addWish, deleteWish };
+  //TODO: Fix not updating ui after deleting last wishlist
+  //TODO: Related to having the wishlist as object and not list?
+
+  //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");
+    }
+    // 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/views/Movies.vue

@@ -24,60 +24,22 @@
 <script setup lang="ts">
 import { useFilteredMovies, useMovies, useWishlist } from "../hooks";
 
-// const movies = ref<IMovie[]>([]);
-// const wishlist = ref<number[]>([]);
-// const username = getUsername(getAuth().currentUser); //.onAuthStateChanged()
-// const username = ref("");
-
-// const db = getDatabase();
-// const wishlistRef = fb_ref(db, `users/${username}/wishlist`);
-// const moviesRef = fb_ref(db, "movies-list/");
-// const listeners: IListeners = { wishlist: () => {}, movies: () => {} };
-
 const { movies } = useMovies();
-const { wishlist } = useWishlist(movies);
-const { filteredMovies } = useFilteredMovies(movies, wishlist);
-
-// onMounted(async () => {
-// listeners.movies = onValue(
-//   moviesRef,
-//   (snapshot) => {
-//     movies.value = snapshot.val();
-//   },
-//   { onlyOnce: true }
-// );
-// listeners.wishlist = onValue(wishlistRef, (snapshot) => {
-//   if (snapshot.exists()) {
-//     wishlist.value = Object.values(snapshot.val());
-//     console.log(`New wishlist`);
-//     console.log(snapshot.val());
-//   }
-// });
-// });
-
-// const filterMovies = () => {
-//   if (!wishlist.value || wishlist.value.length === 0) return;
-//   movies.value = movies.value.filter(({ id }) => !wishlist.value.includes(id));
-// };
-
-// watch(wishlist, filterMovies);
-
-// const addToWishlist = (id: number) => {
-//   console.log("ADDED TO WISHLIST");
-//   console.log(id);
-//   push(wishlistRef, id);
-// };
-
-// onBeforeUnmount(() => {
-//   Object.values(listeners).forEach((unsub) => unsub());
-// });
+const { wishlist, addWish } = useWishlist();
+const { filteredMovies } = useFilteredMovies(movies, wishlist, false);
 </script>
 
 <style>
+div {
+  display: flex;
+  flex-direction: column;
+  margin: auto;
+}
 table,
 th,
 td {
   border: 1px solid black;
   padding: 16px;
+  margin: 16px;
 }
 </style>

src/views/Wishlist.vue

 <template>
   <h1>Favorites</h1>
-  <div v-if="wishlist.length === 0">
+  <div v-if="isEmpty">
     <h3>No movies in wishlist</h3>
   </div>
   <table v-else>
@@ -22,7 +22,7 @@
 import { useFilteredMovies, useMovies, useWishlist } from "../hooks";
 
 const { movies } = useMovies();
-const { wishlist, deleteWish } = useWishlist();
+const { wishlist, deleteWish, isEmpty } = useWishlist();
 const { filteredMovies } = useFilteredMovies(movies, wishlist, true);
-
+console.log("No wishes", isEmpty.value);
 </script>