From 42913887de74817326c93f11c4105e1866b32ddc Mon Sep 17 00:00:00 2001
From: Frank Elsinga <frank@elsinga.de>
Date: Mon, 24 Jun 2024 02:25:32 +0200
Subject: [PATCH] made sure that search and details apis retry

---
 webclient/components/AppSearchBar.vue | 22 ++++++++++++++++++----
 webclient/pages/[view]/[id].vue       |  8 +++++++-
 webclient/pages/search.vue            |  8 +++++++-
 3 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/webclient/components/AppSearchBar.vue b/webclient/components/AppSearchBar.vue
index 2faf790d6..5c97ee22c 100644
--- a/webclient/components/AppSearchBar.vue
+++ b/webclient/components/AppSearchBar.vue
@@ -114,10 +114,12 @@ const url = computed(() => {
 
   return `${runtimeConfig.public.apiURL}/api/search?${params.toString()}`;
 });
-const { data, error, refresh } = await useFetch<SearchResponse>(url, { key: "search", dedupe: "defer", deep: false });
-// a bit crude way of doing retries, but likely fine
-watchEffect(() => {
-  if (query.value.length && error.value !== null) setTimeout(refresh, 5000);
+const { data, error } = await useFetch<SearchResponse>(url, {
+  key: "search",
+  dedupe: "defer",
+  deep: false,
+  retry: 120,
+  retryDelay: 5000,
 });
 </script>
 
@@ -168,6 +170,18 @@ watchEffect(() => {
       Suche einschränken auf:
       <NuxtLink class="bt btn-link btn-sm">Räume</NuxtLink>
     </li> -->
+      <Toast v-if="error" id="search-error" level="error">
+        <p class="text-md font-bold">{{ t("error.header") }}</p>
+        <p class="text-sm">
+          {{ t("error.reason") }}:<br />
+          <code
+            class="text-red-900 bg-red-200 mb-1 mt-2 inline-flex max-w-full items-center space-x-2 overflow-auto rounded-md px-4 py-3 text-left font-mono text-xs dark:bg-red-50/20"
+          >
+            {{ error }}
+          </code>
+        </p>
+        <p class="text-sm">{{ t("error.call_to_action") }}</p>
+      </Toast>
       <ul v-for="s in data.sections" v-cloak :key="s.facet" class="flex flex-col gap-2">
         <div class="flex items-center">
           <span class="text-md text-zinc-800 me-4 flex-shrink">{{ t(`sections.${s.facet}`) }}</span>
diff --git a/webclient/pages/[view]/[id].vue b/webclient/pages/[view]/[id].vue
index f232ee0b8..5f9fda12e 100644
--- a/webclient/pages/[view]/[id].vue
+++ b/webclient/pages/[view]/[id].vue
@@ -21,7 +21,13 @@ const router = useRouter();
 
 const runtimeConfig = useRuntimeConfig();
 const url = computed(() => `${runtimeConfig.public.apiURL}/api/get/${route.params.id}?lang=${locale.value}`);
-const { data, error } = useFetch<DetailsResponse, string>(url, { key: "details", dedupe: "defer", deep: false });
+const { data, error } = useFetch<DetailsResponse, string>(url, {
+  key: "details",
+  dedupe: "defer",
+  deep: false,
+  retry: 120,
+  retryDelay: 5000,
+});
 
 const shownImage = ref<ImageInfo | undefined>(data.value?.imgs?.length ? data.value.imgs[0] : undefined);
 const slideshowOpen = ref(false);
diff --git a/webclient/pages/search.vue b/webclient/pages/search.vue
index 4f5e91f1f..13160414c 100644
--- a/webclient/pages/search.vue
+++ b/webclient/pages/search.vue
@@ -29,7 +29,13 @@ const apiUrl = computed(() => {
 
   return `${runtimeConfig.public.apiURL}/api/search?${params.toString()}`;
 });
-const { data } = useFetch<SearchResponse>(apiUrl, { key: "search", dedupe: "defer", deep: false });
+const { data } = useFetch<SearchResponse>(apiUrl, {
+  key: "search",
+  dedupe: "defer",
+  deep: false,
+  retry: 120,
+  retryDelay: 5000,
+});
 const description = computed(() => {
   if (data.value === null) return "";
   let sectionsDescr = "";