Fix Characters.vue not detecting state change, fix SeasonList.vue breaking with new preload schema

- Rename to PRELOAD_CHARACTERS from FETCH_CHARACTERS

src/components/Characters.vue

@@ -1,29 +1,34 @@
 <template>
     <div>
-        <b-breadcrumb v-if="ready" :items="breadcrumbs"></b-breadcrumb>
+        <b-breadcrumb v-if="ready" :items="breadcrumbs" />
         <b-card v-else class="breadcrumb-skeleton mb-3">
-            <Skeleton style="width: 40%;"></Skeleton>
+            <Skeleton style="width: 40%;" />
         </b-card>
         <b-card v-if="ready">
             <b-list-group>
-                <b-list-group-item v-for="(character, character_id) in characters" :key="character_id">
+                <b-list-group-item v-for="id in sorted_character_ids" :key="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="faceURL(character_id)"
+                            <b-img-lazy
-                                        :blank-src="faceURL(character_id, thumbnail = true)"
+                                fluid-grow class="px-2"
-                                        blank-width="200" blank-height="200"
+                                :src="faceURL(id)"
-                            ></b-img-lazy>
+                                :blank-src="faceURL(id, true)"
-                            <!--                            <b-img fluid-grow class="px-2"></b-img>-->
+                                blank-width="200" blank-height="200"
+                            />
                         </b-col>
                         <b-col>
                             <h4>
-                                {{ character.name || character_id }}
+                                {{ characters[id].name || id }}
-                                <router-link class="no-link"
+                                <router-link
-                                             :to="{ name: 'Character', params: {character: character_id} }">
+                                    class="no-link"
-                                    <b-icon class="h6" icon="caret-right-fill"></b-icon>
+                                    :to="{ name: 'Character', params: {character: id} }"
+                                >
+                                    <b-icon class="h6" icon="caret-right-fill" />
                                 </router-link>
                             </h4>
-                            <p class="pl-3">{{ character.summary }}</p>
+                            <p class="pl-3">
+                                {{ characters[id].summary }}
+                            </p>
                         </b-col>
                     </b-row>
                 </b-list-group-item>
@@ -56,22 +61,13 @@ export default {
     components: {
         Skeleton
     },
-    methods: {
-        faceURL(character, thumbnail = false) {
-            return `${process.env.VUE_APP_API_URL}/static/img/${character}/` + (thumbnail ? "face_thumb.webp" : "face.webp");
-        }
-    },
-    created() {
-        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;
         },
+        sorted_character_ids() {
+            return this.$store.getters.getSortedCharacters();
+        },
         characters() {
             return this.$store.state.characters;
         },
@@ -81,6 +77,17 @@ export default {
                 {text: 'Characters', active: true}
             ]
         }
+    },
+    async mounted() {
+        await this.$store.dispatch(types.PRELOAD_CHARACTERS)
+
+        // Re-compute computed properties since Vuex won't do it
+        this.$forceUpdate();
+    },
+    methods: {
+        faceURL(character, thumbnail = false) {
+            return `/img/${character}/` + (thumbnail ? "face_thumb" : "face") + ".webp";
+        }
     }
 }
 </script>

src/components/SeasonList.vue

@@ -60,11 +60,11 @@ export default {
         },
         // if SeasonList episode data (titles/descriptions) is loaded and ready
         isPreloaded() {
-            return this.$store.state.preloaded;
+            return this.$store.getters.checkPreloaded('episodes');
         }
     },
     created() {
-        this.$store.dispatch(types.PRELOAD)
+        this.$store.dispatch(types.PRELOAD_EPISODES)
     },
     methods: {},
 };

src/mutation_types.js

@@ -4,8 +4,8 @@ export const types = {
     MERGE_EPISODE: 'MERGE_EPISODE',
     MERGE_EPISODES: 'MERGE_EPISODES',
     SET_PRELOADED: 'SET_PRELOADED',
-    FETCH_CHARACTERS: 'PRELOAD_CHARACTERS',
+    PRELOAD_CHARACTERS: 'PRELOAD_CHARACTERS',
-    PRELOAD: 'PRELOAD',
+    PRELOAD_EPISODES: 'PRELOAD',
     SET_CHARACTER: 'SET_CHARACTER',
     MERGE_CHARACTERS: 'MERGE_CHARACTERS',
 }

src/store.js

@@ -67,7 +67,7 @@ export default new Vuex.Store({
         [types.MERGE_CHARACTERS](state, payload) {
             // Iterate and store.
             for (const [charId, charData] of Object.entries(payload.characters)) {
-                state.characters[charId] = charData;
+                Vue.set(state.characters, charId, charData)
             }
         },
     },
@@ -99,7 +99,7 @@ export default new Vuex.Store({
                     });
             })
         },
-        [types.PRELOAD]({commit}) {
+        [types.PRELOAD_EPISODES]({commit}) {
             const path = `/json/episodes.json`;
 
             axios.get(path)
@@ -112,7 +112,10 @@ export default new Vuex.Store({
                     console.error(error);
                 })
         },
-        async [types.FETCH_CHARACTERS]({commit}) {
+        async [types.PRELOAD_CHARACTERS]({commit, getters}) {
+            if (getters.checkPreloaded('characters'))
+                return
+
             const path = `/json/characters.json`;
             let res = null;
             try {
@@ -123,10 +126,14 @@ export default new Vuex.Store({
             }
 
             commit(types.MERGE_CHARACTERS, {characters: res.data})
-            commit(types.SET_PRELOADED, {type: 'characters', status: 'true'})
+            commit(types.SET_PRELOADED, {type: 'characters', status: true})
         }
     },
     getters: {
+        checkPreloaded: (state) => (identifier) => {
+            // Check whether a certain resource identifier is preloaded
+            return state.preloaded[identifier] === true;
+        },
         // Check whether a episode has been fetched yet
         isFetched: (state) => (season, episode) => {
             const ep = state.quoteData[season - 1].episodes[episode - 1];