Initial Firebase refactor pass

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

@@ -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

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()
     })
 
@@ -110,8 +109,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,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",
       })

components/firebase/Inputform.vue

@@ -33,25 +33,27 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
-import { fb } from "~/helpers/fb"
+import Vue from "vue"
+import { writeFeed } from "~/helpers/fb/feeds"
 
-export default {
+export default Vue.extend({
   data() {
     return {
-      message: null,
+      message: null as string | null,
-      label: 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>

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)
+                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 +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 } =
+        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,9 +141,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 +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()

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,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,
     }
   },

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`

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/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
+  }
+}

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
+        })
+    }
+  })
+}

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()
+}

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
+        })
+    }
+  })
+}

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 {

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() {

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,10 +6,11 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
-import { fb } from "~/helpers/fb"
+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>

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: "",

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"
+              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 />
@@ -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>