Cleanup and refactor wishlist to array

src/hooks/useWishlist.ts

@@ -5,31 +5,28 @@ import { IListeners, IMovie, IWishlist } from "../types";
 import { getAuth } from "@firebase/auth";
 import unsubscibeListeners from "../tools/unsubscribeListeners";
 
+export type TWish = [string, number];
+
 export default function useWishlist() {
   //TODO: Include Loading param
-  const wishlist = ref<IWishlist>({});
-  // const wishlist = ref<Record<string, number>[]>([]);
+  const wishlist = ref<TWish[]>([]);
   const username = getUsername(getAuth().currentUser);
 
   const db = getDatabase();
   const wishlistRef = fbRef(db, `users/${username}/wishlist`);
   const listeners: IListeners = { wishlist: () => {} };
 
-  // Easier to simply overwrite entire wishlist in state
-  // Maybe just map to array so it is okay?
   const fetchWishlist = () => {
+    // Guaranteed to have array of wishes
     listeners.wishlist = onValue(wishlistRef, (snapshot) => {
-      wishlist.value = snapshot.val();
+      wishlist.value = Object.entries(snapshot.val() || {});
     });
   };
 
   onMounted(fetchWishlist);
   onBeforeUnmount(() => unsubscibeListeners(listeners));
 
-  // const isEmpty = computed(() => wishlist.value.length === 0);
-  const isEmpty = computed(
-    () => wishlist.value == null || Object.keys(wishlist.value).length === 0
-  );
+  const isEmpty = computed(() => wishlist.value.length === 0);
 
   const addWish = (id: number) => {
     push(wishlistRef, id);
@@ -37,14 +34,11 @@ 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) {
+    if (wishlist.value.length === 0) {
       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)
-    );
+    const newList = Object.fromEntries(wishlist.value.filter(([, id]) => deleteId !== id));
     set(wishlistRef, newList);
   };
   return { wishlist, isEmpty, addWish, deleteWish };

src/hooks/useWishlistMovies.ts

@@ -5,36 +5,30 @@ import { IListeners, IMovie, IWishlist } from "../types";
 import { getAuth } from "@firebase/auth";
 import unsubscibeListeners from "../tools/unsubscribeListeners";
 import { computed } from "vue";
+import type { TWish } from "./useWishlist";
 
 export default function useFilteredMovies(
   movies: Ref<IMovie[]>,
-  wishlist: Ref<IWishlist>, //Ref<Record<string, number>[]>,
+  wishlist: Ref<TWish[]>,
   isWishlist: boolean
 ) {
   //TODO: Implement loading state
-  const wishlistFilteredMovies = ref<IMovie[]>(movies.value);
+  const wishlistFilteredMovies = ref<IMovie[]>([]);
   const listeners: IListeners = { wishlist: () => {} };
 
-  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 includesId = (id: number) => wishlist.value.some(([key, wishId]) => wishId === id);
 
   const excWishlist = ({ id }: IMovie) => !includesId(id);
   const incWishlist = ({ id }: IMovie) => includesId(id);
 
   const filterMovies = () => {
     if (!wishlist.value || wishlist.value.length === 0) {
+      wishlistFilteredMovies.value = movies.value;
       return console.log("nothing to filter");
     }
     wishlistFilteredMovies.value = movies.value.filter(isWishlist ? incWishlist : excWishlist);
   };
 
-  // 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));
 

src/services/MovieService.ts

-import { get, getDatabase, ref } from "@firebase/database";
-
-// const moviesRef = ref(db, "movies-list/");
-// const wishlistRef = ref(db, `users/${username}/whislist`);
-class MovieService{
-    public db = getDatabase()
-    public moviesRef = ref(this.db, "movies-list")
-    public user = null
-    
-    // const authListener = onAuth
-
-    async getMovies() {
-        return await get(this.moviesRef)
-    }
-
-    removeListeners() {
-        //TODO: CLEANUP FUNCTION TO BE CALLED
-    }
-
-}// const username = await getUsername();
-// console.log(username)
\ No newline at end of file