xevion/the-office
1
0
Fork 0
mirror of https://github.com/Xevion/the-office.git synced 2025-12-11 08:08:53 -06:00
Code Issues Packages Projects Releases Wiki Activity

fix SeasonList to use Vuex properly (working Skeleton loading), fix $store vs $state misunderstandings

Browse Source
This commit is contained in:
Xevion
2020-09-12 13:33:33 -05:00
parent a1a3459ff1
commit d9af6b7950
2 changed files with 42 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
client/src/components/SeasonList.vue
View File

@@ -23,33 +23,33 @@
> >
<b-card-body class="h-100 px-0"> <b-card-body class="h-100 px-0">
<b-list-group> <b-list-group>
<template v-for="episode in season.episodes"> <template v-for="(episode, index) in seasons[season.season_id - 1].episodes">
<b-list-group-item <template v-if="episode !== null">
class="no-link episode-item" <b-list-group-item
:id="`s-${season.season_id}-ep-${episode.episode_id}`" class="no-link episode-item"
:key="`rl-${episode.episode_id}`" :id="`s-${season.season_id}-ep-${episode.episode_id}`"
:to="{ :key="`rl-${episode.episode_id}`"
name: 'Episode', :to="{name: 'Episode', params: { season: season.season_id, episode: episode.episode_id }, }"
params: { >
season: season.season_id, Episode {{ episode.episode_id }} - "{{ episode.title }}"
episode: episode.episode_id, </b-list-group-item>
}, <b-popover
}" show="true"
> :key="`bpop-${episode.episode_id}`"
Episode {{ episode.episode_id }} - "{{ episode.title }}" 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-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> </template>
</b-list-group> </b-list-group>
</b-card-body> </b-card-body>
@@ -59,31 +59,20 @@
</template> </template>
<script> <script>
import axios from "axios"; import Skeleton from './Skeleton.vue';
export default { export default {
name: "SeasonList", name: "SeasonList",
data() { components: {
return { Skeleton
seasons: [],
};
}, },
methods: { computed: {
getSeasons() { seasons() {
const path = `${process.env.VUE_APP_API_URL}/api/episodes/`; return this.$store.state.quoteData;
axios }
.get(path)
.then((res) => {
this.seasons = res.data;
})
.catch((error) => {
// eslint-disable-next-line no-console
console.error(error);
});
},
}, },
methods: {},
created() { created() {
this.getSeasons();
}, },
}; };
</script> </script>

12
client/src/store.js
View File

@@ -18,7 +18,7 @@ export default new Vuex.Store({
state: { state: {
seasonCount: 9, seasonCount: 9,
episodeCount: episodeCount, episodeCount: episodeCount,
quoteData: baseData quoteData: baseData,
}, },
mutations: { mutations: {
[types.SET_EPISODE](state, payload) { [types.SET_EPISODE](state, payload) {
@@ -44,18 +44,22 @@ export default new Vuex.Store({
getters: { getters: {
// Check whether a episode has been fetched yet // Check whether a episode has been fetched yet
isFetched(season, episode) { 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 // Get the number of episodes present for a given season
getEpisodeCount(season) { getEpisodeCount(season) {
return this.state.episodeCount[season - 1]; return this.$store.state.episodeCount[season - 1];
}, },
// return Episode data if present // return Episode data if present
getEpisode(season, episode) { getEpisode(season, episode) {
if (this.getters.isFetched(season, episode)) if (this.getters.isFetched(season, episode))
return this.state.quoteData[season] return this.$store.state.quoteData[season]
else else
return null 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)
} }
} }
}); });