From 8a4e69940a768cfd8b35f5d52a6576468a56c6c2 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sun, 7 Mar 2021 11:42:14 +0100
Subject: [PATCH 1/4] Moved api call functions to better refactor and reuse the
 list comp

---
 src/components/celestials/CelestialsList.vue | 52 +++++---------------
 src/views/celestials/Celestials.vue          | 44 ++++++++++++++++-
 2 files changed, 54 insertions(+), 42 deletions(-)

diff --git a/src/components/celestials/CelestialsList.vue b/src/components/celestials/CelestialsList.vue
index 29cbf1c..224ef4c 100644
--- a/src/components/celestials/CelestialsList.vue
+++ b/src/components/celestials/CelestialsList.vue
@@ -16,11 +16,6 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-// API
-import axios from "axios";
-// Global methods
-import { addCelestialType } from "@/plugins/methods";
-
 import CelestialCard from "@/components/celestials/CelestialCard.vue";
 import CelestialFilters from "./CelestialFilters.vue";
 
@@ -30,64 +25,39 @@ export default defineComponent({
     CelestialCard,
     CelestialFilters
   },
+  props: {
+    celestials: {
+      type: Array,
+      required: true
+    }
+  },
 
   // Initial state
   data() {
     return {
-      celestials: Array<any>(),
       activeFilter: "all"
     };
   },
 
   computed: {
-    sortedCelestials(): any {
+    sortedCelestials(): Array<any> {
       if (this.activeFilter == "moons") {
-        return this.celestials.filter(e => e.type === "lune");
+        return this.celestials.filter((e: any) => e.type === "lune");
       } else if (this.activeFilter == "planets") {
         return this.celestials.filter(
-          e => e.type === "planète" || e.type === "planète à lunes"
+          (e: any) => e.type === "planète" || e.type === "planète à lunes"
         );
       } else if (this.activeFilter == "stars") {
-        return this.celestials.filter(e => e.type === "étoile");
+        return this.celestials.filter((e: any) => e.type === "étoile");
       } else if (this.activeFilter == "others") {
-        return this.celestials.filter(e => e.type === "autre");
+        return this.celestials.filter((e: any) => e.type === "autre");
       } else {
         return this.celestials;
       }
     }
   },
 
-  mounted() {
-    // Fetches from API...
-    this.fetchCelestials().then(res => {
-      // ...and add type
-      this.celestials = this.addType(res);
-    });
-  },
-
   methods: {
-    /**
-     * Fetches celestial bodies from API
-     */
-    fetchCelestials(): Promise<any> {
-      return axios
-        .get("https://api.le-systeme-solaire.net/rest/bodies/")
-        .then(res => {
-          return res.data.bodies;
-        })
-        .catch(err => {
-          console.log(err);
-          return [];
-        });
-    },
-
-    /**
-     * Assign a type from the celestial object provided
-     */
-    addType(bodies: Array<any>): Array<any> {
-      return bodies.map((e: any) => addCelestialType(e));
-    },
-
     /**
      * Applies the filter type to the data
      */
diff --git a/src/views/celestials/Celestials.vue b/src/views/celestials/Celestials.vue
index 0986c08..5e13323 100644
--- a/src/views/celestials/Celestials.vue
+++ b/src/views/celestials/Celestials.vue
@@ -4,19 +4,61 @@
       <h1 class="heading-1">Le système solaire</h1>
     </header>
     <div class="section-content">
-      <celestials-list />
+      <celestials-list :celestials="celestials" />
     </div>
   </section>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
+
+// API
+import axios from "axios";
+// Global methods
+import { addCelestialType } from "@/plugins/methods";
+
 import CelestialsList from "@/components/celestials/CelestialsList.vue";
 
 export default defineComponent({
   name: "Celestials",
   components: {
     CelestialsList
+  },
+  data() {
+    return {
+      celestials: Array<any>()
+    };
+  },
+  methods: {
+    /**
+     * Fetches celestial bodies from API
+     */
+    fetchCelestials(): Promise<any> {
+      return axios
+        .get("https://api.le-systeme-solaire.net/rest/bodies/")
+        .then(res => {
+          return res.data.bodies;
+        })
+        .catch(err => {
+          console.log(err);
+          return [];
+        });
+    },
+    /**
+     * Assign a type from the celestial object provided
+     */
+    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>

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 2/4] 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>

From 667ffd5b58aa09fefc74ae8948fe0d4305a017bd Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sun, 7 Mar 2021 14:57:18 +0100
Subject: [PATCH 3/4] Refactored scss background images

---
 src/assets/scss/_global.scss        | 38 ++++++++++++++++++++++++-----
 src/views/Home.vue                  | 15 +-----------
 src/views/celestials/Celestial.vue  | 14 ++++++++++-
 src/views/celestials/Celestials.vue | 14 +----------
 4 files changed, 47 insertions(+), 34 deletions(-)

diff --git a/src/assets/scss/_global.scss b/src/assets/scss/_global.scss
index 2e485a5..c55b6cb 100644
--- a/src/assets/scss/_global.scss
+++ b/src/assets/scss/_global.scss
@@ -70,6 +70,15 @@ hr {
   border-color: rgba($white, .2);
 }
 
+.fs-icon {
+  width: 50px;
+  height: 50px;
+  &.icon-sm {
+    width: 20px;
+    height: 20px;
+  }
+}
+
 .btn {
   display: inline-block;
   padding: 13px 33px;
@@ -119,11 +128,28 @@ hr {
   }
 }
 
-.fs-icon {
-  width: 50px;
-  height: 50px;
-  &.icon-sm {
-    width: 20px;
-    height: 20px;
+.bg-image {
+  position: relative;
+  &:after {
+    display: block;
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background-size: cover;
+    background-attachment: fixed;
+    z-index: -1;
+    opacity: 33%;
+    pointer-events: none;
+  }
+  &.bg-fade-in {
+    &:after {
+      width: 120vw;
+      opacity: 0;
+      animation: fadeInBg 2s ease-out 0s 1 forwards,
+      paneBgAround 35s ease-in-out 0s infinite forwards;
+    }
   }
 }
\ No newline at end of file
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 94d516e..f6e4435 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="home">
+  <section class="home bg-image bg-fade-in">
     <div class="splash fade-in-children">
       <h2 class="heading-1">Full Skies</h2>
       <p class="heading-2">
@@ -31,20 +31,7 @@ export default defineComponent({
   overflow: hidden;
 
   &:after {
-    display: block;
-    content: "";
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    width: 120vw;
     background-image: url("/home_bg-min.jpg");
-    background-size: cover;
-    z-index: -1;
-    opacity: 0;
-    pointer-events: none;
-    animation: fadeInBg 2s ease-out 0s 1 forwards,
-      paneBgAround 35s ease-in-out 0s infinite forwards;
   }
 }
 </style>
diff --git a/src/views/celestials/Celestial.vue b/src/views/celestials/Celestial.vue
index a8e7930..b3ef30c 100644
--- a/src/views/celestials/Celestial.vue
+++ b/src/views/celestials/Celestial.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="celestial">
+  <section class="celestial bg-image">
     <header>
       <h1 class="heading-1">{{ celestial.name }}</h1>
     </header>
@@ -59,3 +59,15 @@ export default defineComponent({
   }
 });
 </script>
+
+<style lang="scss" scoped>
+.celestial {
+  position: relative;
+  min-height: 100%;
+  padding: 25px 5%;
+
+  &:after {
+    background-image: url("/celestials_bg-min.jpg");
+  }
+}
+</style>
diff --git a/src/views/celestials/Celestials.vue b/src/views/celestials/Celestials.vue
index 7e6ecb8..dd50182 100644
--- a/src/views/celestials/Celestials.vue
+++ b/src/views/celestials/Celestials.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="celestials">
+  <section class="celestials bg-image">
     <header>
       <h1 class="heading-1">Le système solaire</h1>
     </header>
@@ -77,19 +77,7 @@ export default defineComponent({
   padding: 25px 5%;
 
   &:after {
-    display: block;
-    content: "";
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    width: 100%;
     background-image: url("/celestials_bg-min.jpg");
-    background-size: cover;
-    background-attachment: fixed;
-    z-index: -1;
-    opacity: 33%;
-    pointer-events: none;
   }
 }
 </style>

From 85c5736ec3c632442f9b201862811fba77e2b68e Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sun, 7 Mar 2021 18:38:11 +0100
Subject: [PATCH 4/4] Added loader for single celestial page

---
 src/views/celestials/Celestial.vue | 33 ++++++++++++++++++++++--------
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/views/celestials/Celestial.vue b/src/views/celestials/Celestial.vue
index b3ef30c..332d796 100644
--- a/src/views/celestials/Celestial.vue
+++ b/src/views/celestials/Celestial.vue
@@ -1,11 +1,16 @@
 <template>
   <section class="celestial bg-image">
-    <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 v-if="loaded">
+      <header>
+        <h1 class="heading-1">{{ celestial.name }}</h1>
+      </header>
+      <div class="section-content">
+        <div v-if="error">Une erreur est survenue : {{ error }}</div>
+        <div>{{ celestial }}</div>
+      </div>
+    </div>
+    <div v-else>
+      <nest-loader />
     </div>
   </section>
 </template>
@@ -17,15 +22,22 @@ import { defineComponent } from "vue";
 import axios from "axios";
 // Global methods
 import { addCelestialType } from "@/plugins/methods";
+import NestLoader from "@/components/NestLoader.vue";
 
 export default defineComponent({
+  components: {
+    NestLoader
+  },
   name: "Celestial",
+
   data() {
     return {
-      celestial: Object,
+      celestial: false,
+      loaded: false,
       error: ""
     };
   },
+
   props: {
     slug: {
       type: String,
@@ -37,8 +49,11 @@ export default defineComponent({
     // Fetches from API...
     this.fetchCelestial()
       .then(res => {
-        // ...and add type
-        this.celestial = addCelestialType(res);
+        // Adds type after fake loading (it's just to showcase the spinner tbh)
+        setTimeout(() => {
+          this.celestial = addCelestialType(res);
+          this.loaded = true;
+        }, 1000);
       })
       .catch(() => {
         this.error = "Impossible de récupérer l'astre demandé.";