introduce vuex

package-lock.json

@@ -21,7 +21,8 @@
         "sass": "^1.37.5",
         "sass-loader": "^10.2.0",
         "vue": "^3.0.0",
-        "vue-router": "^4.0.0-0"
+        "vue-router": "^4.0.0-0",
+        "vuex": "^4.0.2"
       }
     },
     "node_modules/@babel/code-frame": {
@@ -13335,6 +13336,18 @@
       "integrity": "sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU=",
       "dev": true
     },
+    "node_modules/vuex": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz",
+      "integrity": "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==",
+      "dev": true,
+      "dependencies": {
+        "@vue/devtools-api": "^6.0.0-beta.11"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.2"
+      }
+    },
     "node_modules/watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.nlark.com/watchpack/download/watchpack-1.7.5.tgz?cache=0&sync_timestamp=1621437900992&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fwatchpack%2Fdownload%2Fwatchpack-1.7.5.tgz",
@@ -25940,6 +25953,15 @@
       "integrity": "sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU=",
       "dev": true
     },
+    "vuex": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz",
+      "integrity": "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==",
+      "dev": true,
+      "requires": {
+        "@vue/devtools-api": "^6.0.0-beta.11"
+      }
+    },
     "watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.nlark.com/watchpack/download/watchpack-1.7.5.tgz?cache=0&sync_timestamp=1621437900992&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fwatchpack%2Fdownload%2Fwatchpack-1.7.5.tgz",

package.json

@@ -20,6 +20,7 @@
     "sass": "^1.37.5",
     "sass-loader": "^10.2.0",
     "vue": "^3.0.0",
-    "vue-router": "^4.0.0-0"
+    "vue-router": "^4.0.0-0",
+    "vuex": "^4.0.2"
   }
 }

src/App.vue

@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
   <header v-if="this.$route.path.includes('/s/')">
     <Navbar />
   </header>
-  <router-view />
+  <router-view :key="$route.fullPath" />
   <Footer />
 </template>
 <script>
@@ -16,21 +16,10 @@ import Footer from '@/components/Footer.vue'
 import Navbar from '@/components/Navbar.vue'
 
 export default {
-  name: "App",
+  name: 'App',
   components: {
     Footer,
     Navbar,
-  },
-  data() {
-    return {
-      memberId: null,
-    };
-  },
-  created() {
-    this.memberId = localStorage.getItem("user_id");
-  },
-  updated() {
-    this.memberId = localStorage.getItem("user_id");
-  },
+  }
 };
 </script>

src/components/AutoComplete.vue

@@ -58,8 +58,9 @@ SPDX-License-Identifier: AGPL-3.0-or-later
   </div>
 </template>
 <script>
-import RequestMixin from "@/mixins/request.mixin"
+import { mapState } from 'vuex'
 
+import RequestMixin from "@/mixins/request.mixin"
 import ProfileList from "@/components/ProfileList";
 
 export default {
@@ -87,6 +88,9 @@ export default {
       showErrorMessage: false,
     };
   },
