feat: create contrib store + share enable state across tabs + persist…

… state in localstorage #142

middleware/contrib-mode.global.ts

@@ -1,7 +1,7 @@
 import { isArray, mergeWith } from 'lodash'
-import { siteStore } from '~/stores/site'
 import type { ApiPoi, ApiPoiProperties } from '~/lib/apiPois'
 import { EditorialGroupType } from '~/utils/types'
+import { STORE_NAME, useContribStore } from '~/stores/contrib'
 
 export interface Link {
   icon: string
@@ -20,7 +20,22 @@ interface ContribProperties {
 }
 
 export default defineNuxtRouteMiddleware((to) => {
-  siteStore().contribMode = to.query.contrib === 'true'
+  if (process.server)
+    return
+
+  if (process.client) {
+    const contribLocalStorage = localStorage.getItem(STORE_NAME)
+
+    if (to.query.contrib !== 'undefined') {
+      useContribStore().setEnabled(to.query.contrib === 'true')
+      return
+    }
+
+    if (contribLocalStorage) {
+      const state = JSON.parse(contribLocalStorage).enabled
+      useContribStore().setEnabled(state)
+    }
+  }
 })
 
 function getEditorialGroup(mode: EditorialGroupType): ApiPoiProperties['editorial'] {

pages/category/[id].vue

@@ -23,6 +23,7 @@ import { getAsyncDataOrThrows } from '~/lib/getAsyncData'
 import { vidoConfig } from '~/plugins/vido-config'
 import { menuStore } from '~/stores/menu'
 import { siteStore } from '~/stores/site'
+import { useContribStore } from '~/stores/contrib'
 import type { VidoConfig } from '~/utils/types-config'
 import { addContributorFields, isContribEligible } from '~/middleware/contrib-mode.global'
 import { EditorialGroupType } from '~/utils/types'
@@ -134,7 +135,7 @@ export default defineNuxtComponent({
   mounted() {
     this.locale = this.$i18n.locale
 
-    if (siteStore().contribMode) {
+    if (useContribStore().enabled) {
       this.pois.features.map(poi =>
         isContribEligible(poi.properties)
           ? addContributorFields(poi, EditorialGroupType.List)

stores/contrib.ts

@@ -0,0 +1,22 @@
+import { defineStore } from 'pinia'
+
+export const STORE_NAME = 'contrib'
+
+interface State {
+  enabled: boolean
+}
+
+export const useContribStore = defineStore(STORE_NAME, {
+  state: (): State => ({
+    enabled: false,
+  }),
+  actions: {
+    setEnabled(state: boolean) {
+      this.enabled = state
+      localStorage.setItem(STORE_NAME, JSON.stringify(this.enabled))
+    },
+  },
+  share: {
+    enable: true,
+  },
+})

stores/map.ts

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import { siteStore } from './site'
+import { useContribStore } from './contrib'
 import { addContributorFields, isContribEligible } from '~/middleware/contrib-mode.global'
 import type { ApiPoi, ApiPoiProperties } from '~/lib/apiPois'
 import type { LatLng, Pitch } from '~/utils/types'
@@ -60,7 +60,7 @@ export const mapStore = defineStore('map', {
         if (feature?.properties) {
           const cleanProperties: ApiPoiProperties = {} as ApiPoiProperties
 
-          if (siteStore().contribMode && isContribEligible(feature.properties))
+          if (useContribStore().enabled && isContribEligible(feature.properties))
             addContributorFields(feature, EditorialGroupType.Popup)
 
           Object.keys(feature.properties).forEach((key) => {

stores/site.ts

@@ -9,7 +9,6 @@ interface State {
   locale: string | null
   config: VidoConfig | undefined
   settings: Settings | undefined
-  contribMode: boolean
   contents: ContentEntry[] | undefined
   translations: PropertyTranslations | undefined
 }
@@ -18,7 +17,6 @@ export const siteStore = defineStore('site', {
   state: (): State => ({
     locale: null,
     config: undefined,
-    contribMode: false,
     settings: undefined,
     contents: undefined,
     translations: undefined,