Commit 004a8759 authored by erlendoeien's avatar erlendoeien
Browse files

Converted wishlist to Firestore + cleanup

parent 2438260f
import { computed, ref, Ref, watch } from "@vue/runtime-dom";
import { IMovie } from "../types";
import _debounce from "lodash/debounce";
export default function useMatchedMovies(movies: Ref<IMovie[]>) {
const searchQuery = ref("");
......
import { getDatabase, onValue, push, ref as fbRef, set } from "@firebase/database";
import { onSnapshot, getFirestore, doc, setDoc } from "firebase/firestore";
import { ref, onMounted, onBeforeUnmount, computed } from "@vue/runtime-dom";
import { getUsername } from "../tools/databaseTools";
import { IListeners } from "../types";
import { getAuth } from "@firebase/auth";
import unsubscibeListeners from "../tools/unsubscribeListeners";
export type TWish = [string, number];
interface IWishlistUser {
wishlist: number[];
}
export default function useWishlist() {
const wishlist = ref<TWish[]>([]);
const wishlist = ref<number[]>([]);
const username = getUsername(getAuth().currentUser);
const db = getDatabase();
const wishlistRef = fbRef(db, `users/${username}/wishlist`);
const db = getFirestore();
const wishlistRef = doc(db, "users", username);
const listeners: IListeners = { wishlist: () => {} };
const fetchWishlist = () => {
// Guaranteed to have array of wishes
listeners.wishlist = onValue(wishlistRef, (snapshot) => {
wishlist.value = Object.entries(snapshot.val() || {});
listeners.wishlist = onSnapshot(wishlistRef, (querySnapshot) => {
if (querySnapshot.exists()) {
wishlist.value = (querySnapshot.data() as IWishlistUser).wishlist;
} else {
setDoc(wishlistRef, { wishlist: [] });
}
});
};
const isEmpty = computed(() => wishlist.value.length === 0);
const addWish = (id: number) => {
push(wishlistRef, id);
setDoc(wishlistRef, { wishlist: [...wishlist.value, id] });
};
const deleteWish = (deleteId: number) => {
if (wishlist.value.length === 0) {
return console.log("No wishlist, shoult not be able to delete anything");
}
const newList = Object.fromEntries(wishlist.value.filter(([, id]) => deleteId !== id));
set(wishlistRef, newList);
const newList = wishlist.value.filter((id) => id !== deleteId);
setDoc(wishlistRef, { wishlist: newList });
};
onMounted(fetchWishlist);
......
import { ref, watch, onBeforeUnmount, Ref, ComputedRef } from "@vue/runtime-dom";
import { IListeners, IMovie } from "../types";
import unsubscibeListeners from "../tools/unsubscribeListeners";
import type { TWish } from "./useWishlist";
export default function useFilteredMovies(
movies: ComputedRef<IMovie[]>,
wishlist: Ref<TWish[]>,
wishlist: Ref<number[]>,
isWishlist: boolean
) {
const wishlistFilteredMovies = ref<IMovie[]>([]);
const listeners: IListeners = { wishlist: () => {} };
const includesId = (id: number) => wishlist.value.some(([key, wishId]) => wishId === id);
const includesId = (id: number) => wishlist.value.includes(id);
const excWishlist = ({ id }: IMovie) => !includesId(id);
const incWishlist = ({ id }: IMovie) => includesId(id);
......@@ -19,12 +18,12 @@ export default function useFilteredMovies(
const filterMovies = () => {
if (!wishlist.value || wishlist.value.length === 0) {
wishlistFilteredMovies.value = movies.value;
return console.log("nothing to filter");
return;
}
wishlistFilteredMovies.value = movies.value.filter(isWishlist ? incWishlist : excWishlist);
};
// Shouldn't strictly be necessary for movies, but seems like there is something wrong with
// Shouldn't strictly be necessary for movies, but seems like there is something wrong with
// my understanding of passing the ref: https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats
watch([wishlist, movies], filterMovies);
......
......@@ -8,7 +8,7 @@
/>
<div>
<Table :data="filteredMovies" :loading="loading" :adminFunc="addWish" :isWishlist="false" />
<Button v-if="hasMore" class="mx-auto " @click="loadMore">Load more</Button>
<Button v-if="hasMore" class="mx-auto" @click="loadMore">Load more</Button>
</div>
</TableView>
</template>
......@@ -29,6 +29,3 @@ const {
moviesMatchingSearchQuery: filteredMovies,
} = useMatchedMovies(wishlistFilteredMovies);
</script>
<style>
</style>
......@@ -1529,11 +1529,6 @@ lodash.camelcase@^4.3.0:
resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
integrity sha1-soqmKIorn8ZRA1x3EfZathkDMaY=
lodash@^4.17.21:
version "4.17.21"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
long@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/long/-/long-4.0.0.tgz#9a7b71cfb7d361a194ea555241c92f7468d5bf28"
......
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