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>
+    <b-card v-if="ready">
-        <em v-for="character in characters" :key="character.name">
+        <b-list-group>
-            {{ character.name }}
+            <b-list-group-item v-for="(character, character_id) in characters" :key="character_id">
-        </em>
+                <b-row align-v="start" align-content="start">
-    </li>
+                    <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,11 +110,18 @@ export default new Vuex.Store({
                 })
         },
         [types.PRELOAD_CHARACTER]({commit}) {
+            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, data: character_data})
+                            commit(types.MERGE_CHARACTER, {id: character_id, characterData: character_data})
+                        resolve();
+                    })
+                    .catch((error) => {
+                        console.error(error);
+                        reject()
+                    })
             })
         },
         [types.FETCH_CHARACTER]({commit}, character_id) {

server/api.py

@@ -97,7 +97,10 @@ def api_quote_neighbors():
 
 @current_app.route('/api/characters/')
 def api_character_list():
-    return jsonify(list(character_data.keys()))
+    _data = copy.deepcopy(character_data)
+    for key in _data.keys():
+        del _data[key]['quotes']
+    return jsonify(_data)
 
 
 @current_app.route('/api/character/<character>/')