From b9fe9ca5146a733a9948f91c411bfa37184c85af Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Mon, 29 Mar 2021 16:18:37 +0200
Subject: [PATCH] + Added layout page and error handler

---
 layouts/error.vue      | 44 ++++++++++++++++++++++++++++++++++++++++++
 pages/astres/_slug.vue | 17 +++++++++-------
 2 files changed, 54 insertions(+), 7 deletions(-)
 create mode 100644 layouts/error.vue

diff --git a/layouts/error.vue b/layouts/error.vue
new file mode 100644
index 0000000..0984de6
--- /dev/null
+++ b/layouts/error.vue
@@ -0,0 +1,44 @@
+<template>
+  <section class="error bg-image">
+    <div class="splash">
+      <h2 class="heading-1">
+        <span v-if="error.statusCode === 404">Page non trouvée</span>
+        <span v-else>Une erreur est survenue</span>
+        <span>:(</span>
+      </h2>
+      <p>{{ error.message }}</p>
+      <div>
+        <nuxt-link :to="'/'">
+          <AtomsFSButton>Retourner à la page d'accueil</AtomsFSButton>
+        </nuxt-link>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  layout: 'error',
+  props: {
+    error: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.error {
+  position: relative;
+  min-height: inherit;
+  padding: 0 10%;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+
+  &:after {
+    background-image: url("/celestials_bg-min.jpg");
+  }
+}
+</style>
diff --git a/pages/astres/_slug.vue b/pages/astres/_slug.vue
index d3349b0..ae1fe99 100644
--- a/pages/astres/_slug.vue
+++ b/pages/astres/_slug.vue
@@ -53,22 +53,25 @@ import { fetchCelestial } from '@/api/le-systeme-solaire'
 export default {
   name: 'Celestial',
 
-  data () {
-    return {
-      celestial: false
+  async asyncData ({ params, error }) {
+    const slug = params.slug
+    try {
+      const celestial = await fetchCelestial(slug)
+      return { celestial }
+    } catch (err) {
+      error(err)
     }
   },
 
   mounted () {
-    // Fetches from API...
     fetchCelestial(this.$route.params.slug)
       .then((res) => {
         this.celestial = res
         return this.celestial
       })
-      // .catch((err) => {
-      //   console.error(err)
-      // })
+      .catch(() => {
+        console.log('test')
+      })
   }
 }
 </script>