From 1be8b4f2ef426cd3f8f8ef8a5d440e1887bc123b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Fri, 1 Mar 2024 01:28:44 +0100
Subject: [PATCH] refactor: category page + remove PoisList / PoiLayout + use
 setup and composition API #172

---
 components/Layout/Footer.vue      |   3 +-
 components/Layout/Header.vue      |   2 +
 components/PoisList/Actions.vue   |  11 +-
 components/PoisList/PoisList.vue  | 144 ------------------
 components/PoisList/PoisTable.vue |  49 ++++--
 lib/apiPois.ts                    |   4 +-
 lib/apiSettings.ts                |   4 +-
 pages/category/[id].vue           | 244 +++++++++++-------------------
 8 files changed, 144 insertions(+), 317 deletions(-)
 delete mode 100644 components/PoisList/PoisList.vue

diff --git a/components/Layout/Footer.vue b/components/Layout/Footer.vue
index 019739997..0c7a340f1 100644
--- a/components/Layout/Footer.vue
+++ b/components/Layout/Footer.vue
@@ -36,7 +36,8 @@ export default defineNuxtComponent({
         >
       </a>
     </span>
-    <CookiesConsent />
+    <!-- TODO: Fix client-side error -->
+    <!-- <CookiesConsent /> -->
   </footer>
 </template>
 
diff --git a/components/Layout/Header.vue b/components/Layout/Header.vue
index 40ec50333..97729d7e5 100644
--- a/components/Layout/Header.vue
+++ b/components/Layout/Header.vue
@@ -43,6 +43,8 @@ export default defineNuxtComponent({
       :logo-url="theme && theme.logo_url"
     />
 
+    <slot name="search" />
+
     <div class="tw-flex tw-justify-end print:tw-hidden">
       <slot />
       <NavMenu :entries="navMenuEntries" />
diff --git a/components/PoisList/Actions.vue b/components/PoisList/Actions.vue
index a1ba8b3a3..7986ac534 100644
--- a/components/PoisList/Actions.vue
+++ b/components/PoisList/Actions.vue
@@ -1,19 +1,16 @@
 <script lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import type { PropType } from 'vue'
-
-import { defineNuxtComponent, useRequestHeaders } from '#app'
 import IconButton from '~/components/UI/IconButton.vue'
 import IconsBar from '~/components/UI/IconsBar.vue'
 import { getPoiByCategoryIdUrl } from '~/lib/apiPois'
+import { siteStore as useSiteStore } from '~/stores/site'
 
-export default defineNuxtComponent({
+export default {
   components: {
     FontAwesomeIcon,
     IconsBar,
     IconButton,
   },
-
   props: {
     categoryId: {
       type: Number,
@@ -42,7 +39,7 @@ export default defineNuxtComponent({
   methods: {
     url(format: 'geojson' | 'csv'): string {
       return getPoiByCategoryIdUrl(
-        this.$vidoConfig(useRequestHeaders()),
+        useSiteStore().config || this.$vidoConfig(useRequestHeaders()),
         this.categoryId,
         {
           geometry_as: 'point',
@@ -52,7 +49,7 @@ export default defineNuxtComponent({
       )
     },
   },
-})
+}
 </script>
 
 <template>
diff --git a/components/PoisList/PoisList.vue b/components/PoisList/PoisList.vue
deleted file mode 100644
index f11f350b5..000000000
--- a/components/PoisList/PoisList.vue
+++ /dev/null
@@ -1,144 +0,0 @@
-<script lang="ts">
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { mapState } from 'pinia'
-import type { PropType } from 'vue'
-
-import { defineNuxtComponent, useRequestHeaders } from '#app'
-import PoiLayout from '~/components/Layout/PoiLayout.vue'
-import CategorySelector from '~/components/PoisList/CategorySelector.vue'
-import PoisTable from '~/components/PoisList/PoisTable.vue'
-import type { ContentEntry } from '~/lib/apiContent'
-import type { ApiPois, FieldsListItem } from '~/lib/apiPois'
-import { getPoiByCategoryId } from '~/lib/apiPois'
-import type { Settings } from '~/lib/apiSettings'
-import { menuStore } from '~/stores/menu'
-
-export default defineNuxtComponent({
-  components: {
-    FontAwesomeIcon,
-    PoiLayout,
-    CategorySelector,
-    PoisTable,
-  },
-
-  props: {
-    settings: {
-      type: Object as PropType<Settings>,
-      required: true,
-    },
-    navMenuEntries: {
-      type: Array as PropType<ContentEntry[]>,
-      required: true,
-    },
-    initialCategoryId: {
-      type: Number,
-      required: true,
-    },
-    initialPois: {
-      type: Object as PropType<ApiPois>,
-      required: true,
-    },
-  },
-
-  data(): {
-    categoryId: number
-    pois: ApiPois | undefined
-  } {
-    return {
-      categoryId: this.initialCategoryId,
-      pois: this.initialPois,
-    }
-  },
-
-  computed: {
-    ...mapState(menuStore, ['menuItems', 'getCurrentCategory']),
-
-    category() {
-      return this.getCurrentCategory(this.categoryId)
-    },
-
-    fields(): FieldsListItem[] {
-      return (
-        (this.pois?.features
-        && this.pois.features[0].properties.editorial?.list_fields) || [
-          { field: 'name' },
-        ]
-      )
-    },
-  },
-
-  watch: {
-    categoryId() {
-      this.pois = undefined
-
-      // Send new categoryId to parent in order to update meta title
-      this.$emit('categoryUpdate', this.categoryId)
-
-      // Change history directly to avoid resetup the page with this.$router.push
-      history.pushState({}, '', `/category/${this.categoryId}`)
-
-      getPoiByCategoryId(
-        this.$vidoConfig(useRequestHeaders()),
-        this.categoryId,
-        {
-          geometry_as: 'point',
-          short_description: true,
-        },
-      ).then(pois => this.pois = pois)
-    },
-  },
-
-  methods: {
-    onMenuChange(newCategoryId: number) {
-      this.categoryId = newCategoryId
-    },
-  },
-})
-</script>
-
-<template>
-  <PoiLayout
-    v-if="category !== undefined"
-    :settings="settings"
-    :nav-menu-entries="navMenuEntries"
-    :name="category.category.name.fr"
-    :icon="category.category.icon"
-    :color-line="category.category.color_line"
-    :color-fill="category.category.color_fill"
-  >
-    <template #body>
-      <CategorySelector
-        :menu-items="menuItems || {}"
-        :category-id="categoryId"
-        @category-change="onMenuChange"
-      />
-
-      <VDivider />
-
-      <PoisTable
-        v-if="pois"
-        :category="category"
-        :fields="fields"
-        :pois="pois"
-      />
-
-      <FontAwesomeIcon
-        v-else
-        icon="spinner"
-        class="tw-text-zinc-400 tw-animate-spin"
-        size="3x"
-      />
-    </template>
-  </PoiLayout>
-</template>
-
-<style lang="scss" scoped>
-@import '~/assets/details';
-
-h1 {
-  font-size: 2.4rem;
-  text-align: center;
-  margin: 0.6rem 0.3rem 0;
-  text-transform: uppercase;
-}
-</style>
diff --git a/components/PoisList/PoisTable.vue b/components/PoisList/PoisTable.vue
index a9a223f70..2c3dfd25f 100644
--- a/components/PoisList/PoisTable.vue
+++ b/components/PoisList/PoisTable.vue
@@ -8,6 +8,8 @@ import IconButton from '~/components/UI/IconButton.vue'
 import ContribFieldGroup from '~/components/Fields/ContribFieldGroup.vue'
 import Actions from '~/components/PoisList/Actions.vue'
 import TeritorioIconBadge from '~/components/UI/TeritorioIconBadge.vue'
+import { getPoiByCategoryId } from '~/lib/apiPois'
+import { siteStore as useSiteStore } from '~/stores/site'
 
 interface DataTableHeader {
   filterable: boolean
@@ -18,23 +20,44 @@ interface DataTableHeader {
 
 const props = defineProps<{
   category: ApiMenuCategory
-  fields: FieldsListItem[]
-  pois: ApiPois
 }>()
 
 const { t } = useI18n()
+const siteStore = useSiteStore()
 const { $propertyTranslations } = useNuxtApp()
 const { contribMode, isContribEligible, getContributorFields } = useContrib()
-
 const search = ref('')
 
-function customFilter(value: any, query: string): boolean {
-  return query !== null && value !== null && typeof value === 'string' && value.toLowerCase().includes(query.toLowerCase())
-}
+// Fetch POIs by Cache or API
+const { data: pois, pending, error } = await useAsyncData(`pois-${props.category.id}`, async () => {
+  const { data: cache } = useNuxtData(`pois-${props.category.id}`)
+  if (cache.value)
+    return cache.value as ApiPois
+
+  return await getPoiByCategoryId(
+    siteStore.config!,
+    props.category.id,
+    { geometry_as: 'point', short_description: true },
+  )
+}, {
+  watch: [props.category],
+})
+
+if (error.value || !pois.value)
+  throw createError({ statusCode: 404, statusMessage: 'POIs not found.' })
 
+// Handle default config field if not provided by API
+const fields = computed((): FieldsListItem[] => {
+  return (
+    (pois.value?.features[0].properties.editorial?.list_fields)
+    || [{ field: 'name' }]
+  )
+})
+
+// Transform headers data to be compliant with Vuetify's standards
 const headers = computed((): Array<DataTableHeader> => {
   // Basic Fields
-  const headers: Array<DataTableHeader> = props.fields.map(f => ({
+  const headers: Array<DataTableHeader> = fields.value.map(f => ({
     filterable: true,
     key: f.field,
     title: $propertyTranslations.p(
@@ -62,10 +85,14 @@ const headers = computed((): Array<DataTableHeader> => {
 
   return headers
 })
+
+function customFilter(value: any, query: string): boolean {
+  return query !== null && value !== null && typeof value === 'string' && value.toLowerCase().includes(query.toLowerCase())
+}
 </script>
 
 <template>
-  <VCard>
+  <VCard class="mt-8">
     <VToolbar class="pa-2" flat>
       <TeritorioIconBadge
         :color-fill="category.category.color_fill"
@@ -92,8 +119,9 @@ const headers = computed((): Array<DataTableHeader> => {
       />
     </VToolbar>
     <VDataTable
+      :loading="pending"
       :headers="headers"
-      :items="pois.features"
+      :items="pois?.features"
       :no-data-text="t('poisTable.empty')"
       :search="search"
       :custom-filter="customFilter"
@@ -128,6 +156,9 @@ const headers = computed((): Array<DataTableHeader> => {
           </td>
         </tr>
       </template>
+      <template #loading>
+        <VSkeletonLoader type="table-row@10" />
+      </template>
     </VDataTable>
   </VCard>
 </template>
diff --git a/lib/apiPois.ts b/lib/apiPois.ts
index 385ee4dfd..fa6c63fd7 100644
--- a/lib/apiPois.ts
+++ b/lib/apiPois.ts
@@ -166,13 +166,13 @@ export function getPoiByCategoryIdUrl(
   )
 }
 
-export function getPoiByCategoryId(
+export async function getPoiByCategoryId(
   vidoConfig: VidoConfig,
   categoryId: number | string,
   options: ApiPoisOptions = {},
 ): Promise<ApiPois> {
   options = Object.assign(defaultOptions, { geometry_as: 'point' }, options)
-  return fetch(getPoiByCategoryIdUrl(vidoConfig, categoryId, options)).then(
+  return await fetch(getPoiByCategoryIdUrl(vidoConfig, categoryId, options)).then(
     (data) => {
       if (data.ok) {
         return data.json() as unknown as ApiPois
diff --git a/lib/apiSettings.ts b/lib/apiSettings.ts
index 23334be8c..8778a1328 100644
--- a/lib/apiSettings.ts
+++ b/lib/apiSettings.ts
@@ -50,8 +50,8 @@ export interface Settings {
   themes: SiteInfosTheme[]
 }
 
-export function getSettings(vidoConfig: VidoConfig): Promise<Settings> {
-  return fetch(
+export async function getSettings(vidoConfig: VidoConfig): Promise<Settings> {
+  return await fetch(
     `${vidoConfig.API_ENDPOINT}/${vidoConfig.API_PROJECT}/${vidoConfig.API_THEME}/settings.json`,
   )
     .then((data) => {
diff --git a/pages/category/[id].vue b/pages/category/[id].vue
index b4d9894d5..cad6ceba6 100644
--- a/pages/category/[id].vue
+++ b/pages/category/[id].vue
@@ -1,171 +1,111 @@
-<script lang="ts">
-import { mapState, mapWritableState } from 'pinia'
-import type { Ref } from 'vue'
-
-import { defineNuxtComponent, useHead, useRequestHeaders, useRoute } from '#app'
-import { definePageMeta } from '#imports'
-import PoisList from '~/components/PoisList/PoisList.vue'
-import type { ContentEntry } from '~/lib/apiContent'
+<script setup lang="ts">
 import { getContents } from '~/lib/apiContent'
-import type { ApiMenuCategory, MenuItem } from '~/lib/apiMenu'
 import { getMenu } from '~/lib/apiMenu'
-import type { ApiPois } from '~/lib/apiPois'
-import { getPoiByCategoryId } from '~/lib/apiPois'
-import type {
-  PropertyTranslations,
-} from '~/lib/apiPropertyTranslations'
-import {
-  getPropertyTranslations,
-} from '~/lib/apiPropertyTranslations'
-import type { Settings } from '~/lib/apiSettings'
+import { getPropertyTranslations } from '~/lib/apiPropertyTranslations'
 import { getSettings, headerFromSettings } from '~/lib/apiSettings'
-import { getAsyncDataOrThrows } from '~/lib/getAsyncData'
 import { vidoConfig } from '~/plugins/vido-config'
-import { menuStore } from '~/stores/menu'
-import { siteStore } from '~/stores/site'
-import type { VidoConfig } from '~/utils/types-config'
-
-export default defineNuxtComponent({
-  components: {
-    PoisList,
-  },
-
-  async setup(): Promise<{
-    config: VidoConfig
-    settings: Ref<Settings>
-    contents: Ref<ContentEntry[]>
-    propertyTranslations: Ref<PropertyTranslations>
-    id: string
-    menuItems: Ref<MenuItem[]>
-    pois: Ref<ApiPois>
-  }> {
-    definePageMeta({
-      validate({ params }) {
-        return (
-          typeof params.id === 'string' && /^[,-_:a-zA-Z0-9]+$/.test(params.id)
-        )
-      },
-    })
-
-    const params = useRoute().params
-    const configRef = await getAsyncDataOrThrows('configRef', () =>
-      Promise.resolve(siteStore().config || vidoConfig(useRequestHeaders())))
-    const config: VidoConfig = configRef.value
-
-    const fetchSettings = getAsyncDataOrThrows('fetchSettings', () =>
-      siteStore().settings
-        ? Promise.resolve(siteStore().settings as Settings)
-        : getSettings(config))
-
-    const fetchContents = getAsyncDataOrThrows('fetchContents', () =>
-      siteStore().contents
-        ? Promise.resolve(siteStore().contents as ContentEntry[])
-        : getContents(config))
-
-    const fetchPropertyTranslations: Promise<Ref<PropertyTranslations>>
-      = getAsyncDataOrThrows('fetchPropertyTranslations', () =>
-        siteStore().translations
-          ? Promise.resolve(siteStore().translations as PropertyTranslations)
-          : getPropertyTranslations(config))
-
-    const fetchMenuItems = getAsyncDataOrThrows('fetchMenuItems', () =>
-      menuStore().menuItems !== undefined
-        ? Promise.resolve(Object.values(menuStore().menuItems!))
-        : getMenu(config))
-
-    const fetchPoiByCategoryId = getAsyncDataOrThrows(
-      `fetchPoiByCategoryId-${params.id}`,
-      () =>
-        getPoiByCategoryId(config, params.id as string, {
-          geometry_as: 'point',
-          short_description: true,
-        }),
+import { menuStore as useMenuStore } from '~/stores/menu'
+import { siteStore as useSiteStore } from '~/stores/site'
+import Header from '~/components/Layout/Header.vue'
+import Footer from '~/components/Layout/Footer.vue'
+import PoisTable from '~/components/PoisList/PoisTable.vue'
+import CategorySelector from '~/components/PoisList/CategorySelector.vue'
+
+// Query param validation
+definePageMeta({
+  validate({ params }) {
+    return (
+      typeof params.id === 'string' && /^[,-_:a-zA-Z0-9]+$/.test(params.id)
     )
-    const [settings, contents, propertyTranslations, menuItems, pois]
-      = await Promise.all([
-        fetchSettings,
-        fetchContents,
-        fetchPropertyTranslations,
-        fetchMenuItems,
-        fetchPoiByCategoryId,
-      ])
-
-    return {
-      config,
-      settings,
-      contents,
-      propertyTranslations,
-      id: params.id as string,
-      menuItems,
-      pois,
-    }
   },
+})
+
+const router = useRouter()
+const param = useRoute().params
+const id = Number.parseInt(param.id as string)
+const siteStore = useSiteStore()
+const menuStore = useMenuStore()
+const { $vidoConfigSet, $settings, $propertyTranslations, $trackingInit } = useNuxtApp()
 
-  computed: {
-    ...mapState(menuStore, ['getCurrentCategory']),
-    ...mapWritableState(siteStore, {
-      locale: 'locale',
-      globalConfig: 'config',
-      globalSettings: 'settings',
-      globalContents: 'contents',
-      globalTranslations: 'translations',
+// TODO: Get this globally as share it across components / pages
+let config = siteStore.config
+
+if (process.server) {
+  config = vidoConfig(useRequestHeaders())
+  $vidoConfigSet(config)
+  siteStore.$patch({ config })
+}
+
+if (!config)
+  throw createError({ statusCode: 404, statusMessage: 'Wrong config', fatal: true })
+
+// Fetch common data
+// TODO: Move common data on upper-level (ex: layout)
+const { data, error } = await useLazyAsyncData('categoryList', async () => {
+  const { data: cache } = useNuxtData('categoryList')
+  if (cache.value)
+    return cache.value
+
+  const [settings, contents, translations] = await Promise.all([
+    getSettings(config!),
+    getContents(config!),
+    getPropertyTranslations(config!),
+    getMenu(config!).then((menu) => {
+      menuStore.fetchConfig(menu)
+      return menu
     }),
-  },
+  ])
+
+  return { settings, contents, translations }
+})
 
-  created() {
-    this.globalConfig = this.config
-    if (this.menuItems)
-      menuStore().fetchConfig(this.menuItems)
+if (error.value || !data.value)
+  throw createError({ statusCode: 404, statusMessage: 'Page not found.', fatal: true })
 
-    this.globalSettings = this.settings
-    this.globalContents = this.contents
-    this.globalTranslations = this.propertyTranslations
+const { settings, contents, translations } = data.value
+const category = menuStore.getCurrentCategory(id)
 
-    this.$settings.set(this.settings)
-    this.$propertyTranslations.set(this.propertyTranslations)
-  },
+if (!category) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: 'Category Not Found',
+  })
+}
 
-  beforeMount() {
-    this.$trackingInit(this.config)
-    this.$vidoConfigSet(this.config)
-  },
+settings.themes[0].title = category.category.name
+useHead(headerFromSettings(settings))
 
-  mounted() {
-    const { params } = useRoute()
-    this.locale = this.$i18n.locale
-    this.handleCategoryUpdate(Number.parseInt(Array.isArray(params.id) ? params.id[0] : params.id))
-  },
-  methods: {
-    getCategory(categoryId: number): ApiMenuCategory {
-      // Fetching category by ID
-      // TODO: Has to be done in setup() but menuItems is touched in created() hook
-      const category = this.getCurrentCategory(categoryId)
-      if (!category) {
-        throw createError({
-          statusCode: 404,
-          statusMessage: 'Category Not Found',
-        })
-      }
-      return category
-    },
-    handleCategoryUpdate(categoryId: number) {
-      const category = this.getCategory(categoryId)
-      this.settings.themes[0].title = category.category.name
-      useHead(headerFromSettings(this.settings))
-    },
-  },
-})
+// Not sure about future usage as we could have data from useNuxtData
+$settings.set(settings)
+$propertyTranslations.set(translations)
+
+if (process.client)
+  $trackingInit(config)
+
+function onCategoryUpdate(categoryId: number) {
+  router.push(`/category/${categoryId}`)
+}
 </script>
 
 <template>
-  <PoisList
-    :settings="settings"
-    :nav-menu-entries="contents"
-    :initial-category-id="parseInt(id)"
-    :initial-pois="pois"
-    class="page-index"
-    @category-update="handleCategoryUpdate"
-  />
+  <VContainer fluid>
+    <Header
+      :theme="settings.themes[0]"
+      :nav-menu-entries="contents"
+      :color-line="category?.category.color_line"
+    >
+      <template #search>
+        <CategorySelector
+          class="w-50"
+          :menu-items="menuStore.menuItems || {}"
+          :category-id="id"
+          @category-change="onCategoryUpdate"
+        />
+      </template>
+    </Header>
+    <PoisTable :category="category" />
+    <Footer :attributions="settings.attributions" />
+  </VContainer>
 </template>
 
 <style lang="scss" scoped>