fix characters API endpoint, add Promise to PRELOAD_CHARACTER actions, copy Season component list group formatting to Characters (need to filter down allowed Characters)

client/src/components/Characters.vue

@@ -1,9 +1,21 @@
 <template>
-    <li>
-        <em v-for="character in characters" :key="character.name">
-            {{ character.name }}
-        </em>
-    </li>
+    <b-card v-if="ready">
+        <b-list-group>
+            <b-list-group-item v-for="(character, character_id) in characters" :key="character_id">
+                <b-row align-v="start" align-content="start">
+                    <b-col cols="5" md="4" lg="4" xl="3">
+                        <b-img-lazy fluid-grow class="px-2" src="https://via.placeholder.com/250"></b-img-lazy>
+                    </b-col>
+                    <b-col>
+                        <h4>
+                            {{ character.name || character_id }}
+                        </h4>
+                        <p class="pl-3">{{ character.summary }}</p>
+                    </b-col>
+                </b-row>
+            </b-list-group-item>
+        </b-list-group>
+    </b-card>
 </template>
 <style scoped>
 </style>
@@ -13,10 +25,16 @@ import {types} from "@/mutation_types";
 
 export default {
     created() {
-        console.log('preload character')
-        this.$store.dispatch(types.PRELOAD_CHARACTER);
+        this.$store.dispatch(types.PRELOAD_CHARACTER)
+            .then(() => {
+                // recompute computed properties since Vuex won't do it
+                this.$forceUpdate();
+            });
     },
     computed: {
+        ready() {
+            return this.$store.state.preloaded;
+        },
         characters() {
             return this.$store.state.characters;
         }

client/src/store.js

@@ -110,12 +110,19 @@ export default new Vuex.Store({
                 })
         },
         [types.PRELOAD_CHARACTER]({commit}) {
-            const path = `${process.env.VUE_APP_API_URL}/api/characters/`;
-            axios.get(path)
-                .then((res) => {
-                    for (const [character_id, character_data] of Object.entries(res.data))
-                        commit(types.MERGE_CHARACTER, {id: character_id, data: character_data})
-                })
+            return new Promise((resolve, reject) => {
+                const path = `${process.env.VUE_APP_API_URL}/api/characters/`;
+                axios.get(path)
+                    .then((res) => {
+                        for (const [character_id, character_data] of Object.entries(res.data))
+                            commit(types.MERGE_CHARACTER, {id: character_id, characterData: character_data})
+                        resolve();
+                    })
+                    .catch((error) => {
+                        console.error(error);
+                        reject()
+                    })
+            })
         },
         [types.FETCH_CHARACTER]({commit}, character_id) {
             return new Promise((resolve, reject) => {