👕 Refactor store into modules

web/package-lock.json

@@ -19,6 +19,8 @@
         "vue-class-component": "^8.0.0-0",
         "vue-router": "^4.0.0-0",
         "vuex": "^4.0.0-0",
+        "vuex-class": "^0.3.2",
+        "vuex-module-decorators": "^1.0.1",
         "vuex-persistedstate": "^4.0.0-beta.1"
       },
       "devDependencies": {
@@ -13454,6 +13456,30 @@
         "vue": "^3.0.2"
       }
     },
+    "node_modules/vuex-class": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/vuex-class/-/vuex-class-0.3.2.tgz",
+      "integrity": "sha512-m0w7/FMsNcwJgunJeM+wcNaHzK2KX1K1rw2WUQf7Q16ndXHo7pflRyOV/E8795JO/7fstyjH3EgqBI4h4n4qXQ==",
+      "peerDependencies": {
+        "vue": "^2.5.0",
+        "vue-class-component": "^6.0.0 || ^7.0.0",
+        "vuex": "^3.0.0"
+      }
+    },
+    "node_modules/vuex-module-decorators": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/vuex-module-decorators/-/vuex-module-decorators-1.0.1.tgz",
+      "integrity": "sha512-FLWZsXV5XAtl/bcKUyQFpnSBtpc3wK/7zSdy9oKbyp71mZd4ut5y2zSd219wWW9OG7WUOlVwac4rXFFDVnq7ug==",
+      "engines": {
+        "node": ">= 8",
+        "npm": ">= 5",
+        "yarn": ">= 1"
+      },
+      "peerDependencies": {
+        "vue": ">=2",
+        "vuex": "3"
+      }
+    },
     "node_modules/vuex-persistedstate": {
       "version": "4.0.0-beta.1",
       "resolved": "https://registry.npmjs.org/vuex-persistedstate/-/vuex-persistedstate-4.0.0-beta.1.tgz",
@@ -25934,6 +25960,18 @@
       "integrity": "sha512-HCPzYGea1xL7fMpDoMiHKujC1Bi/HM9LS5ML0Kv55zQtZJvOl0Lq7eWvJoen+SI4Lf7p9V5AqcVsoLPXNBywjg==",
       "requires": {}
     },
