add_enahancements loading disable buttons

src/containers/home/index.js

@@ -1,29 +1,43 @@
-import React from 'react'
-import { push } from 'connected-react-router'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
 import {
+  decrement,
+  decrementAsync,
   increment,
   incrementAsync,
-  decrement,
-  decrementAsync
 } from '../../modules/counter'
 
-const Home = props => (
+import React from 'react'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { push } from 'connected-react-router'
+
+const Home = (props) => (
   <div>
     <h1>Home</h1>
     <p>Count: {props.count}</p>
+    {(props.isIncrementing || props.isDecrementing) && <div>Loading ....</div>}
 
     <p>
-      <button onClick={props.increment}>Increment</button>
-      <button onClick={props.incrementAsync} disabled={props.isIncrementing}>
+      <button
+        onClick={props.increment}
+        disabled={props.isDecrementing || props.isIncrementing}>
+        Increment
+      </button>
+      <button
+        onClick={props.incrementAsync}
+        disabled={props.isDecrementing || props.isIncrementing}>
         Increment Async
       </button>
     </p>
 
     <p>
-      <button onClick={props.decrement}>Decrement</button>
-      <button onClick={props.decrementAsync} disabled={props.isDecrementing}>
+      <button
+        onClick={props.decrement}
+        disabled={props.isDecrementing || props.isIncrementing}>
+        Decrement
+      </button>
+      <button
+        onClick={props.decrementAsync}
+        disabled={props.isDecrementing || props.isIncrementing}>
         Decrement Async
       </button>
     </p>
@@ -39,22 +53,19 @@ const Home = props => (
 const mapStateToProps = ({ counter }) => ({
   count: counter.count,
   isIncrementing: counter.isIncrementing,
-  isDecrementing: counter.isDecrementing
+  isDecrementing: counter.isDecrementing,
 })
 
-const mapDispatchToProps = dispatch =>
+const mapDispatchToProps = (dispatch) =>
   bindActionCreators(
     {
       increment,
       incrementAsync,
       decrement,
       decrementAsync,
-      changePage: () => push('/about-us')
+      changePage: () => push('/about-us'),
     },
     dispatch
   )
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(Home)
+export default connect(mapStateToProps, mapDispatchToProps)(Home)

src/modules/counter.js

@@ -6,35 +6,35 @@ export const DECREMENT = 'counter/DECREMENT'
 const initialState = {
   count: 0,
   isIncrementing: false,
-  isDecrementing: false
+  isDecrementing: false,
 }
 
 export default (state = initialState, action) => {
   switch (action.type) {
     case INCREMENT_REQUESTED:
       return {
         ...state,
-        isIncrementing: true
+        isIncrementing: true,
       }
 
     case INCREMENT:
       return {
         ...state,
         count: state.count + 1,
-        isIncrementing: !state.isIncrementing
+        isIncrementing: !state.isIncrementing,
       }
 
     case DECREMENT_REQUESTED:
       return {
         ...state,
-        isDecrementing: true
+        isDecrementing: true,
       }
 
     case DECREMENT:
       return {
         ...state,
         count: state.count - 1,
-        isDecrementing: !state.isDecrementing
+        isDecrementing: !state.isDecrementing,
       }
 
     default:
@@ -43,52 +43,52 @@ export default (state = initialState, action) => {
 }
 
 export const increment = () => {
-  return dispatch => {
+  return (dispatch) => {
     dispatch({
-      type: INCREMENT_REQUESTED
+      type: INCREMENT_REQUESTED,
     })
 
     dispatch({
-      type: INCREMENT
+      type: INCREMENT,
     })
   }
 }
 
 export const incrementAsync = () => {
-  return dispatch => {
+  return (dispatch) => {
     dispatch({
-      type: INCREMENT_REQUESTED
+      type: INCREMENT_REQUESTED,
     })
 
     return setTimeout(() => {
       dispatch({
-        type: INCREMENT
+        type: INCREMENT,
       })
     }, 3000)
   }
 }
 
 export const decrement = () => {
-  return dispatch => {
+  return (dispatch) => {
     dispatch({
-      type: DECREMENT_REQUESTED
+      type: DECREMENT_REQUESTED,
     })
 
     dispatch({
-      type: DECREMENT
+      type: DECREMENT,
     })
   }
 }
 
 export const decrementAsync = () => {
-  return dispatch => {
+  return (dispatch) => {
     dispatch({
-      type: DECREMENT_REQUESTED
+      type: DECREMENT_REQUESTED,
     })
 
     return setTimeout(() => {
       dispatch({
-        type: DECREMENT
+        type: DECREMENT,
       })
     }, 3000)
   }