Commit e1e49436 authored by erlendoeien's avatar erlendoeien
Browse files

Rename and cleanup

parent 0d65860a
......@@ -12,9 +12,9 @@ const loginName = ref("");
// const currentUser = ref(await getCurrentUser())
const authListener = auth.onAuthStateChanged(function (user) {
if (user) {
loginName.value = user.displayName || "Unknown name"; // if we have a user
loginName.value = user.displayName || "Unknown name";
} else {
loginName.value = ""; // if we do not
loginName.value = "";
}
});
......
......@@ -20,7 +20,7 @@ const router = createRouter({
{
path: "/favorites",
name: "favorites",
component: () => import("../views/Favorites.vue"),
component: () => import("../views/Wishlist.vue"),
meta: {
requiresAuth: true,
},
......
......@@ -9,4 +9,8 @@ export interface IMovie {
export interface IListeners {
[key: string]: Unsubscribe;
}
\ No newline at end of file
}
export interface IWishlist {
[key: string]: number;
}
<template>
<h1>Favorites</h1>
<!-- <div v-if="wishlist.length === 0"> -->
<h3>No movies in wishlist</h3>
<!-- <button @click="redirect">Go to movies</button> -->
<!-- </div> -->
<!-- <div v-else>DISPLAY WISHLIST</div> -->
</template>
<script setup lang="ts">
import { getAuth } from "@firebase/auth";
import {
getDatabase,
ref as fb_ref,
onValue,
get,
set,
child,
} from "firebase/database";
import { onBeforeUnmount, ref } from "vue";
import { useRouter } from "vue-router";
import { getUsername } from "../tools/databaseTools";
import { IMovie } from "../types";
const wishlist = ref<IMovie[]>([]);
const db = getDatabase();
const username = getUsername(getAuth().currentUser); //.onAuthStateChanged()
const wishlistRef = fb_ref(db, `users/${username}`);
// get(whishlistRef).then((snapshot) => {
// if (snapshot.exists())
// })
const redirect = () => useRouter().push({ name: "movies" });
const moviesListener = onValue(wishlistRef, (snapshot) => {
if (!snapshot.exists()) {
console.log("SNAPSHOT DOES NOT EXIST");
// set(wishlistRef, {"wishlist"), {}).catch((e) => console.log(e));
} else {
console.log(`snapshot: ${snapshot.val()}`);
set(wishlistRef, null).catch((e) => console.log(e));
wishlist.value = snapshot.val();
}
});
onBeforeUnmount(() => {
moviesListener();
});
</script>
<template>
<h1>Favorites</h1>
<div v-if="wishlist.length === 0">
<h3>No movies in wishlist</h3>
</div>
<table v-else>
<thead>
<th>Title</th>
<th>Year</th>
<th>Genre</th>
<th>Add to wishlist</th>
</thead>
<tr v-for="movie in filteredMovies" :key="movie.id">
<td>{{ movie.title }}</td>
<td>{{ movie.year }}</td>
<td>{{ movie.genre }}</td>
<td><button @click="deleteWish(movie.id)">WISHLIST</button></td>
</tr>
</table>
</template>
<script setup lang="ts">
import { useFilteredMovies, useMovies, useWishlist } from "../hooks";
const { movies } = useMovies();
const { wishlist, deleteWish } = useWishlist();
const { filteredMovies } = useFilteredMovies(movies, wishlist, true);
</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