mirror of
https://github.com/Xevion/the-office.git
synced 2025-12-12 16:13:18 -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 Vuex from "vuex";
|
||||
import axios from "axios";
|
||||
import {types} from "@/mutation_types";
|
||||
|
||||
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({
|
||||
state: {
|
||||
episodeCount: [6, 22, 23, 14, 26, 24, 24, 24, 23]
|
||||
seasonCount: 9,
|
||||
episodeCount: episodeCount,
|
||||
quoteData: baseData
|
||||
},
|
||||
mutations: {},
|
||||
actions: {},
|
||||
mutations: {
|
||||
[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