mirror of
https://github.com/Xevion/the-office.git
synced 2025-12-12 22:13:17 -06:00
begin developing more Vuex store mutations, actions and getters (fetch episode data)
This commit is contained in:
4
client/src/mutation_types.js
Normal file
4
client/src/mutation_types.js
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
export const types = {
|
||||||
|
FETCH_EPISODE: 'FETCH_EPISODE',
|
||||||
|
SET_EPISODE: 'SET_EPISODE'
|
||||||
|
}
|
||||||
@@ -1,12 +1,61 @@
|
|||||||
import Vue from "vue";
|
import Vue from "vue";
|
||||||
import Vuex from "vuex";
|
import Vuex from "vuex";
|
||||||
|
import axios from "axios";
|
||||||
|
import {types} from "@/mutation_types";
|
||||||
|
|
||||||
Vue.use(Vuex);
|
Vue.use(Vuex);
|
||||||
|
|
||||||
|
// Generate 'base' representing episode data
|
||||||
|
const episodeCount = [6, 22, 23, 14, 26, 24, 24, 24, 23];
|
||||||
|
const baseData = Array.from({length: 9}, (x, season) => {
|
||||||
|
// Array of null values representing each episode
|
||||||
|
let episodeData = Array.from({length: episodeCount[season]}, () => null)
|
||||||
|
return {season_id: season + 1, episodes: episodeData};
|
||||||
|
})
|
||||||
|
console.log(baseData)
|
||||||
|
|
||||||
export default new Vuex.Store({
|
export default new Vuex.Store({
|
||||||
state: {
|
state: {
|
||||||
episodeCount: [6, 22, 23, 14, 26, 24, 24, 24, 23]
|
seasonCount: 9,
|
||||||
|
episodeCount: episodeCount,
|
||||||
|
quoteData: baseData
|
||||||
},
|
},
|
||||||
mutations: {},
|
mutations: {
|
||||||
actions: {},
|
[types.SET_EPISODE](state, payload) {
|
||||||
|
state.quoteData[payload.season - 1].episodes[payload.episode - 1] = payload.data
|
||||||
|
}
|
||||||
|
},
|
||||||
|
actions: {
|
||||||
|
// Perform async API call to fetch specific Episode data
|
||||||
|
[types.FETCH_EPISODE]({commit}, season, episode) {
|
||||||
|
const path = `${process.env.VUE_APP_API_URL}/api/episode/${season}/${episode}/`;
|
||||||
|
|
||||||
|
axios.get(path)
|
||||||
|
.then((res) => {
|
||||||
|
// Push episode data
|
||||||
|
commit(types.SET_EPISODE, { season: season, episode: episode, data: res.data})
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
|
console.error(error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getters: {
|
||||||
|
// Check whether a episode has been fetched yet
|
||||||
|
isFetched(season, episode) {
|
||||||
|
return this.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 Episode data if present
|
||||||
|
getEpisode(season, episode) {
|
||||||
|
if (this.getters.isFetched(season, episode))
|
||||||
|
return this.state.quoteData[season]
|
||||||
|
else
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user