Migrate code to new history store

components/history/index.vue

@@ -91,10 +91,18 @@
 </template>
 
 <script>
-import { fb } from "~/helpers/fb"
+import {
-
+  restHistory$, 
-const updateOnLocalStorage = (propertyName, property) =>
+  graphqlHistory$,
-  window.localStorage.setItem(propertyName, JSON.stringify(property))
+  clearRESTHistory,
+  clearGraphqlHistory,
+  toggleGraphqlHistoryEntryStar,
+  toggleRESTHistoryEntryStar,
+  addGraphqlHistoryEntry,
+  addRESTHistoryEntry,
+  deleteGraphqlHistoryEntry,
+  deleteRESTHistoryEntry
+} from "~/newstore/history"
 
 export default {
   props: {
@@ -102,34 +110,21 @@ export default {
   },
   data() {
     return {
-      history:
-        fb.currentUser !== null
-          ? this.page === "rest"
-            ? fb.currentHistory
-            : fb.currentGraphqlHistory
-          : JSON.parse(
-              window.localStorage.getItem(
-                this.page === "rest" ? "history" : "graphqlHistory"
-              )
-            ) || [],
       filterText: "",
       showFilter: false,
       isClearingHistory: false,
       showMore: false,
     }
   },
+  subscriptions() {
+    return {
+      history: this.page === "rest" ? restHistory$ : graphqlHistory$
+    }
+  },
   computed: {
     filteredHistory() {
-      const filteringHistory =
+      const filteringHistory = this.history
-        fb.currentUser !== null
+
-          ? this.page === "rest"
-            ? fb.currentHistory
-            : fb.currentGraphqlHistory
-          : JSON.parse(
-              window.localStorage.getItem(
-                this.page === "rest" ? "history" : "graphqlHistory"
-              )
-            ) || []
       return filteringHistory.filter((entry) => {
         const filterText = this.filterText.toLowerCase()
         return Object.keys(entry).some((key) => {
@@ -141,19 +136,10 @@ export default {
     },
   },
   methods: {
-    async clearHistory() {
+    clearHistory() {
-      if (fb.currentUser !== null) {
+      if (this.page === "rest") clearRESTHistory()
-        this.page === "rest"
+      else clearGraphqlHistory()
-          ? await fb.clearHistory()
+
-          : await fb.clearGraphqlHistory()
-      }
-      this.history = []
-      this.filterText = ""
-      this.disableHistoryClearing()
-      updateOnLocalStorage(
-        this.page === "rest" ? "history" : "graphqlHistory",
-        this.history
-      )
       this.$toast.error(this.$t("history_deleted"), {
         icon: "delete",
       })
@@ -161,36 +147,17 @@ export default {
     useHistory(entry) {
       this.$emit("useHistory", entry)
     },
-    async deleteHistory(entry) {
+    deleteHistory(entry) {
-      if (this.history.length === 0) {
+      if (this.page === "rest") deleteRESTHistoryEntry(entry)
-        this.filterText = ""
+      else deleteGraphqlHistoryEntry(entry)
-      }
+
-      if (fb.currentUser !== null) {
-        await (this.page === "rest"
-          ? fb.deleteHistory(entry)
-          : fb.deleteGraphqlHistory(entry))
-        this.history = fb.currentHistory
-        updateOnLocalStorage(
-          this.page === "rest" ? "history" : "graphqlHistory",
-          this.history
-        )
-      } else {
-        this.history.splice(this.history.indexOf(entry), 1)
-        updateOnLocalStorage(
-          this.page === "rest" ? "history" : "graphqlHistory",
-          this.history
-        )
-      }
       this.$toast.error(this.$t("deleted"), {
         icon: "delete",
       })
     },
     addEntry(entry) {
-      this.history.push(entry)
+      if (this.page === "rest") addRESTHistoryEntry(entry)
-      updateOnLocalStorage(
+      else addGraphqlHistoryEntry(entry)
-        this.page === "rest" ? "history" : "graphqlHistory",
-        this.history
-      )
     },
     enableHistoryClearing() {
       if (!this.history || !this.history.length) return
@@ -202,17 +169,9 @@ export default {
     toggleCollapse() {
       this.showMore = !this.showMore
     },
-    async toggleStar(entry) {
+    toggleStar(entry) {
-      if (fb.currentUser !== null) {
+      if (this.page === "rest") toggleRESTHistoryEntryStar(entry)
-        this.page === "rest"
+      else toggleGraphqlHistoryEntryStar(entry)
-          ? await fb.toggleStar(entry, !entry.star)
-          : await fb.toggleGraphqlHistoryStar(entry, !entry.star)
-      }
-      entry.star = !entry.star
-      updateOnLocalStorage(
-        this.page === "rest" ? "history" : "graphqlHistory",
-        this.history
-      )
     },
   },
 }

helpers/fb.js

@@ -3,6 +3,12 @@ import "firebase/firestore"
 import "firebase/auth"
 import { ReplaySubject } from "rxjs"
 import { applySettingFB, settingsStore } from "~/newstore/settings"
+import {
+  restHistoryStore,
+  setRESTHistoryEntries,
+  graphqlHistoryStore,
+  setGraphqlHistoryEntries,
+} from "~/newstore/history"
 
 // Initialize Firebase, copied from cloud console
 const firebaseConfig = {
@@ -35,8 +41,6 @@ export class FirebaseInstance {
     this.idToken = null
     this.currentFeeds = []
     this.currentSettings = []
-    this.currentHistory = []
-    this.currentGraphqlHistory = []
     this.currentCollections = []
     this.currentGraphqlCollections = []
     this.currentEnvironments = []
@@ -45,6 +49,44 @@ export class FirebaseInstance {
     this.idToken$ = new ReplaySubject(1)
 
     let loadedSettings = false
+    let loadedRESTHistory = false
+    let loadedGraphqlHistory = false
+
+    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 (
@@ -139,12 +181,16 @@ export class FirebaseInstance {
           .limit(HISTORY_LIMIT)
           .onSnapshot((historyRef) => {
             const history = []
+
             historyRef.forEach((doc) => {
               const entry = doc.data()
               entry.id = doc.id
               history.push(entry)
             })
-            this.currentHistory = history
+
+            setRESTHistoryEntries(history)
+
+            loadedRESTHistory = true
           })
 
         this.usersCollection
@@ -154,12 +200,16 @@ export class FirebaseInstance {
           .limit(GQL_HISTORY_LIMIT)
           .onSnapshot((historyRef) => {
             const history = []
+
             historyRef.forEach((doc) => {
               const entry = doc.data()
               entry.id = doc.id
               history.push(entry)
             })
-            this.currentGraphqlHistory = history
+
+            setGraphqlHistoryEntries(history)
+
+            loadedGraphqlHistory = true
           })
 
         this.usersCollection
@@ -365,13 +415,13 @@ export class FirebaseInstance {
     await Promise.all(docs.map((e) => this.deleteGraphqlHistory(e)))
   }
 
-  async toggleStar(entry, value) {
+  async toggleStar(entry) {
     try {
       await this.usersCollection
         .doc(this.currentUser.uid)
         .collection("history")
         .doc(entry.id)
-        .update({ star: value })
+        .update({ star: !entry.star })
     } catch (e) {
       console.error("error deleting", entry, e)
 
@@ -379,13 +429,13 @@ export class FirebaseInstance {
     }
   }
 
-  async toggleGraphqlHistoryStar(entry, value) {
+  async toggleGraphqlHistoryStar(entry) {
     try {
       await this.usersCollection
         .doc(this.currentUser.uid)
         .collection("graphqlHistory")
         .doc(entry.id)
-        .update({ star: value })
+        .update({ star: !entry.star })
     } catch (e) {
       console.error("error deleting", entry, e)
 

newstore/localpersistence.ts

@@ -2,6 +2,12 @@ import clone from "lodash/clone"
 import assign from "lodash/assign"
 import eq from "lodash/eq"
 import { settingsStore, bulkApplySettings, defaultSettings } from "./settings"
+import {
+  restHistoryStore,
+  graphqlHistoryStore,
+  setRESTHistoryEntries,
+  setGraphqlHistoryEntries,
+} from "./history"
 
 function checkAndMigrateOldSettings() {
   const vuexData = JSON.parse(window.localStorage.getItem("vuex") || "{}")
@@ -32,8 +38,30 @@ function setupSettingsPersistence() {
   })
 }
 
+function setupHistoryPersistence() {
+  const restHistoryData = JSON.parse(
+    window.localStorage.getItem("history") || "[]"
+  )
+
+  const graphqlHistoryData = JSON.parse(
+    window.localStorage.getItem("graphqlHistory") || "[]"
+  )
+
+  setRESTHistoryEntries(restHistoryData)
+  setGraphqlHistoryEntries(graphqlHistoryData)
+
+  restHistoryStore.subject$.subscribe(({ state }) => {
+    window.localStorage.setItem("history", JSON.stringify(state))
+  })
+
+  graphqlHistoryStore.subject$.subscribe(({ state }) => {
+    window.localStorage.setItem("graphqlHistory", JSON.stringify(state))
+  })
+}
+
 export function setupLocalPersistence() {
   checkAndMigrateOldSettings()
 
   setupSettingsPersistence()
+  setupHistoryPersistence()
 }

pages/graphql.vue

@@ -481,7 +481,6 @@ import { commonHeaders } from "~/helpers/headers"
 import { getPlatformSpecialKey } from "~/helpers/platformutils"
 import { sendNetworkRequest } from "~/helpers/network"
 import { getSettingSubject } from "~/newstore/settings"
-import { fb } from "~/helpers/fb"
 
 export default {
   beforeRouteLeave(_to, _from, next) {
@@ -853,12 +852,8 @@ export default {
           duration,
         }
 
+        // TODO: Use history store system mechanism instead!
         this.$refs.graphqlHistoryComponent.addEntry(entry)
-        if (fb.currentUser !== null && fb.currentSettings[2]) {
-          if (fb.currentSettings[2].value) {
-            fb.writeGraphqlHistory(entry)
-          }
-        }
       } catch (error) {
         this.response = `${error}. ${this.$t("check_console_details")}`
         this.$nuxt.$loading.finish()

pages/index.vue

@@ -1,4 +1,5 @@
 <template>
+  <!-- eslint-disable -->
   <div class="page">
     <div class="content">
       <div class="page-columns inner-left">
@@ -651,6 +652,8 @@
 </template>
 
 <script>
+/* eslint-disable */
+
 import url from "url"
 import querystring from "querystring"
 import parseCurlCommand from "~/helpers/curlparser"
@@ -1406,10 +1409,8 @@ export default {
             entry.url = parseTemplateString(entry.url, environmentVariables)
           }
 
+          // TODO: Use the history store mechanism instead!
           this.$refs.historyComponent.addEntry(entry)
-          if (fb.currentUser !== null && this.SYNC_COLLECTIONS) {
-            fb.writeHistory(entry)
-          }
         })()
       } catch (error) {
         this.runningRequest = false
@@ -1464,10 +1465,8 @@ export default {
               entry.url = parseTemplateString(entry.url, environmentVariables)
             }
 
+            // TODO: Use the history state mechanism instead!
             this.$refs.historyComponent.addEntry(entry)
-            if (fb.currentUser !== null && this.SYNC_HISTORY) {
-              fb.writeHistory(entry)
-            }
             return
           } else {
             this.response.status = error.message