From 5f795acd6111070228f40ee181a7844e9b8f3633 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Tue, 5 Oct 2021 22:03:33 +0530
Subject: [PATCH] feat: probable user is displayed as authenticated

---
 .../hoppscotch-app/components/app/Header.vue  | 133 +++++++++---------
 packages/hoppscotch-app/helpers/fb/auth.ts    |  10 +-
 2 files changed, 72 insertions(+), 71 deletions(-)

diff --git a/packages/hoppscotch-app/components/app/Header.vue b/packages/hoppscotch-app/components/app/Header.vue
index 90e656468..ba2829831 100644
--- a/packages/hoppscotch-app/components/app/Header.vue
+++ b/packages/hoppscotch-app/components/app/Header.vue
@@ -109,81 +109,84 @@
   </div>
 </template>
 
-<script>
-import { defineComponent, ref } from "@nuxtjs/composition-api"
+<script setup lang="ts">
+import {
+  onMounted,
+  ref,
+  useContext,
+} from "@nuxtjs/composition-api"
 import intializePwa from "~/helpers/pwa"
-import { currentUser$ } from "~/helpers/fb/auth"
+import { probableUser$ } from "~/helpers/fb/auth"
 import { getLocalConfig, setLocalConfig } from "~/newstore/localpersistence"
 import { useReadonlyStream } from "~/helpers/utils/composables"
 import { defineActionHandler } from "~/helpers/actions"
 
-export default defineComponent({
-  setup() {
-    const showSupport = ref(false)
-    const showSearch = ref(false)
+const {
+  $toast,
+  app: { i18n },
+} = useContext()
+const t = i18n.t.bind(i18n)
 
-    defineActionHandler("modals.support.toggle", () => {
-      showSupport.value = !showSupport.value
-    })
-    defineActionHandler("modals.search.toggle", () => {
-      showSearch.value = !showSearch.value
-    })
+/**
+ * Once the PWA code is initialized, this holds a method
+ * that can be called to show the user the installation
+ * prompt.
+ */
+const showInstallPrompt = ref<undefined | null>(null)
 
-    return {
-      currentUser: useReadonlyStream(currentUser$, null),
-      showSupport,
-      showSearch,
-    }
-  },
-  data() {
-    return {
-      // Once the PWA code is initialized, this holds a method
-      // that can be called to show the user the installation
-      // prompt.
-      showInstallPrompt: null,
-      showLogin: false,
-      isOnLine: navigator.onLine,
-      showTeamsModal: false,
-    }
-  },
-  async mounted() {
-    window.addEventListener("online", () => {
-      this.isOnLine = true
-    })
-    window.addEventListener("offline", () => {
-      this.isOnLine = false
-    })
+const showSupport = ref(false)
+const showSearch = ref(false)
+const showLogin = ref(false)
+const showTeamsModal = ref(false)
 
-    // Initializes the PWA code - checks if the app is installed,
-    // etc.
-    this.showInstallPrompt = await intializePwa()
+const isOnLine = ref(navigator.onLine)
 
-    const cookiesAllowed = getLocalConfig("cookiesAllowed") === "yes"
-    if (!cookiesAllowed) {
-      this.$toast.show(this.$t("app.we_use_cookies"), {
-        icon: "cookie",
-        duration: 0,
-        action: [
-          {
-            text: this.$t("action.learn_more"),
-            onClick: (_, toastObject) => {
-              setLocalConfig("cookiesAllowed", "yes")
-              toastObject.goAway(0)
-              window
-                .open("https://docs.hoppscotch.io/privacy", "_blank")
-                .focus()
-            },
+const currentUser = useReadonlyStream(probableUser$, null)
+
+defineActionHandler("modals.support.toggle", () => {
+  showSupport.value = !showSupport.value
+})
+defineActionHandler("modals.search.toggle", () => {
+  showSearch.value = !showSearch.value
+})
+
+onMounted(async () => {
+  window.addEventListener("online", () => {
+    isOnLine.value = true
+  })
+  window.addEventListener("offline", () => {
+    isOnLine.value = false
+  })
+
+  // Initializes the PWA code - checks if the app is installed,
+  // etc.
+  // TODO: @liyasthomas, check this out (initializePwa is a () => Promise<void>)
+  await intializePwa()
+  showInstallPrompt.value = undefined
+
+  const cookiesAllowed = getLocalConfig("cookiesAllowed") === "yes"
+  if (!cookiesAllowed) {
+    $toast.show(t("app.we_use_cookies").toString(), {
+      icon: "cookie",
+      duration: 0,
+      action: [
+        {
+          text: t("action.learn_more").toString(),
+          onClick: (_, toastObject) => {
+            setLocalConfig("cookiesAllowed", "yes")
+            toastObject.goAway(0)
+            window.open("https://docs.hoppscotch.io/privacy", "_blank")?.focus()
           },
-          {
-            text: this.$t("action.dismiss"),
-            onClick: (_, toastObject) => {
-              setLocalConfig("cookiesAllowed", "yes")
-              toastObject.goAway(0)
-            },
+        },
+        {
+          text: t("action.dismiss").toString(),
+          onClick: (_, toastObject) => {
+            setLocalConfig("cookiesAllowed", "yes")
+            toastObject.goAway(0)
           },
-        ],
-      })
-    }
-  },
+        },
+      ],
+    })
+  }
 })
 </script>
diff --git a/packages/hoppscotch-app/helpers/fb/auth.ts b/packages/hoppscotch-app/helpers/fb/auth.ts
index d6f24b20c..6ccabf4f4 100644
--- a/packages/hoppscotch-app/helpers/fb/auth.ts
+++ b/packages/hoppscotch-app/helpers/fb/auth.ts
@@ -95,18 +95,16 @@ export function initAuth() {
 
   probableUser$.next(JSON.parse(getLocalConfig("login_state") ?? "null"))
 
-  currentUser$.subscribe((user) => {
+  onAuthStateChanged(auth, (user) => {
+    /** Whether the user was logged in before */
+    const wasLoggedIn = currentUser$.value !== null
+
     if (user) {
       probableUser$.next(user)
     } else {
       probableUser$.next(null)
       removeLocalConfig("login_state")
     }
-  })
-
-  onAuthStateChanged(auth, (user) => {
-    /** Whether the user was logged in before */
-    const wasLoggedIn = currentUser$.value !== null
 
     if (!user && extraSnapshotStop) {
       extraSnapshotStop()