🔀 Merge pull request #21 from alexlee-dev/feature/remove-cargo

✨ Add ability to remove an item from the ship's cargo hold.

src/redux/actions/ship.js

@@ -1,6 +1,7 @@
 // * ACTION TYPES
 const STORE_CARGO = 'STORE_CARGO'
 const SET_SHIP = 'SET_SHIP'
+const REMOVE_CARGO = 'REMOVE_CARGO'
 
 // * ACTION GENERATORS
 export const storeCargo = item => ({
@@ -12,6 +13,13 @@ export const storeCargo = item => ({
 
 export const setShip = ship => ({ type: SET_SHIP, payload: { ship } })
 
+export const removeCargo = item => ({
+  type: REMOVE_CARGO,
+  payload: {
+    item
+  }
+})
+
 // * PROMISES
 
 // * THUNKS

src/redux/reducers/ship.js

@@ -5,12 +5,21 @@ const shipDefaultState = {
 export default (state = shipDefaultState, action) => {
   switch (action.type) {
     case 'STORE_CARGO':
-      const { item } = action.payload
-
-      return Object.assign({}, state, { cargo: [...state.cargo, item] })
+      return Object.assign({}, state, {
+        cargo: [...state.cargo, action.payload.item]
+      })
     case 'SET_SHIP':
-      const { ship } = action.payload
-      return ship
+      return action.payload.ship
+    case 'REMOVE_CARGO':
+      const itemIndex = state.cargo.findIndex(
+        item => item.id === action.payload.item.id
+      )
+
+      const newCargo = Array.from(state.cargo)
+
+      newCargo.splice(itemIndex, 1)
+
+      return Object.assign({}, state, { cargo: newCargo })
     default:
       return state
   }

src/views/ship.js

@@ -1,26 +1,42 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
+import { Box, Text, Button } from 'grommet'
+import { Subtract } from 'grommet-icons'
+import { removeCargo } from '../redux/actions/ship'
 
-const ShipView = ({ cargo }) => {
+const ShipView = ({ cargo, handleRemoveCargo }) => {
   return (
     <div>
       <h2>Your Ship</h2>
       <h3>Cargo</h3>
-      <ul>
-        {cargo.map(({ name }, i) => (
-          <li key={i}>{name}</li>
-        ))}
-      </ul>
+      {cargo.map(item => (
+        <Box direction="row" gap="medium" key={item.id}>
+          <Text>{item.name}</Text>
+          <Button
+            hoverIndicator
+            icon={<Subtract />}
+            onClick={() => handleRemoveCargo(item)}
+            plain
+          />
+        </Box>
+      ))}
     </div>
   )
 }
 
 ShipView.propTypes = {
   cargo: PropTypes.array.isRequired,
-  dispatch: PropTypes.func.isRequired
+  handleRemoveCargo: PropTypes.func.isRequired
 }
 
 const mapStateToProps = ({ ship }) => ({ cargo: ship.cargo })
 
-export default connect(mapStateToProps)(ShipView)
+const mapDispatchToProps = dispatch => ({
+  handleRemoveCargo: item => dispatch(removeCargo(item))
+})
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ShipView)