fix Vuex store data being re-fetched with check, fix .loaded assignment (undefined vs null moment), remove SeasonList popover.show idiocy, Episode.vue comments

client/src/components/Episode.vue

@@ -71,13 +71,14 @@ export default {
         Skeleton,
     },
     created() {
+        // When page loads directly on this Episode initially, fetch data
         this.fetch();
     },
     watch: {
+        // When route changes, fetch data for current Episode route
         $route() {
             this.$nextTick(() => {
                 this.fetch();
-            //     this.$store.dispatch(types.FETCH_EPISODE, {season: this.params.season, episode: this.params.episode})
             })
         },
     },
@@ -102,8 +103,8 @@ export default {
     computed: {
         episode() {
             return this.$store.getters.getEpisode(this.params.season, this.params.episode)
-            // return this.$store.state.quoteData[this.params.season - 1].episodes[this.params.episode - 1];
         },
+        // Shorthand - literally useless, why does everything to have such long prefixes in dot notation
         params() {
             return this.$route.params
         },

client/src/components/SeasonList.vue

@@ -20,7 +20,7 @@
                                                    :id="`s-${season.season_id}-ep-${episode.episode_id}`">
                                     Episode {{ episode.episode_id }} - "{{ episode.title }}"
                                 </b-list-group-item>
-                                <b-popover  show="true" :key="`bpop-${episode.episode_id}`" triggers="hover"
+                                <b-popover :key="`bpop-${episode.episode_id}`" triggers="hover"
                                             placement="right" delay="25" :target="`s-${season.season_id}-ep-${episode.episode_id}`">
                                     <template v-slot:title>
                                         {{ episode.title }}

client/src/store.js

@@ -30,7 +30,9 @@ export default new Vuex.Store({
             const s = payload.season - 1;
             const e = payload.episode - 1;
             state.quoteData[s].episodes[e] = Object.assign(state.quoteData[s].episodes[e], payload.episodeData);
-            if (payload.episodeData.scenes !== null)
+
+            // If the episodeData has scenes, it means that this is a full episode data merge - mark it as 'loaded'
+            if (payload.episodeData.scenes !== undefined)
                 state.quoteData[s].episodes[e].loaded = true;
         },
         [types.SET_PRELOADED](state, status) {
@@ -39,13 +41,19 @@ export default new Vuex.Store({
     },
     actions: {
         // Perform async API call to fetch specific Episode data
-        [types.FETCH_EPISODE]({commit}, payload) {
+        [types.FETCH_EPISODE](context, payload) {
             return new Promise((resolve, reject) => {
+                // Don't re-fetch API data if it's already loaded
+                if(context.getters.isFetched(payload.season, payload.episode)) {
+                    resolve()
+                    return
+                }
+
                 const path = `${process.env.VUE_APP_API_URL}/api/episode/${payload.season}/${payload.episode}/`;
                 axios.get(path)
                     .then((res) => {
                         // Push episode data
-                        commit(types.MERGE_EPISODE, {
+                        context.commit(types.MERGE_EPISODE, {
                             season: payload.season,
                             episode: payload.episode,
                             episodeData: res.data
@@ -86,7 +94,7 @@ export default new Vuex.Store({
         // Check whether a episode has been fetched yet
         isFetched: (state) => (season, episode) => {
             const ep = state.quoteData[season - 1].episodes[episode - 1];
-            return ep !== null && ep.loaded;
+            return ep.loaded;
         },
         // Get the number of episodes present for a given season
         getEpisodeCount: (state) => (season) => {