From 2d0737a10c8ea5dbab4b8517883161ffd16cf364 Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Wed, 9 Feb 2022 23:08:36 +0000
Subject: [PATCH 01/14] First step from vuex to pinia

---
 web/package.json           |  1 +
 web/src/App.vue            | 17 +++++++-
 web/src/main.ts            |  4 +-
 web/src/store/index.ts     | 87 ++------------------------------------
 web/src/stores/budgets.ts  | 16 +++++++
 web/src/stores/session.ts  | 69 ++++++++++++++++++++++++++++++
 web/src/stores/settings.ts | 21 +++++++++
 web/yarn.lock              | 18 ++++++++
 8 files changed, 147 insertions(+), 86 deletions(-)
 create mode 100644 web/src/stores/budgets.ts
 create mode 100644 web/src/stores/session.ts
 create mode 100644 web/src/stores/settings.ts

diff --git a/web/package.json b/web/package.json
index d9650e7..99b6b4c 100644
--- a/web/package.json
+++ b/web/package.json
@@ -10,6 +10,7 @@
   "dependencies": {
     "@mdi/font": "5.9.55",
     "autoprefixer": "^10.4.2",
+    "pinia": "^2.0.11",
     "postcss": "^8.4.6",
     "tailwindcss": "^3.0.18",
     "vue": "^3.2.25",
diff --git a/web/src/App.vue b/web/src/App.vue
index 385cca8..400a617 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -21,7 +21,22 @@ export default defineComponent({
     }
   },
   beforeCreate () {
-    this.$store.commit("initializeStore");
+            const store = localStorage.getItem("store");
+            if (!store)
+                return;
+
+            const restoredState = JSON.parse(store);
+            if (!restoredState)
+                return;
+
+            state.Session = restoredState.Session;
+            state.CurrentBudgetID = restoredState.CurrentBudgetID;
+            state.ShowMenu = restoredState.ShowMenu;
+            state.ExpandMenu = restoredState.ExpandMenu;
+
+            for (const budget of restoredState.Budgets || []) {
+                state.Budgets.set(budget[0], budget[1]);
+            }
   }
 })
 </script>
diff --git a/web/src/main.ts b/web/src/main.ts
index 5e0c9c5..601ab38 100644
--- a/web/src/main.ts
+++ b/web/src/main.ts
@@ -2,12 +2,12 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import './index.css'
 import router from './router'
-import { store, key } from './store'
+import { createPinia } from 'pinia'
 import { SET_CURRENT_ACCOUNT, SET_CURRENT_BUDGET } from './store/action-types'
 
 const app = createApp(App)
 app.use(router)
