refactor: replace cookie storage with a store (pinia) (#69)

* Add pinia store

* Basic store

* Use store. Replace cookie storage and checkAuth

package.json

@@ -15,6 +15,7 @@
     "compressorjs": "^1.2.1",
     "html5-qrcode": "^2.3.8",
     "leaflet": "^1.9.4",
+    "pinia": "^2.1.7",
     "universal-cookie": "^6.1.1",
     "vue": "^3.3.9",
     "vue-router": "^4.2.5",

src/components/Header.vue

@@ -24,7 +24,8 @@
 </template>
 
 <script>
-import api from '../services/api'
+import { mapStores } from 'pinia'
+import { useAppStore } from '../store'
 
 export default {
   data() {
@@ -34,8 +35,9 @@ export default {
     }
   },
   computed: {
+    ...mapStores(useAppStore),
     username() {
-      return api.getUsername()
+      return this.appStore.user.username
     },
     getDrawerMenuItems() {
       return this.$router.options.routes
@@ -46,7 +48,7 @@ export default {
   },
   methods: {
     signOut() {
-      api.signOut()
+      this.appStore.signOut()
       this.$router.push({ path: '/' })
     }
   },

src/main.js

@@ -1,11 +1,14 @@
 import { createApp } from 'vue'
+import { createPinia } from 'pinia'
 import './assets/main.css'
 import App from './App.vue'
 import router from './router.js'
 import { vuetify } from './plugins/vuetify.js'
 
-let app = createApp(App)
+const app = createApp(App)
+const pinia = createPinia()
 
+app.use(pinia)
 app.use(router)
 app.use(vuetify)
 app.mount('#app')

src/router.js

@@ -1,5 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import api from './services/api';
+import { useAppStore } from './store'
 import Home from './views/Home.vue'
 import SignIn from './views/SignIn.vue'
 import UserDashboard from './views/UserDashboard.vue'
@@ -30,23 +30,15 @@ const router = createRouter({
   routes: routes,
 })
 
-/**
- * Method to check if the user is authenticated
- */
-const checkAuth = async () => {
-  if (api.getToken()) return true
-}
-
 /**
  * On each page change, check if it needs authentication.
- * If required, but the user is not authenticated (cookie not present), then redirect to 'sign-in'
+ * If required, but the user is not authenticated (token unknown), then redirect to 'sign-in'
  */
 router.beforeEach(async (to, from, next) => {
-  if(to.meta.requiresAuth) {
-      if(!(await checkAuth())) {
-        console.log("checkAuth")
-        return next({ name: 'sign-in' })
-      }
+  const store = useAppStore()
+  if(to.meta.requiresAuth && !store.user.token) {
+      console.log("checkAuth")
+      return next({ name: 'sign-in' })
   }
   next()
 })

src/services/api.js

@@ -1,9 +1,7 @@
-import { useCookies } from '@vueuse/integrations/useCookies'
+import { useAppStore } from '../store'
 
 const NOMINATIM_SEARCH_URL = 'https://nominatim.openstreetmap.org/search'
 const NOMINATIM_RESULT_TYPE_EXCLUDE_LIST = ['fuel', 'gas', 'casino']
-const USERNAME_COOKIE_KEY = 'username'
-const TOKEN_COOKIE_KEY = 'access_token'
 const RECENT_LOCATIONS_LOCAL_STORAGE_KEY = 'recent_locations'
 const LAST_CURRENCY_USED_LOCAL_STORAGE_KEY = 'last_currency_used'
 
@@ -57,47 +55,28 @@ export default {
     .then((response) => response.json())
   },
 
-  signOut() {
-    useCookies().remove(USERNAME_COOKIE_KEY)
-    useCookies().remove(TOKEN_COOKIE_KEY)
-  },
-
-  setUsernameCookie(username) {
-    useCookies().set(USERNAME_COOKIE_KEY, username)
-  },
-
-  setTokenCookie(token) {
-    useCookies().set(TOKEN_COOKIE_KEY, token)
-  },
-
-  getUsername() {
-    return useCookies().get(USERNAME_COOKIE_KEY)
-  },
-
-  getToken() {
-    return useCookies().get(TOKEN_COOKIE_KEY)
-  },
-
   createProof(proofImage) {
+    const store = useAppStore()
     let formData = new FormData()
     formData.append('file', proofImage, proofImage.name)
     formData.append('type', 'PRICE_TAG')
     return fetch(`${import.meta.env.VITE_OPEN_PRICES_API_URL}/proofs/upload`, {
       method: 'POST',
       headers: {
-        'Authorization': `Bearer ${this.getToken()}`
+        'Authorization': `Bearer ${store.user.token}`
       },
       body: formData,
     })
     .then((response) => response.json())
   },
 
   createPrice(priceData) {
+    const store = useAppStore()
     return fetch(`${import.meta.env.VITE_OPEN_PRICES_API_URL}/prices`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
-        'Authorization': `Bearer ${this.getToken()}`
+        'Authorization': `Bearer ${store.user.token}`
       },
       body: JSON.stringify(priceData),
     })

src/store.js

@@ -0,0 +1,21 @@
+import { defineStore } from 'pinia'
+
+export const useAppStore = defineStore('app', {
+  state: () => ({
+    user: {
+      username: null,
+      token: null,
+    },
+  }),
+  getters: {},
+  actions: {
+    signIn(username, token) {
+      this.user.username = username
+      this.user.token = token
+    },
+    signOut() {
+      this.user.username = null
+      this.user.token = null
+    }
+  }
+})

src/views/SignIn.vue

@@ -28,6 +28,8 @@
 </template>
 
 <script>
+import { mapStores } from 'pinia'
+import { useAppStore } from '../store'
 import api from '../services/api'
 
 export default {
@@ -41,6 +43,7 @@ export default {
     };
   },
   computed: {
+    ...mapStores(useAppStore),
     formFilled() {
       return Object.values(this.signinForm).every(x => !!x)
     }
@@ -52,8 +55,7 @@ export default {
         .signIn(this.signinForm.username, this.signinForm.password)
         .then((data) => {
           if (data['access_token']) {
-            api.setUsernameCookie(this.signinForm.username)
-            api.setTokenCookie(data['access_token'])
+            this.appStore.signIn(this.signinForm.username, data['access_token'])
             this.$router.push({ path: '/add', query: { signinSuccess: 'true' } })
           } else {
             alert('Error: wrong credentials')

src/views/UserDashboard.vue

@@ -25,6 +25,8 @@
 </template>
 
 <script>
+import { mapStores } from 'pinia'
+import { useAppStore } from '../store'
 import api from '../services/api'
 import PriceCard from '../components/PriceCard.vue'
 
@@ -40,8 +42,9 @@ export default {
     }
   },
   computed: {
+    ...mapStores(useAppStore),
     username() {
-      return api.getUsername()
+      return this.appStore.user.username
     },
   },
   mounted() {

yarn.lock

@@ -551,6 +551,14 @@ picocolors@^1.0.0:
   resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz"
   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
 
+pinia@^2.1.7:
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.1.7.tgz#4cf5420d9324ca00b7b4984d3fbf693222115bbc"
+  integrity sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==
+  dependencies:
+    "@vue/devtools-api" "^6.5.0"
+    vue-demi ">=0.14.5"
+
 postcss-value-parser@^4.2.0:
   version "4.2.0"
   resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz"
@@ -616,7 +624,7 @@ vite@^4.5.0:
   optionalDependencies:
     fsevents "~2.3.2"
 
-vue-demi@>=0.14.6:
+vue-demi@>=0.14.5, vue-demi@>=0.14.6:
   version "0.14.6"
   resolved "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz"
   integrity sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==