Show 404 page when requested image id doesn't exist

src/layouts/error.vue

@@ -2,9 +2,10 @@
   <div class="grid-container full">
     <main class="not-found">
       <h1 v-if="error.statusCode === 404">
-        {{ $t('not-found') }}
+        {{ $t('error.not-found') }}
       </h1>
-      <h1 v-else>{{ $t('error-occurred') }}</h1>
+      <h1 v-else>{{ $t('error.occurred') }}</h1>
+      <p>{{ error.message }}</p>
     </main>
   </div>
 </template>

src/locales/en.json

@@ -264,8 +264,11 @@
     "other": "Other Collections",
     "collection-size": "Collection size: {count} images"
   },
-  "not-found": "Page Not Found",
-  "error-occurred": "An error occurred",
+  "error": {
+    "not-found": "Page Not Found",
+    "occurred": "An error occurred",
+    "image-not-found": "Couldn't find image with id {id}"
+  },
   "search-tab": {
     "image": "Image",
     "audio": "Audio",

src/pages/photos/_id.vue

@@ -76,21 +76,30 @@ const PhotoDetailPage = {
   async asyncData({ env, route }) {
     return { thumbnailURL: `${env.apiUrl}thumbs/${route.params.id}` }
   },
-  async fetch() {
+  async fetch({ store, route, error, app }) {
     // Clear related images if present
-    if (this.relatedImages && this.relatedImages.length > 0) {
-      this.SET_RELATED_IMAGES({ relatedImages: [], relatedImageCount: 0 })
+    if (store.state.relatedImages && store.state.relatedImages.length > 0) {
+      await store.dispatch(SET_RELATED_IMAGES, {
+        relatedImages: [],
+        relatedImageCount: 0,
+      })
+    }
+    try {
+      // Load the image + related images in parallel
+      await Promise.all([
+        store.dispatch(FETCH_IMAGE, { id: route.params.id }),
+        store.dispatch(FETCH_RELATED_IMAGES, { id: route.params.id }),
+      ])
+    } catch (err) {
+      error({
+        statusCode: 404,
+        message: app.i18n.t('error.image-not-found', { id: route.params.id }),
+      })
     }
-
-    // Load the image + related images in parallel
-    await Promise.all([
-      this.loadImage(this.$route.params.id),
-      this[FETCH_RELATED_IMAGES]({ id: this.$route.params.id }),
-    ])
   },
   beforeRouteEnter(to, from, nextPage) {
     nextPage((_this) => {
-      if (from.path === '/search' || from.path === '/search/image') {
+      if (from.path === '/search/' || from.path === '/search/image') {
         _this.shouldShowBreadcrumb = true
         _this.breadCrumbURL = from.fullPath
       }
@@ -112,9 +121,6 @@ const PhotoDetailPage = {
         this[FETCH_RELATED_IMAGES]({ id: this.image.id })
       }
     },
-    loadImage(id) {
-      return this[FETCH_IMAGE]({ id })
-    },
   },
 }
 

src/store-modules/search-store.js

@@ -220,9 +220,8 @@ const mutations = {
   [SET_QUERY](_state, params) {
     setQuery(_state, params)
   },
-  // @todo: fix
   [IMAGE_NOT_FOUND]() {
-    // redirect({ path: '/not-found' }, true)
+    throw new Error('Image not found')
   },
 }