-app.use(store, key)
+app.use(createPinia())
 app.mount('#app')
 
 router.beforeEach(async (to, from, next) => {
diff --git a/web/src/store/index.ts b/web/src/store/index.ts
index caa51fc..920e664 100644
--- a/web/src/store/index.ts
+++ b/web/src/store/index.ts
@@ -3,98 +3,21 @@ import { createStore, Store, createLogger } from 'vuex'
 import { LOGIN_SUCCESS, LOGOUT, TITLE } from './mutation-types'
 import { FETCH_ACCOUNT, FETCH_BUDGET, GET, REGISTER, IMPORT_YNAB, LOGIN, NEW_BUDGET, POST, SET_CURRENT_ACCOUNT, SET_CURRENT_BUDGET } from './action-types'
 import { budgetStore } from './budget'
-
-export interface State {
-    Session: {
-        Token?: string
-        User?: string
-    },
-    ShowMenu?: boolean,
-    ExpandMenu?: boolean,
-    Budgets: Map<string, Budget>,
-    CurrentBudgetID?: string,
-}
-
-export interface Budget {
-    ID: string
-    Name: string
-    AvailableBalance: number
-}
+import { Budget, useSessionStore } from '../stores/session'
 
 export const key: InjectionKey<Store<State>> = Symbol()
 
 export const store = createStore<State>({
     state: {
-        Session: {
-            Token: undefined,
-            User: undefined
-        },
         ShowMenu: undefined,
-        Budgets: new Map<string, Budget>(),
         CurrentBudgetID: undefined,
     },
     mutations: {
-        deleteBudget(state: State, budgetid: string) {
-            state.Budgets.delete(budgetid)
-        },
-        toggleMenu(state) {
-            state.ShowMenu = !state.ShowMenu;
-        },
-        toggleMenuSize(state) {
-            state.ExpandMenu = !state.ExpandMenu;
-        },
-        initializeStore(state) {
-            const store = localStorage.getItem("store");
-            if (!store)
-                return;
-
-            const restoredState = JSON.parse(store);
-            if (!restoredState)
-                return;
-
-            state.Session = restoredState.Session;
-            state.CurrentBudgetID = restoredState.CurrentBudgetID;
-            state.ShowMenu = restoredState.ShowMenu;
-            state.ExpandMenu = restoredState.ExpandMenu;
-
-            for (const budget of restoredState.Budgets || []) {
-                state.Budgets.set(budget[0], budget[1]);
-            }
-        },
         [TITLE](state, title) {
             document.title = "Budgeteer - " + title;
         },
-        [LOGIN_SUCCESS](state, result) {
-            state.Session = {
-                User: result.User,
-                Token: result.Token
-            };
-            for (const budget of result.Budgets) {
-                state.Budgets.set(budget.ID, budget)
-            }
-        },
-        addBudget(state, budget) {
-            state.Budgets.set(budget.ID, budget);
-        },
-        [LOGOUT](state) {
-            state.Session = { Token: undefined, User: undefined };
-            state.Budgets.clear();
-        },
-        setCurrentBudgetID(state, budgetid) {
-            state.CurrentBudgetID = budgetid;
-        },
     },
     actions: {
-        [LOGIN]({ state, commit }, login) {
-            return fetch("/api/v1/user/login", { method: "POST", body: JSON.stringify(login) })
-                .then(x => x.json())
-                .then(x => commit(LOGIN_SUCCESS, x))
-        },
-        [REGISTER]({ state, commit }, login) {
-            return fetch("/api/v1/user/register", { method: "POST", body: JSON.stringify(login) })
-                .then(x => x.json())
-                .then(x => commit(LOGIN_SUCCESS, x))
-        },
         [IMPORT_YNAB]({ getters, dispatch }, formData) {
             return dispatch("POST", { path: "/budget/" + getters.CurrentBudget.ID + "/import/ynab", body: formData });
         },
@@ -137,9 +60,6 @@ export const store = createStore<State>({
         },
     },
     getters: {
-        Budgets(state) {
-            return state.Budgets.values();
-        },
         AuthHeaders(state) {
             return {
                 'Authorization': 'Bearer ' + state.Session.Token
@@ -171,9 +91,10 @@ export const store = createStore<State>({
 })
 
 store.subscribe((mutation, state) => {
+
+    const sessionStore = useSessionStore();
     let persistedState = {
-        Session: state.Session,
-        Budgets: [...state.Budgets],
+        Session: sessionStore,
 //        Accounts: [...state.Accounts],
         CurrentBudgetID: state.CurrentBudgetID,
         //CurrentAccountID: state.CurrentAccountID,
diff --git a/web/src/stores/budgets.ts b/web/src/stores/budgets.ts
new file mode 100644
index 0000000..9e122c9
--- /dev/null
+++ b/web/src/stores/budgets.ts
@@ -0,0 +1,16 @@
+import { defineStore } from "pinia";
+
+interface State {
+    CurrentBudgetID: string | null,
+}
+
+export const useBudgetsStore = defineStore('budget', {
+    state: (): State => ({
+      CurrentBudgetID: null  
+    }),
+    actions: {
+        setCurrentBudgetID(budgetid : string) {
+            this.CurrentBudgetID = budgetid;
+        },
+    }
+})
\ No newline at end of file
diff --git a/web/src/stores/session.ts b/web/src/stores/session.ts
new file mode 100644
index 0000000..ad6bdb3
--- /dev/null
+++ b/web/src/stores/session.ts
@@ -0,0 +1,69 @@
+import { defineStore } from 'pinia'
+
+interface State {
+    Token: string | null
+    User: string | null
+    Budgets: Map<string, Budget>,
+}
+
+export interface Budget {
+    ID: string
+    Name: string
+    AvailableBalance: number
+}
+
+export const useSessionStore = defineStore('session', {
+    // convert to a function
+    state: (): State => ({
+        Token: null,
+        User: null,
+        Budgets: new Map<string, Budget>(),
+    }),
+    getters: {
+        Budgets(): IterableIterator<Budget> {
+            return this.Budgets.values();
+        },
+        /*// must define return type because of using `this`
+        fullUserDetails (state): FullUserDetails {
+          // import from other stores
+          const authPreferencesStore = useAuthPreferencesStore()
+          const authEmailStore = useAuthEmailStore()
+          return {
+            ...state,
+            // other getters now on `this`
+            fullName: this.fullName,
+            ...authPreferencesStore.$state,
+            ...authEmailStore.details
+          }
+    
+          // alternative if other modules are still in Vuex
+          // return {
+          //   ...state,
+          //   fullName: this.fullName,
+          //   ...vuexStore.state.auth.preferences,
+          //   ...vuexStore.getters['auth/email'].details
+          // }
+        }*/
+    },
+    actions: {
+        loginSuccess(x : any) {
+            this.User = x.User;
+            this.Token = x.Token;
+            this.Budgets = x.Budgets;
+        },
+        login(login: any) {
+            return fetch("/api/v1/user/login", { method: "POST", body: JSON.stringify(login) })
+                .then(x => x.json())
+                .then(x => this.loginSuccess(x));
+        },
+        register(login : any) {
+            return fetch("/api/v1/user/register", { method: "POST", body: JSON.stringify(login) })
+                .then(x => x.json())
+                .then(x => this.loginSuccess(x))
+        },
+        // easily reset state using `$reset`
+        logout() {
+            this.$reset()
+        }
+    }
+})
diff --git a/web/src/stores/settings.ts b/web/src/stores/settings.ts
new file mode 100644
index 0000000..ef671a2
--- /dev/null
+++ b/web/src/stores/settings.ts
@@ -0,0 +1,21 @@
+import { defineStore } from "pinia";
+
+interface State {
+    ShowMenu?: boolean,
+    ExpandMenu?: boolean,
+}
+
+export const useSettingsStore = defineStore('settings', {
+    state: (): State => ({
+        ShowMenu: undefined,
+        ExpandMenu: false,
+    }),
+    actions: {
+        toggleMenu() {
+            this.ShowMenu = !this.ShowMenu;
+        },
+        toggleMenuSize() {
+            this.ExpandMenu = !this.ExpandMenu;
+        },
+    }
+});
\ No newline at end of file
diff --git a/web/yarn.lock b/web/yarn.lock
index 2fdd5ae..f0565d7 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -1588,6 +1588,11 @@
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.21.1.tgz#f1410f53c42aa67fa3b01ca7bdba891f69d7bc97"
   integrity sha512-FqC4s3pm35qGVeXRGOjTsRzlkJjrBLriDS9YXbflHLsfA9FrcKzIyWnLXoNm+/7930E8rRakXuAc2QkC50swAw==
 
+"@vue/devtools-api@^6.0.0-beta.21":
+  version "6.0.5"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.5.tgz#7e35cfee4f44ada65cde0d19341fbaeb0ae353f4"
+  integrity sha512-2nM84dzo3B63pKgxwoArlT1d/yqSL0y2lG2GiyyGhwpyPTwkfIuJHlCNbputCoSCNnT6MMfenK1g7nv7Mea19A==
+
 "@vue/reactivity-transform@3.2.29":
   version "3.2.29"
   resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.2.29.tgz#a08d606e10016b7cf588d1a43dae4db2953f9354"
@@ -6260,6 +6265,14 @@ pify@^4.0.1:
   resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
   integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
 
+pinia@^2.0.11:
+  version "2.0.11"
+  resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.0.11.tgz#ff03c714f5e5f16207280a4fc2eab01f3701ee2b"
+  integrity sha512-JzcmnMqu28PNWOjDgEDK6fTrIzX8eQZKPPKvu/fpHdpXARUj1xeVdFi3YFIMOWswqaBd589cpmAMdSSTryI9iw==
+  dependencies:
+    "@vue/devtools-api" "^6.0.0-beta.21"
+    vue-demi "*"
+
 pkg-dir@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-3.0.0.tgz#2749020f239ed990881b1f71210d51eb6523bea3"
@@ -8167,6 +8180,11 @@ vue-cli-plugin-vuetify@~2.4.5:
     semver "^7.1.2"
     shelljs "^0.8.3"
 
+vue-demi@*:
+  version "0.12.1"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.12.1.tgz#f7e18efbecffd11ab069d1472d7a06e319b4174c"
+  integrity sha512-QL3ny+wX8c6Xm1/EZylbgzdoDolye+VpCXRhI2hug9dJTP3OUJ3lmiKN3CsVV3mOJKwFi0nsstbgob0vG7aoIw==
+
 vue-hot-reload-api@^2.3.0:
   version "2.3.4"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
-- 
2.47.2


From 08330ce33ce8dfc837ca8f3e6eb26ce531acf79b Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Wed, 9 Feb 2022 23:12:26 +0000
Subject: [PATCH 02/14] Migrate farther

---
 web/src/store/index.ts    | 25 -------------------------
 web/src/stores/budgets.ts | 16 ++++++++++++++++
 web/src/stores/session.ts |  5 +++++
 3 files changed, 21 insertions(+), 25 deletions(-)

diff --git a/web/src/store/index.ts b/web/src/store/index.ts
index 920e664..93775da 100644
--- a/web/src/store/index.ts
+++ b/web/src/store/index.ts
@@ -59,31 +59,6 @@ export const store = createStore<State>({
             await dispatch(FETCH_BUDGET, budgetid)
         },
     },
-    getters: {
-        AuthHeaders(state) {
-            return {
-                'Authorization': 'Bearer ' + state.Session.Token
-            }
-        },
-        CurrentBudget(state) : Budget | undefined {
-            if (state.CurrentBudgetID == null)
-                return undefined;
-
-            return state.Budgets.get(state.CurrentBudgetID);
-        },
-        CurrentBudgetID(state) : string | undefined {
-            return state.CurrentBudgetID;
-        },
-        CurrentBudgetName(state) : string {
-            if (state.CurrentBudgetID == null)
-                return "";
-
-            const currentBudget = state.Budgets.get(state.CurrentBudgetID);
-            if(currentBudget != undefined)
-                return currentBudget.Name;
-            return "";
-        },
-    },
     plugins: [createLogger()],
     modules: {
         budget: budgetStore
diff --git a/web/src/stores/budgets.ts b/web/src/stores/budgets.ts
index 9e122c9..f0cd8f1 100644
--- a/web/src/stores/budgets.ts
+++ b/web/src/stores/budgets.ts
@@ -1,4 +1,5 @@
 import { defineStore } from "pinia";
+import { Budget, useSessionStore } from "./session";
 
 interface State {
     CurrentBudgetID: string | null,
@@ -12,5 +13,20 @@ export const useBudgetsStore = defineStore('budget', {
         setCurrentBudgetID(budgetid : string) {
             this.CurrentBudgetID = budgetid;
         },
+    },
+    getters: {
+        CurrentBudget() : Budget | undefined {
+            if (this.CurrentBudgetID == null)
+                return undefined;
+
+            const sessionStore = useSessionStore();
+            return sessionStore.Budgets.get(this.CurrentBudgetID);
+        },
+        CurrentBudgetName(state) : string {
+            return this.CurrentBudget?.Name ?? "";
+        },
+        CurrentBudgetID() : string | undefined {
+            return this.CurrentBudgetID;
+        },
     }
 })
\ No newline at end of file
diff --git a/web/src/stores/session.ts b/web/src/stores/session.ts
index ad6bdb3..0b5845a 100644
--- a/web/src/stores/session.ts
+++ b/web/src/stores/session.ts
@@ -23,6 +23,11 @@ export const useSessionStore = defineStore('session', {
         Budgets(): IterableIterator<Budget> {
             return this.Budgets.values();
         },
+        AuthHeaders(): Object {
+            return {
+                'Authorization': 'Bearer ' + this.Token
+            }
+        },
         /*// must define return type because of using `this`
         fullUserDetails (state): FullUserDetails {
           // import from other stores
-- 
2.47.2


From 9b8ae7a44dee3e9b1bba69ea599749cfbfb9c8d7 Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Wed, 9 Feb 2022 23:14:46 +0000
Subject: [PATCH 03/14] =?UTF-8?q?And=20on=E2=80=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/App.vue | 123 ++++++++++++++++++++++++++----------------------
 1 file changed, 67 insertions(+), 56 deletions(-)

diff --git a/web/src/App.vue b/web/src/App.vue
index 400a617..aa79715 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,77 +1,88 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import { LOGOUT } from "./store/mutation-types";
+import { useBudgetsStore } from "./stores/budgets";
+import { useSessionStore } from "./stores/session";
+import { useSettingsStore } from "./stores/settings";
 
 export default defineComponent({
-  computed: {
-    loggedIn() {
-      return this.$store.state.Session.Token;
-    }
-  },
-  methods: {
-    logout () {
-      this.$store.commit(LOGOUT);
-      this.$router.push("/login")
+    computed: {
+        loggedIn() {
+            return this.$store.state.Session.Token;
+        }
     },
-    toggleMenu () {
-      this.$store.commit("toggleMenu");
+    methods: {
+        logout() {
+            this.$store.commit(LOGOUT);
+            this.$router.push("/login")
+        },
+        toggleMenu() {
+            this.$store.commit("toggleMenu");
+        },
+        toggleMenuSize() {
+            this.$store.commit("toggleMenuSize");
+        }
     },
-    toggleMenuSize () {
-      this.$store.commit("toggleMenuSize");
+    beforeCreate() {
+        const store = localStorage.getItem("store");
+        if (!store)
+            return;
+
+        const restoredState = JSON.parse(store);
+        if (!restoredState)
+            return;
+
+        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 settingsStore = useSettingsStore();
+        settingsStore.ShowMenu = restoredState.ShowMenu;
+        settingsStore.ExpandMenu = restoredState.ExpandMenu;
     }
-  },
-  beforeCreate () {
-            const store = localStorage.getItem("store");
-            if (!store)
-                return;
-
-            const restoredState = JSON.parse(store);
-            if (!restoredState)
-                return;
-
-            state.Session = restoredState.Session;
-            state.CurrentBudgetID = restoredState.CurrentBudgetID;
-            state.ShowMenu = restoredState.ShowMenu;
-            state.ExpandMenu = restoredState.ExpandMenu;
-
-            for (const budget of restoredState.Budgets || []) {
-                state.Budgets.set(budget[0], budget[1]);
-            }
-  }
 })
 </script>
 
 <template>
-  <div class="box-border w-full">
-    <div class="flex bg-gray-400 p-4 m-2 rounded-lg">
-      <span class="flex-1 font-bold text-5xl -my-3 hidden md:inline" @click="toggleMenuSize">≡</span>
-      <span class="flex-1 font-bold text-5xl -my-3 md:hidden" @click="toggleMenu">≡</span>
+    <div class="box-border w-full">
+        <div class="flex bg-gray-400 p-4 m-2 rounded-lg">
+            <span class="flex-1 font-bold text-5xl -my-3 hidden md:inline" @click="toggleMenuSize">≡</span>
+            <span class="flex-1 font-bold text-5xl -my-3 md:hidden" @click="toggleMenu">≡</span>
 
-      <span class="flex-1">{{$store.getters.CurrentBudgetName}}</span>
+            <span class="flex-1">{{ $store.getters.CurrentBudgetName }}</span>
 
-      <div class="flex flex-1 flex-row justify-end -mx-4">
-        <router-link class="mx-4" v-if="loggedIn" to="/dashboard">Dashboard</router-link>
-        <router-link class="mx-4" v-if="!loggedIn" to="/login">Login</router-link>
-        <a class="mx-4" v-if="loggedIn" @click="logout">Logout</a>
-      </div>
+            <div class="flex flex-1 flex-row justify-end -mx-4">
+                <router-link class="mx-4" v-if="loggedIn" to="/dashboard">Dashboard</router-link>
+                <router-link class="mx-4" v-if="!loggedIn" to="/login">Login</router-link>
+                <a class="mx-4" v-if="loggedIn" @click="logout">Logout</a>
+            </div>
+        </div>
+
+        <div class="flex flex-col md:flex-row flex-1">
+            <div
+                :class="[$store.state.ExpandMenu ? 'md:w-72' : 'md:w-36', $store.state.ShowMenu ? '' : 'hidden']"
+                class="md:block flex-shrink-0 w-full"
+            >
+                <router-view name="sidebar"></router-view>
+            </div>
+
+            <div class="flex-1 p-6">
+                <router-view></router-view>
+            </div>
+        </div>
     </div>
-
-    <div class="flex flex-col md:flex-row flex-1">
-      <div :class="[$store.state.ExpandMenu ? 'md:w-72' : 'md:w-36', $store.state.ShowMenu ? '' : 'hidden']" class="md:block flex-shrink-0 w-full">
-        <router-view name="sidebar"></router-view>
-      </div>
-
-      <div class="flex-1 p-6">
-        <router-view></router-view>
-      </div>
-    </div>
-  </div>
 </template>
 
 <style>
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    font-family: Avenir, Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 </style>
-- 
2.47.2


From 0c094d6f6b3d796747557e3c0f93dffa334259aa Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Wed, 9 Feb 2022 23:16:16 +0000
Subject: [PATCH 04/14] And on

---
 web/src/store/index.ts    | 18 ------------------
 web/src/stores/session.ts |  3 +++
 2 files changed, 3 insertions(+), 18 deletions(-)

diff --git a/web/src/store/index.ts b/web/src/store/index.ts
index 93775da..de6bd34 100644
--- a/web/src/store/index.ts
+++ b/web/src/store/index.ts
@@ -1,22 +1,4 @@
-import { InjectionKey } from 'vue'
-import { createStore, Store, createLogger } from 'vuex'
-import { LOGIN_SUCCESS, LOGOUT, TITLE } from './mutation-types'
-import { FETCH_ACCOUNT, FETCH_BUDGET, GET, REGISTER, IMPORT_YNAB, LOGIN, NEW_BUDGET, POST, SET_CURRENT_ACCOUNT, SET_CURRENT_BUDGET } from './action-types'
-import { budgetStore } from './budget'
-import { Budget, useSessionStore } from '../stores/session'
-
-export const key: InjectionKey<Store<State>> = Symbol()
-
 export const store = createStore<State>({
-    state: {
-        ShowMenu: undefined,
-        CurrentBudgetID: undefined,
-    },
-    mutations: {
-        [TITLE](state, title) {
-            document.title = "Budgeteer - " + title;
-        },
-    },
     actions: {
         [IMPORT_YNAB]({ getters, dispatch }, formData) {
             return dispatch("POST", { path: "/budget/" + getters.CurrentBudget.ID + "/import/ynab", body: formData });
diff --git a/web/src/stores/session.ts b/web/src/stores/session.ts
index 0b5845a..cfda1bd 100644
--- a/web/src/stores/session.ts
+++ b/web/src/stores/session.ts
@@ -51,6 +51,9 @@ export const useSessionStore = defineStore('session', {
         }*/
     },
     actions: {
+        setTitle(title : string) {
+            document.title = "Budgeteer - " + title;
+        },
         loginSuccess(x : any) {
             this.User = x.User;
             this.Token = x.Token;
-- 
2.47.2


From 8b0e368d5848789d53d3e7ac430861d6eef2b5ce Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Thu, 10 Feb 2022 13:35:51 +0000
Subject: [PATCH 05/14] Fix return type of AuthHeaders

---
 web/src/store/index.ts    | 31 -------------------------------
 web/src/stores/budgets.ts | 31 +++++++++++++++++++++++++++++--
 web/src/stores/session.ts |  2 +-
 3 files changed, 30 insertions(+), 34 deletions(-)

diff --git a/web/src/store/index.ts b/web/src/store/index.ts
index de6bd34..53844ab 100644
--- a/web/src/store/index.ts
+++ b/web/src/store/index.ts
@@ -1,20 +1,5 @@
 export const store = createStore<State>({
     actions: {
-        [IMPORT_YNAB]({ getters, dispatch }, formData) {
-            return dispatch("POST", { path: "/budget/" + getters.CurrentBudget.ID + "/import/ynab", body: formData });
-        },
-        [GET]({ getters }, { path }) {
-            return fetch("/api/v1" + path, {
-                headers: getters.AuthHeaders,
-            })
-        },
-        [POST]({ getters }, { path, body }) {
-            return fetch("/api/v1" + path, {
-                method: "POST",
-                headers: getters.AuthHeaders,
-                body: body,
-            })
-        },
         /*async fetchDashboard ({state, commit, rootState}) {
             const response = await fetch("/api/v1/dashboard", {
                 headers: {
@@ -24,22 +9,6 @@ export const store = createStore<State>({
             const data = await response.json();
             commit("setBudgets", data.Budgets);
         },*/
-        async [NEW_BUDGET]({ state, commit, dispatch, rootState }, budgetName) {
-            const result = await dispatch("POST", {
-                path: "/budget/new",
-                body: JSON.stringify({ name: budgetName })
-            });
-            const response = await result.json();
-            commit("addBudget", response)
-        },
-        async [SET_CURRENT_BUDGET]({ state, commit, dispatch, rootState }, budgetid) {
-            commit("setCurrentBudgetID", budgetid);
-
-            if (budgetid == null)
-                return
-
-            await dispatch(FETCH_BUDGET, budgetid)
-        },
     },
     plugins: [createLogger()],
     modules: {
diff --git a/web/src/stores/budgets.ts b/web/src/stores/budgets.ts
index f0cd8f1..4bce968 100644
--- a/web/src/stores/budgets.ts
+++ b/web/src/stores/budgets.ts
@@ -1,4 +1,5 @@
 import { defineStore } from "pinia";
+import { useAPI } from "./api";
 import { Budget, useSessionStore } from "./session";
 
 interface State {
@@ -7,7 +8,7 @@ interface State {
 
 export const useBudgetsStore = defineStore('budget', {
     state: (): State => ({
-      CurrentBudgetID: null  
+        CurrentBudgetID: null  
     }),
     actions: {
         setCurrentBudgetID(budgetid : string) {
@@ -22,11 +23,37 @@ export const useBudgetsStore = defineStore('budget', {
             const sessionStore = useSessionStore();
             return sessionStore.Budgets.get(this.CurrentBudgetID);
         },
-        CurrentBudgetName(state) : string {
+        CurrentBudgetName() : string {
             return this.CurrentBudget?.Name ?? "";
         },
         CurrentBudgetID() : string | undefined {
             return this.CurrentBudgetID;
         },
+        ImportYNAB(formData) {
+            const api = useAPI();
+            return api.POST(
+                "/budget/" + this.CurrentBudgetID + "/import/ynab", 
+                formData
+            );
+        },
+        async NewBudget(budgetName) {
+            const api = useAPI();
+            const result = await api.POST(
+                "/budget/new",
+                JSON.stringify({ name: budgetName })
+            );
+            const response = await result.json();
+
+            const sessionStore = useSessionStore();
+            sessionStore.Budgets.set(response.ID, response);
+        },
+        async SetCurrentBudget(budgetid : string) {
+            this.CurrentBudgetID = budgetid;
+
+            if (budgetid == null)
+                return
+
+            await dispatch(FETCH_BUDGET, budgetid)
+        },
     }
 })
\ No newline at end of file
diff --git a/web/src/stores/session.ts b/web/src/stores/session.ts
index cfda1bd..adbf31b 100644
--- a/web/src/stores/session.ts
+++ b/web/src/stores/session.ts
@@ -23,7 +23,7 @@ export const useSessionStore = defineStore('session', {
         Budgets(): IterableIterator<Budget> {
             return this.Budgets.values();
         },
-        AuthHeaders(): Object {
+        AuthHeaders(): HeadersInit {
             return {
                 'Authorization': 'Bearer ' + this.Token
             }
-- 
2.47.2


From c693625e34290b16c91e803d0cc23e365751feef Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Thu, 10 Feb 2022 15:49:21 +0000
Subject: [PATCH 06/14] Remove vuex

---
 web/package.json                         |   3 +-
 web/src/@types/shims-vuex.d.ts           |   9 --
 web/src/App.vue                          |  33 +++--
 web/src/dialogs/NewBudget.vue            |   4 +-
 web/src/main.ts                          |  35 +++++-
 web/src/pages/Account.vue                |  14 ++-
 web/src/pages/BudgetSidebar.vue          |  33 +++--
 web/src/pages/Budgeting.vue              |  66 ++++++----
 web/src/pages/Dashboard.vue              |   9 +-
 web/src/pages/Login.vue                  |   7 +-
 web/src/pages/Register.vue               |   8 +-
 web/src/pages/Settings.vue               |  35 +++---
 web/src/store/action-types.ts            |  11 --
 web/src/store/budget/index.ts            | 152 -----------------------
 web/src/store/index.ts                   |  31 -----
 web/src/store/mutation-types.ts          |   3 -
 web/src/stores/api.ts                    |  28 +++++
 web/src/stores/budget-account.ts         | 111 +++++++++++++++++
 web/src/stores/{budgets.ts => budget.ts} |  40 +++---
 web/src/stores/session.ts                |  32 +----
 web/yarn.lock                            |   9 +-
 21 files changed, 322 insertions(+), 351 deletions(-)
 delete mode 100644 web/src/@types/shims-vuex.d.ts
 delete mode 100644 web/src/store/action-types.ts
 delete mode 100644 web/src/store/budget/index.ts
 delete mode 100644 web/src/store/index.ts
 delete mode 100644 web/src/store/mutation-types.ts
 create mode 100644 web/src/stores/api.ts
 create mode 100644 web/src/stores/budget-account.ts
 rename web/src/stores/{budgets.ts => budget.ts} (57%)

diff --git a/web/package.json b/web/package.json
index 99b6b4c..66da9a8 100644
--- a/web/package.json
+++ b/web/package.json
@@ -14,8 +14,7 @@
     "postcss": "^8.4.6",
     "tailwindcss": "^3.0.18",
     "vue": "^3.2.25",
-    "vue-router": "^4.0.12",
-    "vuex": "^4.0.2"
+    "vue-router": "^4.0.12"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^2.0.0",
diff --git a/web/src/@types/shims-vuex.d.ts b/web/src/@types/shims-vuex.d.ts
deleted file mode 100644
index c177230..0000000
--- a/web/src/@types/shims-vuex.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { ComponentCustomProperties } from 'vue'
-import { State } from '../store'
-import { Store } from 'vuex'
-
-declare module '@vue/runtime-core' {
-  interface ComponentCustomProperties {
-    $store: Store<State>
-  }
-}
\ No newline at end of file
diff --git a/web/src/App.vue b/web/src/App.vue
index aa79715..fa12ea3 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,26 +1,28 @@
 <script lang="ts">
+import { mapState } from "pinia";
 import { defineComponent } from "vue";
 import { LOGOUT } from "./store/mutation-types";
-import { useBudgetsStore } from "./stores/budgets";
+import { useBudgetsStore } from "./stores/budget";
+import { useAccountStore } from "./stores/budget-account";
 import { useSessionStore } from "./stores/session";
 import { useSettingsStore } from "./stores/settings";
 
 export default defineComponent({
     computed: {
-        loggedIn() {
-            return this.$store.state.Session.Token;
-        }
+        ...mapState(useBudgetsStore, ["CurrentBudgetName"]),
+        ...mapState(useSettingsStore, ["ExpandMenu", "ShowMenu"]),
+        ...mapState(useSessionStore, ["LoggedIn"]),
     },
     methods: {
         logout() {
-            this.$store.commit(LOGOUT);
+            useSessionStore().logout();
             this.$router.push("/login")
         },
         toggleMenu() {
-            this.$store.commit("toggleMenu");
+            useSettingsStore().toggleMenu();
         },
         toggleMenuSize() {
-            this.$store.commit("toggleMenuSize");
+            useSettingsStore().toggleMenuSize();
         }
     },
     beforeCreate() {
@@ -36,12 +38,19 @@ export default defineComponent({
         sessionStore.User = restoredState.Session.User;
         sessionStore.Token = restoredState.Session.Token;
         for (const budget of restoredState.Budgets || []) {
+            console.log("UIAE", sessionStore.Budgets, budget)
             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;
@@ -55,18 +64,18 @@ export default defineComponent({
             <span class="flex-1 font-bold text-5xl -my-3 hidden md:inline" @click="toggleMenuSize">≡</span>
             <span class="flex-1 font-bold text-5xl -my-3 md:hidden" @click="toggleMenu">≡</span>
 
-            <span class="flex-1">{{ $store.getters.CurrentBudgetName }}</span>
+            <span class="flex-1">{{ CurrentBudgetName }}</span>
 
             <div class="flex flex-1 flex-row justify-end -mx-4">
-                <router-link class="mx-4" v-if="loggedIn" to="/dashboard">Dashboard</router-link>
-                <router-link class="mx-4" v-if="!loggedIn" to="/login">Login</router-link>
-                <a class="mx-4" v-if="loggedIn" @click="logout">Logout</a>
+                <router-link class="mx-4" v-if="LoggedIn" to="/dashboard">Dashboard</router-link>
+                <router-link class="mx-4" v-if="!LoggedIn" to="/login">Login</router-link>
+                <a class="mx-4" v-if="LoggedIn" @click="logout">Logout</a>
             </div>
         </div>
 
         <div class="flex flex-col md:flex-row flex-1">
             <div
-                :class="[$store.state.ExpandMenu ? 'md:w-72' : 'md:w-36', $store.state.ShowMenu ? '' : 'hidden']"
+                :class="[ExpandMenu ? 'md:w-72' : 'md:w-36', ShowMenu ? '' : 'hidden']"
                 class="md:block flex-shrink-0 w-full"
             >
                 <router-view name="sidebar"></router-view>
diff --git a/web/src/dialogs/NewBudget.vue b/web/src/dialogs/NewBudget.vue
index a37c5ed..85876bb 100644
--- a/web/src/dialogs/NewBudget.vue
+++ b/web/src/dialogs/NewBudget.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import Card from '../components/Card.vue';
 import { defineComponent } from "vue";
-import { NEW_BUDGET } from "../store/action-types";
+import { useBudgetsStore } from '../stores/budget';
 
 export default defineComponent({
   data() {
@@ -13,7 +13,7 @@ export default defineComponent({
   components: { Card },
   methods: {
     saveBudget() {
-      this.$store.dispatch(NEW_BUDGET, this.$data.budgetName);
+      useBudgetsStore().NewBudget(this.$data.budgetName);
       this.$data.dialog = false;
     },
     newBudget() {
diff --git a/web/src/main.ts b/web/src/main.ts
index 601ab38..00c4adc 100644
--- a/web/src/main.ts
+++ b/web/src/main.ts
@@ -3,7 +3,10 @@ import App from './App.vue'
 import './index.css'
 import router from './router'
 import { createPinia } from 'pinia'
-import { SET_CURRENT_ACCOUNT, SET_CURRENT_BUDGET } from './store/action-types'
+import { useBudgetsStore } from './stores/budget';
+import { useSessionStore } from './stores/session';
+import { useSettingsStore } from './stores/settings';
+import { useAccountStore } from './stores/budget-account'
 
 const app = createApp(App)
 app.use(router)
@@ -11,10 +14,30 @@ app.use(createPinia())
 app.mount('#app')
 
 router.beforeEach(async (to, from, next) => {
-  await store.dispatch(SET_CURRENT_BUDGET, to.params.budgetid);
-  await store.dispatch(SET_CURRENT_ACCOUNT, {
-        accountid: to.params.accountid,
-        budgetid: to.params.budgetid
-  });
+  const budgetStore = useBudgetsStore();
+  await budgetStore.SetCurrentBudget((<string>to.params.budgetid));
+
+  const accountStore = useAccountStore();
+  await accountStore.SetCurrentAccount((<string>to.params.budgetid), (<string>to.params.accountid));
   next();
 })
+
+function saveStateToLocalStorage() {
+    const sessionStore = useSessionStore();
+    const budgetStore = useBudgetsStore();
+    const accountStore = useAccountStore();
+    const settingsStore = useSettingsStore();
+    let persistedState = {
+        Session: sessionStore,
+        CurrentBudgetID: budgetStore.CurrentBudgetID,
+        CurrentAccountID: accountStore.CurrentAccountID,
+        ExpandMenu: settingsStore.ExpandMenu,
+        ShowMenu: settingsStore.ShowMenu
+    }
+    localStorage.setItem('store', JSON.stringify(persistedState));
+
+}
+
+useSettingsStore().$subscribe(() => saveStateToLocalStorage);
+useBudgetsStore().$subscribe(() => saveStateToLocalStorage);
+useSessionStore().$subscribe(() => saveStateToLocalStorage);
\ No newline at end of file
diff --git a/web/src/pages/Account.vue b/web/src/pages/Account.vue
index 38ef5dc..19a5503 100644
--- a/web/src/pages/Account.vue
+++ b/web/src/pages/Account.vue
@@ -1,8 +1,11 @@
 <script lang="ts">
+import { mapState } from "pinia";
 import { defineComponent } from "vue"
 import Autocomplete, { Suggestion } from '../components/Autocomplete.vue'
 import Currency from "../components/Currency.vue";
 import TransactionRow from "../components/TransactionRow.vue";
+import { useAccountStore } from "../stores/budget-account";
+import { useSessionStore } from "../stores/session";
 
 export default defineComponent({
     data() {
@@ -16,6 +19,9 @@ export default defineComponent({
     },
     components: { Autocomplete, Currency, TransactionRow },
     props: ["budgetid", "accountid"],
+    computed: {
+        ...mapState(useAccountStore, ["CurrentAccount", "TransactionsList"]),
+    },
     methods: {
         saveTransaction(e : MouseEvent) {
             e.preventDefault();
@@ -31,7 +37,7 @@ export default defineComponent({
                     amount: this.$data.Amount,
                     state: "Uncleared"
                 }),
-                headers: this.$store.getters.AuthHeaders,
+                headers: useSessionStore().AuthHeaders,
             })
                 .then(x => x.json());
         },
@@ -40,10 +46,10 @@ export default defineComponent({
 </script>
 
 <template>
-        <h1>{{ $store.getters.CurrentAccount.Name }}</h1>
+        <h1>{{ CurrentAccount?.Name }}</h1>
         <p>
             Current Balance:
-            <Currency :value="$store.getters.CurrentAccount.Balance" />
+            <Currency :value="CurrentAccount?.Balance" />
         </p>
         <table>
             <tr class="font-bold">
@@ -76,7 +82,7 @@ export default defineComponent({
                 </td>
                 <td style="width: 20px;"></td>
             </tr>
-            <TransactionRow v-for="(transaction, index) in $store.getters.Transactions"
+            <TransactionRow v-for="(transaction, index) in TransactionsList"
                 :transaction="transaction"
                 :index="index" />
         </table>
diff --git a/web/src/pages/BudgetSidebar.vue b/web/src/pages/BudgetSidebar.vue
index 9be62be..d612473 100644
--- a/web/src/pages/BudgetSidebar.vue
+++ b/web/src/pages/BudgetSidebar.vue
@@ -1,10 +1,19 @@
 <script lang="ts">
+import { mapState } from "pinia"
 import { defineComponent } from "vue"
 import Currency from "../components/Currency.vue"
+import { useBudgetsStore } from "../stores/budget"
+import { useAccountStore } from "../stores/budget-account"
+import { useSettingsStore } from "../stores/settings"
 
 export default defineComponent({
     props: ["budgetid", "accountid"],
-    components: { Currency }
+    components: { Currency },
+    computed: {
+      ...mapState(useSettingsStore, ["ExpandMenu"]),
+      ...mapState(useBudgetsStore, ["CurrentBudgetName", "CurrentBudgetID"]),
+      ...mapState(useAccountStore, ["OnBudgetAccounts", "OnBudgetAccountsBalance", "OffBudgetAccounts", "OffBudgetAccountsBalance"])
+    }
 })
 </script>
 
@@ -12,44 +21,44 @@ export default defineComponent({
   <div class="flex flex-col">
     <span class="m-1 p-1 px-3 text-xl">
       <router-link to="/dashboard">⌂</router-link>
-      {{$store.getters.CurrentBudgetName}}
+      {{CurrentBudgetName}}
     </span>
     <span class="bg-orange-200 rounded-lg m-1 p-1 px-3 flex flex-col">
       <router-link :to="'/budget/'+budgetid+'/budgeting'">Budget</router-link><br />
-      <!--<router-link :to="'/budget/'+$store.getters.CurrentBudgetID+'/reports'">Reports</router-link>-->
-      <!--<router-link :to="'/budget/'+$store.getters.CurrentBudgetID+'/all-accounts'">All Accounts</router-link>-->
+      <!--<router-link :to="'/budget/'+CurrentBudgetID+'/reports'">Reports</router-link>-->
+      <!--<router-link :to="'/budget/'+CurrentBudgetID+'/all-accounts'">All Accounts</router-link>-->
     </span>
     <li class="bg-orange-200 rounded-lg m-1 p-1 px-3">
       <div class="flex flex-row justify-between font-bold">
         <span>On-Budget Accounts</span>
-        <Currency :class="$store.state.ExpandMenu?'md:inline':'md:hidden'" :value="$store.getters.OnBudgetAccountsBalance" />
+        <Currency :class="ExpandMenu?'md:inline':'md:hidden'" :value="OnBudgetAccountsBalance" />
       </div>
-      <div v-for="account in $store.getters.OnBudgetAccounts" class="flex flex-row justify-between">
+      <div v-for="account in OnBudgetAccounts" class="flex flex-row justify-between">
         <router-link :to="'/budget/'+budgetid+'/account/'+account.ID">{{account.Name}}</router-link>
-        <Currency :class="$store.state.ExpandMenu?'md:inline':'md:hidden'" :value="account.Balance" />
+        <Currency :class="ExpandMenu?'md:inline':'md:hidden'" :value="account.Balance" />
       </div>
     </li>
     <li class="bg-red-200 rounded-lg m-1 p-1 px-3">
       <div class="flex flex-row justify-between font-bold">
         <span>Off-Budget Accounts</span>
-        <Currency :class="$store.state.ExpandMenu?'md:inline':'md:hidden'" :value="$store.getters.OffBudgetAccountsBalance" />
+        <Currency :class="ExpandMenu?'md:inline':'md:hidden'" :value="OffBudgetAccountsBalance" />
       </div>
-      <div v-for="account in $store.getters.OffBudgetAccounts" class="flex flex-row justify-between">
+      <div v-for="account in OffBudgetAccounts" class="flex flex-row justify-between">
         <router-link :to="'/budget/'+budgetid+'/account/'+account.ID">{{account.Name}}</router-link>
-        <Currency :class="$store.state.ExpandMenu?'md:inline':'md:hidden'" :value="account.Balance" />
+        <Currency :class="ExpandMenu?'md:inline':'md:hidden'" :value="account.Balance" />
       </div>
     </li>
     <li class="bg-red-200 rounded-lg m-1 p-1 px-3">
       Closed Accounts
     </li>
     <!--<li>
-      <router-link :to="'/budget/'+$store.getters.CurrentBudgetID+'/accounts'">Edit accounts</router-link>
+      <router-link :to="'/budget/'+CurrentBudgetID+'/accounts'">Edit accounts</router-link>
     </li>-->
     <li class="bg-red-200 rounded-lg m-1 p-1 px-3">
       + Add Account
     </li>
     <li class="bg-red-200 rounded-lg m-1 p-1 px-3">
-      <router-link :to="'/budget/'+$store.getters.CurrentBudgetID+'/settings'">Budget-Settings</router-link>
+      <router-link :to="'/budget/'+CurrentBudgetID+'/settings'">Budget-Settings</router-link>
     </li>
     <!--<li><router-link to="/admin">Admin</router-link></li>-->
   </div>        
diff --git a/web/src/pages/Budgeting.vue b/web/src/pages/Budgeting.vue
index 9e67732..0340e7a 100644
--- a/web/src/pages/Budgeting.vue
+++ b/web/src/pages/Budgeting.vue
@@ -1,51 +1,53 @@
 <script lang="ts">
+import { mapState } from "pinia";
 import { defineComponent } from "vue";
-import { FETCH_MONTH_BUDGET } from "../store/action-types";
-import { TITLE } from "../store/mutation-types";
 import Currency from "../components/Currency.vue";
+import { useBudgetsStore } from "../stores/budget";
+import { Category, useAccountStore } from "../stores/budget-account";
 
 interface Date {
-    Year:Number, 
-    Month:Number,
+    Year: Number,
+    Month: Number,
 }
 
 export default defineComponent({
     mounted() {
-        this.$store.commit(TITLE, "Budget for " + this.month + " " + this.year);
-        return this.$store.dispatch(FETCH_MONTH_BUDGET, { budgetid: this.budgetid, year: this.year, month: this.month });
+        document.title = "Budgeteer - Budget for " + this.month + " " + this.year;
+        return useAccountStore().FetchMonthBudget(this.budgetid, this.year, this.month);
     },
     watch: {
         year() {
-            return this.$store.dispatch(FETCH_MONTH_BUDGET, { budgetid: this.budgetid, year: this.year, month: this.month });
+            return useAccountStore().FetchMonthBudget(this.budgetid, this.year, this.month);
         },
         month() {
-            return this.$store.dispatch(FETCH_MONTH_BUDGET, { budgetid: this.budgetid, year: this.year, month: this.month });
+            return useAccountStore().FetchMonthBudget(this.budgetid, this.year, this.month);
         },
     },
     props: ["budgetid", "year", "month"],
     computed: {
-        Categories() {
-            return this.$store.getters.Categories(this.year, this.month);
+        ...mapState(useBudgetsStore, ["CurrentBudgetID"]),
+        Categories() : IterableIterator<Category> | undefined {
+            return useAccountStore().Categories(this.year, this.month);
         },
-        previous() : Date {
+        previous(): Date {
             return {
                 Year: new Date(this.year, this.month - 1, 1).getFullYear(),
                 Month: new Date(this.year, this.month - 1, 1).getMonth(),
             };
         },
-        current() : Date {
+        current(): Date {
             return {
                 Year: new Date().getFullYear(),
                 Month: new Date().getMonth(),
             };
         },
-        selected() : Date {
+        selected(): Date {
             return {
                 Year: this.year,
                 Month: Number(this.month) + 1
             }
         },
-        next() : Date {
+        next(): Date {
             return {
                 Year: new Date(this.year, Number(this.month) + 1, 1).getFullYear(),
                 Month: new Date(this.year, Number(this.month) + 1, 1).getMonth(),
@@ -61,13 +63,17 @@ export default defineComponent({
 </script>
 
 <template>
-    <h1>
-        Budget for {{selected.Month}}/{{selected.Year}}
-    </h1>
+    <h1>Budget for {{ selected.Month }}/{{ selected.Year }}</h1>
     <div>
-        <router-link :to="'/budget/'+$store.getters.CurrentBudget.ID +'/budgeting/' + previous.Year + '/' + previous.Month">Previous Month</router-link> - 
-        <router-link :to="'/budget/'+$store.getters.CurrentBudget.ID +'/budgeting/' + current.Year + '/' + current.Month">Current Month</router-link> - 
-        <router-link :to="'/budget/'+$store.getters.CurrentBudget.ID +'/budgeting/' + next.Year + '/' + next.Month">Next Month</router-link>
+        <router-link
+            :to="'/budget/' + CurrentBudgetID + '/budgeting/' + previous.Year + '/' + previous.Month"
+        >Previous Month</router-link>-
+        <router-link
+            :to="'/budget/' + CurrentBudgetID + '/budgeting/' + current.Year + '/' + current.Month"
+        >Current Month</router-link>-
+        <router-link
+            :to="'/budget/' + CurrentBudgetID + '/budgeting/' + next.Year + '/' + next.Month"
+        >Next Month</router-link>
     </div>
     <table class="container col-lg-12" id="content">
         <tr>
@@ -81,14 +87,22 @@ export default defineComponent({
             <th>Available</th>
         </tr>
         <tr v-for="category in Categories">
-            <td>{{category.Group}}</td>
-            <td>{{category.Name}}</td>
+            <td>{{ category.Group }}</td>
+            <td>{{ category.Name }}</td>
             <td></td>
             <td></td>
-            <td class="text-right"><Currency :value="category.AvailableLastMonth" /></td>
-            <td class="text-right"><Currency :value="category.Assigned" /></td>
-            <td class="text-right"><Currency :value="category.Activity" /></td>
-            <td class="text-right"><Currency :value="category.Available" /></td>
+            <td class="text-right">
+                <Currency :value="category.AvailableLastMonth" />
+            </td>
+            <td class="text-right">
+                <Currency :value="category.Assigned" />
+            </td>
+            <td class="text-right">
+                <Currency :value="category.Activity" />
+            </td>
+            <td class="text-right">
+                <Currency :value="category.Available" />
+            </td>
         </tr>
     </table>
 </template>
\ No newline at end of file
diff --git a/web/src/pages/Dashboard.vue b/web/src/pages/Dashboard.vue
index 6e25004..000fa30 100644
--- a/web/src/pages/Dashboard.vue
+++ b/web/src/pages/Dashboard.vue
@@ -2,17 +2,22 @@
 import NewBudget from '../dialogs/NewBudget.vue';
 import Card from '../components/Card.vue';
 import { defineComponent } from 'vue';
+import { mapState } from 'pinia';
+import { useSessionStore } from '../stores/session';
 
 export default defineComponent({
     props: ["budgetid"],
-    components: { NewBudget, Card }
+    components: { NewBudget, Card },
+    computed: {
+        ...mapState(useSessionStore, ["BudgetsList"]),
+    }
 })
 </script>
 
 <template>
     <h1>Budgets</h1>
     <div class="grid md:grid-cols-2 gap-6">
-        <Card v-for="budget in $store.getters.Budgets">
+        <Card v-for="budget in BudgetsList">
             <router-link v-bind:to="'/budget/'+budget.ID+'/budgeting'" class="contents">
             <!--<svg class="w-24"></svg>-->
                 <p class="w-24 text-center text-6xl"></p>
diff --git a/web/src/pages/Login.vue b/web/src/pages/Login.vue
index 273f1eb..648a96e 100644
--- a/web/src/pages/Login.vue
+++ b/web/src/pages/Login.vue
@@ -1,7 +1,6 @@
 <script lang="ts">
-import { TITLE } from "../store/mutation-types";
-import { LOGIN } from '../store/action-types'
 import { defineComponent } from "vue";
+import { useSessionStore } from "../stores/session";
 
 export default defineComponent({
     data() {
@@ -15,12 +14,12 @@ export default defineComponent({
         }
     },
     mounted() {
-        this.$store.commit(TITLE, "Login");
+        document.title = "Budgeteer - Login";
     },
     methods: {
         formSubmit(e : MouseEvent) {
             e.preventDefault();
-            this.$store.dispatch(LOGIN, this.$data.login)
+            useSessionStore().login(this.$data.login)
                 .then(x => {
                     this.$data.error = "";
                     this.$router.replace("/dashboard");
diff --git a/web/src/pages/Register.vue b/web/src/pages/Register.vue
index 7db90ed..17b48ab 100644
--- a/web/src/pages/Register.vue
+++ b/web/src/pages/Register.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { REGISTER } from "../store/action-types";
+import { useSessionStore } from '../stores/session';
 
 export default defineComponent({
     data() {
@@ -15,11 +15,11 @@ export default defineComponent({
         }
     },
     methods: {
-        formSubmit (e) {
+        formSubmit (e : FormDataEvent) {
             e.preventDefault();
-            this.$store.dispatch(REGISTER, this.$data.login)
+            useSessionStore().register(this.$data.login)
                 .then(() => this.$data.error = "")
-                .catch(() => this.$data.error = ["Something went wrong!"]);
+                .catch(() => this.$data.error = "Something went wrong!");
 
             // TODO display invalidCredentials
             // TODO redirect to dashboard on success
diff --git a/web/src/pages/Settings.vue b/web/src/pages/Settings.vue
index 6efb122..c68dd8e 100644
--- a/web/src/pages/Settings.vue
+++ b/web/src/pages/Settings.vue
@@ -1,7 +1,8 @@
 <script lang="ts">
 import { defineComponent } from "vue"
-import { IMPORT_YNAB } from "../store/action-types";
-import { TITLE } from "../store/mutation-types"
+import { useAPI } from "../stores/api";
+import { useBudgetsStore } from "../stores/budget";
+import { useSessionStore } from "../stores/session";
 
 export default defineComponent({
     data() {
@@ -16,7 +17,7 @@ export default defineComponent({
         }
     },
     mounted() {
-        this.$store.commit(TITLE, "Settings")
+        document.title = "Budgeteer - Settings";
     },
     methods: {
         gotAssignments(e : Event) {
@@ -30,22 +31,21 @@ export default defineComponent({
                 this.$data.transactionsFile = input.files[0];
         },
         deleteBudget() {
-            fetch("/api/v1/budget/" + this.$store.getters.CurrentBudget.ID, {
-                method: "DELETE",
-                headers: {
-                    'Authorization': 'Bearer ' + this.$store.state.Session.Token
-                },
-            });
-            this.$store.commit("deleteBudget", this.$store.getters.CurrentBudget.ID)
+            const currentBudgetID = useBudgetsStore().CurrentBudgetID;
+            if (currentBudgetID == null)
+                return;
+
+            const api = useAPI();
+            api.DELETE("/api/v1/budget/" + currentBudgetID);
+
+            const budgetStore = useSessionStore();
+            budgetStore.Budgets.delete(currentBudgetID);
             this.$router.push("/")
         },
         clearBudget() {
-            fetch("/api/v1/budget/" + this.$store.getters.CurrentBudget.ID + "/settings/clear", {
-                method: "POST",
-                headers: {
-                    'Authorization': 'Bearer ' + this.$store.state.Session.Token
-                },
-            })
+            const currentBudgetID = useBudgetsStore().CurrentBudgetID;
+            const api = useAPI();
+            api.POST("/api/v1/budget/" + currentBudgetID + "/settings/clear", null)
         },
         cleanNegative() {
             // <a href="/budget/{{.Budget.ID}}/settings/clean-negative">Fix all historic negative category-balances</a>
@@ -57,7 +57,8 @@ export default defineComponent({
             let formData = new FormData();
             formData.append("transactions", this.$data.transactionsFile);
             formData.append("assignments", this.$data.assignmentsFile);
-            this.$store.dispatch(IMPORT_YNAB, formData);
+            const budgetStore = useBudgetsStore();
+            budgetStore.ImportYNAB(formData);
         }
     }
 })
diff --git a/web/src/store/action-types.ts b/web/src/store/action-types.ts
deleted file mode 100644
index bc65bf2..0000000
--- a/web/src/store/action-types.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export const IMPORT_YNAB = "YNAB import";
-export const GET = "GET";
-export const POST = "POST";
-export const NEW_BUDGET = "New budget";
-export const SET_CURRENT_BUDGET = "Set current budget";
-export const SET_CURRENT_ACCOUNT = "Set current account";
-export const FETCH_BUDGET = "Fetch budget";
-export const FETCH_MONTH_BUDGET = "Fetch budget for month";
-export const LOGIN = 'Log in';
-export const REGISTER = 'Register';
-export const FETCH_ACCOUNT = "Fetch account";
\ No newline at end of file
diff --git a/web/src/store/budget/index.ts b/web/src/store/budget/index.ts
deleted file mode 100644
index ddbb2af..0000000
--- a/web/src/store/budget/index.ts
+++ /dev/null
@@ -1,152 +0,0 @@
-import { Module } from "vuex";
-import { FETCH_ACCOUNT, FETCH_BUDGET, FETCH_MONTH_BUDGET, SET_CURRENT_ACCOUNT } from "../action-types";
-import { LOGOUT, TITLE } from "../mutation-types";
-
-export interface BudgetState {
-    Accounts: Map<string, Account>,
-    CurrentAccountID?: string,
-    Categories: Map<string, Category>,
-    Months: Map<number, Map<number, Map<string, Category>>>,
-    Transactions: [],
-    Assignments: []
-}
-
-export interface Account {
-    ID: string
-    OnBudget: boolean
-}
-
-export interface Category {
-    Group: string
-    Name: string
-    AvailableLastMonth: number
-    Assigned: number
-    Activity: number
-    Available: number
-}
-
-export const budgetStore : Module<BudgetState, any> = {
-    state: {
-        Accounts: new Map<string, Account>(),
-        CurrentAccountID: undefined,
-        Months: new Map<number, Map<number, Map<string, Category>>>(),
-        Categories: new Map<string, Category>(),
-        Transactions: [],
-        Assignments: []
-    },
-
-    mutations: {
-        initializeStore(state) {
-            const store = localStorage.getItem("store");
-            if (!store)
-                return;
-
-            const restoredState = JSON.parse(store);
-            if (!restoredState)
-                return;
-
-            state.CurrentAccountID = restoredState.CurrentAccountID;
-
-            for (const account of restoredState.Accounts || []) {
-                state.Accounts.set(account[0], account[1]);
-            }
-        },
-        [LOGOUT](state) {
-            state.Accounts.clear();
-            state.Categories.clear();
-            state.Transactions = [];
-            state.Assignments = [];
-        },
-        addAccount(state, account) {
-            state.Accounts.set(account.ID, account);
-        },
-        addCategory(state, category) {
-            state.Categories.set(category.ID, category);
-        },
-        addCategoriesForMonth(state, {year, month, categories}) {
-            const yearMap = state.Months.get(year) || new Map<number, Map<string, Category>>();
-            state.Months.set(year, yearMap);
-
-            const monthMap = yearMap.get(month) || new Map<string, Category>();
-            yearMap.set(month, monthMap);
-
-            for (const category of categories){
-                monthMap.set(category.ID, category);
-            }
-        },
-        setCurrentAccountID(state, accountid) {
-            state.CurrentAccountID = accountid;
-        },
-        setTransactions(state, transactions) {
-            state.Transactions = transactions;
-        }
-    },
-
-    getters: {
-        Accounts(state) {
-            return state.Accounts.values();
-        },
-        Categories: (state) => (year : number, month : number) => {
-            const yearMap = state.Months.get(year);
-            return yearMap?.get(month)?.values();
-        },
-        CurrentAccount(state) : Account | undefined {
-            if (state.CurrentAccountID == null)
-                return undefined;
-            return state.Accounts.get(state.CurrentAccountID);
-        },
-        OnBudgetAccounts(state) {
-            return Array.from(state.Accounts.values()).filter(x => x.OnBudget);
-        },
-        OnBudgetAccountsBalance(state, getters){
-            return getters.OnBudgetAccounts.reduce((prev, curr) => prev + Number(curr.Balance), 0);
-        },
-        OffBudgetAccounts(state) {
-            return Array.from(state.Accounts.values()).filter(x => !x.OnBudget);
-        },
-        OffBudgetAccountsBalance(state, getters){
-            return getters.OffBudgetAccounts.reduce((prev, curr) => prev + Number(curr.Balance), 0);
-        },
-        Transactions(state) {
-            return (state.Transactions || []);
-        }
-    },
-
-    actions: {
-        async [SET_CURRENT_ACCOUNT]({ state, commit, dispatch, getters }, { budgetid, accountid }) {
-            if (budgetid == null)
-                return
-
-            commit("setCurrentAccountID", accountid);
-            if (accountid == null)
-                return
-
-            commit(TITLE, getters.CurrentAccount.Name);
-            await dispatch(FETCH_ACCOUNT, accountid)
-        },
-        async [FETCH_ACCOUNT]({ state, commit, rootState }, accountid) {
-            const result = await fetch("/api/v1/account/" + accountid + "/transactions", {
-                headers: {
-                    'Authorization': 'Bearer ' + rootState.Session.Token
-                }
-            });
-            const response = await result.json();
-            commit("setTransactions", response.Transactions);
-        },
-        async [FETCH_BUDGET]({ state, commit, dispatch, rootState }, budgetid) {
-            const result = await dispatch("GET", { path: "/budget/" + budgetid });
-            const response = await result.json();
-            for (const account of response.Accounts || []) {
-                commit("addAccount", account);
-            }
-            for (const category of response.Categories || []) {
-                commit("addCategory", category);
-            }
-        },
-        async [FETCH_MONTH_BUDGET]({state, commit, dispatch, rootState }, {budgetid, month, year}) {
-            const result = await dispatch("GET", { path: "/budget/" + budgetid + "/" + year + "/" + month});
-            const response = await result.json();
-            commit("addCategoriesForMonth", {year, month, categories: response.Categories})
-        }
-    }
-}
\ No newline at end of file
diff --git a/web/src/store/index.ts b/web/src/store/index.ts
deleted file mode 100644
index 53844ab..0000000
--- a/web/src/store/index.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-export const store = createStore<State>({
-    actions: {
-        /*async fetchDashboard ({state, commit, rootState}) {
-            const response = await fetch("/api/v1/dashboard", {
-                headers: {
-                    'Authorization': 'Bearer ' + rootState.Session.Token
-                }
-            })
-            const data = await response.json();
-            commit("setBudgets", data.Budgets);
-        },*/
-    },
-    plugins: [createLogger()],
-    modules: {
-        budget: budgetStore
-    }
-})
-
-store.subscribe((mutation, state) => {
-
-    const sessionStore = useSessionStore();
-    let persistedState = {
-        Session: sessionStore,
-//        Accounts: [...state.Accounts],
-        CurrentBudgetID: state.CurrentBudgetID,
-        //CurrentAccountID: state.CurrentAccountID,
-        ExpandMenu: state.ExpandMenu,
-        ShowMenu: state.ShowMenu
-    }
-    localStorage.setItem("store", JSON.stringify(persistedState));
-})
\ No newline at end of file
diff --git a/web/src/store/mutation-types.ts b/web/src/store/mutation-types.ts
deleted file mode 100644
index 9fbd0c5..0000000
--- a/web/src/store/mutation-types.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export const LOGIN_SUCCESS = '✔ Logged in';
-export const LOGOUT = 'Log out';
-export const TITLE = 'Update title';
\ No newline at end of file
diff --git a/web/src/stores/api.ts b/web/src/stores/api.ts
new file mode 100644
index 0000000..e6c6e7a
--- /dev/null
+++ b/web/src/stores/api.ts
@@ -0,0 +1,28 @@
+import { defineStore } from "pinia";
+import { useSessionStore } from "./session";
+
+export const useAPI = defineStore("api", {
+    actions: {
+        GET(path : string) {
+            const sessionStore = useSessionStore();
+            return fetch("/api/v1" + path, {
+                headers: sessionStore.AuthHeaders,
+            })
+        },
+        POST(path : string, body : FormData | string | null) {
+            const sessionStore = useSessionStore();
+            return fetch("/api/v1" + path, {
+                method: "POST",
+                headers: sessionStore.AuthHeaders,
+                body: body,
+            })
+        },
+        DELETE(path : string) {
+            const sessionStore = useSessionStore();
+            return fetch("/api/v1" + path, {
+                method: "DELETE",
+                headers: sessionStore.AuthHeaders,
+            })
+        },
+    }
+});
\ No newline at end of file
diff --git a/web/src/stores/budget-account.ts b/web/src/stores/budget-account.ts
new file mode 100644
index 0000000..641c762
--- /dev/null
+++ b/web/src/stores/budget-account.ts
@@ -0,0 +1,111 @@
+import { defineStore } from "pinia"
+import { FETCH_ACCOUNT } from "../store/action-types";
+import { useAPI } from "./api";
+import { useSessionStore } from "./session";
+
+interface State {
+    Accounts: Map<string, Account>,
+    CurrentAccountID: string | null,
+    Categories: Map<string, Category>,
+    Months: Map<number, Map<number, Map<string, Category>>>,
+    Transactions: [],
+    Assignments: []
+}
+
+export interface Account {
+    ID: string
+    Name: string
+    OnBudget: boolean
+    Balance: Number
+}
+
+export interface Category {
+    ID: string
+    Group: string
+    Name: string
+    AvailableLastMonth: number
+    Assigned: number
+    Activity: number
+    Available: number
+}
+
+export const useAccountStore = defineStore("budget/account", {
+    state: (): State => ({
+        Accounts: new Map<string, Account>(),
+        CurrentAccountID: null,
+        Months: new Map<number, Map<number, Map<string, Category>>>(),
+        Categories: new Map<string, Category>(),
+        Transactions: [],
+        Assignments: []
+    }),
+    getters: {
+        AccountsList(state) {
+            return state.Accounts.values();
+        },
+        Categories: (state) => (year : number, month : number) => {
+            const yearMap = state.Months.get(year);
+            return yearMap?.get(month)?.values();
+        },
+        CurrentAccount(state) : Account | undefined {
+            if (state.CurrentAccountID == null)
+                return undefined;
+
+            return state.Accounts.get(state.CurrentAccountID);
+        },
+        OnBudgetAccounts(state) {
+            return Array.from(state.Accounts.values()).filter(x => x.OnBudget);
+        },
+        OnBudgetAccountsBalance(state) : Number {
+            return this.OnBudgetAccounts.reduce((prev, curr) => prev + Number(curr.Balance), 0);
+        },
+        OffBudgetAccounts(state) {
+            return Array.from(state.Accounts.values()).filter(x => !x.OnBudget);
+        },
+        OffBudgetAccountsBalance(state) : Number {
+            return this.OffBudgetAccounts.reduce((prev, curr) => prev + Number(curr.Balance), 0);
+        },
+        Transactions(state) {
+            return (state.Transactions || []);
+        }
+    },
+    actions: {
+        async SetCurrentAccount(budgetid : string, accountid : string) {
+            if (budgetid == null)
+                return
+
+            this.CurrentAccountID = accountid;
+            if (this.CurrentAccount == undefined)
+                return
+
+            useSessionStore().setTitle(this.CurrentAccount.Name);
+            await this.FetchAccount(accountid);
+        },
+        async FetchAccount(accountid : string) {
+            const api = useAPI();
+            const result = await api.GET("/api/v1/account/" + accountid + "/transactions");
+            const response = await result.json();
+            this.Transactions = response.Transactions;
+        },
+        async FetchMonthBudget(budgetid : string, month : number, year : number) {
+            const api = useAPI();
+            const result = await api.GET("/budget/" + budgetid + "/" + year + "/" + month);
+            const response = await result.json();
+            this.addCategoriesForMonth(year, month, response.Categories);
+        },
+        addCategoriesForMonth(year : number, month : number, categories : Category[]) : void {
+            const yearMap = this.Months.get(year) || new Map<number, Map<string, Category>>();
+            this.Months.set(year, yearMap);
+
+            const monthMap = yearMap.get(month) || new Map<string, Category>();
+            yearMap.set(month, monthMap);
+
+            for (const category of categories){
+                monthMap.set(category.ID, category);
+            }
+        },
+        logout() {
+            this.$reset()
+        },
+    }
+
+})
\ No newline at end of file
diff --git a/web/src/stores/budgets.ts b/web/src/stores/budget.ts
similarity index 57%
rename from web/src/stores/budgets.ts
rename to web/src/stores/budget.ts
index 4bce968..5b536ab 100644
--- a/web/src/stores/budgets.ts
+++ b/web/src/stores/budget.ts
@@ -1,5 +1,6 @@
 import { defineStore } from "pinia";
 import { useAPI } from "./api";
+import { useAccountStore } from "./budget-account";
 import { Budget, useSessionStore } from "./session";
 
 interface State {
@@ -8,35 +9,29 @@ interface State {
 
 export const useBudgetsStore = defineStore('budget', {
     state: (): State => ({
-        CurrentBudgetID: null  
+        CurrentBudgetID: null,
     }),
-    actions: {
-        setCurrentBudgetID(budgetid : string) {
-            this.CurrentBudgetID = budgetid;
-        },
-    },
     getters: {
-        CurrentBudget() : Budget | undefined {
+        CurrentBudget(): Budget | undefined {
             if (this.CurrentBudgetID == null)
                 return undefined;
 
             const sessionStore = useSessionStore();
             return sessionStore.Budgets.get(this.CurrentBudgetID);
         },
-        CurrentBudgetName() : string {
+        CurrentBudgetName(state): string {
             return this.CurrentBudget?.Name ?? "";
         },
-        CurrentBudgetID() : string | undefined {
-            return this.CurrentBudgetID;
-        },
-        ImportYNAB(formData) {
+    },
+    actions: {
+        ImportYNAB(formData: FormData) {
             const api = useAPI();
             return api.POST(
-                "/budget/" + this.CurrentBudgetID + "/import/ynab", 
-                formData
+                "/budget/" + this.CurrentBudgetID + "/import/ynab",
+                formData,
             );
         },
-        async NewBudget(budgetName) {
+        async NewBudget(budgetName: string): Promise<void> {
             const api = useAPI();
             const result = await api.POST(
                 "/budget/new",
@@ -47,13 +42,24 @@ export const useBudgetsStore = defineStore('budget', {
             const sessionStore = useSessionStore();
             sessionStore.Budgets.set(response.ID, response);
         },
-        async SetCurrentBudget(budgetid : string) {
+        async SetCurrentBudget(budgetid: string): Promise<void> {
             this.CurrentBudgetID = budgetid;
 
             if (budgetid == null)
                 return
 
-            await dispatch(FETCH_BUDGET, budgetid)
+            await this.FetchBudget(budgetid);
+        },
+        async FetchBudget(budgetid: string) {
+            const api = useAPI();
+            const result = await api.GET("/budget/" + budgetid);
+            const response = await result.json();
+            for (const account of response.Accounts || []) {
+                useAccountStore().Accounts.set(account.ID, account);
+            }
+            for (const category of response.Categories || []) {
+                useAccountStore().Categories.set(category.ID, category);
+            }
         },
     }
 })
\ No newline at end of file
diff --git a/web/src/stores/session.ts b/web/src/stores/session.ts
index adbf31b..1415d9e 100644
--- a/web/src/stores/session.ts
+++ b/web/src/stores/session.ts
@@ -20,35 +20,9 @@ export const useSessionStore = defineStore('session', {
         Budgets: new Map<string, Budget>(),
     }),
     getters: {
-        Budgets(): IterableIterator<Budget> {
-            return this.Budgets.values();
-        },
-        AuthHeaders(): HeadersInit {
-            return {
-                'Authorization': 'Bearer ' + this.Token
-            }
-        },
-        /*// must define return type because of using `this`
-        fullUserDetails (state): FullUserDetails {
-          // import from other stores
-          const authPreferencesStore = useAuthPreferencesStore()
-          const authEmailStore = useAuthEmailStore()
-          return {
-            ...state,
-            // other getters now on `this`
-            fullName: this.fullName,
-            ...authPreferencesStore.$state,
-            ...authEmailStore.details
-          }
-    
-          // alternative if other modules are still in Vuex
-          // return {
-          //   ...state,
-          //   fullName: this.fullName,
-          //   ...vuexStore.state.auth.preferences,
-          //   ...vuexStore.getters['auth/email'].details
-          // }
-        }*/
+        BudgetsList: (state) => state.Budgets.values(),
+        AuthHeaders: (state) => ({'Authorization': 'Bearer ' + state.Token}),
+        LoggedIn: (state) => state.Token != null,
     },
     actions: {
         setTitle(title : string) {
diff --git a/web/yarn.lock b/web/yarn.lock
index f0565d7..6a5ee65 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -1583,7 +1583,7 @@
   optionalDependencies:
     prettier "^1.18.2 || ^2.0.0"
 
-"@vue/devtools-api@^6.0.0-beta.11", "@vue/devtools-api@^6.0.0-beta.18":
+"@vue/devtools-api@^6.0.0-beta.18":
   version "6.0.0-beta.21.1"
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.21.1.tgz#f1410f53c42aa67fa3b01ca7bdba891f69d7bc97"
   integrity sha512-FqC4s3pm35qGVeXRGOjTsRzlkJjrBLriDS9YXbflHLsfA9FrcKzIyWnLXoNm+/7930E8rRakXuAc2QkC50swAw==
@@ -8230,13 +8230,6 @@ vue@^3.2.25:
     "@vue/server-renderer" "3.2.29"
     "@vue/shared" "3.2.29"
 
-vuex@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/vuex/-/vuex-4.0.2.tgz#f896dbd5bf2a0e963f00c67e9b610de749ccacc9"
-  integrity sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==
-  dependencies:
-    "@vue/devtools-api" "^6.0.0-beta.11"
-
 watchpack-chokidar2@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/watchpack-chokidar2/-/watchpack-chokidar2-2.0.1.tgz#38500072ee6ece66f3769936950ea1771be1c957"
-- 
2.47.2


From 21dcd7837be649a7fb0be007115da943e71505d9 Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Thu, 10 Feb 2022 16:07:29 +0000
Subject: [PATCH 07/14] Bugfixes

---
 web/src/App.vue                       |  2 --
 web/src/components/Autocomplete.vue   | 23 +++++++++++++----------
 web/src/components/TransactionRow.vue |  9 +++++++--
 web/src/pages/Account.vue             | 10 ++++------
 web/src/pages/Budgeting.vue           |  6 ++++--
 web/src/pages/Settings.vue            |  4 ++--
 web/src/stores/budget-account.ts      | 10 +++++-----
 web/src/stores/session.ts             | 20 +++++++++++---------
 8 files changed, 46 insertions(+), 38 deletions(-)

diff --git a/web/src/App.vue b/web/src/App.vue
index fa12ea3..d6496af 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,7 +1,6 @@
 <script lang="ts">
 import { mapState } from "pinia";
 import { defineComponent } from "vue";
-import { LOGOUT } from "./store/mutation-types";
 import { useBudgetsStore } from "./stores/budget";
 import { useAccountStore } from "./stores/budget-account";
 import { useSessionStore } from "./stores/session";
@@ -38,7 +37,6 @@ export default defineComponent({
         sessionStore.User = restoredState.Session.User;
         sessionStore.Token = restoredState.Session.Token;
         for (const budget of restoredState.Budgets || []) {
-            console.log("UIAE", sessionStore.Budgets, budget)
             sessionStore.Budgets.set(budget[0], budget[1]);
         }
 
diff --git a/web/src/components/Autocomplete.vue b/web/src/components/Autocomplete.vue
index e4e14ba..535d661 100644
--- a/web/src/components/Autocomplete.vue
+++ b/web/src/components/Autocomplete.vue
@@ -1,5 +1,7 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue"
+import { useAPI } from "../stores/api";
+import { useBudgetsStore } from "../stores/budget";
 
 export interface Suggestion {
     ID : string
@@ -40,16 +42,17 @@ export default defineComponent({
                 return;
             }
             
-            fetch("/api/v1/budget/" + this.$store.getters.CurrentBudget.ID + "/autocomplete/" + this.type + "?s=" + text, {
-                headers: this.$store.getters.AuthHeaders
-            }) .then(x=>x.json())
-            .then(x => {
-                let suggestions = x || [];
-                if(suggestions.length > 10){
-                    suggestions = suggestions.slice(0, 10);
-                }
-                this.$data.Suggestions = suggestions;
-            });
+            const api = useAPI();
+            const budgetStore = useBudgetsStore();
+            api.GET("/budget/" + budgetStore.CurrentBudgetID + "/autocomplete/" + this.type + "?s=" + text)
+                .then(x=>x.json())
+                .then(x => {
+                    let suggestions = x || [];
+                    if(suggestions.length > 10){
+                        suggestions = suggestions.slice(0, 10);
+                    }
+                    this.$data.Suggestions = suggestions;
+                });
         },
         keypress(e : KeyboardEvent) {
             console.log(e.key);
diff --git a/web/src/components/TransactionRow.vue b/web/src/components/TransactionRow.vue
index 0c102d4..00a08e5 100644
--- a/web/src/components/TransactionRow.vue
+++ b/web/src/components/TransactionRow.vue
@@ -1,10 +1,15 @@
 <script lang="ts">
+import { mapState } from "pinia";
 import { defineComponent } from "vue";
+import { useBudgetsStore } from "../stores/budget";
 import Currency from "./Currency.vue";
 
 export default defineComponent({
     props: [ "transaction", "index" ],
-    components: { Currency }
+    components: { Currency },
+    computed: {
+        ...mapState(useBudgetsStore, ["CurrentBudgetID"])
+    }
 })
 </script>
 
@@ -18,7 +23,7 @@ export default defineComponent({
             {{ transaction.CategoryGroup ? transaction.CategoryGroup + " : " + transaction.Category : "" }}
         </td>
         <td>
-            <a :href="'/budget/' + $store.getters.CurrentBudgetID + '/transaction/' + transaction.ID">
+            <a :href="'/budget/' + CurrentBudgetID + '/transaction/' + transaction.ID">
                 {{ transaction.Memo }}
             </a>
         </td>
diff --git a/web/src/pages/Account.vue b/web/src/pages/Account.vue
index 19a5503..3dcf60f 100644
--- a/web/src/pages/Account.vue
+++ b/web/src/pages/Account.vue
@@ -4,6 +4,7 @@ import { defineComponent } from "vue"
 import Autocomplete, { Suggestion } from '../components/Autocomplete.vue'
 import Currency from "../components/Currency.vue";
 import TransactionRow from "../components/TransactionRow.vue";
+import { useAPI } from "../stores/api";
 import { useAccountStore } from "../stores/budget-account";
 import { useSessionStore } from "../stores/session";
 
@@ -25,9 +26,8 @@ export default defineComponent({
     methods: {
         saveTransaction(e : MouseEvent) {
             e.preventDefault();
-            fetch("/api/v1/transaction/new", {
-                method: "POST",
-                body: JSON.stringify({
+            const api = useAPI();
+            api.POST("/transaction/new", JSON.stringify({
                     budget_id: this.budgetid,
                     account_id: this.accountid,
                     date: this.$data.TransactionDate,
@@ -36,9 +36,7 @@ export default defineComponent({
                     memo: this.$data.Memo,
                     amount: this.$data.Amount,
                     state: "Uncleared"
-                }),
-                headers: useSessionStore().AuthHeaders,
-            })
+                }))
                 .then(x => x.json());
         },
     }
diff --git a/web/src/pages/Budgeting.vue b/web/src/pages/Budgeting.vue
index 0340e7a..55dd8d4 100644
--- a/web/src/pages/Budgeting.vue
+++ b/web/src/pages/Budgeting.vue
@@ -12,7 +12,7 @@ interface Date {
 
 export default defineComponent({
     mounted() {
-        document.title = "Budgeteer - Budget for " + this.month + " " + this.year;
+        document.title = "Budgeteer - Budget for " + this.selected.Month + "/" + this.selected.Year;
         return useAccountStore().FetchMonthBudget(this.budgetid, this.year, this.month);
     },
     watch: {
@@ -27,7 +27,9 @@ export default defineComponent({
     computed: {
         ...mapState(useBudgetsStore, ["CurrentBudgetID"]),
         Categories() : IterableIterator<Category> | undefined {
-            return useAccountStore().Categories(this.year, this.month);
+            const accountStore = useAccountStore();
+            console.log(accountStore.CategoriesForMonth(this.year, this.month));
+            return accountStore.CategoriesForMonth(this.year, this.month);
         },
         previous(): Date {
             return {
diff --git a/web/src/pages/Settings.vue b/web/src/pages/Settings.vue
index c68dd8e..be1c7ea 100644
--- a/web/src/pages/Settings.vue
+++ b/web/src/pages/Settings.vue
@@ -36,7 +36,7 @@ export default defineComponent({
                 return;
 
             const api = useAPI();
-            api.DELETE("/api/v1/budget/" + currentBudgetID);
+            api.DELETE("/budget/" + currentBudgetID);
 
             const budgetStore = useSessionStore();
             budgetStore.Budgets.delete(currentBudgetID);
@@ -45,7 +45,7 @@ export default defineComponent({
         clearBudget() {
             const currentBudgetID = useBudgetsStore().CurrentBudgetID;
             const api = useAPI();
-            api.POST("/api/v1/budget/" + currentBudgetID + "/settings/clear", null)
+            api.POST("/budget/" + currentBudgetID + "/settings/clear", null)
         },
         cleanNegative() {
             // <a href="/budget/{{.Budget.ID}}/settings/clean-negative">Fix all historic negative category-balances</a>
diff --git a/web/src/stores/budget-account.ts b/web/src/stores/budget-account.ts
index 641c762..5f53e46 100644
--- a/web/src/stores/budget-account.ts
+++ b/web/src/stores/budget-account.ts
@@ -1,5 +1,4 @@
 import { defineStore } from "pinia"
-import { FETCH_ACCOUNT } from "../store/action-types";
 import { useAPI } from "./api";
 import { useSessionStore } from "./session";
 
@@ -42,7 +41,8 @@ export const useAccountStore = defineStore("budget/account", {
         AccountsList(state) {
             return state.Accounts.values();
         },
-        Categories: (state) => (year : number, month : number) => {
+        CategoriesForMonth: (state) => (year : number, month : number) => {
+            console.log("MTH", state.Months)
             const yearMap = state.Months.get(year);
             return yearMap?.get(month)?.values();
         },
@@ -64,7 +64,7 @@ export const useAccountStore = defineStore("budget/account", {
         OffBudgetAccountsBalance(state) : Number {
             return this.OffBudgetAccounts.reduce((prev, curr) => prev + Number(curr.Balance), 0);
         },
-        Transactions(state) {
+        TransactionsList(state) {
             return (state.Transactions || []);
         }
     },
@@ -82,11 +82,11 @@ export const useAccountStore = defineStore("budget/account", {
         },
         async FetchAccount(accountid : string) {
             const api = useAPI();
-            const result = await api.GET("/api/v1/account/" + accountid + "/transactions");
+            const result = await api.GET("/account/" + accountid + "/transactions");
             const response = await result.json();
             this.Transactions = response.Transactions;
         },
-        async FetchMonthBudget(budgetid : string, month : number, year : number) {
+        async FetchMonthBudget(budgetid : string, year : number, month : number) {
             const api = useAPI();
             const result = await api.GET("/budget/" + budgetid + "/" + year + "/" + month);
             const response = await result.json();
diff --git a/web/src/stores/session.ts b/web/src/stores/session.ts
index 1415d9e..2052534 100644
--- a/web/src/stores/session.ts
+++ b/web/src/stores/session.ts
@@ -1,4 +1,5 @@
 import { defineStore } from 'pinia'
+import { useAPI } from './api';
 
 interface State {
     Token: string | null
@@ -33,17 +34,18 @@ export const useSessionStore = defineStore('session', {
             this.Token = x.Token;
             this.Budgets = x.Budgets;
         },
-        login(login: any) {
-            return fetch("/api/v1/user/login", { method: "POST", body: JSON.stringify(login) })
-                .then(x => x.json())
-                .then(x => this.loginSuccess(x));
+        async login(login: any) {
+            const api = useAPI();
+            const response = await api.POST("/user/login", JSON.stringify(login));
+            const result = await response.json();
+            return this.loginSuccess(result);
         },
-        register(login : any) {
-            return fetch("/api/v1/user/register", { method: "POST", body: JSON.stringify(login) })
-                .then(x => x.json())
-                .then(x => this.loginSuccess(x))
+        async register(login : any) {
+            const api = useAPI();
+            const response = await api.POST("/user/register", JSON.stringify(login));
+            const result = await response.json();
+            return this.loginSuccess(result);
         },
-        // easily reset state using `$reset`
         logout() {
             this.$reset()
         }
-- 
2.47.2


From 0e342f2bcf03ee7ed13b6dbc13a166d465d6dadb Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Thu, 10 Feb 2022 16:30:42 +0000
Subject: [PATCH 08/14] Try to move perstisting to stores

---
 web/src/App.vue           |  9 +++++++--
 web/src/main.ts           | 25 +++++++------------------
 web/src/stores/session.ts |  7 ++++++-
 3 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/web/src/App.vue b/web/src/App.vue
index d6496af..64042e6 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -25,7 +25,11 @@ export default defineComponent({
         }
     },
     beforeCreate() {
-        const store = localStorage.getItem("store");
+        useSessionStore().restoreFromLocalStorage();
+        
+        
+        /*
+        const store = localStorage.getItem("session");
         if (!store)
             return;
 
@@ -33,6 +37,7 @@ export default defineComponent({
         if (!restoredState)
             return;
 
+console.log("session", restoredState)
         const sessionStore = useSessionStore();
         sessionStore.User = restoredState.Session.User;
         sessionStore.Token = restoredState.Session.Token;
@@ -51,7 +56,7 @@ export default defineComponent({
 
         const settingsStore = useSettingsStore();
         settingsStore.ShowMenu = restoredState.ShowMenu;
-        settingsStore.ExpandMenu = restoredState.ExpandMenu;
+        settingsStore.ExpandMenu = restoredState.ExpandMenu;*/
     }
 })
 </script>
diff --git a/web/src/main.ts b/web/src/main.ts
index 00c4adc..b2fa505 100644
--- a/web/src/main.ts
+++ b/web/src/main.ts
@@ -2,7 +2,7 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import './index.css'
 import router from './router'
-import { createPinia } from 'pinia'
+import { createPinia, SubscriptionCallbackMutation } from 'pinia'
 import { useBudgetsStore } from './stores/budget';
 import { useSessionStore } from './stores/session';
 import { useSettingsStore } from './stores/settings';
@@ -22,22 +22,11 @@ router.beforeEach(async (to, from, next) => {
   next();
 })
 
-function saveStateToLocalStorage() {
-    const sessionStore = useSessionStore();
-    const budgetStore = useBudgetsStore();
-    const accountStore = useAccountStore();
-    const settingsStore = useSettingsStore();
-    let persistedState = {
-        Session: sessionStore,
-        CurrentBudgetID: budgetStore.CurrentBudgetID,
-        CurrentAccountID: accountStore.CurrentAccountID,
-        ExpandMenu: settingsStore.ExpandMenu,
-        ShowMenu: settingsStore.ShowMenu
-    }
-    localStorage.setItem('store', JSON.stringify(persistedState));
-
+function saveStateToLocalStorage(mutation : SubscriptionCallbackMutation<any>, 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
+useSettingsStore().$subscribe(saveStateToLocalStorage);
+useBudgetsStore().$subscribe(saveStateToLocalStorage);
+useSessionStore().$subscribe(saveStateToLocalStorage);
\ No newline at end of file
diff --git a/web/src/stores/session.ts b/web/src/stores/session.ts
index 2052534..19e1521 100644
--- a/web/src/stores/session.ts
+++ b/web/src/stores/session.ts
@@ -48,6 +48,11 @@ 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
-- 
2.47.2


From 1dc818f51ffdcff1f9f74c7a4da826b5d3d32d3f Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Thu, 10 Feb 2022 16:30:53 +0000
Subject: [PATCH 09/14] Add pinia-logger

---
 web/src/main.ts         |  6 ++-
 web/src/pinia-logger.ts | 82 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 87 insertions(+), 1 deletion(-)
 create mode 100644 web/src/pinia-logger.ts

diff --git a/web/src/main.ts b/web/src/main.ts
index b2fa505..0ba7fd3 100644
--- a/web/src/main.ts
+++ b/web/src/main.ts
@@ -7,10 +7,14 @@ 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'
 
 const app = createApp(App)
 app.use(router)
-app.use(createPinia())
+
+const pinia = createPinia()
+pinia.use(PiniaLogger())
+app.use(pinia)
 app.mount('#app')
 
 router.beforeEach(async (to, from, next) => {
diff --git a/web/src/pinia-logger.ts b/web/src/pinia-logger.ts
new file mode 100644
index 0000000..eb917f3
--- /dev/null
+++ b/web/src/pinia-logger.ts
@@ -0,0 +1,82 @@
+import { PiniaPluginContext, StoreGeneric, _ActionsTree, _StoreOnActionListenerContext } from 'pinia';
+
+const cloneDeep = <T>(obj: T): T => {
+  try {
+    return JSON.parse(JSON.stringify(obj));
+  } catch {
+    return { ...obj };
+  }
+};
+const formatTime = (date = new Date()) => {
+  const hours = date.getHours().toString().padStart(2, '0');
+  const minutes = date.getMinutes().toString().padStart(2, '0');
+  const seconds = date.getSeconds().toString().padStart(2, '0');
+  const milliseconds = date.getMilliseconds().toString();
+
+  return `${hours}:${minutes}:${seconds}:${milliseconds}`;
+};
+
+export interface PiniaLoggerOptions {
+  disabled?: boolean;
+  expanded?: boolean;
+  showDuration?: boolean
+  showStoreName?: boolean;
+  logErrors?: boolean;
+}
+
+export type PiniaActionListenerContext = _StoreOnActionListenerContext<StoreGeneric, string, _ActionsTree>;
+
+const defaultOptions: PiniaLoggerOptions = {
+  logErrors: true,
+  disabled: false,
+  expanded: true,
+  showStoreName: true,
+  showDuration: false,
+};
+
+export const PiniaLogger = (config = defaultOptions) => (ctx: PiniaPluginContext) => {
+  const options = {
+    ...defaultOptions,
+    ...config,
+  };
+
+  if (options.disabled) return;
+
+
+  ctx.store.$onAction((action: PiniaActionListenerContext) => {
+    const startTime = Date.now();
+    const prevState = cloneDeep(ctx.store.$state);
+
+    const log = (isError?: boolean, error?: any) => {
+      const endTime = Date.now();
+      const duration = endTime - startTime + 'ms';
+      const nextState = cloneDeep(ctx.store.$state);
+      const storeName = action.store.$id;
+      const title = `action 🍍 ${options.showStoreName ? `[${storeName}] ` : ''}${action.name} ${isError ? `failed after ${duration} ` : ''}@ ${formatTime()}`;
+
+      console[options.expanded ? 'group' : 'groupCollapsed'](`%c${title}`, `font-weight: bold; ${isError ? 'color: #ed4981;' : ''}`);
+      console.log('%cprev state', 'font-weight: bold; color: grey;', prevState);
+      console.log('%caction', 'font-weight: bold; color: #69B7FF;', {
+        type: action.name,
+        args: action.args.length > 0 ? { ...action.args } : undefined,
+        ...(options.showStoreName && { store: action.store.$id }),
+        ...(options.showDuration && { duration }),
+        ...(isError && { error }),
+      });
+      console.log('%cnext state', 'font-weight: bold; color: #4caf50;', nextState);
+      console.groupEnd();
+    };
+
+    action.after(() => {
+      log();
+    });
+
+    if (options.logErrors) {
+      action.onError((error) => {
+        log(true, error);
+      });
+    }
+  });
+};
+
+export default PiniaLogger;
\ No newline at end of file
-- 
2.47.2


From 5868c3310e647ebf380fc1569af5cc66dafa4f23 Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Thu, 10 Feb 2022 18:07:52 +0000
Subject: [PATCH 10/14] Fix Map.values() access and convert to array

---
 web/src/stores/budget-account.ts | 8 ++++----
 web/src/stores/session.ts        | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/web/src/stores/budget-account.ts b/web/src/stores/budget-account.ts
index 5f53e46..d352ad6 100644
--- a/web/src/stores/budget-account.ts
+++ b/web/src/stores/budget-account.ts
@@ -39,12 +39,12 @@ export const useAccountStore = defineStore("budget/account", {
     }),
     getters: {
         AccountsList(state) {
-            return state.Accounts.values();
+            return [ ...state.Accounts.values() ];
         },
         CategoriesForMonth: (state) => (year : number, month : number) => {
             console.log("MTH", state.Months)
             const yearMap = state.Months.get(year);
-            return yearMap?.get(month)?.values();
+            return [ ...yearMap?.get(month)?.values() || [] ];
         },
         CurrentAccount(state) : Account | undefined {
             if (state.CurrentAccountID == null)
@@ -53,13 +53,13 @@ export const useAccountStore = defineStore("budget/account", {
             return state.Accounts.get(state.CurrentAccountID);
         },
         OnBudgetAccounts(state) {
-            return Array.from(state.Accounts.values()).filter(x => x.OnBudget);
+            return [ ...state.Accounts.values() ].filter(x => x.OnBudget);
         },
         OnBudgetAccountsBalance(state) : Number {
             return this.OnBudgetAccounts.reduce((prev, curr) => prev + Number(curr.Balance), 0);
         },
         OffBudgetAccounts(state) {
-            return Array.from(state.Accounts.values()).filter(x => !x.OnBudget);
+            return [ ...state.Accounts.values() ].filter(x => !x.OnBudget);
         },
         OffBudgetAccountsBalance(state) : Number {
             return this.OffBudgetAccounts.reduce((prev, curr) => prev + Number(curr.Balance), 0);
diff --git a/web/src/stores/session.ts b/web/src/stores/session.ts
index 19e1521..9163269 100644
--- a/web/src/stores/session.ts
+++ b/web/src/stores/session.ts
@@ -21,7 +21,7 @@ export const useSessionStore = defineStore('session', {
         Budgets: new Map<string, Budget>(),
     }),
     getters: {
-        BudgetsList: (state) => state.Budgets.values(),
+        BudgetsList: (state) => [ ...state.Budgets.values() ],
         AuthHeaders: (state) => ({'Authorization': 'Bearer ' + state.Token}),
         LoggedIn: (state) => state.Token != null,
     },
-- 
2.47.2


From 45389e01beafb4d174be2a7747e7d166a11caed9 Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Fri, 11 Feb 2022 21:38:06 +0000
Subject: [PATCH 11/14] 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;*/
-    }
 })
 </script>
 
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((<string>to.params.budgetid), (<string>to.params.accountid));
   next();
-})
-
-function saveStateToLocalStorage(mutation : SubscriptionCallbackMutation<any>, 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<State>('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<State>('session', {
         Token: null,
         User: null,
         Budgets: new Map<string, Budget>(),
@@ -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<State>('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"
-- 
2.47.2


From f6cb6d416396426549f08a8f7f0b53f82a4c0bc8 Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Fri, 11 Feb 2022 22:03:26 +0000
Subject: [PATCH 12/14] Do not use useStorage for root state

---
 web/src/stores/budget.ts   |  3 +--
 web/src/stores/session.ts  | 27 ++++++++++++++++-----------
 web/src/stores/settings.ts | 20 +++++++++++++-------
 3 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/web/src/stores/budget.ts b/web/src/stores/budget.ts
index b8cf5bc..736662b 100644
--- a/web/src/stores/budget.ts
+++ b/web/src/stores/budget.ts
@@ -1,4 +1,3 @@
-import { useStorage } from "@vueuse/core";
 import { defineStore } from "pinia";
 import { useAPI } from "./api";
 import { useAccountStore } from "./budget-account";
@@ -9,7 +8,7 @@ interface State {
 }
 
 export const useBudgetsStore = defineStore('budget', {
-    state: () => useStorage<State>('budget', {
+    state: () => ({
         CurrentBudgetID: null,
     }),
     getters: {
diff --git a/web/src/stores/session.ts b/web/src/stores/session.ts
index 3f879b5..eba19d1 100644
--- a/web/src/stores/session.ts
+++ b/web/src/stores/session.ts
@@ -1,13 +1,17 @@
-import { useStorage } from '@vueuse/core';
+import { StorageSerializers, useStorage } from '@vueuse/core';
 import { defineStore } from 'pinia'
 import { useAPI } from './api';
 
 interface State {
-    Token: string | null
-    User: string | null
+    Session: Session | null
     Budgets: Map<string, Budget>,
 }
 
+interface Session {
+    Token: string
+    User: string
+}
+
 export interface Budget {
     ID: string
     Name: string
@@ -15,23 +19,24 @@ export interface Budget {
 }
 
 export const useSessionStore = defineStore('session', {
-    state: () => useStorage<State>('session', {
-        Token: null,
-        User: null,
-        Budgets: new Map<string, Budget>(),
+    state: () => ({
+        Session: useStorage<Session>('session', null, undefined, { serializer: StorageSerializers.object }),
+        Budgets: useStorage<Map<string, Budget>>('budgets', new Map<string, Budget>()),
     }),
     getters: {
         BudgetsList: (state) => [ ...state.Budgets.values() ],
-        AuthHeaders: (state) => ({'Authorization': 'Bearer ' + state.Token}),
-        LoggedIn: (state) => state.Token != null,
+        AuthHeaders: (state) => ({'Authorization': 'Bearer ' + state.Session.Token}),
+        LoggedIn: (state) => state.Session != null,
     },
     actions: {
         setTitle(title : string) {
             document.title = "Budgeteer - " + title;
         },
         loginSuccess(x : any) {
-            this.User = x.User;
-            this.Token = x.Token;
+            this.Session = {
+                User: x.User,
+                Token: x.Token,
+            },
             this.Budgets = x.Budgets;
         },
         async login(login: any) {
diff --git a/web/src/stores/settings.ts b/web/src/stores/settings.ts
index f8c10f4..c63e70a 100644
--- a/web/src/stores/settings.ts
+++ b/web/src/stores/settings.ts
@@ -2,21 +2,27 @@ import { useStorage } from "@vueuse/core";
 import { defineStore } from "pinia";
 
 interface State {
-    ShowMenu: boolean | null,
-    ExpandMenu: boolean,
+    Menu: MenuSettings
+}
+
+interface MenuSettings {
+    Show: boolean | null,
+    Expand: boolean | null,
 }
 
 export const useSettingsStore = defineStore('settings', {
-    state: () => useStorage<State>('settings', {
-        ShowMenu: null,
-        ExpandMenu: false,
+    state: () => ({
+        Menu: useStorage<MenuSettings>('settings', {
+            Show: null,
+            Expand: false,
+        }),
     }),
     actions: {
         toggleMenu() {
-            this.ShowMenu = !this.ShowMenu;
+            this.Menu.Show = !this.Menu.Show;
         },
         toggleMenuSize() {
-            this.ExpandMenu = !this.ExpandMenu;
+            this.Menu.Expand = !this.Menu.Expand;
         },
     }
 });
\ No newline at end of file
-- 
2.47.2


From 1af69b047d21b8aef229acaf2f117b0366487684 Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Fri, 11 Feb 2022 22:03:37 +0000
Subject: [PATCH 13/14] Fix mapping for menu in App.vue

---
 web/src/App.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/App.vue b/web/src/App.vue
index e9e3ac1..3a3f3de 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -8,7 +8,7 @@ import { useSettingsStore } from "./stores/settings";
 export default defineComponent({
     computed: {
         ...mapState(useBudgetsStore, ["CurrentBudgetName"]),
-        ...mapState(useSettingsStore, ["ExpandMenu", "ShowMenu"]),
+        ...mapState(useSettingsStore, ["Menu"]),
         ...mapState(useSessionStore, ["LoggedIn"]),
     },
     methods: {
@@ -43,7 +43,7 @@ export default defineComponent({
 
         <div class="flex flex-col md:flex-row flex-1">
             <div
-                :class="[ExpandMenu ? 'md:w-72' : 'md:w-36', ShowMenu ? '' : 'hidden']"
+                :class="[Menu.Expand ? 'md:w-72' : 'md:w-36', Menu.Show ? '' : 'hidden']"
                 class="md:block flex-shrink-0 w-full"
             >
                 <router-view name="sidebar"></router-view>
-- 
2.47.2


From cd0b370b5060e69ec9ed3b22a5cdd1eaa939411f Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Fri, 11 Feb 2022 22:18:00 +0000
Subject: [PATCH 14/14] Fix typescript errors

---
 web/src/main.ts             |  2 +-
 web/src/pages/Budgeting.vue | 61 ++++++++++++++++++++-----------------
 web/src/pages/Settings.vue  |  2 +-
 web/src/stores/budget.ts    |  2 +-
 4 files changed, 36 insertions(+), 31 deletions(-)

diff --git a/web/src/main.ts b/web/src/main.ts
index 4269aec..2c59f5f 100644
--- a/web/src/main.ts
+++ b/web/src/main.ts
@@ -2,7 +2,7 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import './index.css'
 import router from './router'
-import { createPinia, SubscriptionCallbackMutation } from 'pinia'
+import { createPinia } from 'pinia'
 import { useBudgetsStore } from './stores/budget';
 import { useAccountStore } from './stores/budget-account'
 import PiniaLogger from './pinia-logger'
diff --git a/web/src/pages/Budgeting.vue b/web/src/pages/Budgeting.vue
index 55dd8d4..022ca0d 100644
--- a/web/src/pages/Budgeting.vue
+++ b/web/src/pages/Budgeting.vue
@@ -1,61 +1,66 @@
 <script lang="ts">
 import { mapState } from "pinia";
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
 import Currency from "../components/Currency.vue";
 import { useBudgetsStore } from "../stores/budget";
 import { Category, useAccountStore } from "../stores/budget-account";
 
 interface Date {
-    Year: Number,
-    Month: Number,
+    Year: number,
+    Month: number,
 }
 
 export default defineComponent({
-    mounted() {
-        document.title = "Budgeteer - Budget for " + this.selected.Month + "/" + this.selected.Year;
-        return useAccountStore().FetchMonthBudget(this.budgetid, this.year, this.month);
+    props: {
+        budgetid: {} as PropType<string>, 
+        year: {} as PropType<number>,
+        month: {} as PropType<number>,
     },
-    watch: {
-        year() {
-            return useAccountStore().FetchMonthBudget(this.budgetid, this.year, this.month);
-        },
-        month() {
-            return useAccountStore().FetchMonthBudget(this.budgetid, this.year, this.month);
-        },
-    },
-    props: ["budgetid", "year", "month"],
     computed: {
         ...mapState(useBudgetsStore, ["CurrentBudgetID"]),
-        Categories() : IterableIterator<Category> | undefined {
+        Categories() : Category[] {
             const accountStore = useAccountStore();
-            console.log(accountStore.CategoriesForMonth(this.year, this.month));
-            return accountStore.CategoriesForMonth(this.year, this.month);
+            return [...accountStore.CategoriesForMonth(this.selected.Year, this.selected.Month)];
         },
-        previous(): Date {
+        previous() : Date {
             return {
-                Year: new Date(this.year, this.month - 1, 1).getFullYear(),
-                Month: new Date(this.year, this.month - 1, 1).getMonth(),
+                Year: new Date(this.selected.Year, this.selected.Month - 1, 1).getFullYear(),
+                Month: new Date(this.selected.Year, this.selected.Month - 1, 1).getMonth(),
             };
         },
-        current(): Date {
+        current() : Date {
             return {
                 Year: new Date().getFullYear(),
                 Month: new Date().getMonth(),
             };
         },
-        selected(): Date {
+        selected() : Date {
             return {
-                Year: this.year,
-                Month: Number(this.month) + 1
+                Year: this.year ?? this.current.Year,
+                Month: Number(this.month ?? this.current.Month) + 1
             }
         },
-        next(): Date {
+        next() : Date {
             return {
-                Year: new Date(this.year, Number(this.month) + 1, 1).getFullYear(),
-                Month: new Date(this.year, Number(this.month) + 1, 1).getMonth(),
+                Year: new Date(this.selected.Year, Number(this.month) + 1, 1).getFullYear(),
+                Month: new Date(this.selected.Year, Number(this.month) + 1, 1).getMonth(),
             };
         }
     },
+    mounted() : Promise<void> {
+        document.title = "Budgeteer - Budget for " + this.selected.Month + "/" + this.selected.Year;
+        return useAccountStore().FetchMonthBudget(this.budgetid ?? "", this.selected.Year, this.selected.Month);
+    },
+    watch: {
+        year() {
+            if (this.year != undefined && this.month != undefined)
+                return useAccountStore().FetchMonthBudget(this.budgetid ?? "", this.year, this.month);
+        },
+        month() {
+            if (this.year != undefined && this.month != undefined)
+                return useAccountStore().FetchMonthBudget(this.budgetid ?? "", this.year, this.month);
+        },
+    },
     components: { Currency }
 })
 
diff --git a/web/src/pages/Settings.vue b/web/src/pages/Settings.vue
index be1c7ea..08ebdea 100644
--- a/web/src/pages/Settings.vue
+++ b/web/src/pages/Settings.vue
@@ -12,7 +12,7 @@ export default defineComponent({
         }
     },
     computed: {
-        filesIncomplete() {
+        filesIncomplete() : boolean {
             return this.$data.transactionsFile == undefined || this.$data.assignmentsFile == undefined;
         }
     },
diff --git a/web/src/stores/budget.ts b/web/src/stores/budget.ts
index 736662b..5b536ab 100644
--- a/web/src/stores/budget.ts
+++ b/web/src/stores/budget.ts
@@ -8,7 +8,7 @@ interface State {
 }
 
 export const useBudgetsStore = defineStore('budget', {
-    state: () => ({
+    state: (): State => ({
         CurrentBudgetID: null,
     }),
     getters: {
-- 
2.47.2