fix SeasonList axios preloading & object merging mutations (SeasonList component ready), change isPreloaded to directly access state variable

client/src/components/SeasonList.vue

@@ -10,12 +10,13 @@
                 role="tab"
                 v-b-toggle="'accordion-' + season.season_id"
             >
-                <a class="no-link align-items-center justify-content-between d-flex">
+                <a class="no-link align-items-center justify-content-between d-flex" v-if="isPreloaded">
                     <h5 class="mb-0 pu-0 mu-0 season-title">
                         Season {{ season.season_id }}
                     </h5>
                     <b-icon class="" icon="chevron-down"></b-icon>
                 </a>
+                <Skeleton v-else></Skeleton>
             </b-card-header>
             <b-collapse
                 :id="'accordion-' + season.season_id"
@@ -24,7 +25,7 @@
                 <b-card-body class="h-100 px-0">
                     <b-list-group>
                         <template v-for="(episode, index) in seasons[season.season_id - 1].episodes">
-                            <template v-if="episode !== null">
+                            <template v-if="isPreloaded">
                                 <b-list-group-item
                                     class="no-link episode-item"
                                     :id="`s-${season.season_id}-ep-${episode.episode_id}`"
@@ -42,9 +43,9 @@
                                     placement="right"
                                 >
                                     <template v-slot:title>
-                                        episode.title
+                                        {{ episode.title }}
                                     </template>
-                                    episode.description
+                                    {{ episode.description }}
                                 </b-popover>
                             </template>
                             <b-list-group-item v-else class="no-link episode-item" :key="index">
@@ -60,6 +61,7 @@
 
 <script>
 import Skeleton from './Skeleton.vue';
+import {types} from "@/mutation_types";
 
 export default {
     name: "SeasonList",
@@ -69,10 +71,15 @@ export default {
     computed: {
         seasons() {
             return this.$store.state.quoteData;
+        },
+        // if SeasonList episode data (titles/descriptions) is loaded and ready
+        isPreloaded() {
+            return this.$store.state.preloaded;
         }
     },
     methods: {},
     created() {
+        this.$store.dispatch(types.PRELOAD)
     },
 };
 </script>

client/src/mutation_types.js

@@ -1,4 +1,8 @@
 export const types = {
     FETCH_EPISODE: 'FETCH_EPISODE',
-    SET_EPISODE: 'SET_EPISODE'
+    SET_EPISODE: 'SET_EPISODE',
+    MERGE_EPISODE: 'MERGE_EPISODE',
+    SET_PRELOADED: 'SET_PRELOADED',
+    PRELOAD: 'PRELOAD'
+
 }

client/src/store.js

@@ -9,8 +9,10 @@ Vue.use(Vuex);
 const episodeCount = [6, 22, 23, 14, 26, 24, 24, 24, 23];
 const baseData = Array.from({length: 9}, (x, season) => {
     // Array of null values representing each episode
-    let episodeData = Array.from({length: episodeCount[season]}, () => null)
+    const episodeData = Array.from({length: episodeCount[season]}, (x, episode) => {
-    return {season_id: season + 1, episodes: episodeData};
+        return { episode_id: episode + 1, loaded: false }
+    })
+    return {season_id: season + 1, episodes: episodeData };
 })
 
 export default new Vuex.Store({
@@ -18,11 +20,20 @@ export default new Vuex.Store({
         seasonCount: 9,
         episodeCount: episodeCount,
         quoteData: baseData,
+        preloaded: false,
     },
     mutations: {
         [types.SET_EPISODE](state, payload) {
             state.quoteData[payload.season - 1].episodes[payload.episode - 1] = payload.data
-        }
+        },
+        [types.MERGE_EPISODE](state, payload) {
+            const s = payload.season - 1;
+            const e = payload.episode - 1;
+            state.quoteData[s].episodes[e] = Object.assign(state.quoteData[s].episodes[e], payload.episodeData);
+        },
+        [types.SET_PRELOADED](state, status) {
+            state.preloaded = status;
+        },
     },
     actions: {
         // Perform async API call to fetch specific Episode data
@@ -32,33 +43,59 @@ export default new Vuex.Store({
             axios.get(path)
                 .then((res) => {
                     // Push episode data
-                    commit(types.SET_EPISODE, { season: season, episode: episode, data: res.data})
+                    commit(types.SET_EPISODE, {season: season, episode: episode, data: res.data})
                 })
                 .catch((error) => {
                     // eslint-disable-next-line no-console
                     console.error(error);
                 });
+        },
+        [types.PRELOAD]({commit}) {
+            const path = `${process.env.VUE_APP_API_URL}/api/episodes/`;
+            console.log('preload axios')
+            axios.get(path)
+                .then((res) => {
+                    for (const season of res.data) {
+                        for (const episode of season.episodes) {
+                            // Create payload and commit for each episode
+                            commit(
+                                types.MERGE_EPISODE,
+                                {
+                                    season: season.season_id,
+                                    episode: episode.episode_id,
+                                    episodeData: episode
+                                }
+                            )
+                        }
+                    }
+
+                    commit(types.SET_PRELOADED, true);
+                })
+                .catch((error) => {
+                    // eslint-disable-next-line no-console
+                    console.error(error);
+                })
         }
     },
     getters: {
         // Check whether a episode has been fetched yet
-        isFetched(season, episode) {
+        isFetched: (state) => (season, episode) => {
-            return this.$store.state.quoteData[season - 1].episodes[episode] !== null;
+            return state.quoteData[season - 1].episodes[episode] !== null;
         },
         // Get the number of episodes present for a given season
-        getEpisodeCount(season) {
+        getEpisodeCount: (state) => (season) => {
-            return this.$store.state.episodeCount[season - 1];
+            return state.episodeCount[season - 1];
         },
         // return Episode data if present
-        getEpisode(season, episode) {
+        getEpisode: (state, getters) => (season, episode) => {
-            if (this.getters.isFetched(season, episode))
+            if (getters.isFetched(season, episode))
-                return this.$store.state.quoteData[season]
+                return state.quoteData[season]
             else
                 return null
         },
         // return true if a specific episode is valid
-        isValidEpisode(season, episode = 1) {
+        isValidEpisode: (state, getters) => (season, episode = 1) => {
-            return season >= 1 && season <= 9 && episode >= 1 && episode <= this.$store.getters.getEpisodeCount(season)
+            return season >= 1 && season <= 9 && episode >= 1 && episode <= getters.getEpisodeCount(season)
-        }
+        },
     }
 });