btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

Migrate code to new history store

Browse Source
This commit is contained in:
Andrew Bastin
2021-05-24 22:08:49 -04:00
parent 8cd3acd205
commit fcac750ad7
5 changed files with 124 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
components/history/index.vue
View File

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

66
helpers/fb.js
View File

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

28
newstore/localpersistence.ts
View File

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

7
pages/graphql.vue
View File

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

11
pages/index.vue
View File

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