Commit 41db7ef2 authored by erlendoeien's avatar erlendoeien
Browse files

Working adding and deletion

parent e1e49436
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 };
......
......@@ -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 };
}
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 };
}
......@@ -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>
<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>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment