Added type for celestial bodies w/ icons

src/views/celestials/Celestials.vue

@@ -20,12 +20,26 @@ export default defineComponent({
   components: {
     CelestialsList
   },
+
+  // Initial state
   data() {
     return {
       celestials: []
     };
   },
+
+  async mounted() {
+    // Fetches from API...
+    this.fetchBodies().then(res => {
+      // ...and add type
+      this.celestials = this.addType(res);
+    });
+  },
+
   methods: {
+    /**
+     * Fetches celestial bodies from API
+     */
     fetchBodies() {
       return axios
         .get("https://api.le-systeme-solaire.net/rest/bodies/")
@@ -36,10 +50,36 @@ export default defineComponent({
           console.log(err);
           return [];
         });
+    },
+
+    /**
+     * Assign a type from the celestial object provided
+     */
+    addType(bodies: []) {
+      return bodies.filter((e: any) => {
+        // Check if element is planet
+        if (e.isPlanet) {
+          if (e.moons) {
+            e.type = "planète à lunes";
+          } else {
+            e.type = "planète";
+          }
+
+          // Check if element is moon
+        } else if (e.aroundPlanet != null) {
+          e.type = "lune";
+
+          // Check if element is star
+        } else if (e.id === "soleil") {
+          e.type = "étoile";
+
+          // ...else, body is "other"
+        } else {
+          e.type = "autre";
+        }
+        return e;
+      });
     }
-  },
-  async mounted() {
-    this.celestials = await this.fetchBodies();
   }
 });
 </script>
@@ -47,7 +87,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 .celestials {
   position: relative;
-  min-height: inherit;
+  min-height: 100%;
   padding: 25px 10%;
 
   &:after {