Moved functions from view to component, and added filters

src/views/celestials/Celestials.vue

@@ -4,7 +4,7 @@
       <h1 class="heading-1">Le système solaire</h1>
     </header>
     <div class="section-content">
-      <celestials-list :celestials="celestials" />
+      <celestials-list />
     </div>
   </section>
 </template>
@@ -13,54 +13,10 @@
 import { defineComponent } from "vue";
 import CelestialsList from "@/components/celestials/CelestialsList.vue";
 
-// API
-import axios from "axios";
-// Global methods
-import { addCelestialType } from "@/plugins/methods";
-
 export default defineComponent({
   name: "Celestials",
   components: {
     CelestialsList
-  },
-
-  // Initial state
-  data() {
-    return {
-      celestials: Array<any>()
-    };
-  },
-
-  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));
-    }
   }
 });
 </script>
@@ -69,7 +25,7 @@ export default defineComponent({
 .celestials {
   position: relative;
   min-height: 100%;
-  padding: 25px 10%;
+  padding: 25px 5%;
 
   &:after {
     display: block;