From c4b6e61655bc3311f97dc0e20607d62590acedfd Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Wed, 10 Jul 2024 14:00:07 +0300
Subject: [PATCH] 404 redirect

---
 components/header.vue            |  3 ++-
 error.vue                        | 15 ++++++++++-----
 pages/{policy.vue => [slug].vue} | 14 ++++++++++----
 pages/index.vue                  | 11 ++++++-----
 types/index.d.ts                 |  6 ++++++
 utils/apiFetch.ts                | 10 +++++++++-
 6 files changed, 43 insertions(+), 16 deletions(-)
 rename pages/{policy.vue => [slug].vue} (74%)

diff --git a/components/header.vue b/components/header.vue
index 4bf8c74..bb122bf 100644
--- a/components/header.vue
+++ b/components/header.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { apiFetch } from '~/utils/apiFetch';
 
-const { data: pagesData } = await apiFetch<ApiPagesType[]>(`pages/?ordering=order`)
+const { data: menuData } = await apiFetch<ApiMenuType>(`menu/1/?ordering=order`)
+const pagesData = menuData.value ? menuData.value.pages : []
 const route = useRoute()
 </script>
 <template>
diff --git a/error.vue b/error.vue
index 2d6582b..55e048d 100644
--- a/error.vue
+++ b/error.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
-const config = useRuntimeConfig()
-const apiBase = config.public.apiBase
 import '@/assets/main.scss'
-
+const config = useRuntimeConfig()
 import { apiFetch } from './utils/apiFetch';
 import type { NuxtError } from '#app'
 import og_img from '/og_img.png'
@@ -20,9 +18,11 @@ useSeoMeta({
 const props = defineProps({
     error: Object as () => NuxtError
 })
-
+const route = useRoute()
+if(route.path !== '/404') {
+    navigateTo('/404')
+}
 </script>
-
 <template>
     <div>
         <Header />
@@ -32,6 +32,11 @@ const props = defineProps({
                     <h1>Вы ищете страницу, которой не существует. Вернитесь на главную страницу сайта</h1>
                     <p>Извините, но мы не можем найти запрашиваемую страницу. К сожалению, мы не можем помочь вам с
                         покупкой забора здесь.</p>
+                    <p class="hidden">
+                        <code>
+                            {{ error?.message }}
+                        </code>
+                    </p>
                     <button @click="navigateTo('/')" class="not-prose">Вернуться на главную</button>
                 </div>
             </div>
diff --git a/pages/policy.vue b/pages/[slug].vue
similarity index 74%
rename from pages/policy.vue
rename to pages/[slug].vue
index 08d67ef..6112102 100644
--- a/pages/policy.vue
+++ b/pages/[slug].vue
@@ -16,10 +16,16 @@ useSeoMeta({
     ogImage: config.public.baseUrl + og_img,
     // twitterCard: 'summary_large_image',
 })
-
-const { data: policyData } = await apiFetch<ApiPagesType[]>(`pages/1`)
+const route = useRoute()
+const { data } = await apiFetch<ApiPagesType>(`pages/${route.params.slug}`)
+if (!data.value) {
+    throw createError({
+        statusCode: 404,
+    })
+}
 const policyText = computed(() => {
-    let c = policyData?.value.content || ''
+    if (!data?.value) return ''
+    let c = data?.value.content || ''
     return marked.parse(c)
 })
 
@@ -28,7 +34,7 @@ const policyText = computed(() => {
     <div>
         <div class="siteblock bg-white">
             <div class="container">
-                <h1 class="siteblock-title">{{ policyData.title }}</h1>
+                <h1 class="siteblock-title">{{ data?.title || '404' }}</h1>
                 <div class="col-span-full prose max-w-full" v-html="policyText" />
             </div>
         </div>
diff --git a/pages/index.vue b/pages/index.vue
index 7d1ac30..a74436c 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -17,15 +17,16 @@ useSeoMeta({
     // twitterCard: 'summary_large_image',
 })
 
-const { data: pagesData } = await apiFetch<ApiPagesType[]>(`pages/?ordering=order`)
+const { data: menuData } = await apiFetch<ApiMenuType>(`menu/1/?ordering=order`)
+const pagesData = menuData.value ? menuData.value.pages : []
 
 const { data: reviewsData } = await apiFetch<ApiReviewsType[]>(`review/`)
 const { data: calculatorData } = await apiFetch(`calculator/5/`)
 
-const about = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'about')
-const reviews = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'clients')
-const delivery = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'how_to')
-const advantages = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'advantages')
+const about = pagesData.find(el => el.slug == 'about')
+const reviews = pagesData.find(el => el.slug == 'clients')
+const delivery = pagesData.find(el => el.slug == 'how_to')
+const advantages = pagesData.find(el => el.slug == 'advantages')
 
 const roubleSign = new Intl.NumberFormat('ru-RU', {
     style: 'currency',
diff --git a/types/index.d.ts b/types/index.d.ts
index eea6bba..8c61d6e 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -14,6 +14,12 @@ type ApiKpType = {
     is_indexed: boolean
 }
 
+type ApiMenuType = {
+    id: number
+    type: string
+    pages: ApiPagesType[]
+}
+
 type ApiPagesType = {
     id: number
     title: string
diff --git a/utils/apiFetch.ts b/utils/apiFetch.ts
index 2a3aa53..706c87f 100644
--- a/utils/apiFetch.ts
+++ b/utils/apiFetch.ts
@@ -5,6 +5,14 @@ export async function apiFetch<T>(path: string) {
     headers.set('Referer', config.public.baseUrl)
     return useFetch<T>(`${apiBase}/${path}`, {
         baseURL: config.public.baseUrl,
-        headers
+        headers,
+        onResponseError({ response }) {
+            console.log(response)
+            window.location.pathname = '/404'
+            throw createError({
+                statusCode: 404,
+                fatal: true
+            })
+        },
     })
 }
\ No newline at end of file