🔀 Merge pull request #39 from alexlee-dev/feature/clean-app

✨ Clean up App.js.

src/App.js

@@ -2,49 +2,34 @@ import React, { useEffect } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { generatePlanets } from './util'
+import { setShipLocationValue, setShipLocationName } from './redux/actions/ship'
 import { setPlanets } from './redux/actions/world'
-import ItemTimer from './components/ItemTimer'
 import View from './views/View'
-import ViewSelector from './components/ViewSelector'
-import { setShipLocationValue, setShipLocationName } from './redux/actions/ship'
+import { Box } from 'grommet'
 import CashDisplay from './components/CashDisplay'
+import ItemTimer from './components/ItemTimer'
+import Title from './components/Title'
+import ViewSelector from './components/ViewSelector'
 
-const App = ({ handleInitializeShipLocation, handleSetPlanets, planets }) => {
+const App = ({ handleInitializeApplication, planets }) => {
   useEffect(() => {
-    if (planets.length === 0) {
-      const planets = generatePlanets()
-
-      handleSetPlanets(planets)
-
-      const homePlanet = planets.find(planet => planet.isHomePlanet === true)
-
-      const value = homePlanet.location
-      const name = homePlanet.name
-
-      handleInitializeShipLocation(value, name)
-    }
-
+    if (planets.length === 0) handleInitializeApplication()
     // eslint-disable-next-line
   }, [])
 
   return (
-    <div>
-      <h1>hermes</h1>
+    <Box fill>
+      <Title />
       <ItemTimer />
       <CashDisplay />
-      <br />
-      <br />
       <ViewSelector />
-      <div>
-        <View />
-      </div>
-    </div>
+      <View />
+    </Box>
   )
 }
 
 App.propTypes = {
-  handleInitializeShipLocation: PropTypes.func.isRequired,
-  handleSetPlanets: PropTypes.func.isRequired,
+  handleInitializeApplication: PropTypes.func.isRequired,
   planets: PropTypes.array.isRequired
 }
 
@@ -53,8 +38,13 @@ const mapStateToProps = ({ world }) => ({
 })
 
 const mapDispatchToProps = dispatch => ({
-  handleSetPlanets: planets => dispatch(setPlanets(planets)),
-  handleInitializeShipLocation: (value, name) => {
+  handleInitializeApplication: () => {
+    const planets = generatePlanets()
+    const homePlanet = planets.find(planet => planet.isHomePlanet === true)
+    const value = homePlanet.location
+    const name = homePlanet.name
+
+    dispatch(setPlanets(planets))
     dispatch(setShipLocationValue(value))
     dispatch(setShipLocationName(name))
   }

src/components/CashDisplay.js

@@ -5,8 +5,10 @@ import { connect } from 'react-redux'
 
 const CashDisplay = ({ cash }) => {
   return (
-    <Box>
-      <Heading level="2">Cash:</Heading>
+    <Box margin={{ bottom: 'small' }}>
+      <Heading level="2" margin={{ bottom: 'xsmall' }}>
+        Cash:
+      </Heading>
       <Text>{cash}</Text>
     </Box>
   )

src/components/ItemTimer.js

@@ -11,7 +11,7 @@ import {
 const ItemTimer = ({ handleTimerStarted, handleTimerStopped, world }) => {
   const { isTimerRunning } = world
 
-  let duration = moment.duration({ minutes: 0, seconds: 5 })
+  let duration = moment.duration({ minutes: 10, seconds: 0 })
   const [timeLeft, setTimeLeft] = useState(
     `${duration.minutes()} minutes ${duration.seconds()} seconds`
   )

src/components/Title.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Heading } from 'grommet'
+
+const Title = () => {
+  return <Heading level="1">Hermes</Heading>
+}
+
+export default Title

src/components/ViewSelector.js

@@ -3,21 +3,24 @@ import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { views } from '../constants'
 import { setView } from '../redux/actions/ui'
+import { Box } from 'grommet'
 
 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>
+    <Box width="small">
+      <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>
+    </Box>
   )
 }