Merge pull request #2645 from KngZhi/issue-2249

components/shared/Error.vue

@@ -0,0 +1,32 @@
+<template>
+  <div id="Error" class="box container has-text-centered section">
+    <p class="title">{{ errorTitle }}</p>
+    <p class="subtitle">{{ errorSubtitle }}</p>
+    <img v-if="hasImg" :src="imgSrc" alt="Internal error cat" />
+    <p class="subtitle">
+      If you think this should't happen, report us by
+      <a
+        target="_blank"
+        rel="noopener noreferrer"
+        href="https://github.com/kodadot/nft-gallery/issues/new?assignees=&labels=bug&template=bug_report.md&title="
+        >creating bug issue with steps to reproduce and screenshot.</a
+      >
+    </p>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Vue, Prop } from 'nuxt-property-decorator'
+
+@Component({})
+export default class Error extends Vue {
+  @Prop({ default: 500 }) readonly errorCode!: number
+  @Prop({ default: true }) readonly hasImg!: boolean
+  @Prop({ default: 'Indexer Error' }) errorTitle!: string
+  @Prop({ default: 'Indexer is not working properly.' }) errorSubtitle!: string
+
+  get imgSrc() {
+    return `https://http.cat/${this.$props.errorCode}`
+  }
+}
+</script>
+

layouts/centered-half-layout.vue

@@ -6,7 +6,12 @@
         <div class="container">
           <div class="columns is-centered">
             <div class="column is-half">
-              <Nuxt />
+              <Error
+                v-if="$nuxt.isOffline"
+                :hasImg="false"
+                errorTitle="Offline Detected"
+                errorSubtitle="Please check your network connections" />
+              <Nuxt v-else />
             </div>
           </div>
         </div>

layouts/default.vue

@@ -4,7 +4,12 @@
     <main class="is-flex-grow-1">
       <section class="section">
         <div class="container">
-          <Nuxt />
+          <Error
+            v-if="$nuxt.isOffline"
+            :hasImg="false"
+            errorTitle="Offline Detected"
+            errorSubtitle="Please check your network connections" />
+          <Nuxt v-else />
         </div>
       </section>
     </main>

layouts/full-width-layout.vue

@@ -2,7 +2,12 @@
   <div class="min-h-full is-flex is-flex-direction-column">
     <Navbar />
     <main class="is-flex-grow-1">
-      <Nuxt />
+      <Error
+        v-if="$nuxt.isOffline"
+        :hasImg="false"
+        errorTitle="Offline Detected"
+        errorSubtitle="Please check your network connections" />
+      <Nuxt v-else />
     </main>
     <Footer />
   </div>

pages/error.vue

@@ -1,22 +1,13 @@
 <template>
-  <div id="Eror" class="box container has-text-centered">
-    <p class="title">Indexer Error</p>
-    <p class="subtitle">Indexer is not working properly.</p>
-    <img src="https://http.cat/500" alt="Internal error cat" />
-    <p class="subtitle">
-      If you think this should't happen, report us by
-      <a
-        target="_blank"
-        rel="noopener noreferrer"
-        href="https://github.com/kodadot/nft-gallery/issues/new?assignees=&labels=bug&template=bug_report.md&title="
-        >creating bug issue with steps to reproduce and screenshot.</a
-      >
-    </p>
-  </div>
+  <ErrorMsg />
 </template>
 <script lang="ts">
 import { Component, Vue } from 'nuxt-property-decorator'
+// due to the name conflict, has to import and rename it
+import ErrorMsg from '@/components/shared/Error.vue'
 
-@Component({})
+@Component({
+  components: { ErrorMsg }
+})
 export default class Error extends Vue {}
 </script>