From 66d477795f14f5ada62b357f6dbf5567d21b002d Mon Sep 17 00:00:00 2001
From: James Collins <james.collins@outlook.com.au>
Date: Sun, 21 May 2023 08:50:14 +1000
Subject: [PATCH] better handle 503 errors

---
 resources/js/components/SMPage.vue     |  9 ++++++++-
 resources/js/helpers/api.ts            |  3 +++
 resources/js/store/ApplicationStore.ts |  2 ++
 resources/js/views/App.vue             | 12 ++++++++----
 4 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/resources/js/components/SMPage.vue b/resources/js/components/SMPage.vue
index 813838e..28341fe 100644
--- a/resources/js/components/SMPage.vue
+++ b/resources/js/components/SMPage.vue
@@ -16,11 +16,18 @@
                 <p v-else-if="pageError == 404">
                     The page you are looking for does not exist!
                 </p>
+                <p v-else-if="pageError == 503">
+                    The server is currently not responding and maybe under
+                    maintenance. Please try again later!
+                </p>
                 <p v-else>
                     We are working to fix that what was broken. Please try again
                     later!
                 </p>
-                <SMButton label="Go Back" @click="handleClick" />
+                <SMButton
+                    v-if="pageError != 503"
+                    label="Go Back"
+                    @click="handleClick" />
             </div>
         </SMContainer>
     </template>
diff --git a/resources/js/helpers/api.ts b/resources/js/helpers/api.ts
index d7110b5..3422dee 100644
--- a/resources/js/helpers/api.ts
+++ b/resources/js/helpers/api.ts
@@ -1,4 +1,5 @@
 import { useUserStore } from "../store/UserStore";
+import { useApplicationStore } from "../store/ApplicationStore";
 import { ImportMetaExtras } from "../../../import-meta";
 
 interface ApiProgressData {
@@ -155,6 +156,7 @@ export const api = {
                     if (xhr.status < 300) {
                         resolve(result);
                     } else {
+                        useApplicationStore().unavailable = true;
                         reject(result);
                     }
                 };
@@ -211,6 +213,7 @@ export const api = {
                         };
 
                         if (response.status >= 300) {
+                            useApplicationStore().unavailable = true;
                             reject(result);
                         }
 
diff --git a/resources/js/store/ApplicationStore.ts b/resources/js/store/ApplicationStore.ts
index c1bc1ea..f3f9aeb 100644
--- a/resources/js/store/ApplicationStore.ts
+++ b/resources/js/store/ApplicationStore.ts
@@ -3,6 +3,7 @@ import { defineStore } from "pinia";
 type ApplicationStoreEventKeyUpCallback = (event: KeyboardEvent) => boolean;
 
 export interface ApplicationStore {
+    unavailable: boolean;
     dynamicTitle: string;
     eventKeyUpStack: ApplicationStoreEventKeyUpCallback[];
     pageLoaderTimeout: number;
@@ -12,6 +13,7 @@ export interface ApplicationStore {
 export const useApplicationStore = defineStore({
     id: "application",
     state: (): ApplicationStore => ({
+        unavailable: false,
         dynamicTitle: "",
         eventKeyUpStack: [],
         pageLoaderTimeout: 0,
diff --git a/resources/js/views/App.vue b/resources/js/views/App.vue
index 94771c2..d982bd6 100644
--- a/resources/js/views/App.vue
+++ b/resources/js/views/App.vue
@@ -3,14 +3,17 @@
         <SMNavbar />
     </header>
     <main>
-        <router-view v-slot="{ Component }">
-            <component :is="Component" />
-        </router-view>
+        <SMPage v-if="useApplicationStore().unavailable" :page-error="503" />
+        <template v-else>
+            <router-view v-slot="{ Component }">
+                <component :is="Component" />
+            </router-view>
+        </template>
     </main>
     <footer>
         <SMPageFooter />
     </footer>
-    <div id="sm-page-loading">
+    <div v-if="!useApplicationStore().unavailable" id="sm-page-loading">
         <SMLoadingIcon large />
     </div>
     <SMToastList />
@@ -23,6 +26,7 @@ import SMPageFooter from "../components/SMPageFooter.vue";
 import SMToastList from "../components/SMToastList.vue";
 import SMDialogList from "../components/SMDialog";
 import SMLoadingIcon from "../components/SMLoadingIcon.vue";
+import { useApplicationStore } from "../store/ApplicationStore";
 </script>
 
 <style lang="scss">