From 571180cdc5b45f555c73955c53b283e5b9332046 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Mon, 19 Feb 2024 17:10:59 +0100
Subject: [PATCH] feat: create contrib store + share enable state across tabs +
 persist state in localstorage #142

---
 middleware/contrib-mode.global.ts | 19 +++++++++++++++++--
 pages/category/[id].vue           |  3 ++-
 stores/contrib.ts                 | 22 ++++++++++++++++++++++
 stores/map.ts                     |  4 ++--
 stores/site.ts                    |  2 --
 5 files changed, 43 insertions(+), 7 deletions(-)
 create mode 100644 stores/contrib.ts

diff --git a/middleware/contrib-mode.global.ts b/middleware/contrib-mode.global.ts
index 3652b8f5e..9406bee63 100644
--- a/middleware/contrib-mode.global.ts
+++ b/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'] {
diff --git a/pages/category/[id].vue b/pages/category/[id].vue
index 1dc7f14a6..8ba3cf608 100644
--- a/pages/category/[id].vue
+++ b/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)
diff --git a/stores/contrib.ts b/stores/contrib.ts
new file mode 100644
index 000000000..bd66c52a2
--- /dev/null
+++ b/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,
+  },
+})
diff --git a/stores/map.ts b/stores/map.ts
index 32ac16e5d..335413e78 100644
--- a/stores/map.ts
+++ b/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) => {
diff --git a/stores/site.ts b/stores/site.ts
index bc79522c4..ce724d890 100644
--- a/stores/site.ts
+++ b/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,