Move player logic back in store

src/components/RsvpPlayer.js

@@ -1,27 +1,40 @@
 import React from 'react'
 
 import { useSelector, useDispatch } from 'react-redux'
-import { hasNextSegment } from '../store/selectors'
-import { incrementSegment, resetSegment } from '../store/actions'
-import { Player } from './Player'
+import {
+  hasNextSegment,
+  selectRunning,
+  selectInterval
+} from '../store/selectors'
+import { incrementSegment, stop, pause, start } from '../store/actions'
+import { FiPlay, FiPause, FiSquare } from 'react-icons/fi'
+import { useInterval } from './generics/useInterval'
+import { IconButton } from '../styles/IconButton'
 
 export const RsvpPlayer = () => {
   const dispatch = useDispatch()
+  const running = useSelector(selectRunning)
   const hasNext = useSelector(hasNextSegment)
-  const wpm = useSelector(state => state.wpm)
+  const interval = useSelector(selectInterval)
 
-  const onTick = stop => {
-    if (!hasNext) return stop()
-    dispatch(incrementSegment())
-  }
+  useInterval(
+    () => {
+      if (!hasNext) dispatch(pause())
+      else dispatch(incrementSegment())
+    },
+    running ? interval : null
+  )
 
   return (
     <div>
-      <Player
-        delay={60000 / wpm}
-        onTick={onTick}
-        onStop={() => dispatch(resetSegment())}
-      />
+      <div>
+        <IconButton Icon={FiSquare} onClick={() => dispatch(stop())} />
+        <IconButton
+          Icon={running ? FiPause : FiPlay}
+          onClick={() => dispatch(running ? pause() : start())}
+          disabled={!hasNext}
+        />
+      </div>
     </div>
   )
 }

src/components/generics/Player.js

@@ -12,6 +12,7 @@ export const Player = ({ onTick, onStart, onStop, onPause, delay }) => {
   const handleStart = () => {
     safeCall(onStart)
     start()
+    console.log('yay')
   }
 
   const handleStop = () => {

src/components/generics/useInterval.js

@@ -0,0 +1,22 @@
+import { useRef, useEffect } from 'react'
+
+// from: https://overreacted.io/making-setinterval-declarative-with-react-hooks/
+export function useInterval(callback, delay) {
+  const savedCallback = useRef()
+  const x = 'asdf'
+  // Remember the latest callback.
+  useEffect(() => {
+    savedCallback.current = callback
+  }, [callback])
+
+  // Set up the interval.
+  useEffect(() => {
+    function tick() {
+      savedCallback.current()
+    }
+    if (delay !== null) {
+      let id = setInterval(tick, delay)
+      return () => clearInterval(id)
+    }
+  }, [delay])
+}

src/store/actions.js

@@ -11,3 +11,6 @@ export const setMaxLength = length => ({
   payload: length
 })
 export const setWpm = wpm => ({ type: 'SET_WPM', payload: wpm })
+export const start = () => ({ type: 'START' })
+export const stop = () => ({ type: 'STOP' })
+export const pause = () => ({ type: 'PAUSE' })

src/store/reducer.js

@@ -10,7 +10,8 @@ export const initialState = {
   curIdx: 0,
   maxLength: 5,
   isPlaying: false,
-  wpm: 300
+  wpm: 300,
+  running: false
 }
 
 const reducer = {
@@ -27,7 +28,10 @@ const reducer = {
   INC_SENTENCE: state => ({ ...state, curIdx: selectNextSentence(state) }),
   DEC_SENTENCE: state => ({ ...state, curIdx: selectPrevSentence(state) }),
   SET_MAX_LENGTH: (state, payload) => ({ ...state, maxLength: payload }),
-  SET_WPM: (state, payload) => ({ ...state, wpm: payload })
+  SET_WPM: (state, payload) => ({ ...state, wpm: payload }),
+  START: state => ({ ...state, running: true }),
+  STOP: state => ({ ...state, running: false, curIdx: 0 }),
+  PAUSE: state => ({ ...state, running: false })
 }
 
 export const reducerFn = (state, { type, payload }) => {

src/store/selectors.js

@@ -77,3 +77,7 @@ export const selectPrevSentence = createSelector(
 
 export const selectHasNextSentence = createSelector(selectNextSentence, Boolean)
 export const selectHasPrevSentence = createSelector(selectPrevSentence, Boolean)
+
+export const selectRunning = state => state.running
+export const selectWpm = state => state.wpm
+export const selectInterval = createSelector(selectWpm, wpm => 60000 / wpm)

src/styles/IconButton.js

@@ -30,6 +30,15 @@ const SvgButton = styled.button`
   &::-moz-focus-inner {
     border: 0;
   }
+
+  &[disabled] {
+    color: '#c7c7c7';
+    svg {
+      transform: scale(1.5);
+
+      color: '#c7c7c7';
+    }
+  }
 `
 
 const AccessLabel = styled.span`
@@ -40,9 +49,9 @@ const AccessLabel = styled.span`
   white-space: nowrap;
 `
 
-export const IconButton = ({ title, onClick, Icon }) => {
+export const IconButton = ({ Icon, title, onClick, disabled }) => {
   return (
-    <SvgButton onClick={onClick} title={title} tabindex="0">
+    <SvgButton onClick={onClick} title={title} tabindex="0" disabled={disabled}>
       {Icon && <Icon aria-hidden="true" focusable="false" />}
       <AccessLabel>{title}</AccessLabel>
     </SvgButton>