From 15fe9e57de1a20b2552d193a80b499fccabb0dc2 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Fri, 5 Jul 2024 10:33:20 +0300
Subject: [PATCH] api fetch

---
 components/footer.vue |  7 +++----
 components/header.vue |  5 ++---
 components/modal.vue  |  3 ++-
 error.vue             |  3 ++-
 pages/index.vue       | 20 ++++++++++----------
 utils/apiFetch.ts     | 10 ++++++++++
 6 files changed, 29 insertions(+), 19 deletions(-)
 create mode 100644 utils/apiFetch.ts

diff --git a/components/footer.vue b/components/footer.vue
index 9d37776..7727a1b 100644
--- a/components/footer.vue
+++ b/components/footer.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-const config = useRuntimeConfig()
-const apiBase = config.public.apiBase
 import k_logo from '@/assets/icons/logo.svg'
+import { apiFetch } from '~/utils/apiFetch';
 
-const { data: footerData } = await useFetch<ApiFooterType[]>(`${apiBase}/footer/?ordering=small_text`, { baseURL: config.public.baseUrl, headers: useRequestHeaders(['referer']) })
-const { data: social_networkData } = await useFetch<ApiSocial_networkType[]>(`${apiBase}/social_network/`, { baseURL: config.public.baseUrl, headers: useRequestHeaders(['referer']) })
+const { data: footerData } = await apiFetch<ApiFooterType[]>(`footer/?ordering=small_text`)
+const { data: social_networkData } = await apiFetch<ApiSocial_networkType[]>(`social_network/`)
 </script>
 <template>
     <div class="footer" id="contacts">
diff --git a/components/header.vue b/components/header.vue
index 34f5af6..4bf8c74 100644
--- a/components/header.vue
+++ b/components/header.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
-const config = useRuntimeConfig()
-const apiBase = config.public.apiBase
+import { apiFetch } from '~/utils/apiFetch';
 
-const { data: pagesData } = await useFetch<ApiPagesType[]>(`${apiBase}/pages/?ordering=order`, { baseURL: config.public.baseUrl, headers: useRequestHeaders(['referer']) })
+const { data: pagesData } = await apiFetch<ApiPagesType[]>(`pages/?ordering=order`)
 const route = useRoute()
 </script>
 <template>
diff --git a/components/modal.vue b/components/modal.vue
index 0b3fbb2..344057e 100644
--- a/components/modal.vue
+++ b/components/modal.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { getColorNameFromRal } from '@/components/ral'
 import type { ralTypes } from '@/components/ral'
+import { apiFetch } from '~/utils/apiFetch';
 
 const config = useRuntimeConfig()
 const apiBase = config.public.apiBase
-const { data: calculatorData } = await useFetch<ApiCalcType>(`${apiBase}/calculator/5/`, { headers: useRequestHeaders(['referer']) })
+const { data: calculatorData } = await apiFetch<ApiCalcType>(`calculator/5/`)
 const isModalOpen = useState('modal_open', () => false)
 
 const lamelle_height = useState<number>('lamelle_height')
diff --git a/error.vue b/error.vue
index 5f78e1e..2d6582b 100644
--- a/error.vue
+++ b/error.vue
@@ -3,10 +3,11 @@ const config = useRuntimeConfig()
 const apiBase = config.public.apiBase
 import '@/assets/main.scss'
 
+import { apiFetch } from './utils/apiFetch';
 import type { NuxtError } from '#app'
 import og_img from '/og_img.png'
 
-const { data: seoData } = await useFetch<ApiKpType>(`${apiBase}/kp/2`, { baseURL: config.public.baseUrl, headers: useRequestHeaders(['referer']) })
+const { data: seoData } = await apiFetch<ApiKpType>(`kp/2`)
 useSeoMeta({
     title: seoData.value?.title,
     ogTitle: seoData.value?.title,
diff --git a/pages/index.vue b/pages/index.vue
index 7fb6cfb..7d1ac30 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 const config = useRuntimeConfig()
-const apiBase = config.public.apiBase
 const imgBase = config.public.imgBase
 
+import { apiFetch } from '~/utils/apiFetch';
 import { marked } from 'marked';
 
 import og_img from '/og_img.png'
 
-const { data: seoData } = await useFetch<ApiKpType>(`${apiBase}/kp/1`, { baseURL: config.public.baseUrl, headers: useRequestHeaders(['referer']) })
+const { data: seoData } = await apiFetch<ApiKpType>(`kp/1`)
 useSeoMeta({
     title: seoData.value?.title,
     ogTitle: seoData.value?.title,
@@ -17,15 +17,15 @@ useSeoMeta({
     // twitterCard: 'summary_large_image',
 })
 
-const { data: pagesData } = await useFetch<ApiPagesType[]>(`${apiBase}/pages/?ordering=order`, { baseURL: config.public.baseUrl, headers: useRequestHeaders(['referer']) })
+const { data: pagesData } = await apiFetch<ApiPagesType[]>(`pages/?ordering=order`)
 
-const { data: reviewsData } = await useFetch<ApiReviewsType[]>(`${apiBase}/review/`, { baseURL: config.public.baseUrl, headers: useRequestHeaders(['referer']) })
-const { data: calculatorData } = await useFetch(`${apiBase}/calculator/5/`, { baseURL: config.public.baseUrl, headers: useRequestHeaders(['referer']) })
+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', { baseURL: config.public.baseUrl, headers: useRequestHeaders(['referer']) })
-const reviews = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'clients', { baseURL: config.public.baseUrl, headers: useRequestHeaders(['referer']) })
-const delivery = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'how_to', { baseURL: config.public.baseUrl, headers: useRequestHeaders(['referer']) })
-const advantages = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'advantages', { baseURL: config.public.baseUrl, headers: useRequestHeaders(['referer']) })
+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 roubleSign = new Intl.NumberFormat('ru-RU', {
     style: 'currency',
@@ -42,7 +42,7 @@ const advantagesText = computed(() => {
     return marked.parse(c)
 })
 
-const { data: advData } = await useFetch<ApiAdvantageType[]>(`${apiBase}/advantage/`, { baseURL: config.public.baseUrl, headers: useRequestHeaders(['referer']) })
+const { data: advData } = await apiFetch<ApiAdvantageType[]>(`advantage/`)
 </script>
 <template>
     <div>
diff --git a/utils/apiFetch.ts b/utils/apiFetch.ts
new file mode 100644
index 0000000..2a3aa53
--- /dev/null
+++ b/utils/apiFetch.ts
@@ -0,0 +1,10 @@
+export async function apiFetch<T>(path: string) {
+    const config = useRuntimeConfig()
+    const apiBase = config.public.apiBase
+    const headers = new Headers()
+    headers.set('Referer', config.public.baseUrl)
+    return useFetch<T>(`${apiBase}/${path}`, {
+        baseURL: config.public.baseUrl,
+        headers
+    })
+}
\ No newline at end of file
-- 
2.40.1