list add category name in page title #128

components/PoisList/PoisList.vue

@@ -76,6 +76,9 @@ export default defineNuxtComponent({
     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}`)
 

pages/category/[id].vue

@@ -7,7 +7,7 @@ import { definePageMeta } from '#imports'
 import PoisList from '~/components/PoisList/PoisList.vue'
 import type { ContentEntry } from '~/lib/apiContent'
 import { getContents } from '~/lib/apiContent'
-import type { MenuItem } from '~/lib/apiMenu'
+import type { ApiMenuCategory, MenuItem } from '~/lib/apiMenu'
 import { getMenu } from '~/lib/apiMenu'
 import type { ApiPois } from '~/lib/apiPois'
 import { getPoiByCategoryId } from '~/lib/apiPois'
@@ -90,8 +90,6 @@ export default defineNuxtComponent({
         fetchPoiByCategoryId,
       ])
 
-    useHead(headerFromSettings(settings.value))
-
     return {
       config,
       settings,
@@ -133,6 +131,26 @@ export default defineNuxtComponent({
 
   mounted() {
     this.locale = this.$i18n.locale
+    this.handleCategoryUpdate(useRoute().params.id as string)
+  },
+  methods: {
+    getCategory(categoryId: string): ApiMenuCategory {
+      // Fetching category by ID
+      // TODO: Has to be done in setup() but menuItems is touched in created() hook
+      const category = menuStore().getCurrentCategory(categoryId)
+      if (!category) {
+        throw createError({
+          statusCode: 404,
+          statusMessage: 'Category Not Found',
+        })
+      }
+      return category
+    },
+    handleCategoryUpdate(categoryId: number | string) {
+      const category = this.getCategory(categoryId.toString())
+      this.settings.themes[0].title = category.category.name
+      useHead(headerFromSettings(this.settings))
+    },
   },
 })
 </script>
@@ -144,6 +162,7 @@ export default defineNuxtComponent({
     :initial-category-id="parseInt(id)"
     :initial-pois="pois"
     class="page-index"
+    @category-update="handleCategoryUpdate"
   />
 </template>
 

stores/menu.ts

@@ -63,6 +63,16 @@ export const menuStore = defineStore('menu', {
           ) as ApiMenuCategory[])
     },
 
+    getCurrentCategory: (state: State): (categoryId: string) => ApiMenuCategory | undefined => {
+      return (categoryId) => {
+        return state.menuItems === undefined
+          ? undefined
+          : Object.values(state.menuItems).find(
+            menuItem => menuItem.id.toString() === categoryId,
+          ) as ApiMenuCategory
+      }
+    },
+
     selectedCategories: (state: State): ApiMenuCategory[] | undefined => {
       return state.menuItems === undefined
         ? undefined