Commit 6ec614da authored by erlendoeien's avatar erlendoeien
Browse files

Clean up

parent b6f2f0e2
<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
// import HelloWorld from './components/HelloWorld.vue'
import { onBeforeUnmount, ref } from "vue";
import { getAuth } from "firebase/auth";
import { useRouter } from "vue-router";
const auth = getAuth();
const router = useRouter();
const loginName = ref("");
// const currentUser = ref(await getCurrentUser())
const authListener = auth.onAuthStateChanged(function (user) {
if (user) {
loginName.value = user.displayName || "Unknown name";
} else {
loginName.value = "";
}
});
const signOut = () => {
auth.signOut();
router.push("/");
};
// Clean up
onBeforeUnmount(() => authListener());
</script>
<template>
<div>
<nav>
<span v-if="loginName">
<!-- Movies shall be the logo -->
<router-link to="/movies"> Movies </router-link> |
<router-link to="/favorites">Favorites </router-link> |
<router-link to="/wishlist">Wishlist</router-link> |
<span>{{ loginName }}</span> |
<button @click="signOut">Log out</button>
......@@ -44,6 +15,11 @@ onBeforeUnmount(() => authListener());
</div>
</template>
<script setup lang="ts">
import { useCurrentUser } from "./hooks";
const { signOut, loginName } = useCurrentUser();
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
......
import useFilteredMovies from "./useFilteredMovies";
import useMovies from "./useMovies";
import useWishlist from "./useWishlist";
import useCurrentUser from "./useCurrentUser";
export { useFilteredMovies, useMovies, useWishlist };
export { useFilteredMovies, useMovies, useWishlist, useCurrentUser };
import { computed, onBeforeUnmount, ref } from "vue";
import { getAuth, User } from "firebase/auth";
import { useRouter } from "vue-router";
export default function useCurrentUser() {
const auth = getAuth();
const router = useRouter();
const currentUser = ref<User | null>(null);
const authListener = auth.onAuthStateChanged(function (user) {
currentUser.value = user;
});
const loginName = computed(() => {
if (currentUser.value == null) return "";
return currentUser.value?.displayName || "Unknown";
});
const signOut = () => {
auth.signOut();
router.push("/");
};
onBeforeUnmount(() => authListener());
return { currentUser, signOut, loginName };
}
......@@ -18,8 +18,8 @@ const router = createRouter({
},
},
{
path: "/favorites",
name: "favorites",
path: "/wishlist",
name: "wishlist",
component: () => import("../views/Wishlist.vue"),
meta: {
requiresAuth: true,
......
<template>
<h1>Favorites</h1>
<h1>Wishlist</h1>
<div v-if="isEmpty">
<h3>No movies in wishlist</h3>
<button @click="redirect">Add new movies</button>
......@@ -9,7 +9,7 @@
<th>Title</th>
<th>Year</th>
<th>Genre</th>
<th>Add to wishlist</th>
<th>Remove from wishlist</th>
</thead>
<tr v-for="movie in filteredMovies" :key="movie.id">
<td>{{ movie.title }}</td>
......
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