feat: Implement undo action on back button

When the user clicks on the back button, the last action is undone.
This is done through undo-redux that handle the logic.
Note a small refacto was necessary, so the last card revealing is no
longer a dedicated action but rather handled in the moveCard reducer
method, as this was troublesome when undoing action.

Author: paultranvan

package-lock.json

@@ -13,6 +13,7 @@
     "react-redux": "^5.0.7",
     "react-scripts": "3.4.1",
     "redux": "^4.0.0",
+    "redux-undo": "^1.0.1",
     "semantic-ui-css": "^2.4.1",
     "semantic-ui-react": "^0.88.2"
   },

package.json

@@ -85,7 +85,7 @@ const App = ({ cards, game }) => {
 const mapStateToProps = (state) => {
   //console.log('state : ', state)
   const { cards, game } = state
-  return { cards, game }
+  return { cards: cards.present, game }
 }
 
 export default connect(mapStateToProps)(App)

src/App.js

@@ -1,24 +1,27 @@
 import React from 'react'
 import { connect } from 'react-redux'
+import { ActionCreators } from 'redux-undo'
 import { Segment, Button, Icon } from 'semantic-ui-react'
-
 import { cheatMode } from '../redux/actions/actions'
 
 const mapDispatchToProps = (dispatch) => {
   return {
     cheatMode: (id, card) => {
       dispatch(cheatMode(card))
+    },
+    undo: () => {
+      dispatch(ActionCreators.undo())
     }
   }
 }
 
-const ActionButtons = ({ game, cheatMode }) => {
+const ActionButtons = ({ game, cheatMode, undo }) => {
   return (
     <Segment>
       <Button className="ui red huge circular icon Button">
         <Icon name="home"></Icon>
       </Button>
-      <Button className="ui red huge circular icon Button">
+      <Button className="ui red huge circular icon Button" onClick={undo}>
         <Icon name="reply"></Icon>
       </Button>
       <Button className="ui red huge circular icon Button">

src/components/ActionButtons.jsx

@@ -8,7 +8,8 @@ import { findAutoMoveTarget } from '../game/game'
 import { moveCard } from '../redux/actions/actions'
 
 const mapStateToProps = (state, ownProps) => {
-  const { cards, game } = state
+  const game = state.game
+  const cards = state.cards.present
   return {
     isLastCard: isLastContainerCard(cards, ownProps),
     findTarget: () => {

src/components/Card.jsx

@@ -1,18 +1,15 @@
 import React, { useEffect } from 'react'
 import { connect } from 'react-redux'
 import { useDrop } from 'react-dnd'
-import {
-  moveCard,
-  revealLastColumnCard,
-  checkGameWon
-} from '../redux/actions/actions'
+import { moveCard, checkGameWon } from '../redux/actions/actions'
 import { canPlayInColumn } from '../game/game'
 import Card from './Card'
 import Empty from './Empty'
 import { Types } from '../game/consts'
 
 const mapStateToProps = (state, ownProps) => {
-  const { cards, game } = state
+  const game = state.game
+  const cards = state.cards.present
   return {
     getAllColumnsCards: () => cards[Types.COLUMNS],
     column: cards[Types.COLUMNS][ownProps.id],
@@ -25,9 +22,6 @@ const mapDispatchToProps = (dispatch) => {
     dropCard: (id, card) => {
       dispatch(moveCard(card, { type: Types.COLUMNS, id }))
     },
-    makeLastCardVisible: (id) => {
-      dispatch(revealLastColumnCard(id))
-    },
     checkGameWon: (columns) => {
       dispatch(checkGameWon(columns))
     }
@@ -39,7 +33,6 @@ const Column = ({
   column,
   getAllColumnsCards,
   dropCard,
-  makeLastCardVisible,
   canDropInColumn,
   checkGameWon
 }) => {
@@ -54,13 +47,10 @@ const Column = ({
     }
   })
 
+  const allCards = getAllColumnsCards()
   useEffect(() => {
-    // Make last column card visible
-    if (column.length > 0 && !column[column.length - 1].visible) {
-      makeLastCardVisible(id)
-      checkGameWon(getAllColumnsCards())
-    }
-  })
+    checkGameWon(allCards)
+  }, [checkGameWon, allCards])
 
   const renderCard = (card, position, children) => {
     return (

src/components/Column.jsx

@@ -9,7 +9,8 @@ import { isSingleCardDrop } from '../redux/helpers'
 import { canPlayInFoundation } from '../game/game'
 
 const mapStateToProps = (state, ownProps) => {
-  const { cards, game } = state
+  const game = state.game
+  const cards = state.cards.present
   return {
     canDropInFoundation: (item) =>
       isSingleCardDrop(cards, item) &&

src/components/Foundation.jsx

@@ -14,6 +14,10 @@ export const initDeck = () => {
     const columnCards = []
     for (let j = 0; j < i + 1; j++) {
       const card = pickRandomCard(shuffledDeck)
+      if (j === i) {
+        // Last column card
+        card.visible = true
+      }
       columnCards.push(card)
     }
     columns.push(columnCards)

src/game/init.js

@@ -8,6 +8,13 @@ import {
 import { Types } from '../../game/consts'
 import { getColumnChildCards } from '../helpers'
 
+const revealLastColumnCard = (state, columnId) => {
+  const columnCards = state[Types.COLUMNS][columnId]
+  if (columnCards.length > 0) {
+    columnCards[columnCards.length - 1].visible = true
+  }
+}
+
 // XXX - We use immer to update state to ease state mutations
 // When doing a mutation on a nested level, all involved levels must be
 // shallow copied, as it keeps references.
@@ -23,17 +30,23 @@ const moveCard = (state, card, destination) => {
   }
 
   return produce(state, (draft) => {
-    if (
-      card.container.type === Types.COLUMNS ||
-      card.container.type === Types.FOUNDATION
-    ) {
+    if (sourceType === Types.COLUMNS || sourceType === Types.FOUNDATION) {
+      // Remove card from column or foundation
       draft[sourceType][card.container.id].splice(
         draft[sourceType][card.container.id].length - cards.length
       )
     } else {
+      // Remove card from stock
       draft[sourceType].splice(draft[sourceType].length - 1)
     }
+
+    // Add card to destination
     draft[targetType][destination.id].push(...cards)
+
+    // Make last column card visible
+    if (sourceType === Types.COLUMNS) {
+      revealLastColumnCard(draft, card.container.id)
+    }
   })
 }
 
@@ -52,13 +65,6 @@ const refillStock = (state) => {
   })
 }
 
-const revealLastColumnCard = (state, columnId) => {
-  return produce(state, (draft) => {
-    const column = draft.columns[columnId]
-    draft.columns[columnId][column.length - 1].visible = true
-  })
-}
-
 const cards = (state = {}, action) => {
   switch (action.type) {
     case MOVE_CARD:

src/redux/reducers/cards.js

@@ -1,10 +1,13 @@
 import { combineReducers } from 'redux'
-import cards from './cards'
-import game from './game'
+import undoable from 'redux-undo'
+import cardsReducer from './cards'
+import gameReducer from './game'
 
 const rootReducer = combineReducers({
-  cards,
-  game
+  cards: undoable(cardsReducer, {
+    limit: false
+  }),
+  game: gameReducer
 })
 
 export default rootReducer