From e929a393ffabc9622dbe0874bf389fa5cf538137 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sun, 7 Mar 2021 14:40:11 +0100
Subject: [PATCH] Added error message (no formatting yet) and loader

---
 src/components/NestLoader.vue       | 84 +++++++++++++++++++++++++++++
 src/views/celestials/Celestial.vue  | 18 ++++---
 src/views/celestials/Celestials.vue | 39 ++++++++------
 3 files changed, 117 insertions(+), 24 deletions(-)
 create mode 100644 src/components/NestLoader.vue

diff --git a/src/components/NestLoader.vue b/src/components/NestLoader.vue
new file mode 100644
index 0000000..db8f133
--- /dev/null
+++ b/src/components/NestLoader.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="fs-loader-wrapper">
+    <div class="fs-loader"></div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "nest-loader"
+});
+</script>
+
+<style lang="scss">
+.fs-loader-wrapper {
+  padding: 100px 0;
+  .fs-loader {
+    display: block;
+    position: relative;
+    height: 100px;
+    width: 100px;
+    margin: -25px auto 0 auto;
+    border: 2px solid transparent;
+    border-top-color: $white;
+    border-radius: 50%;
+    -webkit-animation: spin7 1.5s ease infinite;
+    animation: spin7 1.5s ease infinite;
+
+    &:before {
+      content: "";
+      position: absolute;
+      top: 14px;
+      right: 14px;
+      bottom: 14px;
+      left: 14px;
+      border: 2px solid transparent;
+      border-radius: 50%;
+      border-top-color: $white;
+      -webkit-animation: spin7 3s linear infinite;
+      animation: spin7 3s linear infinite;
+    }
+
+    &:after {
+      content: "";
+      position: absolute;
+      top: 30px;
+      right: 30px;
+      bottom: 30px;
+      left: 30px;
+      border: 2px solid transparent;
+      border-radius: 50%;
+      border-top-color: $white;
+      -webkit-animation: spin7 1.5s ease infinite;
+      animation: spin7 1.5s ease infinite;
+    }
+  }
+}
+
+@-webkit-keyframes spin7 {
+  from {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@keyframes spin7 {
+  from {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+</style>
diff --git a/src/views/celestials/Celestial.vue b/src/views/celestials/Celestial.vue
index c3d5cbc..a8e7930 100644
--- a/src/views/celestials/Celestial.vue
+++ b/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 [];
         });
     }
   }
diff --git a/src/views/celestials/Celestials.vue b/src/views/celestials/Celestials.vue
index 5e13323..7e6ecb8 100644
--- a/src/views/celestials/Celestials.vue
+++ b/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>