redo episode data loading to use Vuex, fix isFetched to use .loaded (MERGE_EPISODE), implement Promise (.then) for FETCH_EPISODE

client/src/components/Episode.vue

@@ -7,13 +7,8 @@
         <b-card class="mb-4">
             <template v-if="ready">
                 <h3>"{{ episode.title }}"</h3>
-                <span>
+                <span>{{ episode.description }}</span>
-                {{ episode.description }}
+                <CharacterList v-if="episode && episode.characters" :characters="episode.characters"></CharacterList>
-            </span>
-                <CharacterList
-                    v-if="episode && episode.characters"
-                    :characters="episode.characters"
-                ></CharacterList>
             </template>
             <template v-else>
                 <Skeleton style="width: 30%;"></Skeleton>
@@ -22,23 +17,13 @@
                 <Skeleton style="width: 69%; height: 40%;"></Skeleton>
             </template>
         </b-card>
-        <div v-if="episode != null">
+        <div v-if="ready">
-            <b-card
+            <b-card v-for="(scene, sceneIndex) in episode.scenes" :key="`scene-${sceneIndex}`" class="mb-1"
-                v-for="(scene, sceneIndex) in episode.scenes"
+                    body-class="p-0">
-                :key="`scene-${sceneIndex}`"
-                class="mb-1"
-                body-class="p-0"
-            >
                 <b-card-text class="my-2">
-                    <QuoteList
+                    <QuoteList :quotes="scene.quotes" :sceneIndex="sceneIndex"></QuoteList>
-                        :quotes="scene.quotes"
+                    <span v-if="scene.deleted" class="mt-n2 mb-4 text-muted deleted-scene pl-2"
-                        :sceneIndex="sceneIndex"
+                          :footer="`Deleted Scene ${scene.deleted}`">
-                    ></QuoteList>
-                    <span
-                        v-if="scene.deleted"
-                        class="mt-n2 mb-4 text-muted deleted-scene pl-2"
-                        :footer="`Deleted Scene ${scene.deleted}`"
-                    >
                         Deleted Scene {{ scene.deleted }}
                     </span>
                 </b-card-text>
@@ -51,6 +36,7 @@
 .breadcrumb-skeleton {
     background-color: $grey-3;
     height: 48px;
+
     & > .card-body {
         padding: 0 0 0 1em;
         display: flex;
@@ -72,10 +58,10 @@
 </style>
 
 <script>
-import axios from "axios";
 import QuoteList from "./QuoteList.vue";
 import CharacterList from "./CharacterList.vue";
 import Skeleton from './Skeleton.vue';
+import {types} from "@/mutation_types";
 
 export default {
     name: "Episode",
@@ -84,47 +70,45 @@ export default {
         CharacterList,
         Skeleton,
     },
-    data() {
+    created() {
-        return {
+        this.fetch();
-            episode: null,
+    },
-        };
+    watch: {
+        $route() {
+            this.$nextTick(() => {
+                this.fetch();
+            //     this.$store.dispatch(types.FETCH_EPISODE, {season: this.params.season, episode: this.params.episode})
+            })
+        },
     },
     methods: {
-        getEpisode() {
+        fetch() {
-            const path = `${process.env.VUE_APP_API_URL}/api/episode/\
+            // Fetch the episode, then scroll - already fetched episode should scroll immediately
-${this.$route.params.season}/${this.$route.params.episode}/`;
+            this.$store.dispatch(types.FETCH_EPISODE, {season: this.params.season, episode: this.params.episode})
-            axios
+                .then(() => {
-                .get(path)
+                    // Force update, as for some reason it doesn't update naturally. I hate it too.
-                .then((res) => {
+                    this.$forceUpdate()
-                    this.episode = res.data;
+
-                    // Scroll
+                    // Scroll down to quote
                     if (this.$route.hash) {
                         this.$nextTick(() => {
                             const section = document.getElementById(this.$route.hash.substring(1));
                             this.$scrollTo(section, 500, {easing: "ease-in"});
                         });
                     }
-                })
-                .catch((error) => {
-                    // eslint-disable-next-line no-console
-                    console.error(error);
                 });
-        },
+        }
-    },
-    created() {
-        this.getEpisode();
-    },
-    watch: {
-        $route() {
-            this.episode = null;
-            this.$nextTick(() => {
-                this.getEpisode();
-            })
-        },
     },
     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];
+        },
+        params() {
+            return this.$route.params
+        },
         ready() {
-            return this.episode !== null
+            return this.$store.getters.isFetched(this.params.season, this.params.episode)
         },
         breadcrumbs() {
             return [

client/src/store.js

@@ -30,43 +30,48 @@ 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)
+                state.quoteData[s].episodes[e].loaded = true;
         },
         [types.SET_PRELOADED](state, status) {
             state.preloaded = status;
-        },
+        }
     },
     actions: {
         // Perform async API call to fetch specific Episode data
-        [types.FETCH_EPISODE]({commit}, season, episode) {
+        [types.FETCH_EPISODE]({commit}, payload) {
-            const path = `${process.env.VUE_APP_API_URL}/api/episode/${season}/${episode}/`;
+            return new Promise((resolve, reject) => {
-
+                const path = `${process.env.VUE_APP_API_URL}/api/episode/${payload.season}/${payload.episode}/`;
                 axios.get(path)
                     .then((res) => {
                         // Push episode data
-                    commit(types.SET_EPISODE, {season: season, episode: episode, data: res.data})
+                        commit(types.MERGE_EPISODE, {
+                            season: payload.season,
+                            episode: payload.episode,
+                            episodeData: res.data
+                        })
+                        resolve()
                     })
                     .catch((error) => {
                         // eslint-disable-next-line no-console
                         console.error(error);
+                        reject()
                     });
+            })
         },
         [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 season of res.data)
                         for (const episode of season.episodes) {
                             // Create payload and commit for each episode
-                            commit(
+                            commit(types.MERGE_EPISODE, {
-                                types.MERGE_EPISODE,
-                                {
                                 season: season.season_id,
                                 episode: episode.episode_id,
                                 episodeData: episode
-                                }
+                            })
-                            )
-                        }
                     }
 
                     commit(types.SET_PRELOADED, true);
@@ -80,7 +85,8 @@ export default new Vuex.Store({
     getters: {
         // Check whether a episode has been fetched yet
         isFetched: (state) => (season, episode) => {
-            return state.quoteData[season - 1].episodes[episode] !== null;
+            const ep = state.quoteData[season - 1].episodes[episode - 1];
+            return ep !== null && ep.loaded;
         },
         // Get the number of episodes present for a given season
         getEpisodeCount: (state) => (season) => {
@@ -88,9 +94,9 @@ export default new Vuex.Store({
         },
         // return Episode data if present
         getEpisode: (state, getters) => (season, episode) => {
-            if (getters.isFetched(season, episode))
+            if (getters.isFetched(season, episode)) {
-                return state.quoteData[season]
+                return state.quoteData[season - 1].episodes[episode - 1];
-            else
+            } else
                 return null
         },
         // return true if a specific episode is valid