add word/sentence inc/dec

src/components/MainControl.js

@@ -3,16 +3,26 @@ import { useDispatch } from 'react-redux'
 import {
   incrementSentence,
   incrementSegment,
-  incrementWord
+  incrementWord,
+  decrementSegment,
+  decrementSentence,
+  decrementWord
 } from '../store/actions'
 
 export const MainControl = () => {
   const dispatch = useDispatch()
   return (
     <div>
-      <button onClick={() => dispatch(incrementSegment())}>></button>
+      <button onClick={() => dispatch(decrementSentence())}>
-      <button onClick={() => dispatch(incrementWord())}>Word></button>
+        {'<'}Sentence
-      <button onClick={() => dispatch(incrementSentence())}>Sentence></button>
+      </button>
+      <button onClick={() => dispatch(decrementWord())}>{'<'}Word</button>
+      <button onClick={() => dispatch(decrementSegment())}>{'<'}</button>
+      <button onClick={() => dispatch(incrementSegment())}>{'>'}</button>
+      <button onClick={() => dispatch(incrementWord())}>Word{'>'}</button>
+      <button onClick={() => dispatch(incrementSentence())}>
+        Sentence{'>'}
+      </button>
     </div>
   )
 }

src/components/RsvpOptions.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+
+import { setMaxLength } from '../store/actions'
+
+export const RsvpOptions = () => {
+  const maxLength = useSelector(state => state.maxLength)
+  const dispatch = useDispatch()
+  return (
+    <div>
+      <input
+        type="range"
+        min="3"
+        max="14"
+        value={maxLength}
+        onChange={e => dispatch(setMaxLength(e.target.value))}
+      />
+      {maxLength}
+    </div>
+  )
+}

src/components/RsvpReader.js

@@ -4,6 +4,7 @@ import { TextInput } from './TextInput'
 import { TextOutput } from './TextOutput'
 import { MainControl } from './MainControl'
 import { RsvpSegment } from './RsvpSegment'
+import { RsvpOptions } from './RsvpOptions'
 
 const FlexRow = styled.div`
   display: flex;
@@ -23,6 +24,7 @@ export const RsvpReader = () => {
       <FlexItem flex={2}>
         <RsvpSegment />
         <MainControl></MainControl>
+        <RsvpOptions></RsvpOptions>
       </FlexItem>
       <FlexItem>
         <TextOutput />

src/components/TextOutput.js

@@ -2,7 +2,10 @@ import React from 'react'
 import { useSelector } from 'react-redux'
 import styled from 'styled-components'
 
-import { selectParsedText } from '../store/selectors.js'
+import {
+  selectParsedText,
+  selectCurrentSegmentIndex
+} from '../store/selectors.js'
 
 const Segment = styled.span`
   color: ${props => (props.sentenceBeginning ? 'red' : 'black')};
