Integrate PlayerControl in SegmentControl

src/components/Options.js

@@ -3,7 +3,7 @@ import { useSelector, useDispatch } from 'react-redux'
 
 import { setMaxLength, setWpm } from '../store/actions'
 
-export const RsvpOptions = () => {
+export const Options = () => {
   const dispatch = useDispatch()
   const maxLength = useSelector(state => state.maxLength)
   const wpm = useSelector(state => state.wpm)

src/components/PlayerControl.js

@@ -11,7 +11,7 @@ import { FiPlay, FiPause, FiSquare } from 'react-icons/fi'
 import { useInterval } from './generics/useInterval'
 import { IconButton } from '../styles/IconButton'
 
-export const RsvpPlayer = () => {
+export const PlayerControl = () => {
   const dispatch = useDispatch()
   const running = useSelector(selectRunning)
   const hasNext = useSelector(hasNextSegment)
@@ -26,15 +26,13 @@ export const RsvpPlayer = () => {
   )
 
   return (
-    <div>
+    <>
-      <div>
+      <IconButton Icon={FiSquare} onClick={() => dispatch(stop())} />
-        <IconButton Icon={FiSquare} onClick={() => dispatch(stop())} />
+      <IconButton
-        <IconButton
+        Icon={running ? FiPause : FiPlay}
-          Icon={running ? FiPause : FiPlay}
+        onClick={() => dispatch(running ? pause() : start())}
-          onClick={() => dispatch(running ? pause() : start())}
+        disabled={!hasNext}
-          disabled={!hasNext}
+      />
-        />
+    </>
-      </div>
-    </div>
   )
 }

src/components/RsvpReader.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import { TextInput } from './TextInput'
 import { TextOutput } from './TextOutput'
-import { MainControl } from './MainControl'
+import { SegmentControl } from './SegmentControl'
 import { RsvpSegment } from './RsvpSegment'
-import { RsvpOptions } from './RsvpOptions'
+import { Options } from './Options'
-import { RsvpPlayer } from './RsvpPlayer'
+import { PlayerControl } from './PlayerControl'
 
 import styles from './RsvpReader.css'
 
@@ -16,9 +16,10 @@ export const RsvpReader = () => {
       </div>
       <div className={styles.mainItem}>
         <RsvpSegment />
-        <MainControl></MainControl>
+        <SegmentControl>
-        <RsvpOptions></RsvpOptions>
+          <PlayerControl />
-        <RsvpPlayer />
+        </SegmentControl>
+        <Options></Options>
       </div>
       <div className={styles.item}>
         <TextOutput />

src/components/SegmentControl.js

@@ -16,7 +16,7 @@ import {
   decrementWord
 } from '../store/actions'
 
-export const MainControl = () => {
+export const SegmentControl = ({ children }) => {
   const dispatch = useDispatch()
   return (
     <div>
@@ -30,6 +30,7 @@ export const MainControl = () => {
         title="Previous Word"
         onClick={() => dispatch(decrementWord())}
       />
+      {children}
       <IconButton
         Icon={FiSkipForward}
         title="Next Word"