From bc0b89ba489c5d89c1798bfc9e369669b32ae3ee Mon Sep 17 00:00:00 2001
From: alexlee-dev <alex@alexlee.dev>
Date: Tue, 20 Aug 2019 22:29:07 -0700
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20ability=20to=20remove=20an=20?=
 =?UTF-8?q?item=20from=20the=20ship's=20cargo=20hold.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/redux/actions/ship.js  |  8 ++++++++
 src/redux/reducers/ship.js | 19 ++++++++++++++-----
 src/views/ship.js          | 32 ++++++++++++++++++++++++--------
 3 files changed, 46 insertions(+), 13 deletions(-)

diff --git a/src/redux/actions/ship.js b/src/redux/actions/ship.js
index 1622275..ae0d7b1 100644
--- a/src/redux/actions/ship.js
+++ b/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
diff --git a/src/redux/reducers/ship.js b/src/redux/reducers/ship.js
index bd6cec1..6fe88d7 100644
--- a/src/redux/reducers/ship.js
+++ b/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
   }
diff --git a/src/views/ship.js b/src/views/ship.js
index 4fecd6d..2944839 100644
--- a/src/views/ship.js
+++ b/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)