fix: remove node mismatch and rebase contrib mode on cookies #142

teritorio · Feb 27, 2024 · a0a4a3c · a0a4a3c
1 parent eb5276b
commit a0a4a3c
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 30 deletions.
diff --git a/components/PoisCard/PoiCardContent.vue b/components/PoisCard/PoiCardContent.vue
@@ -229,9 +229,7 @@ export default defineNuxtComponent({
         class="tw-mt-6 tw-text-sm"
         @click-detail="trackingPopupEvent('details')"
       />
-      <ClientOnly v-if="contribMode && isContribEligible(poi.properties)">
-        <ContribFieldGroup v-bind="getContributorFields(poi)" />
-      </ClientOnly>
+      <ContribFieldGroup v-if="contribMode && isContribEligible(poi.properties)" v-bind="getContributorFields(poi)" />
     </div>
 
     <div

diff --git a/components/PoisDetails/PoiDetails.vue b/components/PoisDetails/PoiDetails.vue
@@ -213,12 +213,6 @@ export default defineNuxtComponent({
     <template #body>
       <div class="detail-wrapper">
         <div class="detail-left">
-          <ClientOnly v-if="contribMode && isContribEligible(poi.properties)">
-            <FieldsHeader :recursion-stack="[]">
-              {{ $t('fields.contrib.heading') }}
-            </FieldsHeader>
-            <ContribFieldGroup v-bind="getContributorFields(poi)" />
-          </ClientOnly>
           <FieldsGroup
             v-if="detailsFields"
             :group="{
@@ -231,6 +225,12 @@ export default defineNuxtComponent({
             :color-fill="colorFill"
             :geom="poi.geometry"
           />
+          <div v-if="contribMode && isContribEligible(poi.properties)">
+            <FieldsHeader :recursion-stack="[]">
+              {{ $t('fields.contrib.heading') }}
+            </FieldsHeader>
+            <ContribFieldGroup v-bind="getContributorFields(poi)" />
+          </div>
         </div>
 
         <div class="detail-right">

diff --git a/components/PoisList/PoisList.vue b/components/PoisList/PoisList.vue
@@ -9,7 +9,6 @@ import Actions from '~/components/PoisList/Actions.vue'
 import CategorySelector from '~/components/PoisList/CategorySelector.vue'
 import PoisTable from '~/components/PoisList/PoisTable.vue'
 import type { ContentEntry } from '~/lib/apiContent'
-import type { ApiMenuCategory } from '~/lib/apiMenu'
 import type { ApiPois, FieldsListItem } from '~/lib/apiPois'
 import { getPoiByCategoryId } from '~/lib/apiPois'
 import type { Settings } from '~/lib/apiSettings'

diff --git a/components/PoisList/PoisTable.vue b/components/PoisList/PoisTable.vue
@@ -32,8 +32,10 @@ export default defineNuxtComponent({
         ),
       }))
       h.push({ value: '', text: '' })
+
       if (this.contribMode)
-        h.push({ value: 'contrib', text: this.$t('fields.contrib.heading') })
+        h.push({ value: '', text: this.$t('fields.contrib.heading') })
+
       return h
     },
 
@@ -70,11 +72,9 @@ export default defineNuxtComponent({
             {{ $t('poisTable.details') }}
           </NuxtLink>
         </td>
-        <ClientOnly v-if="contribMode && isContribEligible(feature.properties)">
-          <td class="tw-align-top">
-            <ContribFieldGroup v-bind="getContributorFields(feature)" />
-          </td>
-        </ClientOnly>
+        <td v-if="contribMode && isContribEligible(feature.properties)" class="tw-align-top">
+          <ContribFieldGroup v-bind="getContributorFields(feature)" />
+        </td>
       </tr>
     </tbody>
     <tbody v-else>

diff --git a/middleware/contrib-mode.global.ts b/middleware/contrib-mode.global.ts
@@ -13,21 +13,15 @@ export interface ContribFields {
 }
 
 export default defineNuxtRouteMiddleware((to) => {
-  if (process.server)
-    return
-
-  if (process.client) {
-    const { setEnabled } = useContribStore()
-    const contribLocalStorage = localStorage.getItem(STORE_NAME)
-
-    if (to.query.contrib !== undefined) {
-      setEnabled(to.query.contrib === 'true')
-      return
-    }
+  const { setEnabled } = useContribStore()
+  const cookie = useCookie(STORE_NAME)
 
-    if (contribLocalStorage)
-      setEnabled(contribLocalStorage === 'true')
+  if (to.query.contrib !== undefined) {
+    setEnabled(to.query.contrib === 'true')
+    return
   }
+
+  setEnabled(Boolean(cookie.value))
 })
 
 export function getContributorFields(feature: ApiPoi): ContribFields {

diff --git a/stores/contrib.ts b/stores/contrib.ts
@@ -12,8 +12,10 @@ export const useContribStore = defineStore(STORE_NAME, {
   }),
   actions: {
     setEnabled(state: boolean) {
+      const cookie = useCookie(STORE_NAME)
+
       this.enabled = state
-      localStorage.setItem(STORE_NAME, JSON.stringify(state))
+      cookie.value = JSON.stringify(state)
     },
   },
 })