From de59ad720445d19076722c1de3c60fbea183c34a Mon Sep 17 00:00:00 2001
From: alexlee-dev <alex@alexlee.dev>
Date: Thu, 22 Aug 2019 18:41:29 -0700
Subject: [PATCH 1/3] =?UTF-8?q?=E2=9C=A8Ability=20to=20sell=20/=20buy=20it?=
 =?UTF-8?q?ems=20by=20quantity?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ItemDisplay.js      |  49 +++++++++++
 src/components/ItemDisplayInput.js |  67 +++++++++++++++
 src/components/PlanetDisplay.js    |  89 ++++++++++++++++++++
 src/redux/actions/ship.js          |   5 +-
 src/redux/actions/world.js         |   5 +-
 src/redux/reducers/ship.js         |  47 ++++++++++-
 src/redux/reducers/world.js        |  38 +++++++--
 src/util.js                        |   3 +-
 src/views/planets.js               | 131 ++---------------------------
 src/views/ship.js                  |  20 +++--
 10 files changed, 311 insertions(+), 143 deletions(-)
 create mode 100644 src/components/ItemDisplay.js
 create mode 100644 src/components/ItemDisplayInput.js
 create mode 100644 src/components/PlanetDisplay.js

diff --git a/src/components/ItemDisplay.js b/src/components/ItemDisplay.js
new file mode 100644
index 0000000..29e4047
--- /dev/null
+++ b/src/components/ItemDisplay.js
@@ -0,0 +1,49 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Box, Text } from 'grommet'
+import { connect } from 'react-redux'
+
+import ItemDisplayInput from './ItemDisplayInput'
+
+const ItemDisplay = ({ item, location, shipLocationValue }) => {
+  const { destination, id, name, quantity, space, value } = item
+
+  return (
+    <Box
+      align="center"
+      direction="row"
+      fill="horizontal"
+      justify="start"
+      key={id}
+    >
+      <Box pad="medium">
+        <Text>Name: {name}</Text>
+      </Box>
+      <Box pad="medium">
+        <Text>Quantity: {quantity}</Text>
+      </Box>
+      <Box pad="medium">
+        <Text>Space: {space}</Text>
+      </Box>
+      <Box pad="medium">
+        <Text>Value: {value}</Text>
+      </Box>
+      <Box pad="medium">
+        <Text>Destination: {destination.name}</Text>
+      </Box>
+      {shipLocationValue === location && <ItemDisplayInput item={item} />}
+    </Box>
+  )
+}
+
+ItemDisplay.propTypes = {
+  item: PropTypes.object.isRequired,
+  location: PropTypes.number.isRequired,
+  shipLocationValue: PropTypes.number.isRequired
+}
+
+const mapStateToProps = ({ ship }) => ({
+  shipLocationValue: ship.location.value
+})
+
+export default connect(mapStateToProps)(ItemDisplay)
diff --git a/src/components/ItemDisplayInput.js b/src/components/ItemDisplayInput.js
new file mode 100644
index 0000000..71941a4
--- /dev/null
+++ b/src/components/ItemDisplayInput.js
@@ -0,0 +1,67 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+import { Box, Button } from 'grommet'
+import { Add } from 'grommet-icons'
+import { connect } from 'react-redux'
+import { storeCargo } from '../redux/actions/ship'
+import { removeItem } from '../redux/actions/world'
+
+const ItemDisplayInput = ({
+  handleStoreCargo,
+  item,
+  shipCargoVolumeRemaining
+}) => {
+  const { id, quantity } = item
+
+  const [value, setValue] = useState(0)
+
+  return (
+    <Box gap="small" pad="medium">
+      <Button
+        data-testid={`add-button-${id}`}
+        disabled={shipCargoVolumeRemaining === 0 || value === 0}
+        hoverIndicator
+        icon={<Add />}
+        onClick={() => handleStoreCargo(item, value)}
+        plain
+      />
+      <label htmlFor={`quantity-input-${id}`}>Quantity to Add</label>
+      <input
+        id={`quantity-input-${id}`}
+        max={
+          shipCargoVolumeRemaining > quantity
+            ? quantity
+            : shipCargoVolumeRemaining
+        }
+        min={0}
+        onChange={e => setValue(Number(e.target.value))}
+        type="number"
+        value={value}
+      />
+    </Box>
+  )
+}
+
+ItemDisplayInput.propTypes = {
+  handleStoreCargo: PropTypes.func.isRequired,
+  item: PropTypes.object.isRequired,
+  shipCargoVolumeRemaining: PropTypes.number.isRequired
+}
+
+const mapStateToProps = ({ ship }) => ({
+  shipCargoVolumeRemaining: ship.cargo.volumeRemaining
+})
+
+const mapDispatchToProps = dispatch => ({
+  handleStoreCargo: (item, quantity) => {
+    // * dispatch an action to store the item in ship cargo
+    dispatch(storeCargo(item, quantity))
+    // * dispatch an action to remove the item from the list of stored items on this planet
+    dispatch(removeItem(item, quantity))
+  }
+})
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ItemDisplayInput)
diff --git a/src/components/PlanetDisplay.js b/src/components/PlanetDisplay.js
new file mode 100644
index 0000000..1f7f0f3
--- /dev/null
+++ b/src/components/PlanetDisplay.js
@@ -0,0 +1,89 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import { Box, Button, Heading } from 'grommet'
+import { Target } from 'grommet-icons'
+import {
+  setShipLocationName,
+  setShipLocationValue,
+  removeCargo
+} from '../redux/actions/ship'
+import { addCash } from '../redux/actions/user'
+import ItemDisplay from './ItemDisplay'
+
+const PlanetDisplay = ({
+  handleShipTravel,
+  planet,
+  shipCargo,
+  shipLocationValue
+}) => {
+  const { isHomePlanet, items, location, name } = planet
+
+  return (
+    <div key={name}>
+      <Box direction="row" gap="medium">
+        <Heading level="2">
+          {isHomePlanet ? name + ' - Home Planet' : name}
+        </Heading>
+        {shipLocationValue !== location && (
+          <Button
+            data-testid={`travel-button-${name}`}
+            hoverIndicator
+            icon={<Target />}
+            onClick={() =>
+              handleShipTravel({ name, value: location }, shipCargo)
+            }
+            plain
+          />
+        )}
+      </Box>
+      <span>Items:</span>
+      {items.map(item => (
+        <ItemDisplay key={item.id} item={item} location={location} />
+      ))}
+    </div>
+  )
+}
+
+PlanetDisplay.propTypes = {
+  handleShipTravel: PropTypes.func.isRequired,
+  planet: PropTypes.object.isRequired,
+  shipCargo: PropTypes.object.isRequired,
+  shipLocationValue: PropTypes.number.isRequired
+}
+
+const mapStateToProps = ({ ship }) => ({
+  shipCargo: ship.cargo,
+  shipLocationValue: ship.location.value
+})
+
+const mapDispatchToProps = dispatch => ({
+  handleShipTravel: (destination, shipCargo) => {
+    const sellableItems = shipCargo.items.filter(
+      item => item.destination.value === destination.value
+    )
+
+    let profit = 0
+
+    sellableItems.forEach(item => {
+      const { quantity, value } = item
+      const itemProfit = quantity * value
+      profit += itemProfit
+    })
+
+    dispatch(addCash(profit))
+
+    sellableItems.forEach(item => {
+      // * Remove the item from the ship cargo
+      dispatch(removeCargo(item))
+    })
+
+    dispatch(setShipLocationName(destination.name))
+    dispatch(setShipLocationValue(destination.value))
+  }
+})
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(PlanetDisplay)
diff --git a/src/redux/actions/ship.js b/src/redux/actions/ship.js
index af6c7dd..9176fbd 100644
--- a/src/redux/actions/ship.js
+++ b/src/redux/actions/ship.js
@@ -22,10 +22,11 @@ export const setShipLocationValue = value => ({
   payload: { value }
 })
 
