Added error message (no formatting yet) and loader

src/views/celestials/Celestial.vue

@@ -3,6 +3,10 @@
     <header>
       <h1 class="heading-1">{{ celestial.name }}</h1>
     </header>
+    <div class="section-content">
+      <div v-if="error">Une erreur est survenue : {{ error }}</div>
+      <div v-if="celestial">{{ celestial }}</div>
+    </div>
   </section>
 </template>
 
@@ -18,7 +22,7 @@ export default defineComponent({
   name: "Celestial",
   data() {
     return {
-      celestial: {},
+      celestial: Object,
       error: ""
     };
   },
@@ -28,6 +32,7 @@ export default defineComponent({
       required: true
     }
   },
+
   mounted() {
     // Fetches from API...
     this.fetchCelestial()
@@ -35,23 +40,20 @@ export default defineComponent({
         // ...and add type
         this.celestial = addCelestialType(res);
       })
-      .catch(err => {
-        this.error = err.message;
+      .catch(() => {
+        this.error = "Impossible de récupérer l'astre demandé.";
       });
   },
+
   methods: {
     /**
-     * Fetches celestial bodies from API
+     * Fetches celestial body from API
      */
     fetchCelestial(): Promise<any> {
       return axios
         .get(`https://api.le-systeme-solaire.net/rest/bodies/${this.slug}`)
         .then(res => {
           return res.data;
-        })
-        .catch(err => {
-          this.error = err.message;
-          return [];
         });
     }
   }

src/views/celestials/Celestials.vue

@@ -4,7 +4,13 @@
       <h1 class="heading-1">Le système solaire</h1>
     </header>
     <div class="section-content">
-      <celestials-list :celestials="celestials" />
+      <div v-if="error">Une erreur est survenue : {{ error }}</div>
+      <div v-if="celestials.length > 1">
+        <celestials-list :celestials="celestials" />
+      </div>
+      <div v-else>
+        <nest-loader />
+      </div>
     </div>
   </section>
 </template>
@@ -18,17 +24,31 @@ import axios from "axios";
 import { addCelestialType } from "@/plugins/methods";
 
 import CelestialsList from "@/components/celestials/CelestialsList.vue";
+import NestLoader from "@/components/NestLoader.vue";
 
 export default defineComponent({
   name: "Celestials",
   components: {
-    CelestialsList
+    CelestialsList,
+    NestLoader
   },
   data() {
     return {
-      celestials: Array<any>()
+      celestials: Array<any>(),
+      error: ""
     };
   },
+
+  mounted() {
+    this.fetchCelestials()
+      .then(res => {
+        this.celestials = this.addType(res);
+      })
+      .catch(() => {
+        this.error = "Impossible de récupérer les astres.";
+      });
+  },
+
   methods: {
     /**
      * Fetches celestial bodies from API
@@ -38,10 +58,6 @@ export default defineComponent({
         .get("https://api.le-systeme-solaire.net/rest/bodies/")
         .then(res => {
           return res.data.bodies;
-        })
-        .catch(err => {
-          console.log(err);
-          return [];
         });
     },
     /**
@@ -50,15 +66,6 @@ export default defineComponent({
     addType(bodies: Array<any>): Array<any> {
       return bodies.map((e: any) => addCelestialType(e));
     }
-  },
-  mounted() {
-    this.fetchCelestials()
-      .then(res => {
-        this.celestials = this.addType(res);
-      })
-      .catch(err => {
-        console.log(err);
-      });
   }
 });
 </script>