+  computed: {
+    ...mapState(['currentUserId'])
+  },
   methods: {
     addResult(result = false) {
       if (!result) result = this.searchResults[0];
@@ -98,7 +102,7 @@ export default {
 
       let changeValues = Object.assign(this.values);
       let newValue = {
-        profile_id: localStorage.getItem("user_id"),
+        profile_id: this.currentUserId,
       };
       if (this.type != "contacttype") {
         newValue.level = 1;

src/components/Navbar.vue

@@ -16,7 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
         <span class="d-sm-none">KI</span>
       </router-link>
       <button
-        @click="showMobileNavbar = !showMobileNavbar"
+        @click="toggleMobileNav"
         class="navbar-toggler"
         type="button"
         aria-controls="navbarSupportedContent"
@@ -27,7 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
       </button>
       <div
         class="collapse navbar-collapse"
-        :class="{ show: showMobileNavbar }"
+        :class="{ show: showMobileNav }"
         id="navbarSupportedContent"
       >
         <ul class="navbar-nav me-auto mb-2 mb-lg-0">
@@ -42,7 +42,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
           <li class="nav-item">
             <router-link
               class="nav-link"
-              :to="{ path: `/s/profile/${$root.memberId}` }"
+              :to="{ path: `/s/profile/${currentUserId}` }"
               active-class="active"
               >Mein Profil</router-link
             >
@@ -86,21 +86,29 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 
 <script>
 
-import RequestMixin from "@/mixins/request.mixin"
+import { mapState } from 'vuex'
+
+import RequestMixin from '@/mixins/request.mixin'
 
 export default {
-  name: "Navbar",
+  name: 'Navbar',
   mixins: [RequestMixin],
   data() {
     return {
-      showMobileNavbar: false,
-      searchText: ''
+      searchText: '',
+      showMobileNav: false
     }
   },
+  computed: {
+    ...mapState(['currentUserId'])
+  },
   methods: {
+    toggleMobileNav() {
+      this.showMobileNav = !this.showMobileNav
+    },
     logout() {
-      localStorage.clear();
-      this.$router.push({ path: "/" });
+      this.$store.dispatch('clear')
+      this.$router.push({ path: '/' });
     },
     searchRedirect() {
       this.$router.push({ path: `/s/search?text`, query: { query: this.searchText } } );

src/main.js

@@ -5,12 +5,14 @@
 import { createApp } from 'vue/dist/vue.esm-bundler'
 import App from './App.vue'
 import router from './router'
+import store from '@/store'
 
 import './assets/global.scss'
 
 const app = createApp(App)
 
 app.use(router)
+app.use(store)
 
 app.config.globalProperties.apiUrl = window.ki.apiUrl
 

src/mixins/request.mixin.js

@@ -2,6 +2,8 @@
 //
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
+import store from '@/store'
+
 export default {
   methods: {
     async submitLogin() {
@@ -26,8 +28,8 @@ export default {
         }
 
         const responseData = await response.json()
-        localStorage.setItem('token', responseData.token);
-        localStorage.setItem('user_id', responseData.user_id);
+        store.commit('setCurrentUserId', parseInt(responseData.user_id, 10))
+        store.commit('setToken', responseData.token)
         this.$router.push({ path: '/s/search' });
       } catch (error) {
         console.error(error);
@@ -38,7 +40,7 @@ export default {
       try {
         const response = await fetch(`${this.apiUrl}/${this.type}s?search=${this.searchText}`, {
             headers: {
-              Authorization: `Bearer ${localStorage.getItem("token")}`,
+              Authorization: `Bearer ${store.state.token}`,
             },
           }
         );
@@ -65,13 +67,13 @@ export default {
       }
     },
     async initEditPage() {
-      const userId = localStorage.getItem('user_id')
+      const userId = store.state.currentUserId
       const url = `${this.apiUrl}/users/${userId}/profile`
 
       try {
         const response = await fetch(url, {
             headers: { 
-              Authorization: `Bearer ${localStorage.getItem("token")}` 
+              Authorization: `Bearer ${store.state.token}` 
             },
           }
         );
@@ -94,11 +96,11 @@ export default {
       try {
         const body = JSON.stringify(this.profile)
         const response = await fetch(
-          `${this.apiUrl}/users/${localStorage.getItem("user_id")}/profile`,
+          `${this.apiUrl}/users/${store.currentUserId}/profile`,
           {
             method: 'POST',
             headers: {
-              Authorization: `Bearer ${localStorage.getItem("token")}`,
+              Authorization: `Bearer ${store.state.token}`,
               'Content-Type': 'application/json',
             },
             body
@@ -119,7 +121,7 @@ export default {
     async initViewPage() {
       try {
         const response = await fetch(`${this.apiUrl}/users/${this.$route.params.memberId}/profile`, {
-            headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
+            headers: { Authorization: `Bearer ${store.state.token}` },
           }
         );
 
@@ -128,7 +130,7 @@ export default {
         }
 
         const responseData = await response.json()
-        this.profile = responseData.profile;
+        store.commit('setCurrentProfile', responseData.profile)
       } catch (error) {
         console.error(error);
       }
@@ -145,7 +147,7 @@ export default {
 
         const response = await fetch(url, {
           headers: {
-            Authorization: `Bearer ${localStorage.getItem("token")}`,
+            Authorization: `Bearer ${store.state.token}`,
           },
         });
 

src/router/index.js

@@ -3,6 +3,9 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
 import { createRouter, createWebHistory } from 'vue-router'
+
+import store from '@/store'
+
 import Index from '@/views/Index.vue'
 import Search from '@/views/Search.vue'
 import Edit from '@/views/profile/Edit.vue'
@@ -16,9 +19,9 @@ const routes = [
       template: "<router-view/>",
     },
     beforeEnter: (to, from, next) => {
-      if(localStorage.getItem('token') !== null){
+      if (store.state.token){
         next()
-      }else{
+      } else {
         next({path: '/', query: {url: to.fullPath, access: false}})
       }
     },

src/store.js

@@ -0,0 +1,50 @@
+// SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
+//
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { createStore } from 'vuex'
+
+const localStorageKeys = {
+  currentUserId: 'ki_current_user_id',
+  token: 'ki_token',
+}
+
+export default createStore({
+  state() {
+    return {
+      currentUserId: JSON.parse(localStorage.getItem(localStorageKeys.currentUserId)),
+      token: JSON.parse(localStorage.getItem(localStorageKeys.token)),
+      currentProfile: null
+    }
+  },
+  mutations: {
+    clearCurrentUserId(state) {
+      state.currentUserId = null
+      localStorage.removeItem(localStorageKeys.currentUserId)
+    },
+    setCurrentUserId(state, currentUserId) {
+      state.currentUserId = currentUserId
+      localStorage.setItem(
+        localStorageKeys.currentUserId, 
+        JSON.stringify(currentUserId)
+      )
+    },
+    clearToken(state) {
+      state.token = null
+      localStorage.removeItem(localStorageKeys.token)
+    },
+    setToken(state, token) {
+      state.token = token
+      localStorage.setItem(localStorageKeys.token, JSON.stringify(token))
+    },
+    setCurrentProfile(state, profile) {
+      state.currentProfile = profile
+    }
+  },
+  actions: {
+    clear(context) {
+      context.commit('clearCurrentUserId')
+      context.commit('clearToken')
+    }
+  }
+})

src/views/profile/View.vue

@@ -40,9 +40,11 @@ SPDX-License-Identifier: AGPL-3.0-or-later
   </div>
 </template>
 <script>
-import RequestMixin from "@/mixins/request.mixin"
+import { mapState } from 'vuex'
 
-import ProfileList from "@/components/ProfileList";
+import RequestMixin from '@/mixins/request.mixin'
+
+import ProfileList from '@/components/ProfileList';
 
 export default {
   name: "profileView",
@@ -50,10 +52,10 @@ export default {
   components: {
     ProfileList,
   },
-  data() {
-    return {
-        profile: null
-    };
+  computed: {
+    ...mapState({
+      profile: 'currentProfile'
+    })
   },
   async created() {
     await this.initViewPage();