Merge branch 'newstate/firebase'

README.md

@@ -361,7 +361,6 @@ _Add-ons are developed and maintained under **[Official Hoppscotch Organization]
 - History
 - Collections
 - Environments
-- Notes
 
 ✅ **Post-Request Tests β:** Write tests associated with a request that are executed after the request response.
 
@@ -378,10 +377,6 @@ _Add-ons are developed and maintained under **[Official Hoppscotch Organization]
 
 </details>
 
-📝 **Notes** : Instantly jot down notes, tasks or whatever you feel like as they come to your mind.
-
-_Notes are only available for signed-in users_
-
 🌱 **Environments** : Environment variables allow you to store and reuse values in your requests and scripts.
 
 <details>

components/app/Header.vue

@@ -68,7 +68,7 @@
             </svg>
           </button>
         </a>
-        <v-popover v-if="fb.currentUser === null">
+        <v-popover v-if="currentUser === null">
           <button v-tooltip="$t('login_with')" class="icon">
             <i class="material-icons">login</i>
           </button>
@@ -79,17 +79,17 @@
         <v-popover v-else>
           <button
             v-tooltip="
-              (fb.currentUser.displayName ||
+              (currentUser.displayName ||
                 '<label><i>Name not found</i></label>') +
               '<br>' +
-              (fb.currentUser.email || '<label><i>Email not found</i></label>')
+              (currentUser.email || '<label><i>Email not found</i></label>')
             "
             class="icon"
             aria-label="Account"
           >
             <img
-              v-if="fb.currentUser.photoURL"
+              v-if="currentUser.photoURL"
-              :src="fb.currentUser.photoURL"
+              :src="currentUser.photoURL"
               class="w-6 h-6 rounded-full material-icons"
               alt="Profile image"
             />
@@ -166,7 +166,7 @@
 
 <script>
 import intializePwa from "~/helpers/pwa"
-import { fb } from "~/helpers/fb"
+import { currentUser$ } from "~/helpers/fb/auth"
 // import { hasExtensionInstalled } from "~/helpers/strategies/ExtensionStrategy"
 
 export default {
@@ -181,7 +181,11 @@ export default {
       showSupport: false,
       showEmail: false,
       navigatorShare: navigator.share,
-      fb,
+    }
+  },
+  subscriptions() {
+    return {
+      currentUser: currentUser$,
     }
   },
   async mounted() {

components/collections/ImportExport.vue

@@ -34,9 +34,9 @@
               </div>
               <div
                 v-tooltip.bottom="{
-                  content: !fb.currentUser
+                  content: !currentUser
                     ? $t('login_with_github_to') + $t('create_secret_gist')
-                    : fb.currentUser.provider !== 'github.com'
+                    : currentUser.provider !== 'github.com'
                     ? $t('login_with_github_to') + $t('create_secret_gist')
                     : null,
                 }"
@@ -44,9 +44,9 @@
                 <button
                   v-close-popover
                   :disabled="
-                    !fb.currentUser
+                    !currentUser
                       ? true
-                      : fb.currentUser.provider !== 'github.com'
+                      : currentUser.provider !== 'github.com'
                       ? true
                       : false
                   "
@@ -166,7 +166,7 @@
 </template>
 
 <script>
-import { fb } from "~/helpers/fb"
+import { currentUser$ } from "~/helpers/fb/auth"
 import * as teamUtils from "~/helpers/teams/utils"
 import {
   restCollections$,
@@ -185,12 +185,12 @@ export default {
       mode: "import_export",
       mySelectedCollectionID: undefined,
       collectionJson: "",
-      fb,
     }
   },
   subscriptions() {
     return {
       myCollections: restCollections$,
+      currentUser: currentUser$,
     }
   },
   methods: {
@@ -208,7 +208,7 @@ export default {
           },
           {
             headers: {
-              Authorization: `token ${fb.currentUser.accessToken}`,
+              Authorization: `token ${this.currentUser.accessToken}`,
               Accept: "application/vnd.github.v3+json",
             },
           }

components/collections/graphql/ImportExport.vue

@@ -21,9 +21,9 @@
               </div>
               <div
                 v-tooltip.bottom="{
-                  content: !fb.currentUser
+                  content: !currentUser
                     ? $t('login_with_github_to') + $t('create_secret_gist')
-                    : fb.currentUser.provider !== 'github.com'
+                    : currentUser.provider !== 'github.com'
                     ? $t('login_with_github_to') + $t('create_secret_gist')
                     : null,
                 }"
@@ -31,9 +31,9 @@
                 <button
                   v-close-popover
                   :disabled="
-                    !fb.currentUser
+                    !currentUser
                       ? true
-                      : fb.currentUser.provider !== 'github.com'
+                      : currentUser.provider !== 'github.com'
                       ? true
                       : false
                   "
@@ -100,7 +100,7 @@
 </template>
 
 <script>
-import { fb } from "~/helpers/fb"
+import { currentUser$ } from "~/helpers/fb/auth"
 import {
   graphqlCollections$,
   setGraphqlCollections,
@@ -111,14 +111,10 @@ export default {
   props: {
     show: Boolean,
   },
-  data() {
-    return {
-      fb,
-    }
-  },
   subscriptions() {
     return {
       collections: graphqlCollections$,
+      currentUser: currentUser$,
     }
   },
   computed: {
@@ -140,7 +136,7 @@ export default {
           },
           {
             headers: {
-              Authorization: `token ${fb.currentUser.accessToken}`,
+              Authorization: `token ${this.currentUser.accessToken}`,
               Accept: "application/vnd.github.v3+json",
             },
           }

components/collections/index.vue

@@ -135,7 +135,7 @@
 <script>
 import gql from "graphql-tag"
 import cloneDeep from "lodash/cloneDeep"
-import { fb } from "~/helpers/fb"
+import { currentUser$ } from "~/helpers/fb/auth"
 import TeamCollectionAdapter from "~/helpers/teams/TeamCollectionAdapter"
 import * as teamUtils from "~/helpers/teams/utils"
 import {
@@ -184,11 +184,12 @@ export default {
   subscriptions() {
     return {
       collections: restCollections$,
+      currentUser: currentUser$,
     }
   },
   computed: {
     showTeamCollections() {
-      if (fb.currentUser == null) {
+      if (this.currentUser == null) {
         return false
       }
       return true

components/environments/ImportExport.vue

@@ -23,9 +23,9 @@
               </div>
               <div
                 v-tooltip.bottom="{
-                  content: !fb.currentUser
+                  content: !currentUser
                     ? $t('login_with_github_to') + $t('create_secret_gist')
-                    : fb.currentUser.provider !== 'github.com'
+                    : currentUser.provider !== 'github.com'
                     ? $t('login_with_github_to') + $t('create_secret_gist')
                     : null,
                 }"
@@ -33,9 +33,9 @@
                 <button
                   v-close-popover
                   :disabled="
-                    !fb.currentUser
+                    !currentUser
                       ? true
-                      : fb.currentUser.provider !== 'github.com'
+                      : currentUser.provider !== 'github.com'
                       ? true
                       : false
                   "
@@ -102,7 +102,7 @@
 </template>
 
 <script>
-import { fb } from "~/helpers/fb"
+import { currentUser$ } from "~/helpers/fb/auth"
 import {
   environments$,
   replaceEnvironments,
@@ -113,14 +113,10 @@ export default {
   props: {
     show: Boolean,
   },
-  data() {
-    return {
-      fb,
-    }
-  },
   subscriptions() {
     return {
       environments: environments$,
+      currentUser: currentUser$,
     }
   },
   computed: {
@@ -142,7 +138,7 @@ export default {
           },
           {
             headers: {
-              Authorization: `token ${fb.currentUser.accessToken}`,
+              Authorization: `token ${this.currentUser.accessToken}`,
               Accept: "application/vnd.github.v3+json",
             },
           }

components/firebase/Email.vue

@@ -69,7 +69,7 @@
 </template>
 
 <script>
-import { fb } from "~/helpers/fb"
+import { currentUser$, signInWithEmail } from "~/helpers/fb/auth"
 
 export default {
   props: {
@@ -77,7 +77,6 @@ export default {
   },
   data() {
     return {
-      fb,
       form: {
         email: "",
       },
@@ -88,7 +87,7 @@ export default {
     }
   },
   mounted() {
-    this.$subscribeTo(fb.currentUser$, (user) => {
+    this.$subscribeTo(currentUser$, (user) => {
       if (user) this.hideModal()
     })
   },
@@ -99,8 +98,7 @@ export default {
         url: `${process.env.BASE_URL}/enter`,
         handleCodeInApp: true,
       }
-      await fb
+      await signInWithEmail(this.form.email, actionCodeSettings)
-        .signInWithEmail(this.form.email, actionCodeSettings)
         .then(() => {
           this.mode = "email"
           window.localStorage.setItem("emailForSignIn", this.form.email)

components/firebase/Feeds.vue

@@ -1,62 +0,0 @@
-<template>
-  <div
-    v-if="fb.currentFeeds.length !== 0"
-    class="divide-y virtual-list divide-dashed divide-divider"
-  >
-    <ul v-for="feed in fb.currentFeeds" :key="feed.id" class="flex-col">
-      <div data-test="list-item" class="show-on-large-screen">
-        <li class="info">
-          <label data-test="list-label" class="break-all">
-            {{ feed.label || $t("no_label") }}
-          </label>
-        </li>
-        <button class="icon" @click="deleteFeed(feed)">
-          <i class="material-icons">delete</i>
-        </button>
-      </div>
-      <div class="show-on-large-screen">
-        <li data-test="list-message" class="info clamb-3">
-          <label class="break-all">{{ feed.message || $t("empty") }}</label>
-        </li>
-      </div>
-    </ul>
-  </div>
-  <ul v-else class="flex-col">
-    <li>
-      <p class="info">{{ $t("empty") }}</p>
-    </li>
-  </ul>
-</template>
-
-<script>
-import { fb } from "~/helpers/fb"
-
-export default {
-  data() {
-    return {
-      fb,
-    }
-  },
-  methods: {
-    async deleteFeed({ id }) {
-      await fb.deleteFeed(id)
-      this.$toast.error(this.$t("deleted"), {
-        icon: "delete",
-      })
-    },
-  },
-}
-</script>
-
-<style scoped lang="scss">
-.virtual-list {
-  max-height: calc(100vh - 270px);
-}
-
-.clamb-3 {
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  @apply overflow-hidden;
-}
-</style>

components/firebase/Inputform.vue

@@ -1,57 +0,0 @@
-<template>
-  <div class="flex-col">
-    <div class="show-on-large-screen">
-      <input
-        v-model="message"
-        :aria-label="$t('label')"
-        type="text"
-        autofocus
-        :placeholder="$t('paste_a_note')"
-        class="rounded-t-lg"
-        @keyup.enter="formPost"
-      />
-    </div>
-    <div class="border-b show-on-large-screen border-divider">
-      <input
-        v-model="label"
-        :aria-label="$t('label')"
-        type="text"
-        autofocus
-        :placeholder="$t('label')"
-        @keyup.enter="formPost"
-      />
-      <button
-        class="icon"
-        :disabled="!(message || label)"
-        value="Save"
-        @click="formPost"
-      >
-        <i class="material-icons">add</i>
-        <span>Add</span>
-      </button>
-    </div>
-  </div>
-</template>
-
-<script>
-import { fb } from "~/helpers/fb"
-
-export default {
-  data() {
-    return {
-      message: null,
-      label: null,
-    }
-  },
-  methods: {
-    formPost() {
-      if (!(this.message || this.label)) {
-        return
-      }
-      fb.writeFeeds(this.message, this.label)
-      this.message = null
-      this.label = null
-    },
-  },
-}
-</script>

components/firebase/Login.vue

@@ -40,14 +40,16 @@
 </template>
 
 <script>
-import { fb } from "~/helpers/fb"
+import { applySetting } from "~/newstore/settings"
+import {
+  signInUserWithGoogle,
+  getSignInMethodsForEmail,
+  signInWithEmailAndPassword,
+  signInUserWithGithub,
+  setProviderInfo,
+} from "~/helpers/fb/auth"
 
 export default {
-  data() {
-    return {
-      fb,
-    }
-  },
   methods: {
     showLoginSuccess() {
       this.$toast.info(this.$t("login_success"), {
@@ -56,7 +58,7 @@ export default {
     },
     async signInWithGoogle() {
       try {
-        const { additionalUserInfo } = await fb.signInUserWithGoogle()
+        const { additionalUserInfo } = await signInUserWithGoogle()
 
         if (additionalUserInfo.isNewUser) {
           this.$toast.info(`${this.$t("turn_on")} ${this.$t("sync")}`, {
@@ -66,10 +68,9 @@ export default {
             action: {
               text: this.$t("yes"),
               onClick: (_, toastObject) => {
-                fb.writeSettings("syncHistory", true)
+                applySetting("syncHistory", true)
-                fb.writeSettings("syncCollections", true)
+                applySetting("syncCollections", true)
-                fb.writeSettings("syncEnvironments", true)
+                applySetting("syncEnvironments", true)
-                this.$router.push({ path: "/settings" })
                 toastObject.remove()
               },
             },
@@ -88,7 +89,7 @@ export default {
           // The provider account's email address.
           const email = err.email
           // Get sign-in methods for this email.
-          const methods = await fb.getSignInMethodsForEmail(email)
+          const methods = await getSignInMethodsForEmail(email)
 
           // Step 3.
           // If the user has several sign-in methods,
@@ -98,7 +99,7 @@ export default {
             // In real scenario, you should handle this asynchronously.
             const password = promptUserForPassword() // TODO: implement promptUserForPassword.
 
-            const user = await fb.signInWithEmailAndPassword(email, password)
+            const user = await signInWithEmailAndPassword(email, password)
             await user.linkWithCredential(pendingCred)
 
             this.showLoginSuccess()
@@ -113,7 +114,7 @@ export default {
             action: {
               text: this.$t("yes"),
               onClick: async (_, toastObject) => {
-                const { user } = await fb.signInWithGithub()
+                const { user } = await signInWithGithub()
                 await user.linkAndRetrieveDataWithCredential(pendingCred)
 
                 this.showLoginSuccess()
@@ -127,10 +128,9 @@ export default {
     },
     async signInWithGithub() {
       try {
-        const { credential, additionalUserInfo } =
+        const { credential, additionalUserInfo } = await signInUserWithGithub()
-          await fb.signInUserWithGithub()
 
-        fb.setProviderInfo(credential.providerId, credential.accessToken)
+        setProviderInfo(credential.providerId, credential.accessToken)
 
         if (additionalUserInfo.isNewUser) {
           this.$toast.info(`${this.$t("turn_on")} ${this.$t("sync")}`, {
@@ -140,10 +140,9 @@ export default {
             action: {
               text: this.$t("yes"),
               onClick: (_, toastObject) => {
-                fb.writeSettings("syncHistory", true)
+                applySetting("syncHistory", true)
-                fb.writeSettings("syncCollections", true)
+                applySetting("syncCollections", true)
-                fb.writeSettings("syncEnvironments", true)
+                applySetting("syncEnvironments", true)
-                this.$router.push({ path: "/settings" })
                 toastObject.remove()
               },
             },
@@ -162,7 +161,7 @@ export default {
           // The provider account's email address.
           const email = err.email
           // Get sign-in methods for this email.
-          const methods = await fb.getSignInMethodsForEmail(email)
+          const methods = await getSignInMethodsForEmail(email)
 
           // Step 3.
           // If the user has several sign-in methods,
@@ -172,7 +171,7 @@ export default {
             // In real scenario, you should handle this asynchronously.
             const password = promptUserForPassword() // TODO: implement promptUserForPassword.
 
-            const user = await fb.signInWithEmailAndPassword(email, password)
+            const user = await signInWithEmailAndPassword(email, password)
             await user.linkWithCredential(pendingCred)
 
             this.showLoginSuccess()
@@ -187,7 +186,8 @@ export default {
             action: {
               text: this.$t("yes"),
               onClick: async (_, toastObject) => {
-                const { user } = await fb.signInUserWithGoogle()
+                const { user } = await signInUserWithGoogle()
+                // TODO: handle deprecation
                 await user.linkAndRetrieveDataWithCredential(pendingCred)
 
                 this.showLoginSuccess()

components/firebase/Logout.vue

@@ -7,21 +7,17 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
-import { fb } from "~/helpers/fb"
+import Vue from "vue"
+import { signOutUser } from "~/helpers/fb/auth"
 
-export default {
+export default Vue.extend({
-  data() {
-    return {
-      fb,
-    }
-  },
   methods: {
     async logout() {
       try {
-        await fb.signOutUser()
+        await signOutUser()
 
-        this.$toast.info(this.$t("logged_out"), {
+        this.$toast.info(this.$t("logged_out").toString(), {
           icon: "vpn_key",
         })
       } catch (err) {
@@ -31,5 +27,5 @@ export default {
       }
     },
   },
-}
+})
 </script>

components/firebase/__tests__/Feeds.spec.js

@@ -1,132 +0,0 @@
-import { shallowMount } from "@vue/test-utils"
-import feeds from "../Feeds"
-
-import { fb } from "~/helpers/fb"
-
-jest.mock("~/helpers/fb", () => ({
-  __esModule: true,
-
-  fb: {
-    currentFeeds: [
-      {
-        id: "test1",
-        label: "First",
-        message: "First Message",
-      },
-      {
-        id: "test2",
-        label: "Second",
-      },
-      {
-        id: "test3",
-        message: "Third Message",
-      },
-      {
-        id: "test4",
-      },
-    ],
-    deleteFeed: jest.fn(() => Promise.resolve()),
-  },
-}))
-
-const factory = () =>
-  shallowMount(feeds, {
-    mocks: {
-      $t: (text) => text,
-      $toast: {
-        error: jest.fn(),
-      },
-    },
-  })
-
-beforeEach(() => {
-  fb.deleteFeed.mockClear()
-})
-
-describe("feeds", () => {
-  test("mounts properly when proper components are given", () => {
-    const wrapper = factory()
-
-    expect(wrapper).toBeTruthy()
-  })
-
-  test("renders all the current feeds", () => {
-    const wrapper = factory()
-
-    expect(wrapper.findAll("div[data-test='list-item']").wrappers).toHaveLength(
-      4
-    )
-  })
-
-  test("feeds with no label displays the 'no_label' message", () => {
-    const wrapper = factory()
-
-    expect(
-      wrapper
-        .findAll("label[data-test='list-label']")
-        .wrappers.map((e) => e.text())
-        .filter((text) => text === "no_label")
-    ).toHaveLength(2)
-  })
-
-  test("feeds with no message displays the 'empty' message", () => {
-    const wrapper = factory()
-
-    expect(
-      wrapper
-        .findAll("li[data-test='list-message']")
-        .wrappers.map((e) => e.text())
-        .filter((text) => text === "empty")
-    ).toHaveLength(2)
-  })
-
-  test("labels in the list are proper", () => {
-    const wrapper = factory()
-
-    expect(
-      wrapper
-        .findAll("label[data-test='list-label']")
-        .wrappers.map((e) => e.text())
-    ).toEqual(["First", "Second", "no_label", "no_label"])
-  })
-
-  test("messages in the list are proper", () => {
-    const wrapper = factory()
-
-    expect(
-      wrapper
-        .findAll("li[data-test='list-message']")
-        .wrappers.map((e) => e.text())
-    ).toEqual(["First Message", "empty", "Third Message", "empty"])
-  })
-
-  test("clicking on the delete button deletes the feed", async () => {
-    const wrapper = factory()
-
-    const deleteButton = wrapper.find("button")
-
-    await deleteButton.trigger("click")
-
-    expect(fb.deleteFeed).toHaveBeenCalledTimes(1)
-  })
-
-  test("correct feed is passed to from the list for deletion", async () => {
-    const wrapper = factory()
-
-    const deleteButton = wrapper.find("button")
-
-    await deleteButton.trigger("click")
-
-    expect(fb.deleteFeed).toHaveBeenCalledWith("test1")
-  })
-
-  test("renders the 'empty' label if no elements in the current feeds", () => {
-    jest.spyOn(fb, "currentFeeds", "get").mockReturnValueOnce([])
-
-    const wrapper = factory()
-
-    expect(wrapper.findAll("li").wrappers).toHaveLength(1)
-
-    expect(wrapper.find("li").text()).toEqual("empty")
-  })
-})

components/firebase/__tests__/Inputform.spec.js

@@ -1,92 +0,0 @@
-import { shallowMount } from "@vue/test-utils"
-import inputform from "../Inputform"
-
-import { fb } from "~/helpers/fb"
-
-jest.mock("~/helpers/fb", () => ({
-  __esModule: true,
-
-  fb: {
-    writeFeeds: jest.fn(() => Promise.resolve()),
-  },
-}))
-
-const factory = () =>
-  shallowMount(inputform, {
-    mocks: {
-      $t: (text) => text,
-    },
-  })
-
-beforeEach(() => {
-  fb.writeFeeds.mockClear()
-})
-
-describe("inputform", () => {
-  test("mounts properly", () => {
-    const wrapper = factory()
-
-    expect(wrapper).toBeTruthy()
-  })
-  test("calls writeFeeds when submitted properly", async () => {
-    const wrapper = factory()
-
-    const addButton = wrapper.find("button")
-    const [messageInput, labelInput] = wrapper.findAll("input").wrappers
-
-    await messageInput.setValue("test message")
-    await labelInput.setValue("test label")
-
-    await addButton.trigger("click")
-
-    expect(fb.writeFeeds).toHaveBeenCalledTimes(1)
-  })
-  test("doesn't call writeFeeds when submitted without a data", async () => {
-    const wrapper = factory()
-
-    const addButton = wrapper.find("button")
-
-    await addButton.trigger("click")
-
-    expect(fb.writeFeeds).not.toHaveBeenCalled()
-  })
-  test("doesn't call writeFeeds when message or label is null", async () => {
-    const wrapper = factory()
-
-    const addButton = wrapper.find("button")
-    const [messageInput, labelInput] = wrapper.findAll("input").wrappers
-
-    await messageInput.setValue(null)
-    await labelInput.setValue(null)
-
-    await addButton.trigger("click")
-
-    expect(fb.writeFeeds).not.toHaveBeenCalled()
-  })
-  test("doesn't call writeFeeds when message or label is empty", async () => {
-    const wrapper = factory()
-
-    const addButton = wrapper.find("button")
-    const [messageInput, labelInput] = wrapper.findAll("input").wrappers
-
-    await messageInput.setValue("")
-    await labelInput.setValue("")
-
-    await addButton.trigger("click")
-
-    expect(fb.writeFeeds).not.toHaveBeenCalled()
-  })
-  test("calls writeFeeds with correct values", async () => {
-    const wrapper = factory()
-
-    const addButton = wrapper.find("button")
-    const [messageInput, labelInput] = wrapper.findAll("input").wrappers
-
-    await messageInput.setValue("test message")
-    await labelInput.setValue("test label")
-
-    await addButton.trigger("click")
-
-    expect(fb.writeFeeds).toHaveBeenCalledWith("test message", "test label")
-  })
-})

components/firebase/__tests__/Logout.spec.js

@@ -1,67 +0,0 @@
-import { shallowMount, createLocalVue } from "@vue/test-utils"
-import logout from "../Logout"
-
-import { fb } from "~/helpers/fb"
-
-jest.mock("~/helpers/fb", () => ({
-  __esModule: true,
-
-  fb: {
-    signOutUser: jest.fn(() => Promise.resolve()),
-  },
-}))
-
-const $toast = {
-  info: jest.fn(),
-  show: jest.fn(),
-}
-
-const localVue = createLocalVue()
-
-localVue.directive("close-popover", {})
-
-const factory = () =>
-  shallowMount(logout, {
-    mocks: {
-      $t: (text) => text,
-      $toast,
-    },
-    localVue,
-  })
-
-beforeEach(() => {
-  fb.signOutUser.mockClear()
-  $toast.info.mockClear()
-  $toast.show.mockClear()
-})
-
-describe("logout", () => {
-  test("mounts properly", () => {
-    const wrapper = factory()
-
-    expect(wrapper).toBeTruthy()
-  })
-
-  test("clicking the logout button fires the logout firebase function", async () => {
-    const wrapper = factory()
-
-    const button = wrapper.find("button")
-
-    await button.trigger("click")
-
-    expect(fb.signOutUser).toHaveBeenCalledTimes(1)
-  })
-
-  test("failed signout request fires a error toast", async () => {
-    fb.signOutUser.mockImplementationOnce(() =>
-      Promise.reject(new Error("test reject"))
-    )
-
-    const wrapper = factory()
-    const button = wrapper.find("button")
-    await button.trigger("click")
-
-    expect($toast.show).toHaveBeenCalledTimes(1)
-    expect($toast.show).toHaveBeenCalledWith("test reject", expect.anything())
-  })
-})

components/http/Notes.vue

@@ -1,26 +0,0 @@
-<template>
-  <AppSection ref="sync" :label="$t('notes')">
-    <div v-if="fb.currentUser">
-      <FirebaseInputform />
-      <FirebaseFeeds />
-    </div>
-    <div v-else>
-      <p class="info">{{ $t("login_first") }}</p>
-      <FirebaseLogin @show-email="showEmail = true" />
-    </div>
-    <FirebaseEmail :show="showEmail" @hide-modal="showEmail = false" />
-  </AppSection>
-</template>
-
-<script>
-import { fb } from "~/helpers/fb"
-
-export default {
-  data() {
-    return {
-      fb,
-      showEmail: false,
-    }
-  },
-}
-</script>

components/teams/index.vue

@@ -2,7 +2,7 @@
   <AppSection ref="teams" :label="$t('teams')">
     <div class="flex flex-col">
       <label>{{ $t("teams") }}</label>
-      <div v-if="fb.currentUser"></div>
+      <div v-if="currentUser"></div>
       <div v-else>
         <label>{{ $t("login_with") }}</label>
         <p>
@@ -50,7 +50,7 @@
 
 <script>
 import gql from "graphql-tag"
-import { fb } from "~/helpers/fb"
+import { currentUser$ } from "~/helpers/fb/auth"
 
 export default {
   data() {
@@ -61,10 +61,14 @@ export default {
       editingteamID: "",
       me: {},
       myTeams: [],
-      fb,
       showEmail: false,
     }
   },
+  subscriptions() {
+    return {
+      currentUser: currentUser$,
+    }
+  },
   apollo: {
     me: {
       query: gql`

helpers/apollo.ts

@@ -7,12 +7,12 @@ import {
 import { WebSocketLink } from "@apollo/client/link/ws"
 import { setContext } from "@apollo/client/link/context"
 import { getMainDefinition } from "@apollo/client/utilities"
-import { fb } from "./fb"
+import { authIdToken$ } from "./fb/auth"
 
 let authToken: String | null = null
 
 export function registerApolloAuthUpdate() {
-  fb.idToken$.subscribe((token: String | null) => {
+  authIdToken$.subscribe((token) => {
     authToken = token
   })
 }

helpers/fb.js

@@ -1,572 +0,0 @@
-import firebase from "firebase/app"
-import "firebase/firestore"
-import "firebase/auth"
-import { ReplaySubject } from "rxjs"
-import { applySettingFB, settingsStore } from "~/newstore/settings"
-import {
-  restHistoryStore,
-  setRESTHistoryEntries,
-  graphqlHistoryStore,
-  setGraphqlHistoryEntries,
-  HISTORY_LIMIT,
-} from "~/newstore/history"
-import {
-  restCollectionStore,
-  setRESTCollections,
-  graphqlCollectionStore,
-  setGraphqlCollections,
-} from "~/newstore/collections"
-import { environments$, replaceEnvironments } from "~/newstore/environments"
-
-// Initialize Firebase, copied from cloud console
-const firebaseConfig = {
-  apiKey: process.env.API_KEY,
-  authDomain: process.env.AUTH_DOMAIN,
-  databaseURL: process.env.DATABASE_URL,
-  projectId: process.env.PROJECT_ID,
-  storageBucket: process.env.STORAGE_BUCKET,
-  messagingSenderId: process.env.MESSAGING_SENDER_ID,
-  appId: process.env.APP_ID,
-  measurementId: process.env.MEASUREMENT_ID,
-}
-
-export const authProviders = {
-  google: () => new firebase.auth.GoogleAuthProvider(),
-  github: () => new firebase.auth.GithubAuthProvider(),
-}
-
-export class FirebaseInstance {
-  constructor(fbapp, authProviders) {
-    this.app = fbapp
-    this.authProviders = authProviders
-
-    this.usersCollection = this.app.firestore().collection("users")
-
-    this.currentUser = null
-    this.idToken = null
-    this.currentFeeds = []
-    this.currentSettings = []
-
-    this.currentUser$ = new ReplaySubject(1)
-    this.idToken$ = new ReplaySubject(1)
-
-    let loadedSettings = false
-    let loadedRESTHistory = false
-    let loadedGraphqlHistory = false
-    let loadedRESTCollections = false
-    let loadedGraphqlCollections = false
-    let loadedEnvironments = false
-
-    graphqlCollectionStore.subject$.subscribe(({ state }) => {
-      if (
-        loadedGraphqlCollections &&
-        this.currentUser &&
-        settingsStore.value.syncCollections
-      ) {
-        this.writeCollections(state, "collectionsGraphql")
-      }
-    })
-
-    restCollectionStore.subject$.subscribe(({ state }) => {
-      if (
-        loadedRESTCollections &&
-        this.currentUser &&
-        settingsStore.value.syncCollections
-      ) {
-        this.writeCollections(state, "collections")
-      }
-    })
-
-    restHistoryStore.dispatches$.subscribe((dispatch) => {
-      if (
-        loadedRESTHistory &&
-        this.currentUser &&
-        settingsStore.value.syncHistory
-      ) {
-        if (dispatch.dispatcher === "addEntry") {
-          this.writeHistory(dispatch.payload.entry)
-        } else if (dispatch.dispatcher === "deleteEntry") {
-          this.deleteHistory(dispatch.payload.entry)
-        } else if (dispatch.dispatcher === "clearHistory") {
-          this.clearHistory()
-        } else if (dispatch.dispatcher === "toggleStar") {
-          this.toggleStar(dispatch.payload.entry)
-        }
-      }
-    })
-
-    graphqlHistoryStore.dispatches$.subscribe((dispatch) => {
-      if (
-        loadedGraphqlHistory &&
-        this.currentUser &&
-        settingsStore.value.syncHistory
-      ) {
-        if (dispatch.dispatcher === "addEntry") {
-          this.writeGraphqlHistory(dispatch.payload.entry)
-        } else if (dispatch.dispatcher === "deleteEntry") {
-          this.deleteGraphqlHistory(dispatch.payload.entry)
-        } else if (dispatch.dispatcher === "clearHistory") {
-          this.clearGraphqlHistory()
-        } else if (dispatch.dispatcher === "toggleStar") {
-          this.toggleGraphqlHistoryStar(dispatch.payload.entry)
-        }
-      }
-    })
-
-    settingsStore.dispatches$.subscribe((dispatch) => {
-      if (this.currentUser && loadedSettings) {
-        if (dispatch.dispatcher === "bulkApplySettings") {
-          Object.keys(dispatch.payload).forEach((key) => {
-            this.writeSettings(key, dispatch.payload[key])
-          })
-        } else if (dispatch.dispatcher !== "applySettingFB") {
-          this.writeSettings(
-            dispatch.payload.settingKey,
-            settingsStore.value[dispatch.payload.settingKey]
-          )
-        }
-      }
-    })
-
-    environments$.subscribe((envs) => {
-      if (this.currentUser && loadedEnvironments) {
-        this.writeEnvironments(envs)
-      }
-    })
-
-    this.app.auth().onIdTokenChanged((user) => {
-      if (user) {
-        user.getIdToken().then((token) => {
-          this.idToken = token
-          this.idToken$.next(token)
-        })
-      } else {
-        this.idToken = null
-        this.idToken$.next(null)
-      }
-    })
-
-    this.app.auth().onAuthStateChanged((user) => {
-      this.currentUser$.next(user)
-
-      if (user) {
-        this.currentUser = user
-
-        this.currentUser.providerData.forEach((profile) => {
-          const us = {
-            updatedOn: new Date(),
-            provider: profile.providerId,
-            name: profile.displayName,
-            email: profile.email,
-            photoUrl: profile.photoURL,
-            uid: profile.uid,
-          }
-          this.usersCollection
-            .doc(this.currentUser.uid)
-            .set(us, { merge: true })
-            .catch((e) => console.error("error updating", us, e))
-        })
-
-        this.usersCollection.doc(this.currentUser.uid).onSnapshot((doc) => {
-          this.currentUser.provider = doc.data().provider
-          this.currentUser.accessToken = doc.data().accessToken
-        })
-
-        this.usersCollection
-          .doc(this.currentUser.uid)
-          .collection("feeds")
-          .orderBy("createdOn", "desc")
-          .onSnapshot((feedsRef) => {
-            const feeds = []
-            feedsRef.forEach((doc) => {
-              const feed = doc.data()
-              feed.id = doc.id
-              feeds.push(feed)
-            })
-            this.currentFeeds = feeds
-          })
-
-        this.usersCollection
-          .doc(this.currentUser.uid)
-          .collection("settings")
-          .onSnapshot((settingsRef) => {
-            const settings = []
-            settingsRef.forEach((doc) => {
-              const setting = doc.data()
-              setting.id = doc.id
-              settings.push(setting)
-            })
-            this.currentSettings = settings
-
-            settings.forEach((e) => {
-              if (e && e.name && e.value != null) {
-                applySettingFB(e.name, e.value)
-              }
-            })
-
-            loadedSettings = true
-          })
-
-        this.usersCollection
-          .doc(this.currentUser.uid)
-          .collection("history")
-          .orderBy("updatedOn", "desc")
-          .limit(HISTORY_LIMIT)
-          .onSnapshot((historyRef) => {
-            const history = []
-
-            historyRef.forEach((doc) => {
-              const entry = doc.data()
-              entry.id = doc.id
-              history.push(entry)
-            })
-
-            setRESTHistoryEntries(history)
-
-            loadedRESTHistory = true
-          })
-
-        this.usersCollection
-          .doc(this.currentUser.uid)
-          .collection("graphqlHistory")
-          .orderBy("updatedOn", "desc")
-          .limit(HISTORY_LIMIT)
-          .onSnapshot((historyRef) => {
-            const history = []
-
-            historyRef.forEach((doc) => {
-              const entry = doc.data()
-              entry.id = doc.id
-              history.push(entry)
-            })
-
-            setGraphqlHistoryEntries(history)
-
-            loadedGraphqlHistory = true
-          })
-
-        this.usersCollection
-          .doc(this.currentUser.uid)
-          .collection("collections")
-          .onSnapshot((collectionsRef) => {
-            const collections = []
-            collectionsRef.forEach((doc) => {
-              const collection = doc.data()
-              collection.id = doc.id
-              collections.push(collection)
-            })
-
-            // Prevent infinite ping-pong of updates
-            loadedRESTCollections = false
-
-            // TODO: Wth is with collections[0]
-            if (collections.length > 0) {
-              setRESTCollections(collections[0].collection)
-            }
-
-            loadedRESTCollections = true
-          })
-
-        this.usersCollection
-          .doc(this.currentUser.uid)
-          .collection("collectionsGraphql")
-          .onSnapshot((collectionsRef) => {
-            const collections = []
-            collectionsRef.forEach((doc) => {
-              const collection = doc.data()
-              collection.id = doc.id
-              collections.push(collection)
-            })
-
-            // Prevent infinite ping-pong of updates
-            loadedGraphqlCollections = false
-
-            // TODO: Wth is with collections[0]
-            if (collections.length > 0) {
-              setGraphqlCollections(collections[0].collection)
-            }
-
-            loadedGraphqlCollections = true
-          })
-
-        this.usersCollection
-          .doc(this.currentUser.uid)
-          .collection("environments")
-          .onSnapshot((environmentsRef) => {
-            const environments = []
-            environmentsRef.forEach((doc) => {
-              const environment = doc.data()
-              environment.id = doc.id
-              environments.push(environment)
-            })
-            loadedEnvironments = false
-            replaceEnvironments(environments[0].environment)
-            loadedEnvironments = true
-          })
-      } else {
-        this.currentUser = null
-      }
-    })
-  }
-
-  async signInUserWithGoogle() {
-    return await this.app.auth().signInWithPopup(this.authProviders.google())
-  }
-
-  async signInUserWithGithub() {
-    return await this.app
-      .auth()
-      .signInWithPopup(this.authProviders.github().addScope("gist"))
-  }
-
-  async signInWithEmailAndPassword(email, password) {
-    return await this.app.auth().signInWithEmailAndPassword(email, password)
-  }
-
-  async getSignInMethodsForEmail(email) {
-    return await this.app.auth().fetchSignInMethodsForEmail(email)
-  }
-
-  async signInWithEmail(email, actionCodeSettings) {
-    return await this.app
-      .auth()
-      .sendSignInLinkToEmail(email, actionCodeSettings)
-  }
-
-  async isSignInWithEmailLink(url) {
-    return await this.app.auth().isSignInWithEmailLink(url)
-  }
-
-  async signInWithEmailLink(email, url) {
-    return await this.app.auth().signInWithEmailLink(email, url)
-  }
-
-  async signOutUser() {
-    if (!this.currentUser) throw new Error("No user has logged in")
-
-    await this.app.auth().signOut()
-    this.currentUser = null
-  }
-
-  async writeFeeds(message, label) {
-    const dt = {
-      createdOn: new Date(),
-      author: this.currentUser.uid,
-      author_name: this.currentUser.displayName,
-      author_image: this.currentUser.photoURL,
-      message,
-      label,
-    }
-
-    try {
-      await this.usersCollection
-        .doc(this.currentUser.uid)
-        .collection("feeds")
-        .add(dt)
-    } catch (e) {
-      console.error("error inserting", dt, e)
-      throw e
-    }
-  }
-
-  async deleteFeed(id) {
-    try {
-      await this.usersCollection
-        .doc(this.currentUser.uid)
-        .collection("feeds")
-        .doc(id)
-        .delete()
-    } catch (e) {
-      console.error("error deleting", id, e)
-      throw e
-    }
-  }
-
-  async writeSettings(setting, value) {
-    const st = {
-      updatedOn: new Date(),
-      author: this.currentUser.uid,
-      author_name: this.currentUser.displayName,
-      author_image: this.currentUser.photoURL,
-      name: setting,
-      value,
-    }
-
-    try {
-      await this.usersCollection
-        .doc(this.currentUser.uid)
-        .collection("settings")
-        .doc(setting)
-        .set(st)
-    } catch (e) {
-      console.error("error updating", st, e)
-      throw e
-    }
-  }
-
-  async writeHistory(entry) {
-    const hs = entry
-
-    try {
-      await this.usersCollection
-        .doc(this.currentUser.uid)
-        .collection("history")
-        .add(hs)
-    } catch (e) {
-      console.error("error inserting", hs, e)
-      throw e
-    }
-  }
-
-  async writeGraphqlHistory(entry) {
-    const hs = entry
-
-    try {
-      await this.usersCollection
-        .doc(this.currentUser.uid)
-        .collection("graphqlHistory")
-        .add(hs)
-    } catch (e) {
-      console.error("error inserting", hs, e)
-      throw e
-    }
-  }
-
-  async deleteHistory(entry) {
-    try {
-      await this.usersCollection
-        .doc(this.currentUser.uid)
-        .collection("history")
-        .doc(entry.id)
-        .delete()
-    } catch (e) {
-      console.error("error deleting", entry, e)
-      throw e
-    }
-  }
-
-  async deleteGraphqlHistory(entry) {
-    try {
-      await this.usersCollection
-        .doc(this.currentUser.uid)
-        .collection("graphqlHistory")
-        .doc(entry.id)
-        .delete()
-    } catch (e) {
-      console.error("error deleting", entry, e)
-      throw e
-    }
-  }
-
-  async clearHistory() {
-    const { docs } = await this.usersCollection
-      .doc(this.currentUser.uid)
-      .collection("history")
-      .get()
-
-    await Promise.all(docs.map((e) => this.deleteHistory(e)))
-  }
-
-  async clearGraphqlHistory() {
-    const { docs } = await this.usersCollection
-      .doc(this.currentUser.uid)
-      .collection("graphqlHistory")
-      .get()
-
-    await Promise.all(docs.map((e) => this.deleteGraphqlHistory(e)))
-  }
-
-  async toggleStar(entry) {
-    try {
-      await this.usersCollection
-        .doc(this.currentUser.uid)
-        .collection("history")
-        .doc(entry.id)
-        .update({ star: !entry.star })
-    } catch (e) {
-      console.error("error deleting", entry, e)
-
-      throw e
-    }
-  }
-
-  async toggleGraphqlHistoryStar(entry) {
-    try {
-      await this.usersCollection
-        .doc(this.currentUser.uid)
-        .collection("graphqlHistory")
-        .doc(entry.id)
-        .update({ star: !entry.star })
-    } catch (e) {
-      console.error("error deleting", entry, e)
-
-      throw e
-    }
-  }
-
-  async writeCollections(collection, flag) {
-    const cl = {
-      updatedOn: new Date(),
-      author: this.currentUser.uid,
-      author_name: this.currentUser.displayName,
-      author_image: this.currentUser.photoURL,
-      collection,
-    }
-
-    try {
-      await this.usersCollection
-        .doc(this.currentUser.uid)
-        .collection(flag)
-        .doc("sync")
-        .set(cl)
-    } catch (e) {
-      console.error("error updating", cl, e)
-      throw e
-    }
-  }
-
-  async writeEnvironments(environment) {
-    const ev = {
-      updatedOn: new Date(),
-      author: this.currentUser.uid,
-      author_name: this.currentUser.displayName,
-      author_image: this.currentUser.photoURL,
-      environment,
-    }
-
-    try {
-      await this.usersCollection
-        .doc(this.currentUser.uid)
-        .collection("environments")
-        .doc("sync")
-        .set(ev)
-    } catch (e) {
-      console.error("error updating", ev, e)
-
-      throw e
-    }
-  }
-
-  async setProviderInfo(id, token) {
-    const us = {
-      updatedOn: new Date(),
-      provider: id,
-      accessToken: token,
-    }
-    try {
-      await this.usersCollection
-        .doc(this.currentUser.uid)
-        .update(us)
-        .catch((e) => console.error("error updating", us, e))
-    } catch (e) {
-      console.error("error updating", e)
-
-      throw e
-    }
-  }
-}
-
-export const fb = new FirebaseInstance(
-  firebase.initializeApp(firebaseConfig),
-  authProviders
-)

helpers/fb/auth.ts

@@ -0,0 +1,186 @@
+import firebase from "firebase"
+import { BehaviorSubject } from "rxjs"
+
+export type HoppUser = firebase.User & {
+  provider?: string
+  accessToken?: string
+}
+
+/**
+ * A BehaviorSubject emitting the currently logged in user (or null if not logged in)
+ */
+export const currentUser$ = new BehaviorSubject<HoppUser | null>(null)
+/**
+ * A BehaviorSubject emitting the current idToken
+ */
+export const authIdToken$ = new BehaviorSubject<string | null>(null)
+
+/**
+ * Initializes the firebase authentication related subjects
+ */
+export function initAuth() {
+  let extraSnapshotStop: (() => void) | null = null
+
+  firebase.auth().onAuthStateChanged((user) => {
+    if (!user && extraSnapshotStop) {
+      extraSnapshotStop()
+      extraSnapshotStop = null
+    } else if (user) {
+      // Merge all the user info from all the authenticated providers
+      user.providerData.forEach((profile) => {
+        if (!profile) return
+
+        const us = {
+          updatedOn: new Date(),
+          provider: profile.providerId,
+          name: profile.displayName,
+          email: profile.email,
+          photoUrl: profile.photoURL,
+          uid: profile.uid,
+        }
+
+        firebase
+          .firestore()
+          .collection("users")
+          .doc(user.uid)
+          .set(us, { merge: true })
+          .catch((e) => console.error("error updating", us, e))
+      })
+
+      extraSnapshotStop = firebase
+        .firestore()
+        .collection("users")
+        .doc(user.uid)
+        .onSnapshot((doc) => {
+          const data = doc.data()
+
+          const userUpdate: HoppUser = user
+
+          if (data) {
+            // Write extra provider data
+            userUpdate.provider = data.provider
+            userUpdate.accessToken = data.accessToken
+          }
+        })
+    }
+    currentUser$.next(user)
+  })
+
+  firebase.auth().onIdTokenChanged(async (user) => {
+    if (user) {
+      authIdToken$.next(await user.getIdToken())
+    } else {
+      authIdToken$.next(null)
+    }
+  })
+}
+
+/**
+ * Sign user in with a popup using Google
+ */
+export async function signInUserWithGoogle() {
+  return await firebase
+    .auth()
+    .signInWithPopup(new firebase.auth.GoogleAuthProvider())
+}
+
+/**
+ * Sign user in with a popup using Github
+ */
+export async function signInUserWithGithub() {
+  return await firebase
+    .auth()
+    .signInWithPopup(new firebase.auth.GithubAuthProvider().addScope("gist"))
+}
+
+/**
+ * Sign user in with email and password
+ */
+export async function signInWithEmailAndPassword(
+  email: string,
+  password: string
+) {
+  return await firebase.auth().signInWithEmailAndPassword(email, password)
+}
+
+/**
+ * Gets the sign in methods for a given email address
+ *
+ * @param email - Email to get the methods of
+ *
+ * @returns Promise for string array of the auth provider methods accessible
+ */
+export async function getSignInMethodsForEmail(email: string) {
+  return await firebase.auth().fetchSignInMethodsForEmail(email)
+}
+
+/**
+ * Sends an email with the signin link to the user
+ *
+ * @param email - Email to send the email to
+ * @param actionCodeSettings - The settings to apply to the link
+ */
+export async function signInWithEmail(
+  email: string,
+  actionCodeSettings: firebase.auth.ActionCodeSettings
+) {
+  return await firebase.auth().sendSignInLinkToEmail(email, actionCodeSettings)
+}
+
+/**
+ * Checks and returns whether the sign in link is an email link
+ *
+ * @param url - The URL to look in
+ */
+export function isSignInWithEmailLink(url: string) {
+  return firebase.auth().isSignInWithEmailLink(url)
+}
+
+/**
+ * Sends an email with sign in with email link
+ *
+ * @param email - Email to log in to
+ * @param url - The action URL which is used to validate login
+ */
+export async function signInWithEmailLink(email: string, url: string) {
+  return await firebase.auth().signInWithEmailLink(email, url)
+}
+
+/**
+ * Signs out the user
+ */
+export async function signOutUser() {
+  if (!currentUser$.value) throw new Error("No user has logged in")
+
+  await firebase.auth().signOut()
+}
+
+/**
+ * Sets the provider id and relevant provider auth token
+ * as user metadata
+ *
+ * @param id - The provider ID
+ * @param token - The relevant auth token for the given provider
+ */
+export async function setProviderInfo(id: string, token: string) {
+  if (!currentUser$.value) throw new Error("No user has logged in")
+
+  const us = {
+    updatedOn: new Date(),
+    provider: id,
+    accessToken: token,
+  }
+
+  try {
+    await firebase
+      .firestore()
+      .collection("users")
+      .doc(currentUser$.value.uid)
+      .update(us)
+      .catch((e) => console.error("error updating", us, e))
+  } catch (e) {
+    console.error("error updating", e)
+
+    throw e
+  }
+}

helpers/fb/collections.ts

@@ -0,0 +1,147 @@
+import firebase from "firebase"
+import { currentUser$ } from "./auth"
+import {
+  restCollections$,
+  graphqlCollections$,
+  setRESTCollections,
+  setGraphqlCollections,
+} from "~/newstore/collections"
+import { settingsStore } from "~/newstore/settings"
+
+type CollectionFlags = "collectionsGraphql" | "collections"
+
+/**
+ * Whether the collections are loaded. If this is set to true
+ * Updates to the collections store are written into firebase.
+ *
+ * If you have want to update the store and not fire the store update
+ * subscription, set this variable to false, do the update and then
+ * set it to true
+ */
+let loadedRESTCollections = false
+
+/**
+ * Whether the collections are loaded. If this is set to true
+ * Updates to the collections store are written into firebase.
+ *
+ * If you have want to update the store and not fire the store update
+ * subscription, set this variable to false, do the update and then
+ * set it to true
+ */
+let loadedGraphqlCollections = false
+
+export async function writeCollections(
+  collection: any[],
+  flag: CollectionFlags
+) {
+  if (currentUser$.value === null)
+    throw new Error("User not logged in to write collections")
+
+  const cl = {
+    updatedOn: new Date(),
+    author: currentUser$.value.uid,
+    author_name: currentUser$.value.displayName,
+    author_image: currentUser$.value.photoURL,
+    collection,
+  }
+
+  try {
+    await firebase
+      .firestore()
+      .collection("users")
+      .doc(currentUser$.value.uid)
+      .collection(flag)
+      .doc("sync")
+      .set(cl)
+  } catch (e) {
+    console.error("error updating", cl, e)
+    throw e
+  }
+}
+
+export function initCollections() {
+  restCollections$.subscribe((collections) => {
+    if (
+      loadedRESTCollections &&
+      currentUser$.value &&
+      settingsStore.value.syncCollections
+    ) {
+      writeCollections(collections, "collections")
+    }
+  })
+
+  graphqlCollections$.subscribe((collections) => {
+    if (
+      loadedGraphqlCollections &&
+      currentUser$.value &&
+      settingsStore.value.syncCollections
+    ) {
+      writeCollections(collections, "collectionsGraphql")
+    }
+  })
+
+  let restSnapshotStop: (() => void) | null = null
+  let graphqlSnapshotStop: (() => void) | null = null
+
+  currentUser$.subscribe((user) => {
+    if (!user) {
+      if (restSnapshotStop) {
+        restSnapshotStop()
+        restSnapshotStop = null
+      }
+
+      if (graphqlSnapshotStop) {
+        graphqlSnapshotStop()
+        graphqlSnapshotStop = null
+      }
+    } else {
+      restSnapshotStop = firebase
+        .firestore()
+        .collection("users")
+        .doc(user.uid)
+        .collection("collections")
+        .onSnapshot((collectionsRef) => {
+          const collections: any[] = []
+          collectionsRef.forEach((doc) => {
+            const collection = doc.data()
+            collection.id = doc.id
+            collections.push(collection)
+          })
+
+          // Prevent infinite ping-pong of updates
+          loadedRESTCollections = false
+
+          // TODO: Wth is with collections[0]
+          if (collections.length > 0) {
+            setRESTCollections(collections[0].collection)
+          }
+
+          loadedRESTCollections = true
+        })
+
+      graphqlSnapshotStop = firebase
+        .firestore()
+        .collection("users")
+        .doc(user.uid)
+        .collection("collectionsGraphql")
+        .onSnapshot((collectionsRef) => {
+          const collections: any[] = []
+          collectionsRef.forEach((doc) => {
+            const collection = doc.data()
+            collection.id = doc.id
+            collections.push(collection)
+          })
+
+          // Prevent infinite ping-pong of updates
+          loadedGraphqlCollections = false
+
+          // TODO: Wth is with collections[0]
+          if (collections.length > 0) {
+            setGraphqlCollections(collections[0].collection)
+          }
+
+          loadedGraphqlCollections = true
+        })
+    }
+  })
+}

helpers/fb/environments.ts

@@ -0,0 +1,84 @@
+import firebase from "firebase"
+import { currentUser$ } from "./auth"
+import {
+  Environment,
+  environments$,
+  replaceEnvironments,
+} from "~/newstore/environments"
+import { settingsStore } from "~/newstore/settings"
+
+/**
+ * Used locally to prevent infinite loop when environment sync update
+ * is applied to the store which then fires the store sync listener.
+ * When you want to update environments and not want to fire the update listener,
+ * set this to true and then set it back to false once it is done
+ */
+let loadedEnvironments = false
+
+async function writeEnvironments(environment: Environment[]) {
+  if (currentUser$.value == null)
+    throw new Error("Cannot write environments when signed out")
+
+  const ev = {
+    updatedOn: new Date(),
+    author: currentUser$.value.uid,
+    author_name: currentUser$.value.displayName,
+    author_image: currentUser$.value.photoURL,
+    environment,
+  }
+
+  try {
+    await firebase
+      .firestore()
+      .collection("users")
+      .doc(currentUser$.value.uid)
+      .collection("environments")
+      .doc("sync")
+      .set(ev)
+  } catch (e) {
+    console.error("error updating", ev, e)
+
+    throw e
+  }
+}
+
+export function initEnvironments() {
+  environments$.subscribe((envs) => {
+    if (
+      currentUser$.value &&
+      settingsStore.value.syncEnvironments &&
+      loadedEnvironments
+    ) {
+      writeEnvironments(envs)
+    }
+  })
+
+  let snapshotStop: (() => void) | null = null
+
+  currentUser$.subscribe((user) => {
+    if (!user && snapshotStop) {
+      // User logged out, clean up snapshot listener
+      snapshotStop()
+      snapshotStop = null
+    } else if (user) {
+      snapshotStop = firebase
+        .firestore()
+        .collection("users")
+        .doc(user.uid)
+        .collection("environments")
+        .onSnapshot((environmentsRef) => {
+          const environments: any[] = []
+
+          environmentsRef.forEach((doc) => {
+            const environment = doc.data()
+            environment.id = doc.id
+            environments.push(environment)
+          })
+
+          loadedEnvironments = false
+          replaceEnvironments(environments[0].environment)
+          loadedEnvironments = true
+        })
+    }
+  })
+}

helpers/fb/history.ts

@@ -0,0 +1,201 @@
+import firebase from "firebase"
+import { currentUser$ } from "./auth"
+import { settingsStore } from "~/newstore/settings"
+import {
+  graphqlHistoryStore,
+  HISTORY_LIMIT,
+  restHistoryStore,
+  setGraphqlHistoryEntries,
+  setRESTHistoryEntries,
+} from "~/newstore/history"
+
+type HistoryFBCollections = "history" | "graphqlHistory"
+
+/**
+ * Whether the history are loaded. If this is set to true
+ * Updates to the history store are written into firebase.
+ *
+ * If you have want to update the store and not fire the store update
+ * subscription, set this variable to false, do the update and then
+ * set it to true
+ */
+let loadedRESTHistory = false
+
+/**
+ * Whether the history are loaded. If this is set to true
+ * Updates to the history store are written into firebase.
+ *
+ * If you have want to update the store and not fire the store update
+ * subscription, set this variable to false, do the update and then
+ * set it to true
+ */
+let loadedGraphqlHistory = false
+
+async function writeHistory(entry: any, col: HistoryFBCollections) {
+  if (currentUser$.value == null)
+    throw new Error("User not logged in to sync history")
+
+  const hs = entry
+
+  try {
+    await firebase
+      .firestore()
+      .collection("users")
+      .doc(currentUser$.value.uid)
+      .collection(col)
+      .add(hs)
+  } catch (e) {
+    console.error("error writing to history", hs, e)
+    throw e
+  }
+}
+
+async function deleteHistory(entry: any, col: HistoryFBCollections) {
+  if (currentUser$.value == null)
+    throw new Error("User not logged in to delete history")
+
+  try {
+    await firebase
+      .firestore()
+      .collection("users")
+      .doc(currentUser$.value.uid)
+      .collection(col)
+      .doc(entry.id)
+      .delete()
+  } catch (e) {
+    console.error("error deleting history", entry, e)
+    throw e
+  }
+}
+
+async function clearHistory(col: HistoryFBCollections) {
+  if (currentUser$.value == null)
+    throw new Error("User not logged in to clear history")
+
+  const { docs } = await firebase
+    .firestore()
+    .collection("users")
+    .doc(currentUser$.value.uid)
+    .collection(col)
+    .get()
+
+  await Promise.all(docs.map((e) => deleteHistory(e, col)))
+}
+
+async function toggleStar(entry: any, col: HistoryFBCollections) {
+  if (currentUser$.value == null)
+    throw new Error("User not logged in to toggle star")
+
+  console.log(entry)
+
+  try {
+    await firebase
+      .firestore()
+      .collection("users")
+      .doc(currentUser$.value.uid)
+      .collection(col)
+      .doc(entry.id)
+      .update({ star: !entry.star })
+  } catch (e) {
+    console.error("error toggling star", entry, e)
+    throw e
+  }
+}
+
+export function initHistory() {
+  restHistoryStore.dispatches$.subscribe((dispatch) => {
+    if (
+      loadedRESTHistory &&
+      currentUser$.value &&
+      settingsStore.value.syncHistory
+    ) {
+      if (dispatch.dispatcher === "addEntry") {
+        writeHistory(dispatch.payload.entry, "history")
+      } else if (dispatch.dispatcher === "deleteEntry") {
+        deleteHistory(dispatch.payload.entry, "history")
+      } else if (dispatch.dispatcher === "clearHistory") {
+        clearHistory("history")
+      } else if (dispatch.dispatcher === "toggleStar") {
+        toggleStar(dispatch.payload.entry, "history")
+      }
+    }
+  })
+
+  graphqlHistoryStore.dispatches$.subscribe((dispatch) => {
+    if (
+      loadedGraphqlHistory &&
+      currentUser$.value &&
+      settingsStore.value.syncHistory
+    ) {
+      if (dispatch.dispatcher === "addEntry") {
+        writeHistory(dispatch.payload.entry, "graphqlHistory")
+      } else if (dispatch.dispatcher === "deleteEntry") {
+        deleteHistory(dispatch.payload.entry, "graphqlHistory")
+      } else if (dispatch.dispatcher === "clearHistory") {
+        clearHistory("graphqlHistory")
+      } else if (dispatch.dispatcher === "toggleStar") {
+        toggleStar(dispatch.payload.entry, "graphqlHistory")
+      }
+    }
+  })
+
+  let restSnapshotStop: (() => void) | null = null
+  let graphqlSnapshotStop: (() => void) | null = null
+
+  currentUser$.subscribe((user) => {
+    if (!user) {
+      // Clear the snapshot listeners when the user logs out
+      if (restSnapshotStop) {
+        restSnapshotStop()
+        restSnapshotStop = null
+      }
+
+      if (graphqlSnapshotStop) {
+        graphqlSnapshotStop()
+        graphqlSnapshotStop = null
+      }
+    } else {
+      restSnapshotStop = firebase
+        .firestore()
+        .collection("users")
+        .doc(user.uid)
+        .collection("history")
+        .orderBy("updatedOn", "desc")
+        .limit(HISTORY_LIMIT)
+        .onSnapshot((historyRef) => {
+          const history: any[] = []
+
+          historyRef.forEach((doc) => {
+            const entry = doc.data()
+            entry.id = doc.id
+            history.push(entry)
+          })
+
+          loadedRESTHistory = false
+          setRESTHistoryEntries(history)
+          loadedRESTHistory = true
+        })
+
+      graphqlSnapshotStop = firebase
+        .firestore()
+        .collection("users")
+        .doc(user.uid)
+        .collection("graphqlHistory")
+        .orderBy("updatedOn", "desc")
+        .limit(HISTORY_LIMIT)
+        .onSnapshot((historyRef) => {
+          const history: any[] = []
+
+          historyRef.forEach((doc) => {
+            const entry = doc.data()
+            entry.id = doc.id
+            history.push(entry)
+          })
+
+          loadedGraphqlHistory = false
+          setGraphqlHistoryEntries(history)
+          loadedGraphqlHistory = true
+        })
+    }
+  })
+}

helpers/fb/index.ts

@@ -0,0 +1,33 @@
+import firebase from "firebase"
+import { initAuth } from "./auth"
+import { initCollections } from "./collections"
+import { initEnvironments } from "./environments"
+import { initHistory } from "./history"
+import { initSettings } from "./settings"
+
+const firebaseConfig = {
+  apiKey: process.env.API_KEY,
+  authDomain: process.env.AUTH_DOMAIN,
+  databaseURL: process.env.DATABASE_URL,
+  projectId: process.env.PROJECT_ID,
+  storageBucket: process.env.STORAGE_BUCKET,
+  messagingSenderId: process.env.MESSAGING_SENDER_ID,
+  appId: process.env.APP_ID,
+  measurementId: process.env.MEASUREMENT_ID,
+}
+
+let initialized = false
+
+export function initializeFirebase() {
+  if (!initialized) {
+    firebase.initializeApp(firebaseConfig)
+
+    initAuth()
+    initSettings()
+    initCollections()
+    initHistory()
+    initEnvironments()
+
+    initialized = true
+  }
+}

helpers/fb/settings.ts

@@ -0,0 +1,92 @@
+import firebase from "firebase"
+import { currentUser$ } from "./auth"
+import { applySetting, settingsStore, SettingsType } from "~/newstore/settings"
+
+/**
+ * Used locally to prevent infinite loop when settings sync update
+ * is applied to the store which then fires the store sync listener.
+ * When you want to update settings and not want to fire the update listener,
+ * set this to true and then set it back to false once it is done
+ */
+let loadedSettings = false
+
+/**
+ * Write Transform
+ */
+async function writeSettings(setting: string, value: any) {
+  if (currentUser$.value === null)
+    throw new Error("Cannot write setting, user not signed in")
+
+  const st = {
+    updatedOn: new Date(),
+    author: currentUser$.value.uid,
+    author_name: currentUser$.value.displayName,
+    author_image: currentUser$.value.photoURL,
+    name: setting,
+    value,
+  }
+
+  try {
+    await firebase
+      .firestore()
+      .collection("users")
+      .doc(currentUser$.value.uid)
+      .collection("settings")
+      .doc(setting)
+      .set(st)
+  } catch (e) {
+    console.error("error updating", st, e)
+    throw e
+  }
+}
+
+export function initSettings() {
+  settingsStore.dispatches$.subscribe((dispatch) => {
+    if (currentUser$.value && loadedSettings) {
+      if (dispatch.dispatcher === "bulkApplySettings") {
+        Object.keys(dispatch.payload).forEach((key) => {
+          writeSettings(key, dispatch.payload[key])
+        })
+      } else {
+        writeSettings(
+          dispatch.payload.settingKey,
+          settingsStore.value[dispatch.payload.settingKey as keyof SettingsType]
+        )
+      }
+    }
+  })
+
+  let snapshotStop: (() => void) | null = null
+
+  // Subscribe and unsubscribe event listeners
+  currentUser$.subscribe((user) => {
+    if (!user && snapshotStop) {
+      // User logged out
+      snapshotStop()
+      snapshotStop = null
+    } else if (user) {
+      snapshotStop = firebase
+        .firestore()
+        .collection("users")
+        .doc(user.uid)
+        .collection("settings")
+        .onSnapshot((settingsRef) => {
+          const settings: any[] = []
+
+          settingsRef.forEach((doc) => {
+            const setting = doc.data()
+            setting.id = doc.id
+            settings.push(setting)
+          })
+
+          loadedSettings = false
+          settings.forEach((e) => {
+            if (e && e.name && e.value != null) {
+              applySetting(e.name, e.value)
+            }
+          })
+          loadedSettings = true
+        })
+    }
+  })
+}

helpers/teams/BackendUserInfo.ts

@@ -1,6 +1,6 @@
 import { BehaviorSubject } from "rxjs"
 import gql from "graphql-tag"
-import { fb } from "../fb"
+import { authIdToken$ } from "../fb/auth"
 import { apolloClient } from "../apollo"
 
 /*
@@ -11,7 +11,7 @@ import { apolloClient } from "../apollo"
 /**
  * Defines the information provided about a user
  */
-interface UserInfo {
+export interface UserInfo {
   /**
    * UID of the user
    */
@@ -42,10 +42,8 @@ export const currentUserInfo$ = new BehaviorSubject<UserInfo | null>(null)
 /**
  * Initializes the currenUserInfo$ view and sets up its update mechanism
  */
-export async function initUserInfo() {
+export function initUserInfo() {
-  if (fb.idToken) await updateUserInfo()
+  authIdToken$.subscribe((token) => {
-
-  fb.idToken$.subscribe((token) => {
     if (token) {
       updateUserInfo()
     } else {

lang/bn-BD.json

@@ -263,10 +263,7 @@
   "syncCollections": "সংগ্রহ",
   "syncEnvironments": "এনভায়রনমেন্টসমূহ",
   "turn_on": "চালু করুন",
-  "login_first": "প্রথমে লগিন করুন",
-  "paste_a_note": "একটি মন্তব্য লিপিবদ্ধ করুন",
   "import_from_sync": "সিঙ্ক থেকে ইমপোর্ট করুন",
-  "notes": "মন্তব্য",
   "socketio": "সকেট ইনপুট/আউটপুট",
   "event_name": "ইভেন্টের নাম",
   "mqtt": "এম.কিউ.টি.টি",

lang/de-DE.json

@@ -90,10 +90,7 @@
   "syncEnvironments": "Environments",
   "turn_on": "Anschalten",
   "turn_off": "Ausschalten",
-  "login_first": "Logge dich zuerst ein",
-  "paste_a_note": "Füge eine Notiz hinzu",
   "import_from_sync": "Von Sync importieren",
-  "notes": "Notizen",
   "socketio": "Socket.IO",
   "event_name": "Event Name",
   "mqtt": "MQTT",

lang/en-US.json

@@ -266,10 +266,7 @@
   "syncEnvironments": "Environments",
   "turn_on": "Turn on",
   "turn_off": "Turn off",
-  "login_first": "Login first",
-  "paste_a_note": "Paste a note",
   "import_from_sync": "Import from Sync",
-  "notes": "Notes",
   "socketio": "Socket.IO",
   "event_name": "Event Name",
   "mqtt": "MQTT",

lang/es-ES.json

@@ -240,7 +240,6 @@
   "syncCollections": "Colecciones",
   "syncEnvironments": "Entornos",
   "turn_on": "Encender",
-  "login_first": "Inicie sesión primero",
   "import_from_sync": "Importar desde Sync",
   "add_one_variable": "(añade al menos una variable)",
   "check_graphql_valid": "Compruebe la URL para ver si es un endpoint GraphQL válido",
@@ -262,8 +261,6 @@
   "scrollInto_use_toggle": "Auto scroll",
   "prettify_query": "Formatear query",
   "prettify_body": "Formatear cuerpo",
-  "paste_a_note": "Pegar una nota",
-  "notes": "Notas",
   "new_environment": "Nuevo entorno",
   "my_new_environment": "Mi nuevo entorno",
   "mqtt_unsubscribe": "Desuscribirse",

lang/fr-FR.json

@@ -241,7 +241,6 @@
   "syncCollections": "Collections",
   "syncEnvironments": "Environments",
   "turn_on": "Activer",
-  "login_first": "Se connecter d'abord",
   "paste_a_collection": "Coller une collection",
   "import_from_sync": "Importer depuis la synchronisation",
   "create_new_collection": "Créer une nouvelle collection",

lang/id-ID.json

@@ -263,10 +263,7 @@
   "syncEnvironments": "Lingkungan",
   "turn_on": "Nyalakan",
   "turn_off": "Matikan",
-  "login_first": "Masuk dahulu",
-  "paste_a_note": "Tempel catatan",
   "import_from_sync": "Impor dari Sinkronasi",
-  "notes": "Catatan",
   "socketio": "Socket.IO",
   "event_name": "Nama Kejadian",
   "mqtt": "MQTT",

lang/in-IN.json

@@ -266,10 +266,7 @@
   "syncEnvironments": "वातावरण",
   "turn_on": "चालू करो",
   "turn_off": "बंद करें",
-  "login_first": "पहले प्रवेश करो",
-  "paste_a_note": "एक नोट चिपकाएं",
   "import_from_sync": "सिंक से आयात करें",
-  "notes": "टिप्पणियाँ",
   "socketio": "सॉकेट.आईओ",
   "event_name": "घटना नाम",
   "mqtt": "एमक्यूटीटी",

lang/ko-KR.json

@@ -263,10 +263,7 @@
   "syncCollections": "컬렉션",
   "syncEnvironments": "환경변수",
   "turn_on": "Turn on",
-  "login_first": "먼저 로그인해주세요.",
-  "paste_a_note": "노트 붙여넣기",
   "import_from_sync": "동기화에서 가져오기",
-  "notes": "노트",
   "socketio": "Socket.IO",
   "event_name": "이",
   "mqtt": "MQTT",

lang/ml-ML.json

@@ -263,10 +263,7 @@
   "syncCollections": "ശേഖരങ്ങൾ",
   "syncEnvironments": "പരിതസ്ഥിതികൾ",
   "turn_on": "ഓൺ ചെയ്യുക",
-  "login_first": "ആദ്യം പ്രവേശിക്കുക",
-  "paste_a_note": "ഒരു കുറിപ്പ് ഒട്ടിക്കുക",
   "import_from_sync": "Sync-ൽ നിന്ന് ഇറക്കുമതി ചെയ്യുക",
-  "notes": "കുറിപ്പുകൾ",
   "socketio": "Socket.IO",
   "event_name": "ഇവന്റിന്റെ പേര്",
   "mqtt": "MQTT",

lang/nb-NO.json

@@ -266,10 +266,7 @@
   "syncEnvironments": "Miljøer",
   "turn_on": "Slå på",
   "turn_off": "Slå av",
-  "login_first": "Logg inn først",
-  "paste_a_note": "Lim inn et notat",
   "import_from_sync": "Importer fra synkronisering",
-  "notes": "Notater",
   "socketio": "Socket.IO",
   "event_name": "Hendelsesnavn",
   "mqtt": "MQTT",

lang/nl-BE.json

@@ -263,10 +263,7 @@
   "syncCollections": "Collecties",
   "syncEnvironments": "Omgevingen",
   "turn_on": "Inschakelen",
-  "login_first": "Meld u eerst aan",
-  "paste_a_note": "Notitie plakken",
   "import_from_sync": "Importeren van Sync",
-  "notes": "Notities",
   "socketio": "Socket.IO",
   "event_name": "Event-naam",
   "mqtt": "MQTT",

lang/pt-BR.json

@@ -271,10 +271,7 @@
   "scrollInto_use_toggle": "Auto rolagem",
   "sync": "Sincronizar",
   "turn_on": "Ligar",
-  "login_first": "Realize o login primeiro",
-  "paste_a_note": "Cole uma nota",
   "import_from_sync": "Importar de Sincronização",
-  "notes": "Notas",
   "socketio": "Socket.IO",
   "event_name": "Nome do Evento",
   "mqtt": "MQTT",

lang/pt-PT.json

@@ -260,10 +260,7 @@
   "syncCollections": "Coleções",
   "syncEnvironments": "Ambientes",
   "turn_on": "Ativar",
-  "login_first": "Entre primeiro",
-  "paste_a_note": "Cole uma nota",
   "import_from_sync": "Importar from Sync",
-  "notes": "Notas",
   "socketio": "Socket.IO",
   "event_name": "Nome do evento",
   "mqtt": "MQTT",

lang/tr-TR.json

@@ -261,10 +261,7 @@
   "syncCollections": "Koleksiyonlar",
   "syncEnvironments": "Ortamlar",
   "turn_on": "Aç",
-  "login_first": "Önce Giriş Yap",
-  "paste_a_note": "Bir not yapıştır",
   "import_from_sync": "Senkronizasyondan İçeri Aktar",
-  "notes": "Notlar",
   "socketio": "Socket.IO",
   "event_name": "Olay Adı",
   "mqtt": "MQTT",

lang/vi-VN.json

@@ -263,10 +263,7 @@
   "syncCollections": "Bộ sưu tập",
   "syncEnvironments": "Môi trường",
   "turn_on": "Bật",
-  "login_first": "Đăng nhập trước",
-  "paste_a_note": "Dán ghi chú",
   "import_from_sync": "Nhập từ đồng bồ",
-  "notes": "Ghi chú",
   "socketio": "Socket.IO",
   "event_name": "Tên Event",
   "mqtt": "MQTT",

lang/zh-CN.json

@@ -268,10 +268,7 @@
   "syncEnvironments": "环境",
   "turn_on": "点击开启",
   "turn_off": "点击关闭",
-  "login_first": "请先登录：",
-  "paste_a_note": "输入新便笺",
   "import_from_sync": "从云存储导入",
-  "notes": "便笺",
   "socketio": "Socket.IO",
   "event_name": "事件名称",
   "mqtt": "MQTT",

lang/zh-TW.json

@@ -258,10 +258,7 @@
   "syncCollections": "收藏庫",
   "syncEnvironments": "環境",
   "turn_on": "打開",
-  "login_first": "請先登入",
-  "paste_a_note": "Paste a note",
   "import_from_sync": "Import from Sync",
-  "notes": "Notes",
   "socketio": "Socket.IO",
   "event_name": "Event Name",
   "mqtt": "MQTT",

layouts/default.vue

@@ -18,6 +18,7 @@ import { setupLocalPersistence } from "~/newstore/localpersistence"
 import { performMigrations } from "~/helpers/migrations"
 import { initUserInfo } from "~/helpers/teams/BackendUserInfo"
 import { registerApolloAuthUpdate } from "~/helpers/apollo"
+import { initializeFirebase } from "~/helpers/fb"
 
 export default {
   beforeMount() {
@@ -62,6 +63,7 @@ export default {
 
     setupLocalPersistence()
 
+    initializeFirebase()
     initUserInfo()
   },
   beforeDestroy() {

layouts/error.vue

@@ -22,6 +22,8 @@
 </template>
 
 <script>
+import { initializeFirebase } from "~/helpers/fb"
+
 export default {
   props: {
     error: {
@@ -37,7 +39,9 @@ export default {
       },
     }
   },
-
+  beforeMount() {
+    initializeFirebase()
+  },
   computed: {
     statusCode() {
       return (this.error && this.error.statusCode) || 500

newstore/settings.ts

@@ -64,28 +64,17 @@ const dispatchers = defineDispatchers({
     const result: Partial<SettingsType> = {}
     result[settingKey] = value
 
-    return result
-  },
-  applySettingFB<K extends keyof SettingsType>(
-    _currentState: SettingsType,
-    { settingKey, value }: { settingKey: K; value: SettingsType[K] }
-  ) {
-    if (!validKeys.includes(settingKey)) {
-      console.log(
-        `Ignoring non-existent setting key '${settingKey}' assignment by firebase`
-      )
-      return {}
-    }
-
-    const result: Partial<SettingsType> = {}
-    result[settingKey] = value
-
     return result
   },
 })
 
 export const settingsStore = new DispatchingStore(defaultSettings, dispatchers)
 
+/**
+ * An observable value to make avail all the state information at once
+ */
+export const settings$ = settingsStore.subject$.asObservable()
+
 export function getSettingSubject<K extends keyof SettingsType>(
   settingKey: K
 ): Observable<SettingsType[K]> {
@@ -120,16 +109,3 @@ export function applySetting<K extends keyof SettingsType>(
     },
   })
 }
-
-export function applySettingFB<K extends keyof SettingsType>(
-  settingKey: K,
-  value: SettingsType[K]
-) {
-  settingsStore.dispatch({
-    dispatcher: "applySettingFB",
-    payload: {
-      settingKey,
-      value,
-    },
-  })
-}

pages/doc.vue

@@ -64,18 +64,18 @@
             <div v-else class="row-wrapper">
               <div
                 v-tooltip.bottom="{
-                  content: !fb.currentUser
+                  content: !currentUser
                     ? $t('login_with_github_to') + $t('create_secret_gist')
-                    : fb.currentUser.provider !== 'github.com'
+                    : currentUser.provider !== 'github.com'
                     ? $t('login_with_github_to') + $t('create_secret_gist')
                     : null,
                 }"
               >
                 <button
                   :disabled="
-                    !fb.currentUser
+                    !currentUser
                       ? true
-                      : fb.currentUser.provider !== 'github.com'
+                      : currentUser.provider !== 'github.com'
                       ? true
                       : false
                   "
@@ -113,7 +113,7 @@
 
 <script>
 import Mustache from "mustache"
-import { fb } from "~/helpers/fb"
+import { currentUser$ } from "~/helpers/fb/auth"
 import DocsTemplate from "~/assets/md/docs.md"
 import folderContents from "~/assets/md/folderContents.md"
 import folderBody from "~/assets/md/folderBody.md"
@@ -121,13 +121,17 @@ import folderBody from "~/assets/md/folderBody.md"
 export default {
   data() {
     return {
-      fb,
       collectionJSON: "[]",
       items: [],
       docsMarkdown: "",
       selected: [],
     }
   },
+  subscriptions() {
+    return {
+      currentUser: currentUser$,
+    }
+  },
   head() {
     return {
       title: `Documentation • Hoppscotch`,
@@ -147,7 +151,7 @@ export default {
           },
           {
             headers: {
-              Authorization: `token ${fb.currentUser.accessToken}`,
+              Authorization: `token ${this.currentUser.accessToken}`,
               Accept: "application/vnd.github.v3+json",
             },
           }

pages/enter.vue

@@ -6,25 +6,34 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
-import { fb } from "~/helpers/fb"
+import Vue from "vue"
+import { initializeFirebase } from "~/helpers/fb"
+import { isSignInWithEmailLink, signInWithEmailLink } from "~/helpers/fb/auth"
 
-export default {
+export default Vue.extend({
   data() {
     return {
       signingInWithEmail: false,
       error: null,
     }
   },
+  beforeMount() {
+    initializeFirebase()
+  },
   async mounted() {
-    if (fb.isSignInWithEmailLink(window.location.href)) {
+    if (isSignInWithEmailLink(window.location.href)) {
       this.signingInWithEmail = true
+
       let email = window.localStorage.getItem("emailForSignIn")
+
       if (!email) {
-        email = window.prompt("Please provide your email for confirmation")
+        email = window.prompt(
+          "Please provide your email for confirmation"
+        ) as string
       }
-      await fb
+
-        .signInWithEmailLink(email, window.location.href)
+      await signInWithEmailLink(email, window.location.href)
         .then(() => {
           window.localStorage.removeItem("emailForSignIn")
           this.$router.push({ path: "/" })
@@ -38,5 +47,5 @@ export default {
         })
     }
   },
-}
+})
 </script>

pages/graphql.vue

@@ -457,14 +457,6 @@
             <SmartTab :id="'collections'" :label="$t('collections')">
               <CollectionsGraphql />
             </SmartTab>
-
-            <!-- <SmartTab :id="'env'" :label="$t('environments')">
-                <Environments @use-environment="useSelectedEnvironment($event)" />
-              </SmartTab>
-
-              <SmartTab :id="'notes'" :label="$t('notes')">
-                <HttpNotes />
-              </SmartTab> -->
           </SmartTabs>
         </aside>
       </TranslateSlideLeft>

pages/index.vue

@@ -628,10 +628,6 @@
               <SmartTab :id="'env'" :label="$t('environments')">
                 <Environments />
               </SmartTab>
-
-              <SmartTab :id="'notes'" :label="$t('notes')">
-                <HttpNotes />
-              </SmartTab>
             </SmartTabs>
           </section>
         </aside>
@@ -766,7 +762,6 @@ import runTestScriptWithVariables from "~/helpers/postwomanTesting"
 import parseTemplateString from "~/helpers/templating"
 import { tokenRequest, oauthRedirect } from "~/helpers/oauth"
 import { cancelRunningRequest, sendNetworkRequest } from "~/helpers/network"
-import { fb } from "~/helpers/fb"
 import {
   hasPathParams,
   addPathParamsToVariables,
@@ -811,7 +806,6 @@ export default {
       showSaveRequestModal: false,
       editRequest: {},
       activeSidebar: true,
-      fb,
       customMethod: false,
       files: [],
       filenames: "",

pages/settings.vue

@@ -1,29 +1,29 @@
 <template>
   <div class="page">
-    <div v-if="currentUser && currentUser.eaInvited">
+    <div v-if="currentBackendUser && currentBackendUser.eaInvited">
       <Teams />
     </div>
 
     <AppSection ref="account" :label="$t('account')">
       <div class="flex flex-col">
         <label>{{ $t("account") }}</label>
-        <div v-if="fb.currentUser">
+        <div v-if="currentUser">
           <button class="icon">
             <img
-              v-if="fb.currentUser.photoURL"
+              v-if="currentUser.photoURL"
-              :src="fb.currentUser.photoURL"
+              :src="currentUser.photoURL"
               class="w-6 h-6 rounded-full material-icons"
             />
             <i v-else class="material-icons">account_circle</i>
             <span>
-              {{ fb.currentUser.displayName || $t("nothing_found") }}
+              {{ currentUser.displayName || $t("nothing_found") }}
             </span>
           </button>
           <br />
           <button class="icon">
             <i class="material-icons">email</i>
             <span>
-              {{ fb.currentUser.email || $t("nothing_found") }}
+              {{ currentUser.email || $t("nothing_found") }}
             </span>
           </button>
           <br />
@@ -57,13 +57,6 @@
               {{ SYNC_HISTORY ? $t("enabled") : $t("disabled") }}
             </SmartToggle>
           </p>
-
-          <p v-if="fb.currentSettings.length !== 3">
-            <button @click="initSettings">
-              <i class="material-icons">sync</i>
-              <span>{{ $t("turn_on") + " " + $t("sync") }}</span>
-            </button>
-          </p>
         </div>
         <div v-else>
           <label>{{ $t("login_with") }}</label>
@@ -214,7 +207,6 @@
 <script lang="ts">
 import Vue from "vue"
 import { hasExtensionInstalled } from "../helpers/strategies/ExtensionStrategy"
-import { fb } from "~/helpers/fb"
 import {
   getSettingSubject,
   applySetting,
@@ -223,6 +215,7 @@ import {
 } from "~/newstore/settings"
 import type { KeysMatching } from "~/types/ts-utils"
 import { currentUserInfo$ } from "~/helpers/teams/BackendUserInfo"
+import { currentUser$ } from "~/helpers/fb/auth"
 
 type SettingsType = typeof defaultSettings
 
@@ -234,7 +227,6 @@ export default Vue.extend({
         : null,
 
       doneButton: '<i class="material-icons">done</i>',
-      fb,
 
       SYNC_COLLECTIONS: true,
       SYNC_ENVIRONMENTS: true,
@@ -247,6 +239,9 @@ export default Vue.extend({
       PROXY_ENABLED: true,
 
       showEmail: false,
+
+      currentBackendUser: null,
+      currentUser: null,
     }
   },
   subscriptions() {
@@ -268,7 +263,8 @@ export default Vue.extend({
       SYNC_HISTORY: getSettingSubject("syncHistory"),
 
       // Teams feature flag
-      currentUser: currentUserInfo$,
+      currentBackendUser: currentUserInfo$,
+      currentUser: currentUser$,
     }
   },
   head() {
@@ -311,18 +307,6 @@ export default Vue.extend({
       value: SettingsType[K]
     ) {
       this.applySetting(name, value)
-
-      if (name === "syncCollections" && value) {
-        this.syncCollections()
-      }
-      if (name === "syncEnvironments" && value) {
-        this.syncEnvironments()
-      }
-    },
-    initSettings() {
-      applySetting("syncHistory", true)
-      applySetting("syncCollections", true)
-      applySetting("syncEnvironments", true)
     },
     resetProxy({ target }: { target: HTMLElement }) {
       applySetting("PROXY_URL", `https://proxy.hoppscotch.io/`)
@@ -336,30 +320,6 @@ export default Vue.extend({
         1000
       )
     },
-    // TODO: Use the new collection store
-    syncCollections(): void {
-      if (fb.currentUser !== null && this.SYNC_COLLECTIONS) {
-        if (this.$store.state.postwoman.collections)
-          fb.writeCollections(
-            JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)),
-            "collections"
-          )
-        if (this.$store.state.postwoman.collectionsGraphql)
-          fb.writeCollections(
-            JSON.parse(
-              JSON.stringify(this.$store.state.postwoman.collectionsGraphql)
-            ),
-            "collectionsGraphql"
-          )
-      }
-    },
-    syncEnvironments(): void {
-      if (fb.currentUser !== null && this.SYNC_ENVIRONMENTS) {
-        fb.writeEnvironments(
-          JSON.parse(JSON.stringify(this.$store.state.postwoman.environments))
-        )
-      }
-    },
   },
 })
 </script>