✏️WIP - Add an item from a planet to the ship cargo.

package.json

@@ -13,7 +13,8 @@
     "react-scripts": "3.1.0",
     "redux": "^4.0.4",
     "redux-thunk": "^2.3.0",
-    "styled-components": "^4.3.2"
+    "styled-components": "^4.3.2",
+    "uuid": "^3.3.3"
   },
   "devDependencies": {
     "coveralls": "^3.0.6",

src/App.js

@@ -7,21 +7,98 @@ import { storePlanets } from './redux/actions/world'
 import ItemTimer from './components/ItemTimer'
 import View from './views/View'
 import ViewSelector from './components/ViewSelector'
+import { setShip } from './redux/actions/ship'
 
-const App = ({ handleGeneratePlanets, handleStorePlanets }) => {
-  const [storagePlanets, setStoragePlanets] = useLocalStorage('planets', [])
+const App = ({
+  handleGeneratePlanets,
+  handleStorePlanetsInStore,
+  handleStoreShipInStore,
+  planets,
+  ship
+}) => {
+  const [localStoragePlanets, setlocalStoragePlanets] = useLocalStorage(
+    'planets',
+    []
+  )
+  const [localStorageShip, setLocalStorageShip] = useLocalStorage('ship', null)
 
-  useEffect(() => {
+  const handleUpdatingPlanets = planets => {
     // * Check to see if planets exist
+    if (localStoragePlanets.length === 0) {
+      // * If no planets exist in localStorage, set the planets in localStorage
+      handleGeneratePlanets(setlocalStoragePlanets)
+    } else {
+      // * Planets exist in localStorage
+      // * Check if planets exist in Redux
+      if (planets[0]) {
+        // * Planets exist in Redux
+        // * Check to see if `planets` exactly matches `localStoragePlanets`
+        const planetsAndlocalStoragePlanetsMatch = localStoragePlanets.every(
+          (planet, i) => {
+            const { items } = planet
+
+            let finalReturnValue = true
+
+            items.forEach((item, j) => {
+              if (item !== planets[i].items[j]) {
+                finalReturnValue = false
+              }
+            })
+
+            return finalReturnValue
+          }
+        )
 
-    if (storagePlanets.length === 0) {
-      handleGeneratePlanets(setStoragePlanets)
+        if (!planetsAndlocalStoragePlanetsMatch) {
+          // * planets and localStoragePlanets do not match exactly
+          // * update planets in localStorage to match planets in Redux
+          setlocalStoragePlanets(planets)
+        }
+      } else {
+        // * Planets do not exist in Redux
+        // * Store the planets from localStorage in Redux
+        handleStorePlanetsInStore(localStoragePlanets)
+      }
+    }
+  }
+
+  const handleUpdatingShip = ship => {
+    // * If there is no localStorage ship
+    if (!localStorageShip) {
+      // * Set localStorage ship to ship
+      setLocalStorageShip(ship)
     } else {
-      handleStorePlanets(storagePlanets)
+      // * There is a localStorage ship
+      // * Check to see if they match exactly.
+      // * Check to see if `planets` exactly matches `localStoragePlanets`
+      const shipAndLocalStorageShipMatch =
+        ship.cargo.length === localStorageShip.cargo.length &&
+        ship.cargo.every((item, i) => {
+          if (ship.cargo.length !== localStorageShip.cargo.length) {
+            return false
+          } else {
+            return item.id !== localStorageShip.cargo[i].id
+          }
+        })
+
+      if (!shipAndLocalStorageShipMatch) {
+        // * ship and localStorage ship do not match
+        // * update ship in localStorage to match ship in Redux
+
+        if (ship.cargo.length > localStorageShip.cargo.length) {
+          setLocalStorageShip(ship)
+        } else {
+          handleStoreShipInStore(localStorageShip)
+        }
+      }
     }
+  }
 
+  useEffect(() => {
+    handleUpdatingPlanets(planets)
+    handleUpdatingShip(ship)
     // eslint-disable-next-line
-  }, [])
+  }, [planets, ship])
 
   return (
     <div>
@@ -39,16 +116,21 @@ const App = ({ handleGeneratePlanets, handleStorePlanets }) => {
 
 App.propTypes = {
   handleGeneratePlanets: PropTypes.func.isRequired,
-  handleStorePlanets: PropTypes.func.isRequired
+  handleStorePlanetsInStore: PropTypes.func.isRequired,
+  handleStoreShipInStore: PropTypes.func.isRequired
 }
 
+const mapStateToProps = ({ ship, world }) => ({ planets: world.planets, ship })
+
 const mapDispatchToProps = dispatch => ({
-  handleGeneratePlanets: setStoragePlanets =>
-    generatePlanets(dispatch, setStoragePlanets),
-  handleStorePlanets: storagePlanets => dispatch(storePlanets(storagePlanets))
+  handleGeneratePlanets: setlocalStoragePlanets =>
+    generatePlanets(dispatch, setlocalStoragePlanets),
+  handleStorePlanetsInStore: localStoragePlanets =>
+    dispatch(storePlanets(localStoragePlanets)),
+  handleStoreShipInStore: ship => dispatch(setShip(ship))
 })
 
 export default connect(
-  null,
+  mapStateToProps,
   mapDispatchToProps
 )(App)

src/redux/actions/ship.js

@@ -0,0 +1,17 @@
+// * ACTION TYPES
+const STORE_CARGO = 'STORE_CARGO'
+const SET_SHIP = 'SET_SHIP'
+
+// * ACTION GENERATORS
+export const storeCargo = item => ({
+  type: STORE_CARGO,
+  payload: {
+    item
+  }
+})
+
+export const setShip = ship => ({ type: SET_SHIP, payload: { ship } })
+
+// * PROMISES
+
+// * THUNKS

src/redux/actions/world.js

@@ -1,6 +1,7 @@
 // * ACTION TYPES
 const STORE_PLANETS = 'STORE_PLANETS'
 const SET_TIMER_RUNNING = 'SET_TIMER_RUNNING'
+const REMOVE_ITEM = 'REMOVE_ITEM'
 
 // * ACTION GENERATORS
 export const storePlanets = planets => ({
@@ -13,6 +14,13 @@ export const setTimerRunning = isTimerRunning => ({
   payload: { isTimerRunning }
 })
 
+export const removeItem = item => ({
+  type: REMOVE_ITEM,
+  payload: {
+    item
+  }
+})
+
 // * PROMISES
 // const thing = () => {
 //   return new Promise((resolve, reject) => {

src/redux/reducers/ship.js

@@ -1,9 +1,16 @@
 const shipDefaultState = {
-  cargo: [{ name: 'Item 1' }, { name: 'Item 2' }, { name: 'Item 3' }]
+  cargo: []
 }
 
 export default (state = shipDefaultState, action) => {
   switch (action.type) {
+    case 'STORE_CARGO':
+      const { item } = action.payload
+
+      return Object.assign({}, state, { cargo: [...state.cargo, item] })
+    case 'SET_SHIP':
+      const { ship } = action.payload
+      return ship
     default:
       return state
   }

src/redux/reducers/world.js

@@ -13,6 +13,34 @@ export default (state = worldDefaultState, action) => {
       const { isTimerRunning } = action.payload
 
       return { ...state, isTimerRunning }
+    case 'REMOVE_ITEM':
+      const { item } = action.payload
+
+      const updatedPlanets = []
+
+      state.planets.forEach(planet => {
+        const { isHomePlanet, items, location, name } = planet
+        const planetContainsItem = items.includes(item)
+        if (planetContainsItem) {
+          const itemIndex = items.findIndex(currentItem => item === currentItem)
+          const newItems = Array.from(items)
+          newItems.splice(itemIndex, 1)
+
+          const newPlanetObj = {
+            isHomePlanet,
+            items: newItems,
+            location,
+            name
+          }
+          updatedPlanets.push(newPlanetObj)
+        } else {
+          updatedPlanets.push(planet)
+        }
+      })
+
+      // TODO: Update localStorage with the new updatedPlanets
+
+      return Object.assign({}, state, { planets: updatedPlanets })
     default:
       return state
   }

src/util.js

@@ -1,5 +1,6 @@
 import { itemList, planets } from './constants'
 import { storePlanets } from './redux/actions/world'
+import uuidv4 from 'uuid/v4'
 
 const getPlanetName = () => {
   const planet = planets[Math.floor(Math.random() * planets.length)]
@@ -20,7 +21,11 @@ export const generatePlanets = (dispatch, setStoragePlanets) => {
     const name = getPlanetName()
 
     for (let j = 0; j < 5; j++) {
-      const item = itemList[Math.floor(Math.random() * itemList.length)]
+      const item = Object.assign(
+        {},
+        itemList[Math.floor(Math.random() * itemList.length)],
+        { id: uuidv4() }
+      )
       items.push(item)
     }
 

src/views/planets.js

@@ -1,26 +1,77 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
+import { Box, Text, Button } from 'grommet'
+import { Add } from 'grommet-icons'
+import useLocalStorage from '../hooks/useLocalStorage'
+import { storeCargo } from '../redux/actions/ship'
+import { removeItem } from '../redux/actions/world'
+
+const PlanetsView = ({ planets, handleStoreCargo }) => {
+  const [storagePlanets, setStoragePlanets] = useLocalStorage('planets', [])
 
-const PlanetsView = ({ planets }) => {
   return (
     <div>
       {planets.map(({ items, isHomePlanet, name }) => (
         <div key={name}>
           <h2>{isHomePlanet ? name + ' - Home Planet' : name}</h2>
           <span>Items:</span>
-          <pre>{JSON.stringify(items, null, 2)}</pre>
+          {items.map(item => {
+            const { 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">
+                  <Button
+                    hoverIndicator
+                    icon={<Add />}
+                    onClick={() =>
+                      handleStoreCargo(item, storagePlanets, setStoragePlanets)
+                    }
+                    plain
+                  />
+                </Box>
+              </Box>
+            )
+          })}
         </div>
       ))}
     </div>
   )
 }
 
 PlanetsView.propTypes = {
-  dispatch: PropTypes.func.isRequired,
-  planets: PropTypes.array.isRequired
+  planets: PropTypes.array.isRequired,
+  handleStoreCargo: PropTypes.func.isRequired
 }
 
 const mapStateToProps = ({ world }) => ({ planets: world.planets })
 
-export default connect(mapStateToProps)(PlanetsView)
+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))
+  }
+})
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(PlanetsView)

yarn.lock

@@ -10126,6 +10126,11 @@ uuid@^3.0.1, uuid@^3.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131"
   integrity sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==
 
+uuid@^3.3.3:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.3.tgz#4568f0216e78760ee1dbf3a4d2cf53e224112866"
+  integrity sha512-pW0No1RGHgzlpHJO1nsVrHKpOEIxkGg1xB+v0ZmdNH5OAeAwzAVrCnI2/6Mtx+Uys6iaylxa+D3g4j63IKKjSQ==
+
 v8-compile-cache@^2.0.3:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.1.0.tgz#e14de37b31a6d194f5690d67efc4e7f6fc6ab30e"