implement Character page (broken Vuex reactivity, temporary data field fix), rename CharacterList to CharacterBadges, begin work on list of Characters (Characters.vue)

client/src/components/Character.vue

@@ -5,8 +5,11 @@
             <Skeleton style="width: 40%;"></Skeleton>
         </b-card>
         <b-card>
-            <h4 v-if="character">{{ this.$route.params.character }}</h4>
+            <h4 v-if="ready">{{ character.name }}</h4>
             <Skeleton v-else style="max-width: 30%"></Skeleton>
+            <b-card-body v-if="ready">
+                {{ character.summary }}
+            </b-card-body>
         </b-card>
     </div>
 </template>
@@ -26,17 +29,22 @@
 
 <script>
 import Skeleton from './Skeleton.vue';
+import {types} from "@/mutation_types";
 
 export default {
-    data() {
-        return {
-            character: null,
-        };
-    },
+    name: 'Character',
     components: {
         Skeleton,
     },
+    data() {
+        return {
+            character: null
+        }
+    },
     computed: {
+        ready() {
+            return this.character !== undefined && this.character !== null;
+        },
         breadcrumbs() {
             return [
                 {
@@ -45,11 +53,11 @@ export default {
                 },
                 {
                     text: 'Characters',
-                    to: {name: 'CharacterList'},
+                    to: {name: 'Characters'},
                 },
                 {
                     text:
-                        this.character !== null
+                        this.character !== null && this.character !== undefined
                             ? this.character.name
                             : this.$route.params.character,
                     active: true,
@@ -57,6 +65,23 @@ export default {
             ];
         },
     },
-    methods: {},
+    created() {
+        this.fetchCharacter();
+    },
+    watch: {
+        $route() {
+            this.$nextTick(() => {
+                this.fetchCharacter();
+            })
+        }
+    },
+    methods: {
+        fetchCharacter() {
+            this.$store.dispatch(types.FETCH_CHARACTER, this.$route.params.character)
+                .then(() => {
+                    this.character = this.$store.getters.getCharacter(this.$route.params.character);
+                })
+        },
+    },
 };
 </script>

client/src/components/CharacterBadges.vue

@@ -13,7 +13,11 @@
 
 <script>
 export default {
-    name: "CharacterList",
-    props: ["characters"],
+    props: {
+        characters: {
+            type: Array,
+            required: true
+        }
+    }
 };
 </script>

client/src/components/Characters.vue

@@ -0,0 +1,26 @@
+<template>
+    <li>
+        <em v-for="character in characters" :key="character.name">
+            {{ character.name }}
+        </em>
+    </li>
+</template>
+<style scoped>
+</style>
+
+<script>
+import {types} from "@/mutation_types";
+
+export default {
+    created() {
+        console.log('preload character')
+        this.$store.dispatch(types.PRELOAD_CHARACTER);
+    },
+    computed: {
+        characters() {
+            return this.$store.state.characters;
+        }
+    }
+}
+</script>
+

requirements.txt

@@ -1,11 +1,6 @@
 Flask~=1.1.2
-python-dotenv~=0.14.0
-libsass~=0.20.0
-gunicorn~=20.0.4
-Flask-WTF~=0.14.3
 click~=7.1.2
-Werkzeug~=1.0.1
-Flask-CORS~=3.0.8
-enlighten
-requests
-bs4
+enlighten~=1.6.2
+requests~=2.24.0
+bs4~=0.0.1
+beautifulsoup4~=4.9.1

server/api.py

@@ -110,6 +110,8 @@ def api_character_all(character: str):
 @current_app.route('/api/character/<character>/quotes/')
 def api_character_quotes(character: str):
     quotes = character_data[character]['quotes']
+
+    # Compute pagination if argument is available. Static 10 results per page, one-indexed.
     if 'page' in request.args.keys():
         index: int = (int(request.args['page']) - 1) * 10
         return jsonify(quotes[index: index + 10])

server/data/data.json

@@ -64907,4 +64907,4 @@
             }
         ]
     }
-]
+]