CORS and Same Origin Policy

evens-or-odds/src/actions/deck.js

@@ -0,0 +1,7 @@
+import { FETCH_DECK_RESULT } from './types';
+
+export const fetchDeckResult = deckJson => {
+  const { remaining, deck_id } = deckJson;
+
+  return { type: FETCH_DECK_RESULT, remaining, deck_id };
+}

evens-or-odds/src/actions/types.js

@@ -1,2 +1,3 @@
 export const SET_GAME_STARTED = 'SET_GAME_STARTED';
 export const SET_INSTRUCTIONS_EXPANDED = 'SET_INSTRUCTIONS_EXPANDED';
+export const FETCH_DECK_RESULT = 'FETCH_DECK_RESULT';

evens-or-odds/src/components/App.js

@@ -1,9 +1,18 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { startGame, cancelGame } from '../actions/settings';
+import { fetchDeckResult } from '../actions/deck';
 import Instructions from './Instructions';
 
 class App extends Component {
+  startGame = () => {
+    this.props.startGame();
+
+    fetch('https://deck-of-cards-api-wrapper.appspot.com/deck/new/shuffle')
+      .then(response => response.json())
+      .then(json => this.props.fetchDeckResult(json));
+  }
+
   render() {
     console.log('this', this);
 
@@ -21,7 +30,7 @@ class App extends Component {
             <div>
               <h3>A new game awaits</h3>
               <br />
-              <button onClick={this.props.startGame}>Start Game</button>
+              <button onClick={this.startGame}>Start Game</button>
               <hr />
               <Instructions />
             </div>
@@ -42,6 +51,7 @@ const mapDispatchToProps = dispatch => {
   return {
     startGame: () => dispatch(startGame()),
     cancelGame: () => dispatch(cancelGame()),
+    fetchDeckResult: deckJson => dispatch(fetchDeckResult(deckJson))
   };
 }
 

evens-or-odds/src/reducers/index.js

@@ -1,4 +1,8 @@
-import { SET_GAME_STARTED, SET_INSTRUCTIONS_EXPANDED } from '../actions/types';
+import {
+  SET_GAME_STARTED,
+  SET_INSTRUCTIONS_EXPANDED,
+  FETCH_DECK_RESULT
+} from '../actions/types';
 
 const DEFAULT_SETTINGS = {
   gameStarted: false,
@@ -19,6 +23,10 @@ const rootReducer = (state = DEFAULT_SETTINGS, action) => {
         ...state,
         instructionsExpanded: action.instructionsExpanded
       };
+    case FETCH_DECK_RESULT:
+      const { remaining, deck_id } = action;
+
+      return { ...state, remaining, deck_id };
     default:
       return state;
   }