xevion/the-office
1
0
Fork 0
mirror of https://github.com/Xevion/the-office.git synced 2025-12-09 18:08:42 -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-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>

12
client/src/store.js
View File

@@ -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)
}
}
});