refactor store

mwalczak · Apr 16, 2020 · afc6fd6 · afc6fd6
1 parent 793e990
commit afc6fd6
Show file tree

Hide file tree

Showing 4 changed files with 132 additions and 107 deletions.
diff --git a/src/components/game.vue b/src/components/game.vue
@@ -28,6 +28,9 @@
             <span>Create game</span>
           </button>
         </footer>
+        <b-notification v-if="showAlert" type="is-danger" role="alert">
+          {{ alert }}
+        </b-notification>
       </div>
     </div>
     <Modal
@@ -56,11 +59,25 @@ export default {
   components: {
     Modal,
   },
-  created() {},
+  created() {
+    let game = JSON.parse(window.localStorage.getItem('game'));
+    console.log(game);
+    if (game) {
+      this.setGame(game);
+    }
+    let player = JSON.parse(window.localStorage.getItem('player'));
+    if (player) {
+      this.setPlayer(player);
+    }
+    let round = JSON.parse(window.localStorage.getItem('round'));
+    if (round) {
+      this.setRound(round);
+    }
+  },
   computed: {
-    ...mapState(['game', 'player']),
+    ...mapState(['game', 'player', 'alert']),
     isDuringGame() {
-      return this.id;
+      return this.game.id;
     },
     modalMessage() {
       return `Would you like to?`;
@@ -86,18 +103,31 @@ export default {
     ...mapActions([
       'createGameAction',
       'addPlayerAction',
+      'getGameAction',
       'setPlayerName',
       'setGameId',
+      'setGame',
+      'setRound',
+      'setPlayer',
     ]),
     async createGame() {
-      await this.createGameAction(this.player.name);
+      if (!this.player.name) {
+        alert('enter player name to create a game');
+        return false;
+      }
+      await this.createGameAction();
     },
     async joinGame() {
-      if (!this.game.id) {
-        alert('enter game id to join');
+      if (!this.game.id || !this.player.name) {
+        alert('enter player name and game id to join');
         return false;
       }
-      await this.addPlayerAction(this.player.name);
+      await this.getGameAction();
+      await this.addPlayerAction();
+      await this.getGameAction();
+    },
+    showAlert() {
+      this.alert != '';
     },
     openModal() {
       this.showModal = true;

diff --git a/src/shared/data.service.js b/src/shared/data.service.js
@@ -1,115 +1,89 @@
 import * as axios from 'axios';
+import { API } from './config';
+
+const sendAlert = function(alert) {
+  console.log(alert);
+};
 
 axios.defaults.headers.common = {
   'Content-Type': 'application/json',
 };
 
-import { API } from './config';
+axios.interceptors.response.use(
+  function(response) {
+    return response;
+  },
+  function(error) {
+    console.log(error.response);
+    if (error.response.data['hydra:description']) {
+      alert(error.response.data['hydra:description']);
+    }
+    return Promise.reject(error);
+  }
+);
 
 const getGame = async function(id) {
-  try {
-    const response = await axios.get(`${API}/games/${id}`);
-    const game = parseItem(response, 200);
-    return game;
-  } catch (error) {
-    console.error(error);
-    return null;
-  }
+  const response = await axios.get(`${API}/games/${id}`);
+  const game = parseItem(response, 200);
+  return game;
 };
 
 const newGame = async function(playerName) {
-  try {
-    const game = {};
-    if (playerName !== undefined) {
-      game.name = playerName;
-    }
-    const response = await axios.post(`${API}/games`, game, {
-      headers: { 'Content-Type': 'application/json' },
-    });
-    const newGame = parseItem(response, 201);
-    return newGame;
-  } catch (error) {
-    console.error(error);
-    return null;
+  const game = {};
+  if (playerName !== undefined) {
+    game.name = playerName;
   }
+  const response = await axios.post(`${API}/games`, game);
+  const newGame = parseItem(response, 201);
+  return newGame;
 };
 
 const getPlayer = async function(id) {
-  try {
-    const response = await axios.get(`${API}/players/${id}`);
-    const player = parseItem(response, 200);
-    return player;
-  } catch (error) {
-    console.error(error);
-    return null;
-  }
+  const response = await axios.get(`${API}/players/${id}`);
+  const player = parseItem(response, 200);
+  return player;
 };
 
-const addPlayer = async function(playerName, game) {
-  try {
-    const player = {
-      name: playerName,
-      game: game['@id'],
-    };
-    const response = await axios.post(`${API}/players`, player);
-    const addedPlayer = parseItem(response, 201);
-    return addedPlayer;
-  } catch (error) {
-    console.error(error);
-    return null;
-  }
+const addPlayer = async function(playerName, gameId) {
+  let player = {
+    name: playerName,
+    game: gameId,
+  };
+  const response = await axios.post(`${API}/players`, player);
+  const addedPlayer = parseItem(response, 201);
+  return addedPlayer;
 };
 
 const newRound = async function(game) {
-  try {
-    const round = {
-      game: game['@id'],
-    };
-    const response = await axios.post(`${API}/rounds`, round);
-    const newRound = parseItem(response, 201);
-    return newRound;
-  } catch (error) {
-    console.error(error);
-    return null;
-  }
+  let round = {
+    game: game['@id'],
+  };
+  const response = await axios.post(`${API}/rounds`, round);
+  const newRound = parseItem(response, 201);
+  return newRound;
 };
 
 const deleteRound = async function(id) {
-  try {
-    const response = await axios.delete(`${API}/rounds/${id}`);
-    parseItem(response, 204);
-    return id;
-  } catch (error) {
-    console.error(error);
-    return null;
-  }
+  const response = await axios.delete(`${API}/rounds/${id}`);
+  parseItem(response, 204);
+  return id;
 };
 
 const newRoundCard = async function(card, player, round) {
-  try {
-    const roundCard = {
-      round: round['@id'],
-      card: card['@id'],
-      player: player['@id'],
-    };
-    const response = await axios.post(`${API}/round_cards`, roundCard);
-    const newRoundCard = parseItem(response, 201);
-    return newRoundCard;
-  } catch (error) {
-    console.error(error);
-    return null;
-  }
+  let roundCard = {
+    round: round['@id'],
+    card: card['@id'],
+    player: player['@id'],
+  };
+  const response = await axios.post(`${API}/round_cards`, roundCard);
+  const newRoundCard = parseItem(response, 201);
+  return newRoundCard;
 };
 
 const updateRound = async function(round) {
-  try {
-    const response = await axios.put(`${API}/rounds/${round.id}`, round);
-    const updatedRound = parseItem(response, 200);
-    return updatedRound;
-  } catch (error) {
-    console.error(error);
-    return null;
-  }
+  const response = await axios.put(`${API}/rounds/${round.id}`, round);
+  const updatedRound = parseItem(response, 200);
+  return updatedRound;
 };
 
 export const parseItem = (response, code) => {

diff --git a/src/store/index.js b/src/store/index.js
@@ -7,10 +7,10 @@ import {
   GAME_UPDATE,
   GAME_CREATE,
   PLAYER_UPDATE,
-  ROUND_START,
-  ROUND_CANCEL,
+  ROUND_UPDATE,
   ROUND_CARD,
   ROUND_FINISH,
+  ALERT_UPDATE,
 } from './mutation-types';
 
 Vue.use(Vuex);
@@ -19,32 +19,35 @@ const state = () => ({
   game: {},
   player: {},
   round: {},
+  alert: '',
 });
 
 const mutations = {
   [GAME_CREATE](state, game) {
+    window.localStorage.setItem('game', JSON.stringify(game));
     state.game = game;
-    if (game.players.length) {
-      state.player = game.players[0];
-    }
   },
   [GAME_UPDATE](state, game) {
+    window.localStorage.setItem('game', JSON.stringify(game));
     state.game = game;
   },
   [PLAYER_UPDATE](state, player) {
+    window.localStorage.setItem('player', JSON.stringify(player));
     state.player = player;
   },
-  [ROUND_START](state, round) {
+  [ROUND_UPDATE](state, round) {
+    window.localStorage.setItem('round', JSON.stringify(round));
     state.round = round;
   },
-  [ROUND_CANCEL](state) {
-    state.round = {};
-  },
   [ROUND_CARD](state, card) {
     state.round.cards.push(card);
   },
   [ROUND_FINISH](state, round) {
     state.round.winner = round.winner;
+    window.localStorage.setItem('round', JSON.stringify(state.round));
+  },
+  [ALERT_UPDATE](state, alert) {
+    state.alert = round.alert;
   },
 };
 
@@ -58,17 +61,23 @@ const actions = {
   async createGameAction({ commit, state }) {
     const game = await dataService.newGame(state.player.name);
     commit(GAME_CREATE, game);
+    if (game.players.length) {
+      commit(PLAYER_UPDATE, game.players[0]);
+    }
   },
-  async getGameAction({ commit }, gameId) {
-    const game = await dataService.getGame(gameId);
+  async getGameAction({ commit, state }) {
+    const game = await dataService.getGame(state.game.id);
     commit(GAME_UPDATE, game);
   },
   async getPlayerAction({ commit, state }) {
     const player = await dataService.getPlayer(state.player.id);
     commit(PLAYER_UPDATE, player);
   },
-  async addPlayerAction({ commit, state }, playerName) {
-    const newPlayer = await dataService.addPlayer(playerName, state.game);
+  async addPlayerAction({ commit, state }) {
+    const newPlayer = await dataService.addPlayer(
+      state.player.name,
+      state.game['@id']
+    );
     commit(PLAYER_UPDATE, newPlayer);
   },
   setPlayerName({ commit, state }, value) {
@@ -78,11 +87,11 @@ const actions = {
   },
   async startRoundAction({ commit, state }) {
     const round = await dataService.newRound(state.game);
-    commit(ROUND_START, round);
+    commit(ROUND_UPDATE, round);
   },
   async cancelRoundAction({ commit, state }) {
     await dataService.delRound(state.round.id);
-    commit(ROUND_CANCEL);
+    commit(ROUND_UPDATE, {});
   },
   async playCardAction({ commit, state }, card) {
     await dataService.newRoundCard(card, state.player, state.round);
@@ -95,6 +104,18 @@ const actions = {
     const finishedRound = await dataService.updateRound(round);
     commit(ROUND_FINISH, finishedRound);
   },
+  updateAlert({ commit }, alert) {
+    commit(ALERT_UPDATE, alert);
+  },
+  setGame({ commit }, game) {
+    commit(GAME_UPDATE, game);
+  },
+  setPlayer({ commit }, player) {
+    commit(PLAYER_UPDATE, player);
+  },
+  setRound({ commit }, round) {
+    commit(ROUND_UPDATE, round);
+  },
 };
 
 const getters = {};

diff --git a/src/store/mutation-types.js b/src/store/mutation-types.js
@@ -1,7 +1,7 @@
 export const GAME_UPDATE = 'updateGame';
 export const GAME_CREATE = 'addGame';
 export const PLAYER_UPDATE = 'updatePlayer';
-export const ROUND_START = 'addRound';
-export const ROUND_CANCEL = 'deleteRound';
+export const ROUND_UPDATE = 'updateRound';
 export const ROUND_CARD = 'addRoundCard';
 export const ROUND_FINISH = 'finishRound';
+export const ALERT_UPDATE = 'updateAlert';