From 65d2279859c9c70a58368b7279a3049f598d3bf8 Mon Sep 17 00:00:00 2001
From: Nicolas Pennec <nicolas.pennec@corp.ovh.com>
Date: Mon, 5 Nov 2018 22:55:08 +0100
Subject: [PATCH] feat: add custom error page

---
 layouts/error.vue           | 27 +++++++++++++++++++++++++++
 pages/weather/_citycode.vue |  2 +-
 2 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 layouts/error.vue

diff --git a/layouts/error.vue b/layouts/error.vue
new file mode 100644
index 0000000..ef79c2f
--- /dev/null
+++ b/layouts/error.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="container">
+    <h3 v-if="error.customMessage">{{ error.customMessage }}</h3>
+    <h3 v-else-if="error.statusCode === 404">Page not found...</h3>
+    <h3 v-else>Sorry, an error occurred :-(</h3>
+    <nuxt-link to="/">Back to the home page</nuxt-link>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    error: {
+      type: Object
+    }
+  }
+}
+</script>
+
+<style scoped>
+.container {
+  text-align: center;
+}
+h3 {
+  padding: 10px 0 40px;
+}
+</style>
diff --git a/pages/weather/_citycode.vue b/pages/weather/_citycode.vue
index d186188..ff774b2 100644
--- a/pages/weather/_citycode.vue
+++ b/pages/weather/_citycode.vue
@@ -24,7 +24,7 @@ export default {
   async asyncData ({ app, error, params, store }) {
     const citycode = store.state.cities.find((city) => city.toLowerCase() === params.citycode)
     if (!citycode) {
-      return error({ message: 'City not found', statusCode: 404 })
+      return error({ customMessage: `City « ${params.citycode} » not found...`, statusCode: 404 })
     }
 
     store.commit('SET_CITY', citycode.toLowerCase())