From 45389e01beafb4d174be2a7747e7d166a11caed9 Mon Sep 17 00:00:00 2001 From: Jan Bader Date: Fri, 11 Feb 2022 21:38:06 +0000 Subject: [PATCH] Use vueuse useStorage instead of manually using localStorage --- web/package.json | 1 + web/src/App.vue | 37 +------------------------------------ web/src/main.ts | 13 +------------ web/src/stores/budget.ts | 3 ++- web/src/stores/session.ts | 9 ++------- web/src/stores/settings.ts | 9 +++++---- web/yarn.lock | 15 +++++++++++++++ 7 files changed, 27 insertions(+), 60 deletions(-) diff --git a/web/package.json b/web/package.json index 66da9a8..895aade 100644 --- a/web/package.json +++ b/web/package.json @@ -9,6 +9,7 @@ }, "dependencies": { "@mdi/font": "5.9.55", + "@vueuse/core": "^7.6.1", "autoprefixer": "^10.4.2", "pinia": "^2.0.11", "postcss": "^8.4.6", diff --git a/web/src/App.vue b/web/src/App.vue index 64042e6..e9e3ac1 100644 --- a/web/src/App.vue +++ b/web/src/App.vue @@ -2,7 +2,6 @@ import { mapState } from "pinia"; import { defineComponent } from "vue"; import { useBudgetsStore } from "./stores/budget"; -import { useAccountStore } from "./stores/budget-account"; import { useSessionStore } from "./stores/session"; import { useSettingsStore } from "./stores/settings"; @@ -15,7 +14,7 @@ export default defineComponent({ methods: { logout() { useSessionStore().logout(); - this.$router.push("/login") + this.$router.push("/login"); }, toggleMenu() { useSettingsStore().toggleMenu(); @@ -24,40 +23,6 @@ export default defineComponent({ useSettingsStore().toggleMenuSize(); } }, - beforeCreate() { - useSessionStore().restoreFromLocalStorage(); - - - /* - const store = localStorage.getItem("session"); - if (!store) - return; - - const restoredState = JSON.parse(store); - if (!restoredState) - return; - -console.log("session", restoredState) - const sessionStore = useSessionStore(); - sessionStore.User = restoredState.Session.User; - sessionStore.Token = restoredState.Session.Token; - for (const budget of restoredState.Budgets || []) { - sessionStore.Budgets.set(budget[0], budget[1]); - } - - const budgetsStore = useBudgetsStore(); - budgetsStore.CurrentBudgetID = restoredState.CurrentBudgetID; - - const accountStore = useAccountStore(); - accountStore.CurrentAccountID = restoredState.CurrentAccountID; - for (const account of restoredState.Accounts || []) { - accountStore.Accounts.set(account[0], account[1]); - } - - const settingsStore = useSettingsStore(); - settingsStore.ShowMenu = restoredState.ShowMenu; - settingsStore.ExpandMenu = restoredState.ExpandMenu;*/ - } }) diff --git a/web/src/main.ts b/web/src/main.ts index 0ba7fd3..4269aec 100644 --- a/web/src/main.ts +++ b/web/src/main.ts @@ -4,8 +4,6 @@ import './index.css' import router from './router' import { createPinia, SubscriptionCallbackMutation } from 'pinia' import { useBudgetsStore } from './stores/budget'; -import { useSessionStore } from './stores/session'; -import { useSettingsStore } from './stores/settings'; import { useAccountStore } from './stores/budget-account' import PiniaLogger from './pinia-logger' @@ -24,13 +22,4 @@ router.beforeEach(async (to, from, next) => { const accountStore = useAccountStore(); await accountStore.SetCurrentAccount((to.params.budgetid), (to.params.accountid)); next(); -}) - -function saveStateToLocalStorage(mutation : SubscriptionCallbackMutation, state : any) { - localStorage.setItem(mutation.storeId, JSON.stringify(state)); - console.log("saving to local storage", mutation) -} - -useSettingsStore().$subscribe(saveStateToLocalStorage); -useBudgetsStore().$subscribe(saveStateToLocalStorage); -useSessionStore().$subscribe(saveStateToLocalStorage); \ No newline at end of file +}) \ No newline at end of file diff --git a/web/src/stores/budget.ts b/web/src/stores/budget.ts index 5b536ab..b8cf5bc 100644 --- a/web/src/stores/budget.ts +++ b/web/src/stores/budget.ts @@ -1,3 +1,4 @@ +import { useStorage } from "@vueuse/core"; import { defineStore } from "pinia"; import { useAPI } from "./api"; import { useAccountStore } from "./budget-account"; @@ -8,7 +9,7 @@ interface State { } export const useBudgetsStore = defineStore('budget', { - state: (): State => ({ + state: () => useStorage('budget', { CurrentBudgetID: null, }), getters: { diff --git a/web/src/stores/session.ts b/web/src/stores/session.ts index 9163269..3f879b5 100644 --- a/web/src/stores/session.ts +++ b/web/src/stores/session.ts @@ -1,3 +1,4 @@ +import { useStorage } from '@vueuse/core'; import { defineStore } from 'pinia' import { useAPI } from './api'; @@ -14,8 +15,7 @@ export interface Budget { } export const useSessionStore = defineStore('session', { - // convert to a function - state: (): State => ({ + state: () => useStorage('session', { Token: null, User: null, Budgets: new Map(), @@ -49,10 +49,5 @@ export const useSessionStore = defineStore('session', { logout() { this.$reset() }, - restoreFromLocalStorage() { - const json = localStorage.getItem("session"); - const value = JSON.parse(json || "{}"); - Object.assign(this, value); - } } }) \ No newline at end of file diff --git a/web/src/stores/settings.ts b/web/src/stores/settings.ts index ef671a2..f8c10f4 100644 --- a/web/src/stores/settings.ts +++ b/web/src/stores/settings.ts @@ -1,13 +1,14 @@ +import { useStorage } from "@vueuse/core"; import { defineStore } from "pinia"; interface State { - ShowMenu?: boolean, - ExpandMenu?: boolean, + ShowMenu: boolean | null, + ExpandMenu: boolean, } export const useSettingsStore = defineStore('settings', { - state: (): State => ({ - ShowMenu: undefined, + state: () => useStorage('settings', { + ShowMenu: null, ExpandMenu: false, }), actions: { diff --git a/web/yarn.lock b/web/yarn.lock index 6a5ee65..dea9627 100644 --- a/web/yarn.lock +++ b/web/yarn.lock @@ -1657,6 +1657,21 @@ resolved "https://registry.yarnpkg.com/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz#b6b40a7625429d2bd7c2281ddba601ed05dc7f1a" integrity sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA== +"@vueuse/core@^7.6.1": + version "7.6.1" + resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-7.6.1.tgz#6919dc0c9289a77f00bfa3403f861f7e4c7adc89" + integrity sha512-492y7R9HRu6TXzcGBMVG5qg5o9CHjrWLfOHh+TEknJeLe3LIYHsIBi1IlUN5s/yP3OHlBynjrzMMUm4gEyBmQg== + dependencies: + "@vueuse/shared" "7.6.1" + vue-demi "*" + +"@vueuse/shared@7.6.1": + version "7.6.1" + resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-7.6.1.tgz#48db62a4ad160838353ae78d0dcbfc7c9c94c89c" + integrity sha512-VhURBjuyELYLW94TLqwyM+tUZ0uyWAOjp8zDnJts5wwyHZlGt/yabLbuEl70cKmt0zR9psVyAyHC+LTgRrA1Zw== + dependencies: + vue-demi "*" + "@webassemblyjs/ast@1.11.1": version "1.11.1" resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.1.tgz#2bfd767eae1a6996f432ff7e8d7fc75679c0b6a7"