-export const storeCargo = item => ({
+export const storeCargo = (item, quantity) => ({
   type: STORE_CARGO,
   payload: {
-    item
+    item,
+    quantity
   }
 })
 
diff --git a/src/redux/actions/world.js b/src/redux/actions/world.js
index dfbaab4..410cef1 100644
--- a/src/redux/actions/world.js
+++ b/src/redux/actions/world.js
@@ -10,10 +10,11 @@ export const clearItems = () => ({ type: CLEAR_ITEMS })
 
 export const refreshItems = () => ({ type: REFRESH_ITEMS })
 
-export const removeItem = item => ({
+export const removeItem = (item, quantity) => ({
   type: REMOVE_ITEM,
   payload: {
-    item
+    item,
+    quantity
   }
 })
 
diff --git a/src/redux/reducers/ship.js b/src/redux/reducers/ship.js
index 423af2d..3b8c82c 100644
--- a/src/redux/reducers/ship.js
+++ b/src/redux/reducers/ship.js
@@ -1,5 +1,8 @@
 const shipDefaultState = {
-  cargo: [],
+  cargo: {
+    items: [],
+    volumeRemaining: 5
+  },
   location: {
     name: null,
     value: null
@@ -11,7 +14,14 @@ export default (state = shipDefaultState, action) => {
     case 'REMOVE_CARGO':
       return {
         ...state,
-        cargo: state.cargo.filter(item => item.id !== action.payload.item.id)
+        cargo: {
+          ...state.cargo,
+          items: state.cargo.items.filter(
+            item => item.id !== action.payload.item.id
+          ),
+          volumeRemaining:
+            state.cargo.volumeRemaining + action.payload.item.quantity
+        }
       }
     case 'SET_SHIP_LOCATION_NAME':
       return {
@@ -24,7 +34,38 @@ export default (state = shipDefaultState, action) => {
         location: { ...state.location, value: action.payload.value }
       }
     case 'STORE_CARGO':
-      return { ...state, cargo: [...state.cargo, action.payload.item] }
+      let updatedItems = state.cargo.items.map(currentItem => {
+        if (action.payload.item.id === currentItem.id) {
+          // * This item is the same, and you should just add the quantity
+          return {
+            ...currentItem,
+            quantity: currentItem.quantity + action.payload.quantity
+          }
+        } else {
+          // * This currentItem is different, and you should return the currentItem
+          return currentItem
+        }
+      })
+
+      if (
+        !updatedItems.find(
+          currentItem => currentItem.id === action.payload.item.id
+        )
+      ) {
+        updatedItems.push({
+          ...action.payload.item,
+          quantity: action.payload.quantity
+        })
+      }
+
+      return {
+        ...state,
+        cargo: {
+          ...state.cargo,
+          items: updatedItems,
+          volumeRemaining: state.cargo.volumeRemaining - action.payload.quantity
+        }
+      }
     default:
       return state
   }
diff --git a/src/redux/reducers/world.js b/src/redux/reducers/world.js
index baf8179..7561595 100644
--- a/src/redux/reducers/world.js
+++ b/src/redux/reducers/world.js
@@ -21,17 +21,43 @@ export default (state = worldDefaultState, action) => {
         }))
       }
     case 'REMOVE_ITEM':
-      const { item } = action.payload
+      const { item, quantity } = action.payload
 
       const updatedPlanets = state.planets.map(planet => {
         const { isHomePlanet, items, location, name } = planet
 
         if (planet.items.includes(item)) {
-          return {
-            isHomePlanet,
-            items: items.filter(currentItem => item !== currentItem),
-            location,
-            name
+          // * This plaanet has the item in question
+          // * Figure out if all of the quantity needs to be removed
+
+          if (quantity === item.quantity) {
+            // * All of the item should be removed
+            return {
+              isHomePlanet,
+              items: items.filter(currentItem => item !== currentItem),
+              location,
+              name
+            }
+          } else {
+            // * Only some of the item quantity should be removed
+            const updatedItems = items.map(currentItem => {
+              if (item.id === currentItem.id) {
+                // * figure out quantity
+                return {
+                  ...currentItem,
+                  quantity: currentItem.quantity - quantity
+                }
+              } else {
+                return currentItem
+              }
+            })
+
+            return {
+              isHomePlanet,
+              items: updatedItems,
+              location,
+              name
+            }
           }
         } else {
           return planet
diff --git a/src/util.js b/src/util.js
index 7a156b9..42b3ec8 100644
--- a/src/util.js
+++ b/src/util.js
@@ -24,7 +24,8 @@ export const generateItems = possibleDestinations => {
         destination: {
           name: destinationPlanet.name,
           value: destinationPlanet.location
-        }
+        },
+        quantity: 10
       }
     )
     items.push(item)
diff --git a/src/views/planets.js b/src/views/planets.js
index e7a0ff0..dfbf424 100644
--- a/src/views/planets.js
+++ b/src/views/planets.js
@@ -1,139 +1,24 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import { Box, Text, Button, Heading } from 'grommet'
-import { Add, Target } from 'grommet-icons'
-import useLocalStorage from '../hooks/useLocalStorage'
-import {
-  storeCargo,
-  setShipLocationName,
-  setShipLocationValue,
-  removeCargo
-} from '../redux/actions/ship'
-import { addCash } from '../redux/actions/user'
-import { removeItem } from '../redux/actions/world'
-
-const PlanetsView = ({
-  handleShipTravel,
-  handleStoreCargo,
-  planets,
-  shipCargo,
-  shipCargoLength,
-  shipLocationValue
-}) => {
-  const [storagePlanets, setStoragePlanets] = useLocalStorage('planets', [])
+import PlanetDisplay from '../components/PlanetDisplay'
 
+const PlanetsView = ({ planets }) => {
   return (
     <div>
-      {planets.map(({ items, isHomePlanet, location, name }) => (
-        <div key={name}>
-          <Box direction="row" gap="medium">
-            <Heading level="2">
-              {isHomePlanet ? name + ' - Home Planet' : name}
-            </Heading>
-            {shipLocationValue !== location && (
-              <Button
-                data-testid={`travel-button-${name}`}
-                hoverIndicator
-                icon={<Target />}
-                onClick={() =>
-                  handleShipTravel({ name, value: location }, shipCargo)
-                }
-                plain
-              />
-            )}
-          </Box>
-          <span>Items:</span>
-          {items.map(item => {
-            const { destination, id, name, space, value } = item
-
-            return (
-              <Box
-                align="center"
-                direction="row"
-                fill="horizontal"
-                justify="start"
-                key={id}
-              >
-                <Box pad="medium">
-                  <Text>Name: {name}</Text>
-                </Box>
-                <Box pad="medium">
-                  <Text>Space: {space}</Text>
-                </Box>
-                <Box pad="medium">
-                  <Text>Value: {value}</Text>
-                </Box>
-                <Box pad="medium">
-                  <Text>Destination: {destination.name}</Text>
-                </Box>
-                {shipLocationValue === location && (
-                  <Box pad="medium">
-                    <Button
-                      data-testid={`add-button-${id}`}
-                      disabled={shipCargoLength === 5}
-                      hoverIndicator
-                      icon={<Add />}
-                      onClick={() =>
-                        handleStoreCargo(
-                          item,
-                          storagePlanets,
-                          setStoragePlanets
-                        )
-                      }
-                      plain
-                    />
-                  </Box>
-                )}
-              </Box>
-            )
-          })}
-        </div>
+      {planets.map((planet, i) => (
+        <PlanetDisplay key={i} planet={planet} />
       ))}
     </div>
   )
 }
 
 PlanetsView.propTypes = {
-  handleShipTravel: PropTypes.func.isRequired,
-  handleStoreCargo: PropTypes.func.isRequired,
-  planets: PropTypes.array.isRequired,
-  shipCargo: PropTypes.array.isRequired,
-  shipCargoLength: PropTypes.number.isRequired,
-  shipLocationValue: PropTypes.number.isRequired
+  planets: PropTypes.array.isRequired
 }
 
-const mapStateToProps = ({ ship, world }) => ({
-  planets: world.planets,
-  shipCargo: ship.cargo,
-  shipCargoLength: ship.cargo.length,
-  shipLocationValue: ship.location.value
-})
-
-const mapDispatchToProps = dispatch => ({
-  handleStoreCargo: (item, currentPlanets, setStoragePlanets) => {
-    // * dispatch an action to store the item in ship cargo
-    dispatch(storeCargo(item))
-    // * dispatch an action to remove the item from the list of stored items on this planet
-    dispatch(removeItem(item))
-  },
-  handleShipTravel: (destination, shipCargo) => {
-    const sellableItems = shipCargo.filter(
-      item => item.destination.value === destination.value
-    )
-
-    sellableItems.forEach(item => {
-      // * Add the value of this item to the user's cash
-      dispatch(addCash(item.value))
-      // * Remove the item from the ship cargo
-      dispatch(removeCargo(item))
-    })
-    dispatch(setShipLocationName(destination.name))
-    dispatch(setShipLocationValue(destination.value))
-  }
+const mapStateToProps = ({ world }) => ({
+  planets: world.planets
 })
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(PlanetsView)
+export default connect(mapStateToProps)(PlanetsView)
diff --git a/src/views/ship.js b/src/views/ship.js
index f605026..5db0113 100644
--- a/src/views/ship.js
+++ b/src/views/ship.js
@@ -5,16 +5,22 @@ import { Box, Text, Button } from 'grommet'
 import { Subtract } from 'grommet-icons'
 import { removeCargo } from '../redux/actions/ship'
 
-const ShipView = ({ cargo, handleRemoveCargo, location }) => {
+const ShipView = ({ items, handleRemoveCargo, location, volumeRemaining }) => {
   return (
     <div>
       <h2>Your Ship</h2>
       <h3>Cargo</h3>
-      {cargo.map(item => (
+      <Box>
+        <Text weight="bold">Volume Remaining:</Text>
+        <Text>{volumeRemaining}</Text>
+      </Box>
+      {items.map(item => (
         <Box direction="row" gap="medium" key={item.id}>
           <Text>{item.name}</Text>
           <Text weight="bold">Destination:</Text>
           <Text>{item.destination.name}</Text>
+          <Text weight="bold">Quantity:</Text>
+          <Text>{item.quantity}</Text>
           <Button
             data-testid={`remove-button-${item.id}`}
             hoverIndicator
@@ -40,14 +46,16 @@ const ShipView = ({ cargo, handleRemoveCargo, location }) => {
 }
 
 ShipView.propTypes = {
-  cargo: PropTypes.array.isRequired,
   handleRemoveCargo: PropTypes.func.isRequired,
-  location: PropTypes.object.isRequired
+  items: PropTypes.array.isRequired,
+  location: PropTypes.object.isRequired,
+  volumeRemaining: PropTypes.number.isRequired
 }
 
 const mapStateToProps = ({ ship }) => ({
-  cargo: ship.cargo,
-  location: ship.location
+  items: ship.cargo.items,
+  location: ship.location,
+  volumeRemaining: ship.cargo.volumeRemaining
 })
 
 const mapDispatchToProps = dispatch => ({

From faf744bbdb3141b21da96385d6f8e0034afd8b38 Mon Sep 17 00:00:00 2001
From: alexlee-dev <alex@alexlee.dev>
Date: Thu, 22 Aug 2019 18:51:27 -0700
Subject: [PATCH 2/3] =?UTF-8?q?=E2=9C=85=20Update=20tests?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/__tests__/App.test.js                     |   5 +
 src/__tests__/__snapshots__/App.test.js.snap  |  16 +-
 src/__tests__/components/ItemTimer.test.js    |   5 +
 .../__snapshots__/ItemTimer.test.js.snap      |   2 +-
 .../views/__snapshots__/planets.js.snap       | 240 +++++++++++++++++-
 .../views/__snapshots__/ship.js.snap          |  30 +++
 src/__tests__/views/planets.js                |  26 +-
 src/__tests__/views/ship.js                   |  26 +-
 src/fixtures.js                               |   5 +-
 9 files changed, 325 insertions(+), 30 deletions(-)

diff --git a/src/__tests__/App.test.js b/src/__tests__/App.test.js
index ec3cd12..e506e07 100644
--- a/src/__tests__/App.test.js
+++ b/src/__tests__/App.test.js
@@ -1,6 +1,11 @@
+import React from 'react'
 import { customRender } from '../test-utils'
 import App from '../App'
 
+jest.mock('../components/ItemTimer', () => {
+  return () => <span>MockedTime</span>
+})
+
 describe('<App />', () => {
   it('Should render the <App /> component.', () => {
     const container = customRender({ component: App })
diff --git a/src/__tests__/__snapshots__/App.test.js.snap b/src/__tests__/__snapshots__/App.test.js.snap
index 2b79610..9951797 100644
--- a/src/__tests__/__snapshots__/App.test.js.snap
+++ b/src/__tests__/__snapshots__/App.test.js.snap
@@ -11,7 +11,7 @@ exports[`<App /> Should render the <App /> component. 1`] = `
       Hermes
     </h1>
     <span>
-      10 minutes 0 seconds
+      MockedTime
     </span>
     <div
       class="StyledBox-sc-13pk1d4-0 CAsMy"
@@ -48,6 +48,20 @@ exports[`<App /> Should render the <App /> component. 1`] = `
       <h3>
         Cargo
       </h3>
+      <div
+        class="StyledBox-sc-13pk1d4-0 IRSNj"
+      >
+        <span
+          class="StyledText-sc-1sadyjn-0 bnqisW"
+        >
+          Volume Remaining:
+        </span>
+        <span
+          class="StyledText-sc-1sadyjn-0 fWSbXS"
+        >
+          5
+        </span>
+      </div>
       <h3>
         Location:
       </h3>
diff --git a/src/__tests__/components/ItemTimer.test.js b/src/__tests__/components/ItemTimer.test.js
index aa3f230..be03646 100644
--- a/src/__tests__/components/ItemTimer.test.js
+++ b/src/__tests__/components/ItemTimer.test.js
@@ -1,6 +1,11 @@
+import React from 'react';
 import { customRender } from '../../test-utils'
 import ItemTimer from '../../components/ItemTimer'
 
+jest.mock('../../components/ItemTimer', () => {
+  return () => <span>MockedTime</span>
+})
+
 describe('<ItemTimer />', () => {
   it('Should render the <ItemTimer /> component.', () => {
     const container = customRender({ component: ItemTimer })
diff --git a/src/__tests__/components/__snapshots__/ItemTimer.test.js.snap b/src/__tests__/components/__snapshots__/ItemTimer.test.js.snap
index 8a8665e..e49fa9a 100644
--- a/src/__tests__/components/__snapshots__/ItemTimer.test.js.snap
+++ b/src/__tests__/components/__snapshots__/ItemTimer.test.js.snap
@@ -3,7 +3,7 @@
 exports[`<ItemTimer /> Should render the <ItemTimer /> component. 1`] = `
 <DocumentFragment>
   <span>
-    10 minutes 0 seconds
+    MockedTime
   </span>
 </DocumentFragment>
 `;
diff --git a/src/__tests__/views/__snapshots__/planets.js.snap b/src/__tests__/views/__snapshots__/planets.js.snap
index b8fc0eb..9e3e64e 100644
--- a/src/__tests__/views/__snapshots__/planets.js.snap
+++ b/src/__tests__/views/__snapshots__/planets.js.snap
@@ -28,6 +28,15 @@ exports[`<PlanetsView /> Should render the <PlanetsView /> component. 1`] = `
             Name: Test Item
           </span>
         </div>
+        <div
+          class="StyledBox-sc-13pk1d4-0 hroMnY"
+        >
+          <span
+            class="StyledText-sc-1sadyjn-0 fWSbXS"
+          >
+            Quantity: 
+          </span>
+        </div>
         <div
           class="StyledBox-sc-13pk1d4-0 hroMnY"
         >
@@ -59,8 +68,9 @@ exports[`<PlanetsView /> Should render the <PlanetsView /> component. 1`] = `
           class="StyledBox-sc-13pk1d4-0 hroMnY"
         >
           <button
-            class="StyledButton-sc-323bzc-0 jAPRVi"
+            class="StyledButton-sc-323bzc-0 jJyttA"
             data-testid="add-button-0"
+            disabled=""
             type="button"
           >
             <svg
@@ -76,6 +86,24 @@ exports[`<PlanetsView /> Should render the <PlanetsView /> component. 1`] = `
               />
             </svg>
           </button>
+          <div
+            class="StyledBox__StyledBoxGap-sc-13pk1d4-1 hPsznL"
+          />
+          <label
+            for="quantity-input-0"
+          >
+            Quantity to Add
+          </label>
+          <div
+            class="StyledBox__StyledBoxGap-sc-13pk1d4-1 hPsznL"
+          />
+          <input
+            id="quantity-input-0"
+            max="4"
+            min="0"
+            type="number"
+            value="0"
+          />
         </div>
       </div>
       <div
@@ -90,6 +118,15 @@ exports[`<PlanetsView /> Should render the <PlanetsView /> component. 1`] = `
             Name: Test Item
           </span>
         </div>
+        <div
+          class="StyledBox-sc-13pk1d4-0 hroMnY"
+        >
+          <span
+            class="StyledText-sc-1sadyjn-0 fWSbXS"
+          >
+            Quantity: 
+          </span>
+        </div>
         <div
           class="StyledBox-sc-13pk1d4-0 hroMnY"
         >
@@ -121,8 +158,9 @@ exports[`<PlanetsView /> Should render the <PlanetsView /> component. 1`] = `
           class="StyledBox-sc-13pk1d4-0 hroMnY"
         >
           <button
-            class="StyledButton-sc-323bzc-0 jAPRVi"
+            class="StyledButton-sc-323bzc-0 jJyttA"
             data-testid="add-button-1"
+            disabled=""
             type="button"
           >
             <svg
@@ -138,6 +176,24 @@ exports[`<PlanetsView /> Should render the <PlanetsView /> component. 1`] = `
               />
             </svg>
           </button>
+          <div
+            class="StyledBox__StyledBoxGap-sc-13pk1d4-1 hPsznL"
+          />
+          <label
+            for="quantity-input-1"
+          >
+            Quantity to Add
+          </label>
+          <div
+            class="StyledBox__StyledBoxGap-sc-13pk1d4-1 hPsznL"
+          />
+          <input
+            id="quantity-input-1"
+            max="4"
+            min="0"
+            type="number"
+            value="0"
+          />
         </div>
       </div>
       <div
@@ -152,6 +208,15 @@ exports[`<PlanetsView /> Should render the <PlanetsView /> component. 1`] = `
             Name: Test Item
           </span>
         </div>
+        <div
+          class="StyledBox-sc-13pk1d4-0 hroMnY"
+        >
+          <span
+            class="StyledText-sc-1sadyjn-0 fWSbXS"
+          >
+            Quantity: 
+          </span>
+        </div>
         <div
           class="StyledBox-sc-13pk1d4-0 hroMnY"
         >
@@ -183,8 +248,9 @@ exports[`<PlanetsView /> Should render the <PlanetsView /> component. 1`] = `
           class="StyledBox-sc-13pk1d4-0 hroMnY"
         >
           <button
-            class="StyledButton-sc-323bzc-0 jAPRVi"
+            class="StyledButton-sc-323bzc-0 jJyttA"
             data-testid="add-button-2"
+            disabled=""
             type="button"
           >
             <svg
@@ -200,6 +266,24 @@ exports[`<PlanetsView /> Should render the <PlanetsView /> component. 1`] = `
               />
             </svg>
           </button>
+          <div
+            class="StyledBox__StyledBoxGap-sc-13pk1d4-1 hPsznL"
+          />
+          <label
+            for="quantity-input-2"
+          >
+            Quantity to Add
+          </label>
+          <div
+            class="StyledBox__StyledBoxGap-sc-13pk1d4-1 hPsznL"
+          />
+          <input
+            id="quantity-input-2"
+            max="4"
+            min="0"
+            type="number"
+            value="0"
+          />
         </div>
       </div>
       <div
@@ -214,6 +298,15 @@ exports[`<PlanetsView /> Should render the <PlanetsView /> component. 1`] = `
             Name: Test Item
           </span>
         </div>
+        <div
+          class="StyledBox-sc-13pk1d4-0 hroMnY"
+        >
+          <span
+            class="StyledText-sc-1sadyjn-0 fWSbXS"
+          >
+            Quantity: 
+          </span>
+        </div>
         <div
           class="StyledBox-sc-13pk1d4-0 hroMnY"
         >
@@ -245,8 +338,9 @@ exports[`<PlanetsView /> Should render the <PlanetsView /> component. 1`] = `
           class="StyledBox-sc-13pk1d4-0 hroMnY"
         >
           <button
-            class="StyledButton-sc-323bzc-0 jAPRVi"
+            class="StyledButton-sc-323bzc-0 jJyttA"
             data-testid="add-button-3"
+            disabled=""
             type="button"
           >
             <svg
@@ -262,6 +356,24 @@ exports[`<PlanetsView /> Should render the <PlanetsView /> component. 1`] = `
               />
             </svg>
           </button>
+          <div
+            class="StyledBox__StyledBoxGap-sc-13pk1d4-1 hPsznL"
+          />
+          <label
+            for="quantity-input-3"
+          >
+            Quantity to Add
+          </label>
+          <div
+            class="StyledBox__StyledBoxGap-sc-13pk1d4-1 hPsznL"
+          />
+          <input
+            id="quantity-input-3"
+            max="4"
+            min="0"
+            type="number"
+            value="0"
+          />
         </div>
       </div>
       <div
@@ -276,6 +388,15 @@ exports[`<PlanetsView /> Should render the <PlanetsView /> component. 1`] = `
             Name: Test Item
           </span>
         </div>
+        <div
+          class="StyledBox-sc-13pk1d4-0 hroMnY"
+        >
+          <span
+            class="StyledText-sc-1sadyjn-0 fWSbXS"
+          >
+            Quantity: 
+          </span>
+        </div>
         <div
           class="StyledBox-sc-13pk1d4-0 hroMnY"
         >
@@ -307,8 +428,9 @@ exports[`<PlanetsView /> Should render the <PlanetsView /> component. 1`] = `
           class="StyledBox-sc-13pk1d4-0 hroMnY"
         >
           <button
-            class="StyledButton-sc-323bzc-0 jAPRVi"
+            class="StyledButton-sc-323bzc-0 jJyttA"
             data-testid="add-button-4"
+            disabled=""
             type="button"
           >
             <svg
@@ -324,6 +446,24 @@ exports[`<PlanetsView /> Should render the <PlanetsView /> component. 1`] = `
               />
             </svg>
           </button>
+          <div
+            class="StyledBox__StyledBoxGap-sc-13pk1d4-1 hPsznL"
+          />
+          <label
+            for="quantity-input-4"
+          >
+            Quantity to Add
+          </label>
+          <div
+            class="StyledBox__StyledBoxGap-sc-13pk1d4-1 hPsznL"
+          />
+          <input
+            id="quantity-input-4"
+            max="4"
+            min="0"
+            type="number"
+            value="0"
+          />
         </div>
       </div>
     </div>
@@ -373,6 +513,15 @@ exports[`<PlanetsView /> Should render the <PlanetsView /> component. 1`] = `
             Name: Test Item
           </span>
         </div>
+        <div
+          class="StyledBox-sc-13pk1d4-0 hroMnY"
+        >
+          <span
+            class="StyledText-sc-1sadyjn-0 fWSbXS"
+          >
+            Quantity: 
+          </span>
+        </div>
         <div
           class="StyledBox-sc-13pk1d4-0 hroMnY"
         >
@@ -413,6 +562,15 @@ exports[`<PlanetsView /> Should render the <PlanetsView /> component. 1`] = `
             Name: Test Item
           </span>
         </div>
+        <div
+          class="StyledBox-sc-13pk1d4-0 hroMnY"
+        >
+          <span
+            class="StyledText-sc-1sadyjn-0 fWSbXS"
+          >
+            Quantity: 
+          </span>
+        </div>
         <div
           class="StyledBox-sc-13pk1d4-0 hroMnY"
         >
@@ -453,6 +611,15 @@ exports[`<PlanetsView /> Should render the <PlanetsView /> component. 1`] = `
             Name: Test Item
           </span>
         </div>
+        <div
+          class="StyledBox-sc-13pk1d4-0 hroMnY"
+        >
+          <span
+            class="StyledText-sc-1sadyjn-0 fWSbXS"
+          >
+            Quantity: 
+          </span>
+        </div>
         <div
           class="StyledBox-sc-13pk1d4-0 hroMnY"
         >
@@ -493,6 +660,15 @@ exports[`<PlanetsView /> Should render the <PlanetsView /> component. 1`] = `
             Name: Test Item
           </span>
         </div>
+        <div
+          class="StyledBox-sc-13pk1d4-0 hroMnY"
+        >
+          <span
+            class="StyledText-sc-1sadyjn-0 fWSbXS"
+          >
+            Quantity: 
+          </span>
+        </div>
         <div
           class="StyledBox-sc-13pk1d4-0 hroMnY"
         >
@@ -533,6 +709,15 @@ exports[`<PlanetsView /> Should render the <PlanetsView /> component. 1`] = `
             Name: Test Item
           </span>
         </div>
+        <div
+          class="StyledBox-sc-13pk1d4-0 hroMnY"
+        >
+          <span
+            class="StyledText-sc-1sadyjn-0 fWSbXS"
+          >
+            Quantity: 
+          </span>
+        </div>
         <div
           class="StyledBox-sc-13pk1d4-0 hroMnY"
         >
@@ -608,6 +793,15 @@ exports[`<PlanetsView /> Should render the <PlanetsView /> component. 1`] = `
             Name: Test Item
           </span>
         </div>
+        <div
+          class="StyledBox-sc-13pk1d4-0 hroMnY"
+        >
+          <span
+            class="StyledText-sc-1sadyjn-0 fWSbXS"
+          >
+            Quantity: 
+          </span>
+        </div>
         <div
           class="StyledBox-sc-13pk1d4-0 hroMnY"
         >
@@ -648,6 +842,15 @@ exports[`<PlanetsView /> Should render the <PlanetsView /> component. 1`] = `
             Name: Test Item
           </span>
         </div>
+        <div
+          class="StyledBox-sc-13pk1d4-0 hroMnY"
+        >
+          <span
+            class="StyledText-sc-1sadyjn-0 fWSbXS"
+          >
+            Quantity: 
+          </span>
+        </div>
         <div
           class="StyledBox-sc-13pk1d4-0 hroMnY"
         >
@@ -688,6 +891,15 @@ exports[`<PlanetsView /> Should render the <PlanetsView /> component. 1`] = `
             Name: Test Item
           </span>
         </div>
+        <div
+          class="StyledBox-sc-13pk1d4-0 hroMnY"
+        >
+          <span
+            class="StyledText-sc-1sadyjn-0 fWSbXS"
+          >
+            Quantity: 
+          </span>
+        </div>
         <div
           class="StyledBox-sc-13pk1d4-0 hroMnY"
         >
@@ -728,6 +940,15 @@ exports[`<PlanetsView /> Should render the <PlanetsView /> component. 1`] = `
             Name: Test Item
           </span>
         </div>
+        <div
+          class="StyledBox-sc-13pk1d4-0 hroMnY"
+        >
+          <span
+            class="StyledText-sc-1sadyjn-0 fWSbXS"
+          >
+            Quantity: 
+          </span>
+        </div>
         <div
           class="StyledBox-sc-13pk1d4-0 hroMnY"
         >
@@ -768,6 +989,15 @@ exports[`<PlanetsView /> Should render the <PlanetsView /> component. 1`] = `
             Name: Test Item
           </span>
         </div>
+        <div
+          class="StyledBox-sc-13pk1d4-0 hroMnY"
+        >
+          <span
+            class="StyledText-sc-1sadyjn-0 fWSbXS"
+          >
+            Quantity: 
+          </span>
+        </div>
         <div
           class="StyledBox-sc-13pk1d4-0 hroMnY"
         >
diff --git a/src/__tests__/views/__snapshots__/ship.js.snap b/src/__tests__/views/__snapshots__/ship.js.snap
index c64b0ec..af80e3f 100644
--- a/src/__tests__/views/__snapshots__/ship.js.snap
+++ b/src/__tests__/views/__snapshots__/ship.js.snap
@@ -9,6 +9,20 @@ exports[`<ShipView /> Should render the <ShipView /> component. 1`] = `
     <h3>
       Cargo
     </h3>
+    <div
+      class="StyledBox-sc-13pk1d4-0 IRSNj"
+    >
+      <span
+        class="StyledText-sc-1sadyjn-0 bnqisW"
+      >
+        Volume Remaining:
+      </span>
+      <span
+        class="StyledText-sc-1sadyjn-0 fWSbXS"
+      >
+        4
+      </span>
+    </div>
     <div
       class="StyledBox-sc-13pk1d4-0 ffeAql"
     >
@@ -36,6 +50,22 @@ exports[`<ShipView /> Should render the <ShipView /> component. 1`] = `
       <div
         class="StyledBox__StyledBoxGap-sc-13pk1d4-1 hyyRSo"
       />
+      <span
+        class="StyledText-sc-1sadyjn-0 bnqisW"
+      >
+        Quantity:
+      </span>
+      <div
+        class="StyledBox__StyledBoxGap-sc-13pk1d4-1 hyyRSo"
+      />
+      <span
+        class="StyledText-sc-1sadyjn-0 fWSbXS"
+      >
+        1
+      </span>
+      <div
+        class="StyledBox__StyledBoxGap-sc-13pk1d4-1 hyyRSo"
+      />
       <button
         class="StyledButton-sc-323bzc-0 jAPRVi"
         data-testid="remove-button-0"
diff --git a/src/__tests__/views/planets.js b/src/__tests__/views/planets.js
index f6aa9aa..8e3d2ee 100644
--- a/src/__tests__/views/planets.js
+++ b/src/__tests__/views/planets.js
@@ -8,18 +8,22 @@ const customState = {
   ship: {
     ...defaultState.ship,
     location: { name: 'Test Planet 1', value: 0 },
-    cargo: [
-      {
-        name: 'Test Item',
-        space: 1,
-        value: 1,
-        id: '0',
-        destination: {
-          name: 'Test Planet 2',
-          value: 50
+    cargo: {
+      items: [
+        {
+          name: 'Test Item',
+          space: 1,
+          quantity: 1,
+          value: 1,
+          id: '0',
+          destination: {
+            name: 'Test Planet 2',
+            value: 50
+          }
         }
-      }
-    ]
+      ],
+      volumeRemaining: 4
+    }
   }
 }
 
diff --git a/src/__tests__/views/ship.js b/src/__tests__/views/ship.js
index 7d0673a..ee7bef5 100644
--- a/src/__tests__/views/ship.js
+++ b/src/__tests__/views/ship.js
@@ -7,18 +7,22 @@ const customState = {
   ...defaultState,
   ship: {
     ...defaultState.ship,
-    cargo: [
-      {
-        name: 'Test Item',
-        space: 1,
-        value: 1,
-        id: '0',
-        destination: {
-          name: 'Test Planet 2',
-          value: 50
+    cargo: {
+      items: [
+        {
+          name: 'Test Item',
+          space: 1,
+          value: 1,
+          id: '0',
+          quantity: 1,
+          destination: {
+            name: 'Test Planet 2',
+            value: 50
+          }
         }
-      }
-    ]
+      ],
+      volumeRemaining: 4
+    }
   }
 }
 
diff --git a/src/fixtures.js b/src/fixtures.js
index 40d625e..a02fa42 100644
--- a/src/fixtures.js
+++ b/src/fixtures.js
@@ -1,6 +1,9 @@
 export const defaultState = {
   ship: {
-    cargo: [],
+    cargo: {
+      items: [],
+      volumeRemaining: 5
+    },
     location: {
       name: null,
       value: null

From 9a82eba79602bc50be6c878fd45d461a77f5f5c1 Mon Sep 17 00:00:00 2001
From: alexlee-dev <alex@alexlee.dev>
Date: Thu, 22 Aug 2019 18:58:49 -0700
Subject: [PATCH 3/3] =?UTF-8?q?=E2=9C=85=20Add=20test=20for=20ItemTimer=20?=
 =?UTF-8?q?with=20mock?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/__tests__/components/ItemTimer.test.js               | 9 ++++++---
 .../components/__snapshots__/ItemTimer.test.js.snap      | 2 +-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/__tests__/components/ItemTimer.test.js b/src/__tests__/components/ItemTimer.test.js
index be03646..00359e2 100644
--- a/src/__tests__/components/ItemTimer.test.js
+++ b/src/__tests__/components/ItemTimer.test.js
@@ -1,9 +1,12 @@
-import React from 'react';
 import { customRender } from '../../test-utils'
 import ItemTimer from '../../components/ItemTimer'
 
-jest.mock('../../components/ItemTimer', () => {
-  return () => <span>MockedTime</span>
+jest.mock('../../util', () => {
+  const moment = require('moment')
+  const mockCreateDuration = () => moment.duration({ minutes: 60, seconds: 0 })
+  return {
+    createDuration: mockCreateDuration
+  }
 })
 
 describe('<ItemTimer />', () => {
diff --git a/src/__tests__/components/__snapshots__/ItemTimer.test.js.snap b/src/__tests__/components/__snapshots__/ItemTimer.test.js.snap
index e49fa9a..776afe6 100644
--- a/src/__tests__/components/__snapshots__/ItemTimer.test.js.snap
+++ b/src/__tests__/components/__snapshots__/ItemTimer.test.js.snap
@@ -3,7 +3,7 @@
 exports[`<ItemTimer /> Should render the <ItemTimer /> component. 1`] = `
 <DocumentFragment>
   <span>
-    MockedTime
+    0 minutes 0 seconds
   </span>
 </DocumentFragment>
 `;