Add a time estimate

src/components/RsvpReader.js

@@ -9,6 +9,7 @@ import { PlayerControl } from './PlayerControl'
 import styles from './RsvpReader.css'
 import { PipeMarker, BorderMarker } from './PivotMarker'
 import { Progress } from './Progress'
+import { TimeCalc } from './TimeCalc'
 
 export const RsvpReader = () => {
   return (
@@ -27,6 +28,7 @@ export const RsvpReader = () => {
           </SegmentControl>
         </div>
         <Options></Options>
+        <TimeCalc />
       </div>
       <div className={styles.item}>
         <TextOutput />

src/components/TimeCalc.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import { useSelector } from 'react-redux'
+import { selectSegments, selectWpm } from '../store/selectors'
+
+function formatTime(totalSeconds) {
+  const hours = Math.floor(totalSeconds / 3600)
+  const minutes = Math.floor((totalSeconds % 3600) / 60)
+  const seconds = Math.floor(totalSeconds % 60)
+  const pad = num => String(num).padStart(2, '0')
+  return `${hours}:${pad(minutes)}:${pad(seconds)}`
+}
+
+export const TimeCalc = () => {
+  const wpm = useSelector(selectWpm)
+  const segments = useSelector(selectSegments)
+  const minutesNeeded = segments.length / wpm
+  return (
+    <div>
+      <h2>Time needed</h2>
+      Time needed for Text: {formatTime(minutesNeeded * 60)}
+    </div>
+  )
+}