From 9fca291603cca5d8c2903defee1aa0eb27c72d10 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Mon, 29 Mar 2021 09:33:08 +0200
Subject: [PATCH] / Fixed the scope of the nest-loader component

---
 .../components/celestials/CelestialsList.vue  | 31 ++++---
 full-skies-nuxt/pages/astres/_slug.vue        | 85 ++++++++-----------
 full-skies-nuxt/pages/astres/index.vue        | 18 +---
 3 files changed, 60 insertions(+), 74 deletions(-)

diff --git a/full-skies-nuxt/components/celestials/CelestialsList.vue b/full-skies-nuxt/components/celestials/CelestialsList.vue
index 9805da8..26e17e0 100644
--- a/full-skies-nuxt/components/celestials/CelestialsList.vue
+++ b/full-skies-nuxt/components/celestials/CelestialsList.vue
@@ -1,15 +1,22 @@
 <template>
   <div class="celestial-list-wrapper">
-    <celestial-filters v-if="hasFilters" @filter:celestials="filterCelestials" />
-    <ul v-if="celestials" class="celestial-list grid no-style">
-      <li
-        v-for="(celestial, index) in sortedCelestials"
-        :key="index"
-        class="celestial-item"
-      >
-        <celestial-card :celestial="celestial" />
-      </li>
-    </ul>
+    <div v-if="celestials && celestials.length > 1">
+      <celestial-filters v-if="hasFilters" @filter:celestials="filterCelestials" />
+
+      <ul v-if="celestials" class="celestial-list grid no-style">
+        <li
+          v-for="(celestial, index) in sortedCelestials"
+          :key="index"
+          class="celestial-item"
+        >
+          <celestial-card :celestial="celestial" />
+        </li>
+      </ul>
+    </div>
+
+    <div v-else>
+      <nest-loader />
+    </div>
   </div>
 </template>
 
@@ -17,13 +24,15 @@
 import { defineComponent } from '@vue/composition-api'
 
 import CelestialCard from '@/components/celestials/CelestialCard.vue'
+import NestLoader from '@/components/NestLoader.vue'
 import CelestialFilters from './CelestialFilters.vue'
 
 export default defineComponent({
   name: 'CelestialList',
   components: {
     CelestialCard,
-    CelestialFilters
+    CelestialFilters,
+    NestLoader
   },
   props: {
     celestials: {
diff --git a/full-skies-nuxt/pages/astres/_slug.vue b/full-skies-nuxt/pages/astres/_slug.vue
index 3488df9..611cf05 100644
--- a/full-skies-nuxt/pages/astres/_slug.vue
+++ b/full-skies-nuxt/pages/astres/_slug.vue
@@ -1,46 +1,41 @@
 <template>
   <section class="celestial bg-image">
-    <div v-if="celestialLoaded">
-      <header>
-        <h1 class="heading-1">
-          <span>{{ celestial.name }}</span>
-          <span v-if="celestial.name != celestial.englishName">/ {{ celestial.englishName }}</span>
-          <span class="txt-capitalize">- {{ celestial.type }}</span>
-        </h1>
-      </header>
-      <div class="section-content">
-        <main class="celestial-body">
-          <div>
-            <h3 class="heading-3">
-              Informations
-            </h3>
-            <p v-if="celestial.aroundPlanet">
-              Orbite autour de
-              <nuxt-link
-                :to="`/astres/${celestial.aroundPlanet.planet}`"
-                class="txt-capitalize"
-              >
-                {{ celestial.aroundPlanet.planet }}
-              </nuxt-link>
-            </p>
-            <p v-if="celestial.discoveredBy">
-              Découvert par {{ celestial.discoveredBy }} le {{ celestial.discoveryDate }}
-            </p>
-            <p>Facteur Gravité : {{ celestial.gravity }}</p>
-            <p>Facteur Densité : {{ celestial.density }}</p>
-            <p>Inclinaison : {{ celestial.inclination }}</p>
-          </div>
-          <div v-if="celestial.moons" class="celestial-moons">
-            <h2 class="heading-2">
-              Astres orbitant {{ celestial.name }}
-            </h2>
-            <celestials-list :celestials="celestial.moons" :has-filters="false" />
-          </div>
-        </main>
-      </div>
-    </div>
-    <div v-else>
-      <nest-loader />
+    <header>
+      <h1 class="heading-1">
+        <span>{{ celestial.name }}</span>
+        <span v-if="celestial.name != celestial.englishName">/ {{ celestial.englishName }}</span>
+        <span class="txt-capitalize">- {{ celestial.type }}</span>
+      </h1>
+    </header>
+    <div class="section-content">
+      <main class="celestial-body">
+        <div>
+          <h3 class="heading-3">
+            Informations
+          </h3>
+          <p v-if="celestial.aroundPlanet">
+            Orbite autour de
+            <nuxt-link
+              :to="`/astres/${celestial.aroundPlanet.planet}`"
+              class="txt-capitalize"
+            >
+              {{ celestial.aroundPlanet.planet }}
+            </nuxt-link>
+          </p>
+          <p v-if="celestial.discoveredBy">
+            Découvert par {{ celestial.discoveredBy }} le {{ celestial.discoveryDate }}
+          </p>
+          <p>Facteur Gravité : {{ celestial.gravity }}</p>
+          <p>Facteur Densité : {{ celestial.density }}</p>
+          <p>Inclinaison : {{ celestial.inclination }}</p>
+        </div>
+        <div v-if="celestial.moons" class="celestial-moons">
+          <h2 class="heading-2">
+            Astres orbitant {{ celestial.name }}
+          </h2>
+          <celestials-list :celestials="celestial.moons" :has-filters="false" />
+        </div>
+      </main>
     </div>
   </section>
 </template>
@@ -51,20 +46,14 @@ import { fetchCelestial } from '@/api/le-systeme-solaire'
 // import { fetchWikipediaExcerpt } from "@/api/wikipedia";
 
 // Global methods
-import NestLoader from '@/components/NestLoader.vue'
 
 export default {
   name: 'Celestial',
-  components: {
-    NestLoader
-  },
 
   data () {
     return {
       celestial: {},
-      celestialLoaded: false,
-      excerpt: '',
-      error: ''
+      celestialLoaded: false
     }
   },
 
diff --git a/full-skies-nuxt/pages/astres/index.vue b/full-skies-nuxt/pages/astres/index.vue
index 8b8af05..f41a980 100644
--- a/full-skies-nuxt/pages/astres/index.vue
+++ b/full-skies-nuxt/pages/astres/index.vue
@@ -6,15 +6,7 @@
       </h1>
     </header>
     <div class="section-content">
-      <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>
+      <celestials-list :celestials="celestials" />
     </div>
   </section>
 </template>
@@ -24,20 +16,16 @@
 import { fetchCelestials } from '@/api/le-systeme-solaire'
 
 // Global methods
-
 import CelestialsList from '@/components/celestials/CelestialsList.vue'
-import NestLoader from '@/components/NestLoader.vue'
 
 export default {
   name: 'Celestials',
   components: {
-    CelestialsList,
-    NestLoader
+    CelestialsList
   },
   data () {
     return {
-      celestials: [],
-      error: ''
+      celestials: []
     }
   },