From c33777032d688167c91ab349f9671181fa3bc8d9 Mon Sep 17 00:00:00 2001
From: Jamal Abdul-Majid <45414121+jamalabd@users.noreply.github.com>
Date: Fri, 31 Jul 2020 16:48:42 -0400
Subject: [PATCH] initial commit

---
 package.json                  |  5 +++--
 src/App.js                    | 12 +++++++++---
 src/index.js                  | 25 +++++++++++++++----------
 src/store/actions/actions.js  | 22 ++++++++++++++++++++++
 src/store/reducers/reducer.js | 25 +++++++++++++++++++++++++
 5 files changed, 74 insertions(+), 15 deletions(-)
 create mode 100644 src/store/actions/actions.js
 create mode 100644 src/store/reducers/reducer.js

diff --git a/package.json b/package.json
index 0bc326c..0339a1f 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,8 @@
     "react-dom": "^16.4.1",
     "react-redux": "^5.0.7",
     "react-scripts": "1.1.4",
-    "redux": "^4.0.0"
+    "redux": "^4.0.0",
+    "redux-thunk": "2.3.0"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -15,4 +16,4 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
-}
+}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 5b72cc5..838abe9 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,8 @@
 import React, { Component } from "react";
 import "./App.css";
 import { connect } from "react-redux";
+import * as actionCreator from "./store/actions/actions";
+import logo from "./logo.svg";
 
 class App extends Component {
   render() {
@@ -11,6 +13,9 @@ class App extends Component {
         </div>
         <button onClick={this.props.onAgeUp}>Age UP</button>
         <button onClick={this.props.onAgeDown}>Age Down</button>
+        {this.props.loading && (
+          <img src="logo" alt={logo} className="App-logo" />
+        )}
       </div>
     );
   }
@@ -18,14 +23,15 @@ class App extends Component {
 
 const mapStateToProps = state => {
   return {
-    age: state.age
+    age: state.age,
+    loading: state.loading
   };
 };
 
 const mapDispachToProps = dispatch => {
   return {
-    onAgeUp: () => dispatch({ type: "AGE_UP", value: 1 }),
-    onAgeDown: () => dispatch({ type: "AGE_DOWN", value: 1 })
+    onAgeUp: () => dispatch(actionCreator.ageUp(1)),
+    onAgeDown: () => dispatch(actionCreator.ageDown(1))
   };
 };
 export default connect(
diff --git a/src/index.js b/src/index.js
index 128ad10..da5f8c7 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,13 +1,18 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import reducer from './store/reducer';
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import App from "./App";
+import reducer from "./store/reducers/reducer";
+import thunk from "redux-thunk";
 
-import { Provider } from 'react-redux';
-import { createStore } from 'redux';
+import { Provider } from "react-redux";
+import { createStore, applyMiddleware } from "redux";
 
-const store = createStore(reducer);
-
-ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));
+const store = createStore(reducer, applyMiddleware(thunk));
 
+ReactDOM.render(
+  <Provider store={store}>
+    <App />
+  </Provider>,
+  document.getElementById("root")
+);
diff --git a/src/store/actions/actions.js b/src/store/actions/actions.js
new file mode 100644
index 0000000..cc9f3f0
--- /dev/null
+++ b/src/store/actions/actions.js
@@ -0,0 +1,22 @@
+export const loading = () => {
+  return {
+    type: "LOADING"
+  };
+};
+
+export const ageUpAsnc = value => {
+  return { type: "AGE_UP", value };
+};
+
+export const ageUp = value => {
+  return dispatch => {
+    dispatch(loading());
+    setTimeout(() => {
+      dispatch(ageUpAsnc(value));
+    }, 5000);
+  };
+};
+
+export const ageDown = value => {
+  return { type: "AGE_DOWN", value };
+};
diff --git a/src/store/reducers/reducer.js b/src/store/reducers/reducer.js
new file mode 100644
index 0000000..46e2f23
--- /dev/null
+++ b/src/store/reducers/reducer.js
@@ -0,0 +1,25 @@
+const initialState = {
+  age: 20,
+  loading: false
+};
+
+const reducer = (state = initialState, action) => {
+  const newState = { ...state };
+
+  switch (action.type) {
+    case "AGE_UP":
+      newState.age += action.value;
+      newState.loading = false;
+      break;
+
+    case "AGE_DOWN":
+      newState.age -= action.value;
+      break;
+    case "LOADING":
+      newState.loading = true;
+      break;
+  }
+  return newState;
+};
+
+export default reducer;