🔀 Merge pull request #70 from alexlee-dev/feature/destination-travel-…

…time-display ✨ Travel Time Display
actuallyReallyAlex · Aug 26, 2019 · b6feef7 · b6feef7
2 parents 5216b08 + 884c24e
commit b6feef7
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 12 deletions.
diff --git a/src/__tests__/views/__snapshots__/planets.js.snap b/src/__tests__/views/__snapshots__/planets.js.snap
@@ -5,7 +5,7 @@ exports[`<PlanetsView /> Should render the <PlanetsView /> component. 1`] = `
   <div>
     <div>
       <div
-        class="StyledBox-sc-13pk1d4-0 ffeAql"
+        class="StyledBox-sc-13pk1d4-0 gQLnBt"
       >
         <h2
           class="StyledHeading-sc-1rdh4aw-0 yhirM"
@@ -469,7 +469,7 @@ exports[`<PlanetsView /> Should render the <PlanetsView /> component. 1`] = `
     </div>
     <div>
       <div
-        class="StyledBox-sc-13pk1d4-0 ffeAql"
+        class="StyledBox-sc-13pk1d4-0 gQLnBt"
       >
         <h2
           class="StyledHeading-sc-1rdh4aw-0 yhirM"
@@ -497,6 +497,14 @@ exports[`<PlanetsView /> Should render the <PlanetsView /> component. 1`] = `
             />
           </svg>
         </button>
+        <div
+          class="StyledBox__StyledBoxGap-sc-13pk1d4-1 hyyRSo"
+        />
+        <span
+          class="StyledText-sc-1sadyjn-0 fWSbXS"
+        >
+          ETA: 8 minutes 20 seconds
+        </span>
       </div>
       <span>
         Items:
@@ -749,7 +757,7 @@ exports[`<PlanetsView /> Should render the <PlanetsView /> component. 1`] = `
     </div>
     <div>
       <div
-        class="StyledBox-sc-13pk1d4-0 ffeAql"
+        class="StyledBox-sc-13pk1d4-0 gQLnBt"
       >
         <h2
           class="StyledHeading-sc-1rdh4aw-0 yhirM"
@@ -777,6 +785,14 @@ exports[`<PlanetsView /> Should render the <PlanetsView /> component. 1`] = `
             />
           </svg>
         </button>
+        <div
+          class="StyledBox__StyledBoxGap-sc-13pk1d4-1 hyyRSo"
+        />
+        <span
+          class="StyledText-sc-1sadyjn-0 fWSbXS"
+        >
+          ETA: 16 minutes 40 seconds
+        </span>
       </div>
       <span>
         Items:

diff --git a/src/components/PlanetDisplay.js b/src/components/PlanetDisplay.js
@@ -1,19 +1,22 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import { Box, Button, Heading } from 'grommet'
+import { Box, Button, Heading, Text } from 'grommet'
 import { Target } from 'grommet-icons'
 import { setShipTraveling, setDestination, setETA } from '../redux/actions/ship'
 import ItemDisplay from './ItemDisplay'
-import { createETA } from '../util'
+import { createETA, createDiffDuration } from '../util'
 
 const PlanetDisplay = ({ handleShipTravel, planet, ship }) => {
   const { isHomePlanet, items, location, name } = planet
   const shipLocationValue = ship.location.value
 
+  const eta = createETA({ value: planet.location }, ship)
+  const diffDuration = createDiffDuration(eta)
+
   return (
     <div key={name}>
-      <Box direction="row" gap="medium">
+      <Box align="center" direction="row" gap="medium">
         <Heading level="2">
           {isHomePlanet ? name + ' - Home Planet' : name}
         </Heading>
@@ -26,6 +29,12 @@ const PlanetDisplay = ({ handleShipTravel, planet, ship }) => {
             plain
           />
         )}
+        {shipLocationValue !== location && !ship.isShipTraveling && (
+          <Text>
+            ETA: {diffDuration.minutes()} minutes {diffDuration.seconds()}{' '}
+            seconds
+          </Text>
+        )}
       </Box>
       <span>Items:</span>
       {items.map(item => (

diff --git a/src/components/TravelTimer.js b/src/components/TravelTimer.js
@@ -9,19 +9,15 @@ import {
   setDestination,
   setShipTraveling
 } from '../redux/actions/ship'
-import moment from 'moment'
+import { createDiffDuration } from '../util'
 
 const TravelTimer = ({ handleTimerStopped, ship }) => {
   const [timeLeft, setTimeLeft] = useState(null)
 
   const timerLogic = () => {
     if (ship.isShipTraveling) {
       const travelTimer = setInterval(() => {
-        const now = moment()
-        now.millisecond(0)
-        const differenceMill = moment(ship.destination.eta, 'x').diff(now)
-
-        const diffDuration = moment.duration({ milliseconds: differenceMill })
+        const diffDuration = createDiffDuration(ship.destination.eta)
 
         diffDuration.subtract(1, 'second')
 

diff --git a/src/util.js b/src/util.js
@@ -98,6 +98,14 @@ export const createETA = (destination, ship) => {
   return eta
 }
 
+export const createDiffDuration = eta => {
+  const now = moment()
+  now.millisecond(0)
+  const differenceMill = moment(eta, 'x').diff(now)
+
+  return moment.duration({ milliseconds: differenceMill })
+}
+
 export const generateContracts = () => {
   const contracts = []