Initial Firebase refactor pass

2021-06-14 00:07:30 -04:00
parent ced2f1b911
commit 85c6932f8f
30 changed files with 979 additions and 1029 deletions
--- a/components/app/Header.vue
+++ b/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"
-              :src="fb.currentUser.photoURL"
+              v-if="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() {
--- a/components/collections/ImportExport.vue
+++ b/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",
            },
          }
--- a/components/collections/graphql/ImportExport.vue
+++ b/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",
            },
          }
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -140,7 +140,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 {
@@ -189,11 +189,12 @@ export default {
  subscriptions() {
    return {
      collections: restCollections$,
+      currentUser: currentUser$,
    }
  },
  computed: {
    showTeamCollections() {
-      if (fb.currentUser == null) {
+      if (this.currentUser == null) {
        return false
      }
      return true
--- a/components/environments/ImportExport.vue
+++ b/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",
            },
          }
--- a/components/firebase/Email.vue
+++ b/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()
    })

@@ -110,8 +109,7 @@ export default {
        url: `${process.env.BASE_URL}/enter`,
        handleCodeInApp: true,
      }
-      await fb
-        .signInWithEmail(this.form.email, actionCodeSettings)
+      await signInWithEmail(this.form.email, actionCodeSettings)
        .then(() => {
          this.mode = "email"
          window.localStorage.setItem("emailForSignIn", this.form.email)
--- a/components/firebase/Feeds.vue
+++ b/components/firebase/Feeds.vue
@@ -1,9 +1,9 @@
 <template>
  <div
-    v-if="fb.currentFeeds.length !== 0"
+    v-if="currentFeeds && 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">
+    <ul v-for="feed in 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">
@@ -29,17 +29,17 @@
 </template>

 <script>
-import { fb } from "~/helpers/fb"
+import { deleteFeed, currentFeeds$ } from "~/helpers/fb/feeds"

 export default {
-  data() {
+  subscriptions() {
    return {
-      fb,
+      currentFeeds: currentFeeds$,
    }
  },
  methods: {
    async deleteFeed({ id }) {
-      await fb.deleteFeed(id)
+      await deleteFeed(id)
      this.$toast.error(this.$t("deleted"), {
        icon: "delete",
      })
--- a/components/firebase/Inputform.vue
+++ b/components/firebase/Inputform.vue
@@ -33,25 +33,27 @@
  </div>
 </template>

-<script>
-import { fb } from "~/helpers/fb"
+<script lang="ts">
+import Vue from "vue"
+import { writeFeed } from "~/helpers/fb/feeds"

-export default {
+export default Vue.extend({
  data() {
    return {
-      message: null,
-      label: null,
+      message: null as string | null,
+      label: null as string | null,
    }
  },
  methods: {
    formPost() {
+      // TODO: Check this ?
      if (!(this.message || this.label)) {
        return
      }
-      fb.writeFeeds(this.message, this.label)
+      writeFeed(this.label as string, this.message as string)
      this.message = null
      this.label = null
    },
  },
-}
+})
 </script>
--- a/components/firebase/Login.vue
+++ b/components/firebase/Login.vue
@@ -40,14 +40,16 @@
 </template>

 <script>
-import { fb } from "~/helpers/fb"
+import { applySetting } from "~/newstore/settings"
+import {
+  signInUserWithGoogle,
+  getSignInMethodsForEmail,
+  signInWithEmailAndPassword,
+  signInWithGithub,
+  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,9 +68,9 @@ export default {
            action: {
              text: this.$t("yes"),
              onClick: (_, toastObject) => {
-                fb.writeSettings("syncHistory", true)
-                fb.writeSettings("syncCollections", true)
-                fb.writeSettings("syncEnvironments", true)
+                applySetting("syncHistory", true)
+                applySetting("syncCollections", true)
+                applySetting("syncEnvironments", true)
                this.$router.push({ path: "/settings" })
                toastObject.remove()
              },
@@ -88,7 +90,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 +100,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 +115,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 +129,9 @@ export default {
    },
    async signInWithGithub() {
      try {
-        const { credential, additionalUserInfo } =
-          await fb.signInUserWithGithub()
+        const { credential, additionalUserInfo } = await 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,9 +141,9 @@ export default {
            action: {
              text: this.$t("yes"),
              onClick: (_, toastObject) => {
-                fb.writeSettings("syncHistory", true)
-                fb.writeSettings("syncCollections", true)
-                fb.writeSettings("syncEnvironments", true)
+                applySetting("syncHistory", true)
+                applySetting("syncCollections", true)
+                applySetting("syncEnvironments", true)
                this.$router.push({ path: "/settings" })
                toastObject.remove()
              },
@@ -162,7 +163,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 +173,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 +188,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()
--- a/components/firebase/Logout.vue
+++ b/components/firebase/Logout.vue
@@ -7,21 +7,17 @@
  </div>
 </template>

-<script>
-import { fb } from "~/helpers/fb"
+<script lang="ts">
+import Vue from "vue"
+import { signOutUser } from "~/helpers/fb/auth"

-export default {
-  data() {
-    return {
-      fb,
-    }
-  },
+export default Vue.extend({
  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>
--- a/components/firebase/tests/Feeds.spec.js
+++ b/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")
-  })
-})
--- a/components/firebase/tests/Inputform.spec.js
+++ b/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")
-  })
-})
--- a/components/firebase/tests/Logout.spec.js
+++ b/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())
-  })
-})
--- a/components/http/Notes.vue
+++ b/components/http/Notes.vue
@@ -1,6 +1,6 @@
 <template>
  <AppSection ref="sync" :label="$t('notes')" no-legend>
-    <div v-if="fb.currentUser">
+    <div v-if="currentUser">
      <FirebaseInputform />
      <FirebaseFeeds />
    </div>
@@ -13,12 +13,16 @@
 </template>

 <script>
-import { fb } from "~/helpers/fb"
+import { currentUser$ } from "~/helpers/fb/auth"

 export default {
+  subscriptions() {
+    return {
+      currentUser: currentUser$,
+    }
+  },
  data() {
    return {
-      fb,
      showEmail: false,
    }
  },
--- a/components/teams/index.vue
+++ b/components/teams/index.vue
@@ -8,7 +8,7 @@
  >
    <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>
@@ -56,7 +56,7 @@

 <script>
 import gql from "graphql-tag"
-import { fb } from "~/helpers/fb"
+import { currentUser$ } from "~/helpers/fb/auth"

 export default {
  data() {
@@ -67,10 +67,14 @@ export default {
      editingteamID: "",
      me: {},
      myTeams: [],
-      fb,
      showEmail: false,
    }
  },
+  subscriptions() {
+    return {
+      currentUser: currentUser$,
+    }
+  },
  apollo: {
    me: {
      query: gql`
--- a/helpers/apollo.ts
+++ b/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
  })
 }
--- a/helpers/fb.js
+++ b/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
-)
--- a/helpers/fb/auth.ts
+++ b/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
+  }
+}
--- a/helpers/fb/collections.ts
+++ b/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
+        })
+    }
+  })
+}
--- a/helpers/fb/environments.ts
+++ b/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
+        })
+    }
+  })
+}
--- a/helpers/fb/feeds.ts
+++ b/helpers/fb/feeds.ts
@@ -0,0 +1,91 @@
+import firebase from "firebase"
+import { BehaviorSubject } from "rxjs"
+import { currentUser$ } from "./auth"
+
+type HoppFeed = firebase.firestore.DocumentData & {
+  id: string
+  label: string
+  message: string
+}
+
+/**
+ * An observable subject which is defined as an array of feeds
+ * the current user has.
+ *
+ * Note: If this is null, then it means the user is not signed in
+ */
+export const currentFeeds$ = new BehaviorSubject<HoppFeed[] | null>(null)
+
+export function initFeeds() {
+  let snapshotStop: (() => void) | null = null
+
+  currentUser$.subscribe((user) => {
+    if (!user && snapshotStop) {
+      // User has logged out, clean up snapshot listeners
+      snapshotStop()
+      snapshotStop = null
+    } else if (user) {
+      snapshotStop = firebase
+        .firestore()
+        .collection("users")
+        .doc(user.uid)
+        .collection("feeds")
+        .orderBy("createdOn", "desc")
+        .onSnapshot((feedsRef) => {
+          const feeds: HoppFeed[] = []
+
+          feedsRef.forEach((doc) => {
+            const feed = doc.data()
+            feed.id = doc.id
+            feeds.push(feed as HoppFeed)
+          })
+
+          currentFeeds$.next(feeds)
+        })
+    }
+  })
+}
+
+export async function writeFeed(label: string, message: string) {
+  if (currentUser$.value == null)
+    throw new Error("Logged out user cannot write to feeds")
+
+  const dt = {
+    createdOn: new Date(),
+    author: currentUser$.value.uid,
+    author_name: currentUser$.value.displayName,
+    author_image: currentUser$.value.photoURL,
+    message,
+    label,
+  }
+
+  try {
+    await firebase
+      .firestore()
+      .collection("users")
+      .doc(currentUser$.value.uid)
+      .collection("feeds")
+      .add(dt)
+  } catch (e) {
+    console.error("error inserting", dt, e)
+    throw e
+  }
+}
+
+export async function deleteFeed(id: string) {
+  if (currentUser$.value == null)
+    throw new Error("Logged out user cannot delete feed")
+
+  try {
+    await firebase
+      .firestore()
+      .collection("users")
+      .doc(currentUser$.value.uid)
+      .collection("feeds")
+      .doc(id)
+      .delete()
+  } catch (e) {
+    console.error("error deleting", id, e)
+    throw e
+  }
+}
--- a/helpers/fb/history.ts
+++ b/helpers/fb/history.ts
@@ -0,0 +1,199 @@
+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")
+
+  try {
+    await firebase
+      .firestore()
+      .collection("users")
+      .doc(currentUser$.value.uid)
+      .collection(col)
+      .doc(entry.id)
+      .update({ state: !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
+        })
+    }
+  })
+}
--- a/helpers/fb/index.ts
+++ b/helpers/fb/index.ts
@@ -0,0 +1,29 @@
+import firebase from "firebase"
+import { initAuth } from "./auth"
+import { initCollections } from "./collections"
+import { initEnvironments } from "./environments"
+import { initFeeds } from "./feeds"
+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,
+}
+
+export function initializeFirebase() {
+  firebase.initializeApp(firebaseConfig)
+
+  initAuth()
+  initSettings()
+  initCollections()
+  initHistory()
+  initEnvironments()
+  initFeeds()
+}
--- a/helpers/fb/settings.ts
+++ b/helpers/fb/settings.ts
@@ -0,0 +1,96 @@
+import firebase from "firebase"
+import { currentUser$ } from "./auth"
+import {
+  applySettingFB,
+  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 if (dispatch.dispatcher !== "applySettingFB") {
+        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) {
+              applySettingFB(e.name, e.value)
+            }
+          })
+          loadedSettings = true
+        })
+    }
+  })
+}
--- a/helpers/teams/BackendUserInfo.ts
+++ b/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() {
-  if (fb.idToken) await updateUserInfo()
-
-  fb.idToken$.subscribe((token) => {
+export function initUserInfo() {
+  authIdToken$.subscribe((token) => {
    if (token) {
      updateUserInfo()
    } else {
--- a/layouts/default.vue
+++ b/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() {
--- a/pages/doc.vue
+++ b/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",
            },
          }
--- a/pages/enter.vue
+++ b/pages/enter.vue
@@ -6,10 +6,11 @@
  </div>
 </template>

-<script>
-import { fb } from "~/helpers/fb"
+<script lang="ts">
+import Vue from "vue"
+import { isSignInWithEmailLink, signInWithEmailLink } from "~/helpers/fb/auth"

-export default {
+export default Vue.extend({
  data() {
    return {
      signingInWithEmail: false,
@@ -17,14 +18,18 @@ export default {
    }
  },
  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 +43,5 @@ export default {
        })
    }
  },
-}
+})
 </script>
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -775,12 +775,7 @@ 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,
-  getQueryParams,
-} from "~/helpers/requestParams"
+import { hasPathParams, addPathParamsToVariables, getQueryParams } from "~/helpers/requestParams"
 import { parseUrlAndPath } from "~/helpers/utils/uri"
 import { httpValid } from "~/helpers/utils/valid"
 import {
@@ -820,7 +815,6 @@ export default {
      showSaveRequestModal: false,
      editRequest: {},
      activeSidebar: true,
-      fb,
      customMethod: false,
      files: [],
      filenames: "",
--- a/pages/settings.vue
+++ b/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')" no-legend>
      <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"
-              :src="fb.currentUser.photoURL"
+              v-if="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 />
@@ -58,7 +58,7 @@
            </SmartToggle>
          </p>

-          <p v-if="fb.currentSettings.length !== 3">
+          <p v-if="isSyncDisabled">
            <button @click="initSettings">
              <i class="material-icons">sync</i>
              <span>{{ $t("turn_on") + " " + $t("sync") }}</span>
@@ -214,7 +214,6 @@
 <script lang="ts">
 import Vue from "vue"
 import { hasExtensionInstalled } from "../helpers/strategies/ExtensionStrategy"
-import { fb } from "~/helpers/fb"
 import {
  getSettingSubject,
  applySetting,
@@ -223,6 +222,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 +234,6 @@ export default Vue.extend({
        : null,

      doneButton: '<i class="material-icons">done</i>',
-      fb,

      SYNC_COLLECTIONS: true,
      SYNC_ENVIRONMENTS: true,
@@ -247,6 +246,9 @@ export default Vue.extend({
      PROXY_ENABLED: true,

      showEmail: false,
+
+      currentBackendUser: null,
+      currentUser: null,
    }
  },
  subscriptions() {
@@ -268,7 +270,8 @@ export default Vue.extend({
      SYNC_HISTORY: getSettingSubject("syncHistory"),

      // Teams feature flag
-      currentUser: currentUserInfo$,
+      currentBackendUser: currentUserInfo$,
+      currentUser: currentUser$,
    }
  },
  head() {
@@ -283,6 +286,9 @@ export default Vue.extend({
        key: this.PROXY_KEY,
      }
    },
+    isSyncDisabled(): boolean {
+      return this.SYNC_COLLECTIONS && this.SYNC_ENVIRONMENTS && this.SYNC_HISTORY
+    }
  },
  watch: {
    proxySettings: {
@@ -311,13 +317,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)
@@ -336,30 +335,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>