From 68ed05cd8d246f20db42dc67242dee9c42231684 Mon Sep 17 00:00:00 2001
From: Vasilii Mikhailovskii <ti.webdev@ya.ru>
Date: Tue, 13 May 2025 08:20:39 +0200
Subject: [PATCH] add not found handler

---
 apps/frontend/src/components/QueryRender.vue | 24 ++++++++++++++
 apps/frontend/src/views/ReadQRCodeView.vue   | 33 +++++++++++++++-----
 apps/frontend/vite.config.ts                 |  1 +
 3 files changed, 50 insertions(+), 8 deletions(-)

diff --git a/apps/frontend/src/components/QueryRender.vue b/apps/frontend/src/components/QueryRender.vue
index eb77fd0..f370691 100644
--- a/apps/frontend/src/components/QueryRender.vue
+++ b/apps/frontend/src/components/QueryRender.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts" generic="R, E">
 import type { UseQueryReturnType } from '@tanstack/vue-query'
+import { ROUTE_NAMES } from '@/constants/routes'
 
 type Props = {
   query: UseQueryReturnType<R, E>
@@ -7,6 +8,7 @@ type Props = {
 
 const slots = defineSlots<{
   default?: (slotBindings: { data: R }) => void
+  notFound?: (slotBindings: { error: E; reload: typeof refetch }) => void
   error?: (slotBindings: { error: E; reload: typeof refetch }) => void
   loading?: () => void
 }>()
@@ -23,6 +25,28 @@ const { data, error, refetch, isSuccess, isError, isLoading } = query
       <ProgressSpinner styleClass="mt-4" />
     </div>
   </slot>
+
+  <slot
+    v-else-if="
+      isError &&
+      error &&
+      typeof error === 'object' &&
+      'error' in error &&
+      error.error === 'not_found'
+    "
+    name="notFound"
+    :error="error!"
+    :reload="refetch"
+  >
+    <template v-if="!slots.notFound">
+      Страница не найдена<br />
+      <RouterLink
+        :to="{ name: ROUTE_NAMES.HOME }"
+        class="underline text-blue-600 dark:text-blue-400"
+        >Перейти на главную</RouterLink
+      ></template
+    >
+  </slot>
   <slot v-else-if="isError" name="error" :error="error!" :reload="refetch">
     <template v-if="!slots.error">
       Ошибка загрузки данных:
diff --git a/apps/frontend/src/views/ReadQRCodeView.vue b/apps/frontend/src/views/ReadQRCodeView.vue
index 8702ce6..fd374a4 100644
--- a/apps/frontend/src/views/ReadQRCodeView.vue
+++ b/apps/frontend/src/views/ReadQRCodeView.vue
@@ -11,13 +11,30 @@
   <div class="flex flex-col min-h-full">
     <main class="flex-grow flex items-center justify-center py-6 px-4 md:px-6 pt-safe-or-6">
       <section class="max-w-prose w-full flex flex-col gap-10">
-        <QueryRender :query #default="{ data: doc }">
-          <template v-for="action in doc.actions" :key="action">
-            <ReadContactInfo
-              v-if="action === 'viewContactInfo' && doc.contactInfo"
-              :contactInfo="doc.contactInfo"
-            />
-            <ReadMessageSender v-else-if="action === 'sendMessage'" :doc />
+        <QueryRender :query>
+          <template #notFound="{ error }">
+            <template v-if="'reason' in error && error.reason === 'deleted'">
+              Этот QR-код был удален.
+            </template>
+            <template v-else-if="'reason' in error && error.reason === 'missing'">
+              Такой QR-код не существует.
+            </template>
+            <template v-else>QR-код не найден: его не существовало или он был удален.</template>
+            <br />
+            <RouterLink
+              :to="{ name: ROUTE_NAMES.HOME }"
+              class="underline text-blue-600 dark:text-blue-400"
+              >Перейти на главную</RouterLink
+            >
+          </template>
+          <template #default="{ data: doc }">
+            <template v-for="action in doc.actions" :key="action">
+              <ReadContactInfo
+                v-if="action === 'viewContactInfo' && doc.contactInfo"
+                :contactInfo="doc.contactInfo"
+              />
+              <ReadMessageSender v-else-if="action === 'sendMessage'" :doc />
+            </template>
           </template>
         </QueryRender>
       </section>
@@ -51,10 +68,10 @@ import { getQrCodeDocument } from '@/api/qrCode'
 import type { QRCodeDocument } from '@hereconnect/types'
 import QueryRender from '@/components/QueryRender.vue'
 import { Head as MetaHead } from '@unhead/vue/components'
+import { ROUTE_NAMES } from '@/constants/routes'
 
 const { qr_code_uri } = defineProps<{ qr_code_uri: string }>()
 
-// Хук для загрузки данных QR-кода
 const query = useQuery({
   queryKey: ['qrCodeData', qr_code_uri],
   queryFn: (): Promise<QRCodeDocument> => getQrCodeDocument(qr_code_uri),
diff --git a/apps/frontend/vite.config.ts b/apps/frontend/vite.config.ts
index e235d1c..d98a726 100644
--- a/apps/frontend/vite.config.ts
+++ b/apps/frontend/vite.config.ts
@@ -180,6 +180,7 @@ export default defineConfig(({ mode }) => {
       },
     },
     server: {
+      allowedHosts: ['hcqr.loc', 'hcqr-debug.loc'],
       proxy: {
         '/api': {
           target: process.env.VITE_PROXY_API_URL,