@@ -15,7 +18,7 @@ const SelectedSegment = styled.span`
 
 export const TextOutput = () => {
   const parsedText = useSelector(selectParsedText)
-  const curSegment = useSelector(state => state.curSegment)
+  const curSegment = useSelector(selectCurrentSegmentIndex)
   const { segments, words, sentences } = parsedText
   return (
     <div>

src/store/actions.js

@@ -1,4 +1,11 @@
 export const setText = text => ({ type: 'SET_TEXT', payload: text })
-export const incrementSegment = () => ({ type: 'INCREMENT_SEGMENT' })
+export const incrementSegment = () => ({ type: 'INC_SEGMENT' })
-export const incrementWord = () => ({ type: 'INCREMENT_WORD' })
+export const decrementSegment = () => ({ type: 'DEC_SEGMENT' })
-export const incrementSentence = () => ({ type: 'INCREMENT_SENTENCE' })
+export const incrementWord = () => ({ type: 'INC_WORD' })
+export const decrementWord = () => ({ type: 'DEC_WORD' })
+export const incrementSentence = () => ({ type: 'INC_SENTENCE' })
+export const decrementSentence = () => ({ type: 'DEC_SENTENCE' })
+export const setMaxLength = length => ({
+  type: 'SET_MAX_LENGTH',
+  payload: length
+})

src/store/reducer.js

@@ -1,26 +1,30 @@
-import { selectNextWord, selectNextSentence } from './selectors'
+import {
+  selectNextWord,
+  selectNextSentence,
+  selectPrevWord,
+  selectPrevSentence
+} from './selectors'
 
 export const initialState = {
   originalText: 'Sample Text',
-  curSegment: 0
+  curIdx: 0,
+  maxLength: 5
 }
 
 const reducer = {
   SET_TEXT: (state, payload) => ({
     ...state,
     originalText: payload,
-    curSegment: 0
+    curIdx: 0
   }),
-  SET_CURRENT_SEGMENT: (state, payload) => ({ ...state, curSegment: payload }),
+  SET_CURRENT_SEGMENT: (state, payload) => ({ ...state, curIdx: payload }),
-  INCREMENT_SEGMENT: state => ({
+  INC_SEGMENT: state => ({ ...state, curIdx: state.curIdx + 1 }),
-    ...state,
+  DEC_SEGMENT: state => ({ ...state, curIdx: state.curIdx - 1 }),
-    curSegment: state.curSegment + 1
+  INC_WORD: state => ({ ...state, curIdx: selectNextWord(state) }),
-  }),
+  DEC_WORD: state => ({ ...state, curIdx: selectPrevWord(state) }),
-  INCREMENT_WORD: state => ({ ...state, curSegment: selectNextWord(state) }),
+  INC_SENTENCE: state => ({ ...state, curIdx: selectNextSentence(state) }),
-  INCREMENT_SENTENCE: state => ({
+  DEC_SENTENCE: state => ({ ...state, curIdx: selectPrevSentence(state) }),
-    ...state,
+  SET_MAX_LENGTH: (state, payload) => ({ ...state, maxLength: payload })
-    curSegment: selectNextSentence(state)
-  })
 }
 
 export const reducerFn = (state, { type, payload }) => {

src/store/selectors.js

@@ -5,9 +5,12 @@ import { getNextBiggerNumber, getNextSmallerNumber } from '../lib/array-util.js'
 
 // parsedText selectors
 
+export const selectMaxLength = state => state.maxLength
+
 export const selectParsedText = createSelector(
   state => state.originalText,
-  originalText => parseText(originalText)
+  selectMaxLength,
+  (originalText, maxLength) => parseText(originalText, maxLength)
 )
 
 export const selectSegments = createSelector(
@@ -15,15 +18,12 @@ export const selectSegments = createSelector(
   parsedText => parsedText.segments
 )
 
-export const selectCurrentSegmentIndex = createSelector(
+export const selectCurrentSegmentIndex = state => state.curIdx
-  state => state.curSegment,
-  curIdx => curIdx
-)
 
 export const selectCurrentSegment = createSelector(
   selectParsedText,
-  state => state.curSegment,
+  selectCurrentSegmentIndex,
-  (parsedText, curSegment) => parsedText.segments[curSegment]
+  (parsedText, curIdx) => parsedText.segments[curIdx]
 )
 
 // next/prev words
@@ -35,7 +35,7 @@ export const selectWords = createSelector(
 
 export const selectNextWord = createSelector(
   selectWords,
-  state => state.curSegment,
+  selectCurrentSegmentIndex,
   (words, curSegment) => getNextBiggerNumber(curSegment, words)
 )
 
@@ -46,7 +46,6 @@ export const selectPrevWord = createSelector(
 )
 
 export const selectHasNextWord = createSelector(selectNextWord, Boolean)
-
 export const selectHasPrevWord = createSelector(selectPrevWord, Boolean)
 
 // next/prev sentences