From 42d72b06d3269aa0f35bc30e6149bb216b8a106a Mon Sep 17 00:00:00 2001
From: Guan-Xin Wang <guanxinwang0118@gmail.com>
Date: Sun, 19 May 2024 11:16:47 +0800
Subject: [PATCH] fix: sign out bug.

---
 .../components/navigation/navigation.vue      | 61 ++++++++++++++-----
 src/shared/services/auth.service.ts           |  5 +-
 2 files changed, 48 insertions(+), 18 deletions(-)

diff --git a/src/shared/components/navigation/navigation.vue b/src/shared/components/navigation/navigation.vue
index a61a750..b29277e 100644
--- a/src/shared/components/navigation/navigation.vue
+++ b/src/shared/components/navigation/navigation.vue
@@ -50,13 +50,7 @@
                   <p>Profile</p>
                 </router-link>
               </div>
-              <div
-                @click="
-                  signUserOut;
-                  toggleProfileMenu;
-                "
-                class="option"
-              >
+              <div @click="signUserOut" class="option">
                 <img
                   class="icon"
                   src="../../../assets/icons/sign-out-alt-regular.svg"
@@ -95,9 +89,11 @@
 </template>
 
 <script lang="ts">
-import { ref, computed, defineComponent, onMounted } from "vue";
+import { ref, computed, defineComponent, onMounted, onBeforeMount } from "vue";
 import { AuthService } from "../../services/auth.service";
 import { useUserStore } from "../../../stores/users";
+import { useRouter } from "vue-router";
+import { auth } from "../../firebase/firebaseInit";
 
 export default defineComponent({
   name: "navigation",
@@ -111,12 +107,18 @@ export default defineComponent({
   },
   setup() {
     const store = useUserStore();
+    const router = useRouter();
     const authService = new AuthService();
     const profileMenu = ref(false);
     const mobile = ref(false);
     const mobileNav = ref(false);
     const windowWidth = ref(window.innerWidth);
     const profile = ref(null);
+    const profileInitials = ref("");
+    const profileFirstName = ref("");
+    const profileLastName = ref("");
+    const profileUsername = ref("");
+    const profileEmail = ref("");
 
     function checkScreen() {
       if (windowWidth.value <= 750) {
@@ -135,9 +137,40 @@ export default defineComponent({
     function toggleProfileMenu(e: Event) {
       if (e.target === null) return;
       e.stopImmediatePropagation();
+      console.log(e.target);
       profileMenu.value = !profileMenu.value;
     }
 
+    // TODO: duplicate code; same as in profile.vue
+    function getProfileInfo() {
+      auth.onAuthStateChanged(async (currentUser) => {
+        if (currentUser) {
+          try {
+            await store.getProfileInfo(currentUser.uid);
+            store.setUser(currentUser);
+            store.setProfileInitials();
+            profileInitials.value = store.profileInitials;
+            profileFirstName.value = store.profileFirstName;
+            profileLastName.value = store.profileLastName;
+            profileUsername.value = store.profileUsername;
+            profileEmail.value = store.profileEmail;
+          } catch (error) {
+            console.error(error);
+          }
+        }
+      });
+    }
+
+    async function signUserOut() {
+      await authService.signUserOut();
+      router.push({ name: "home" });
+      window.location.reload(); // manually update UI state
+    }
+
+    onBeforeMount(() => {
+      getProfileInfo();
+    });
+
     onMounted(() => {
       checkScreen();
       profileMenu.value = false;
@@ -145,11 +178,11 @@ export default defineComponent({
 
     return {
       user: computed(() => store.user),
-      profileInitials: computed(() => store.profileInitials),
-      profileFirstName: computed(() => store.profileFirstName),
-      profileLastName: computed(() => store.profileLastName),
-      profileUsername: computed(() => store.profileUsername),
-      profileEmail: computed(() => store.profileEmail),
+      profileInitials,
+      profileFirstName,
+      profileLastName,
+      profileUsername,
+      profileEmail,
       profileMenu,
       profile,
       mobile,
@@ -157,7 +190,7 @@ export default defineComponent({
       windowWidth,
       toggleProfileMenu,
       toggleMobileNav,
-      signUserOut: async () => await authService.signUserOut(),
+      signUserOut: async () => await signUserOut(),
     };
   },
 });
diff --git a/src/shared/services/auth.service.ts b/src/shared/services/auth.service.ts
index a28b6df..82f13de 100644
--- a/src/shared/services/auth.service.ts
+++ b/src/shared/services/auth.service.ts
@@ -3,18 +3,15 @@ import {
   sendPasswordResetEmail,
   signInWithEmailAndPassword,
   signOut,
-  User,
 } from "firebase/auth";
 import { auth } from "../firebase/firebaseInit";
-import { useRouter } from "vue-router";
 
 export class AuthService {
-  router = useRouter();
   constructor() {}
 
   async signUserOut() {
     await signOut(auth);
-    this.router.push({ name: "home" });
+    sessionStorage.removeItem("users");
   }
 
   async sendPasswordResetEmail(email: string) {