🔀 Merge pull request #18 from alexlee-dev/feature/views

✨ Ability to change views.

src/App.js

@@ -5,57 +5,50 @@ import { generatePlanets } from './util'
 import useLocalStorage from './hooks/useLocalStorage'
 import { storePlanets } from './redux/actions/world'
 import ItemTimer from './components/ItemTimer'
+import View from './views/View'
+import ViewSelector from './components/ViewSelector'
 
-const App = ({ dispatch, ship, world }) => {
+const App = ({ handleGeneratePlanets, handleStorePlanets }) => {
   const [storagePlanets, setStoragePlanets] = useLocalStorage('planets', [])
 
   useEffect(() => {
     // * Check to see if planets exist
 
     if (storagePlanets.length === 0) {
-      generatePlanets(dispatch, setStoragePlanets)
+      handleGeneratePlanets(setStoragePlanets)
     } else {
-      dispatch(storePlanets(storagePlanets))
+      handleStorePlanets(storagePlanets)
     }
 
     // eslint-disable-next-line
   }, [])
 
-  // const { planets } = world
-  const { cargo } = ship
-
   return (
     <div>
       <h1>hermes</h1>
       <ItemTimer />
       <br />
+      <br />
+      <ViewSelector />
       <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>
-          </div>
-        ))} */}
-
-        <h2>Your Ship</h2>
-        <h3>Cargo</h3>
-        <ul>
-          {cargo.map(({ name }, i) => (
-            <li key={i}>{name}</li>
-          ))}
-        </ul>
+        <View />
       </div>
     </div>
   )
 }
 
 App.propTypes = {
-  dispatch: PropTypes.func.isRequired,
-  ship: PropTypes.object.isRequired,
-  world: PropTypes.object.isRequired
+  handleGeneratePlanets: PropTypes.func.isRequired,
+  handleStorePlanets: PropTypes.func.isRequired
 }
 
-const mapStateToProps = ({ ship, world }) => ({ ship, world })
+const mapDispatchToProps = dispatch => ({
+  handleGeneratePlanets: setStoragePlanets =>
+    generatePlanets(dispatch, setStoragePlanets),
+  handleStorePlanets: storagePlanets => dispatch(storePlanets(storagePlanets))
+})
 
-export default connect(mapStateToProps)(App)
+export default connect(
+  null,
+  mapDispatchToProps
+)(App)

src/components/ViewSelector.js

@@ -0,0 +1,38 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import { views } from '../constants'
+import { setView } from '../redux/actions/ui'
+
+const ViewSelector = ({ handleSetView, view }) => {
+  const handleChange = e => handleSetView(e.target.value)
+
+  return (
+    <select onChange={handleChange}>
+      <option>{view}</option>
+      {Object.keys(views).map((viewName, i) => {
+        if (viewName !== view) {
+          return <option key={i}>{viewName}</option>
+        } else {
+          return null
+        }
+      })}
+    </select>
+  )
+}
+
+ViewSelector.propTypes = {
+  handleSetView: PropTypes.func.isRequired,
+  view: PropTypes.string.isRequired
+}
+
+const mapStateToProps = ({ ui }) => ({ view: ui.view })
+
+const mapDispatchToProps = dispatch => ({
+  handleSetView: view => dispatch(setView(view))
+})
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ViewSelector)

src/constants.js

@@ -1,3 +1,11 @@
+import PlanetsView from './views/planets'
+import ShipView from './views/ship'
+
+export const views = {
+  Planets: PlanetsView,
+  Ship: ShipView
+}
+
 const spaceJunk = {
   name: "Space Junk",
   space: 1,

src/redux/actions/ui.js

@@ -0,0 +1,14 @@
+// * ACTION TYPES
+const SET_VIEW = 'SET_VIEW'
+
+// * ACTION GENERATORS
+export const setView = view => ({
+  type: SET_VIEW,
+  payload: {
+    view
+  }
+})
+
+// * PROMISES
+
+// * THUNKS

src/redux/reducers/ui.js

@@ -0,0 +1,13 @@
+const uiDefaultState = {
+  view: 'Ship'
+}
+
+export default (state = uiDefaultState, action) => {
+  switch (action.type) {
+    case 'SET_VIEW':
+      const { view } = action.payload
+      return { ...state, view }
+    default:
+      return state
+  }
+}

src/redux/reducers/world.js

@@ -8,11 +8,11 @@ export default (state = worldDefaultState, action) => {
     case 'STORE_PLANETS':
       const { planets } = action.payload
 
-      return Object.assign({}, state, { planets })
+      return { ...state, planets }
     case 'SET_TIMER_RUNNING':
       const { isTimerRunning } = action.payload
 
-      return Object.assign({}, state, { isTimerRunning })
+      return { ...state, isTimerRunning }
     default:
       return state
   }

src/redux/store/store.js

@@ -1,13 +1,15 @@
 import { createStore, compose, combineReducers, applyMiddleware } from 'redux'
 import thunk from 'redux-thunk'
-import worldReducer from '../reducers/world'
 import shipReducer from '../reducers/ship'
+import uiReducer from '../reducers/ui'
+import worldReducer from '../reducers/world'
 
 const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
 
 export default createStore(
   combineReducers({
     ship: shipReducer,
+    ui: uiReducer,
     world: worldReducer
   }),
   composeEnhancer(applyMiddleware(thunk))

src/views/View.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import { views } from '../constants'
+
+const View = ({ view }) => {
+  const CurrentView = views[view]
+  return <CurrentView />
+}
+
+View.propTypes = {
+  dispatch: PropTypes.func.isRequired,
+  view: PropTypes.string.isRequired
+}
+
+const mapStateToProps = ({ ui }) => ({ view: ui.view })
+
+export default connect(mapStateToProps)(View)

src/views/planets.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+
+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>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+PlanetsView.propTypes = {
+  dispatch: PropTypes.func.isRequired,
+  planets: PropTypes.array.isRequired
+}
+
+const mapStateToProps = ({ world }) => ({ planets: world.planets })
+
+export default connect(mapStateToProps)(PlanetsView)

src/views/ship.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+
+const ShipView = ({ cargo }) => {
+  return (
+    <div>
+      <h2>Your Ship</h2>
+      <h3>Cargo</h3>
+      <ul>
+        {cargo.map(({ name }, i) => (
+          <li key={i}>{name}</li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+ShipView.propTypes = {
+  cargo: PropTypes.array.isRequired,
+  dispatch: PropTypes.func.isRequired
+}
+
+const mapStateToProps = ({ ship }) => ({ cargo: ship.cargo })
+
+export default connect(mapStateToProps)(ShipView)