From 59f57fbed39d3f24d4c779c28d728ac4b61287b0 Mon Sep 17 00:00:00 2001
From: David Katz <15Dkatz@shcp.edu>
Date: Sun, 23 Oct 2022 14:23:02 -0700
Subject: [PATCH] Async Actions

---
 evens-or-odds/src/actions/deck.js   |  8 +++++++-
 evens-or-odds/src/components/App.js | 30 ++++++++++++++++-------------
 2 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/evens-or-odds/src/actions/deck.js b/evens-or-odds/src/actions/deck.js
index 514338e..018dd25 100644
--- a/evens-or-odds/src/actions/deck.js
+++ b/evens-or-odds/src/actions/deck.js
@@ -4,4 +4,10 @@ export const fetchDeckResult = deckJson => {
   const { remaining, deck_id } = deckJson;
 
   return { type: FETCH_DECK_RESULT, remaining, deck_id };
-}
\ No newline at end of file
+}
+
+export const fetchNewDeck = dispatch => {
+  return fetch('https://deck-of-cards-api-wrapper.appspot.com/deck/new/shuffle')
+    .then(response => response.json())
+    .then(json => dispatch(fetchDeckResult(json)));
+}
diff --git a/evens-or-odds/src/components/App.js b/evens-or-odds/src/components/App.js
index 6349805..66f2e3c 100644
--- a/evens-or-odds/src/components/App.js
+++ b/evens-or-odds/src/components/App.js
@@ -1,16 +1,13 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { startGame, cancelGame } from '../actions/settings';
-import { fetchDeckResult } from '../actions/deck';
+import { fetchNewDeck } 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));
+    this.props.fetchNewDeck();
   }
 
   render() {
@@ -47,14 +44,21 @@ const mapStateToProps = state => {
   return { gameStarted: state.gameStarted };
 }
 
-const mapDispatchToProps = dispatch => {
-  return {
-    startGame: () => dispatch(startGame()),
-    cancelGame: () => dispatch(cancelGame()),
-    fetchDeckResult: deckJson => dispatch(fetchDeckResult(deckJson))
-  };
-}
+// const mapDispatchToProps = dispatch => {
+//   return {
+//     startGame: () => dispatch(startGame()),
+//     cancelGame: () => dispatch(cancelGame()),
+//     fetchNewDeck: () => fetchNewDeck(dispatch)
+//   };
+// }
 
-const componentConnector = connect(mapStateToProps, mapDispatchToProps);
+const componentConnector = connect(
+  mapStateToProps,
+  {
+    startGame,
+    cancelGame,
+    fetchNewDeck
+  }
+);
 
 export default componentConnector(App);