From d9af6b795049c7dc755ca646804fdc04510e9724 Mon Sep 17 00:00:00 2001
From: Xevion <xevioni@yandex.com>
Date: Sat, 12 Sep 2020 13:33:33 -0500
Subject: [PATCH] fix SeasonList to use Vuex properly (working Skeleton
 loading), fix $store vs $state misunderstandings

---
 client/src/components/SeasonList.vue | 79 ++++++++++++----------------
 client/src/store.js                  | 12 +++--
 2 files changed, 42 insertions(+), 49 deletions(-)

diff --git a/client/src/components/SeasonList.vue b/client/src/components/SeasonList.vue
index ebe7f8e..3d3646d 100644
--- a/client/src/components/SeasonList.vue
+++ b/client/src/components/SeasonList.vue
@@ -23,33 +23,33 @@
             >
                 <b-card-body class="h-100 px-0">
                     <b-list-group>
-                        <template v-for="episode in season.episodes">
-                            <b-list-group-item
-                                class="no-link episode-item"
-                                :id="`s-${season.season_id}-ep-${episode.episode_id}`"
-                                :key="`rl-${episode.episode_id}`"
-                                :to="{
-                  name: 'Episode',
-                  params: {
-                    season: season.season_id,
-                    episode: episode.episode_id,
-                  },
-                }"
-                            >
-                                Episode {{ episode.episode_id }} - "{{ episode.title }}"
+                        <template v-for="(episode, index) in seasons[season.season_id - 1].episodes">
+                            <template v-if="episode !== null">
+                                <b-list-group-item
+                                    class="no-link episode-item"
+                                    :id="`s-${season.season_id}-ep-${episode.episode_id}`"
+                                    :key="`rl-${episode.episode_id}`"
+                                    :to="{name: 'Episode', params: { season: season.season_id, episode: episode.episode_id }, }"
+                                >
+                                    Episode {{ episode.episode_id }} - "{{ episode.title }}"
+                                </b-list-group-item>
+                                <b-popover
+                                    show="true"
+                                    :key="`bpop-${episode.episode_id}`"
+                                    delay="25"
+                                    :target="`s-${season.season_id}-ep-${episode.episode_id}`"
+                                    triggers="hover"
+                                    placement="right"
+                                >
+                                    <template v-slot:title>
+                                        episode.title
+                                    </template>
+                                    episode.description
+                                </b-popover>
+                            </template>
+                            <b-list-group-item v-else class="no-link episode-item" :key="index">
+                                <Skeleton></Skeleton>
                             </b-list-group-item>
-                            <b-popover
-                                show
-                                :key="`bpop-${episode.episode_id}`"
-                                variant="secondary"
-                                delay="25"
-                                :target="`s-${season.season_id}-ep-${episode.episode_id}`"
-                                triggers="hover"
-                                placement="right"
-                            >
-                                <template v-slot:title>{{ episode.title }}</template>
-                                {{ episode.description }}
-                            </b-popover>
                         </template>
                     </b-list-group>
                 </b-card-body>
@@ -59,31 +59,20 @@
 </template>
 
 <script>
-import axios from "axios";
+import Skeleton from './Skeleton.vue';
 
 export default {
     name: "SeasonList",
-    data() {
-        return {
-            seasons: [],
-        };
+    components: {
+        Skeleton
     },
-    methods: {
-        getSeasons() {
-            const path = `${process.env.VUE_APP_API_URL}/api/episodes/`;
-            axios
-                .get(path)
-                .then((res) => {
-                    this.seasons = res.data;
-                })
-                .catch((error) => {
-                    // eslint-disable-next-line no-console
-                    console.error(error);
-                });
-        },
+    computed: {
+        seasons() {
+            return this.$store.state.quoteData;
+        }
     },
+    methods: {},
     created() {
-        this.getSeasons();
     },
 };
 </script>
diff --git a/client/src/store.js b/client/src/store.js
index 6c04efd..1d7802d 100644
--- a/client/src/store.js
+++ b/client/src/store.js
@@ -18,7 +18,7 @@ export default new Vuex.Store({
     state: {
         seasonCount: 9,
         episodeCount: episodeCount,
-        quoteData: baseData
+        quoteData: baseData,
     },
     mutations: {
         [types.SET_EPISODE](state, payload) {
@@ -44,18 +44,22 @@ export default new Vuex.Store({
     getters: {
         // Check whether a episode has been fetched yet
         isFetched(season, episode) {
-            return this.state.quoteData[season - 1].episodes[episode] !== null;
+            return this.$store.state.quoteData[season - 1].episodes[episode] !== null;
         },
         // Get the number of episodes present for a given season
         getEpisodeCount(season) {
-            return this.state.episodeCount[season - 1];
+            return this.$store.state.episodeCount[season - 1];
         },
         // return Episode data if present
         getEpisode(season, episode) {
             if (this.getters.isFetched(season, episode))
-                return this.state.quoteData[season]
+                return this.$store.state.quoteData[season]
             else
                 return null
+        },
+        // return true if a specific episode is valid
+        isValidEpisode(season, episode = 1) {
+            return season >= 1 && season <= 9 && episode >= 1 && episode <= this.$store.getters.getEpisodeCount(season)
         }
     }
 });