- [API] Segregated API files, Implemented spells-list, component that calls the API

client/src/components/spells/spell-card.vue

@@ -63,11 +63,11 @@ export default {
     name: 'spell-card',
     props: {
         name: String,
-        description: Array,
-        level: String,
+        description: String,
+        level: Number,
         schools: Array,
-        ingredients: String,
-        charge: String,
+        ingredients: Array,
+        charge: Number,
         cost: String,
         variables: Array,
     },

client/src/components/spells/spells-list.vue

@@ -0,0 +1,47 @@
+<template>
+    <div class="spells-list">
+        <spell-card v-for="(spell, index) in spells" :key="index" v-bind="spell"/>
+    </div>
+</template>
+
+<script>
+// Components
+import spellcard from "./spell-card"
+
+// API
+import { RepositoryFactory } from "../../../api/repositories"
+const spellsRepository = RepositoryFactory.get('spells')
+
+export default {
+    name: 'spellslist',
+    components: {
+        'spell-card': spellcard,
+    },
+    data() {
+        return {
+            loading: false,
+            spells: []
+        }
+    },
+    created() {
+        this.computeSpells()
+    },
+    methods: {
+        async fetchSpells() {
+            const { data } = await spellsRepository.getSpells()
+            return data
+        },
+        async computeSpells() {
+            this.loading = true
+            const displaySpells = await this.fetchSpells();
+            this.loading = false
+            this.spells = displaySpells.splice(0,10)
+        }
+    }
+}
+
+</script>
+
+<style>
+
+</style>