+    "vuex-class": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/vuex-class/-/vuex-class-0.3.2.tgz",
+      "integrity": "sha512-m0w7/FMsNcwJgunJeM+wcNaHzK2KX1K1rw2WUQf7Q16ndXHo7pflRyOV/E8795JO/7fstyjH3EgqBI4h4n4qXQ==",
+      "requires": {}
+    },
+    "vuex-module-decorators": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/vuex-module-decorators/-/vuex-module-decorators-1.0.1.tgz",
+      "integrity": "sha512-FLWZsXV5XAtl/bcKUyQFpnSBtpc3wK/7zSdy9oKbyp71mZd4ut5y2zSd219wWW9OG7WUOlVwac4rXFFDVnq7ug==",
+      "requires": {}
+    },
     "vuex-persistedstate": {
       "version": "4.0.0-beta.1",
       "resolved": "https://registry.npmjs.org/vuex-persistedstate/-/vuex-persistedstate-4.0.0-beta.1.tgz",

web/package.json

@@ -19,6 +19,8 @@
     "vue-class-component": "^8.0.0-0",
     "vue-router": "^4.0.0-0",
     "vuex": "^4.0.0-0",
+    "vuex-class": "^0.3.2",
+    "vuex-module-decorators": "^1.0.1",
     "vuex-persistedstate": "^4.0.0-beta.1"
   },
   "devDependencies": {

web/src/components/Navbar.vue

@@ -26,7 +26,7 @@
                     <span class="icon mr-1 has-text-white">
                         <i class="fa fa-user"></i>
                     </span>
-            <span class="has-text-white">{{ username }}</span>
+            <span class="has-text-white">{{ user.username }}</span>
           </router-link>
         </a>
         <a class="navbar-item has-text-danger mr-2" @click="logout">
@@ -47,12 +47,13 @@
 </template>
 <script lang="ts">
 import {Vue} from "vue-class-component";
+import {UserInterface} from "@/store/modules/user";
 
 export default class Navbar extends Vue {
-  private username = '';
+  private user = <UserInterface>{};
 
   created() {
-    this.username = this.$store.getters.user.username
+    this.user = this.$store.getters.currentUser
   }
 
   private logout() {

web/src/store/index.ts

@@ -1,104 +1,13 @@
 import {createStore} from 'vuex'
 import createPersistedState from "vuex-persistedstate";
-import axios, {AxiosResponse} from "axios";
+
-import qs from 'qs'
+import user from './modules/user'
+import backend from './modules/backend'
 
 export default createStore({
-    state: {
+    modules: {
-        userStatus: false,
+        user,
-        user: {},
+        backend
-        serverStatus: false
-    },
-    mutations: {
-        auth_success(state, user) {
-            state.userStatus = true
-            state.user = user
-        },
-        auth_error(state) {
-            state.userStatus = false
-        },
-        logout(state) {
-            state.userStatus = false
-            state.serverStatus = false
-            state.user = {}
-        },
-        serverConnected(state, status) {
-            state.serverStatus = status
-        }
-    },
-    actions: {
-        login({commit}, user: { username: string, password: string }) {
-            return new Promise((resolve, reject) => {
-                axios({
-                    method: 'post',
-                    url: '/auth/login',
-                    data: qs.stringify({...user})
-                })
-                    .then((resp: AxiosResponse) => {
-                        commit("auth_success", resp.data.user);
-                        resolve(resp)
-                    })
-                    .catch((err: Error) => {
-                        commit('auth_error')
-                        reject(err)
-                    })
-            })
-        },
-        logout({commit}) {
-            return new Promise((resolve, reject) => {
-                axios({
-                    method: 'post',
-                    url: '/auth/logout'
-                })
-                    .then((resp: AxiosResponse) => {
-                        commit("logout");
-                        resolve(resp)
-                    })
-                    .catch((err: Error) => {
-                        commit("logout");
-                        commit('auth_error')
-                        reject(err)
-                    })
-            })
-        },
-        getCurrentUser({commit}) {
-            return new Promise((resolve, reject) => {
-                axios({
-                    method: 'get',
-                    url: '/auth/current_user'
-                })
-                    .then((resp: AxiosResponse) => {
-                        commit("auth_success", resp.data);
-                        resolve(resp)
-                    })
-                    .catch((err: Error) => {
-                        commit('auth_error')
-                        reject(err)
-                    })
-            })
-        },
-        updateUser({commit}, user) {
-            return new Promise((resolve, reject) => {
-                axios({
-                    method: 'put',
-                    url: `/api/user/${user._id}`,
-                    data: qs.stringify({...user})
-                })
-                    .then((resp: AxiosResponse) => {
-                        commit("auth_success", resp.data);
-                        resolve(resp)
-                    })
-                    .catch((err: Error) => {
-                        reject(err)
-                    })
-            })
-        }
-    },
-    modules: {},
-    getters: {
-        isLoggedIn: state => state.userStatus,
-        user: state => state.user,
-        serverStatus: state => state.serverStatus
     },
     plugins: [createPersistedState()]
 })

web/src/store/modules/backend.ts

@@ -0,0 +1,15 @@
+import {Module, Mutation, VuexModule} from 'vuex-module-decorators'
+
+@Module
+export default class Backend extends VuexModule {
+    private serverStatus = false
+
+    get currentStatus() {
+        return this.serverStatus
+    }
+
+    @Mutation
+    private serverConnected(status: boolean) {
+        this.serverStatus = status
+    }
+}

web/src/store/modules/user.ts

@@ -0,0 +1,116 @@
+import {Action, Module, Mutation, VuexModule} from 'vuex-module-decorators'
+import axios, {AxiosResponse} from "axios";
+import qs from "qs";
+
+export interface UserInterface {
+    _id: string,
+    username: string,
+    email: string,
+    password: string,
+    registered: Date,
+    lastLogin: Date,
+}
+
+@Module
+export default class User extends VuexModule {
+    private user = <UserInterface>{}
+    private userStatus = false
+
+    get currentUser() {
+        return this.user
+    }
+
+    get isLoggedIn() {
+        return this.userStatus
+    }
+
+    @Mutation
+    private auth_success(user: UserInterface) {
+        this.user = user;
+        this.userStatus = true;
+    }
+
+    @Mutation
+    private auth_error() {
+        this.userStatus = false;
+    }
+
+    @Mutation
+    private auth_logout() {
+        this.user = <UserInterface>{}
+        this.userStatus = false
+    }
+
+    @Action
+    private login(user: UserInterface) {
+        return new Promise((resolve, reject) => {
+            axios({
+                method: 'POST',
+                url: '/auth/login',
+                data: qs.stringify({...user})
+            })
+                .then((resp: AxiosResponse) => {
+                    this.context.commit('auth_success', resp.data.user)
+                    resolve(resp)
+                })
+                .catch((err: Error) => {
+                    this.context.commit('auth_error')
+                    reject(err)
+                })
+        })
+    }
+
+    @Action
+    private logout() {
+        return new Promise((resolve, reject) => {
+            axios({
+                method: 'POST',
+                url: '/auth/logout'
+            })
+                .then((resp: AxiosResponse) => {
+                    this.context.commit("auth_logout");
+                    resolve(resp)
+                })
+                .catch((err: Error) => {
+                    reject(err)
+                })
+        })
+    }
+
+    @Action
+    private getCurrentUser() {
+        return new Promise((resolve, reject) => {
+            axios({
+                method: 'GET',
+                url: '/auth/current_user'
+            })
+                .then((resp: AxiosResponse) => {
+                    this.context.commit("auth_success", resp.data);
+                    resolve(resp)
+                })
+                .catch((err: Error) => {
+                    this.context.commit('auth_error')
+                    reject(err)
+                })
+        })
+    }
+
+    @Action
+    private updateUser(user: UserInterface) {
+        return new Promise((resolve, reject) => {
+            axios({
+                method: 'PUT',
+                url: `/api/user/${user._id}`,
+                data: qs.stringify({...user})
+            })
+                .then((resp: AxiosResponse) => {
+                    this.context.commit("auth_success", resp.data);
+                    resolve(resp)
+                })
+                .catch((err: Error) => {
+                    reject(err)
+                })
+        })
+    }
+}
+

web/src/views/DashboardHome.vue

@@ -33,7 +33,7 @@
         <div class="level-item has-text-centered">
           <div>
             <p class="heading">Server</p>
-            <p class="title" v-if="this.$store.getters.serverStatus">Connected</p>
+            <p class="title" v-if="this.$store.getters.currentStatus">Connected</p>
             <p class="title" v-else>Disconnected</p>
           </div>
         </div>
@@ -50,18 +50,14 @@
 
 <script lang="ts">
 import {Vue} from 'vue-class-component';
-
+import {UserInterface} from "@/store/modules/user";
-interface User {
-  username: string,
-  lastLogin: string
-}
 
 export default class DashboardHome extends Vue {
-  private user!: User;
+  private user = <UserInterface>{};
-  private date!: string;
+  private date: string = '';
 
   created() {
-    this.user = this.$store.getters.user
+    this.user = this.$store.getters.currentUser
     this.date = new Date(this.user.lastLogin).toLocaleString()
   }
 

web/src/views/Profile.vue

@@ -83,25 +83,21 @@
 
 <script lang="ts">
 import {Vue} from "vue-class-component";
+import {UserInterface} from "@/store/modules/user";
 
-interface User {
+interface UpdatedUser extends UserInterface {
-  _id: string,
-  username: string,
-  email: string,
-  registered: string,
-  currentPassword: string,
   newPassword: string,
   repeatNewPassword: string,
 }
 
 export default class Profile extends Vue {
+  private user = <UpdatedUser>{};
+  private date: string = '';
   private msgSuccess = '';
   private msgError = '';
-  private user!: User;
-  private date!: string;
 
   created() {
-    this.user = this.$store.getters.user
+    this.user = this.$store.getters.currentUser
     this.date = new Date(this.user.registered).toLocaleString()
   }
 
@@ -115,7 +111,7 @@ export default class Profile extends Vue {
       _id: this.user._id,
       username: this.user.username,
       email: this.user.email,
-      password: this.user.currentPassword,
+      password: this.user.password,
       newPassword: this.user.newPassword,
       repeatNewPassword: this.user.repeatNewPassword
     }