diff --git a/src/components/MainControl.js b/src/components/MainControl.js index b60814f..8e8338f 100644 --- a/src/components/MainControl.js +++ b/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 (
- - - + + + + + +
) } diff --git a/src/components/RsvpOptions.js b/src/components/RsvpOptions.js new file mode 100644 index 0000000..593f51f --- /dev/null +++ b/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 ( +
+ dispatch(setMaxLength(e.target.value))} + /> + {maxLength} +
+ ) +} diff --git a/src/components/RsvpReader.js b/src/components/RsvpReader.js index 18dbe93..7e1efd4 100644 --- a/src/components/RsvpReader.js +++ b/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 = () => { + diff --git a/src/components/TextOutput.js b/src/components/TextOutput.js index 2cdf093..520b63b 100644 --- a/src/components/TextOutput.js +++ b/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 (
diff --git a/src/store/actions.js b/src/store/actions.js index bbefd13..3f1cef8 100644 --- a/src/store/actions.js +++ b/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 incrementWord = () => ({ type: 'INCREMENT_WORD' }) -export const incrementSentence = () => ({ type: 'INCREMENT_SENTENCE' }) +export const incrementSegment = () => ({ type: 'INC_SEGMENT' }) +export const decrementSegment = () => ({ type: 'DEC_SEGMENT' }) +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 +}) diff --git a/src/store/reducer.js b/src/store/reducer.js index 98d2dc6..7d9b4da 100644 --- a/src/store/reducer.js +++ b/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 }), - INCREMENT_SEGMENT: state => ({ - ...state, - curSegment: state.curSegment + 1 - }), - INCREMENT_WORD: state => ({ ...state, curSegment: selectNextWord(state) }), - INCREMENT_SENTENCE: state => ({ - ...state, - curSegment: selectNextSentence(state) - }) + SET_CURRENT_SEGMENT: (state, payload) => ({ ...state, curIdx: payload }), + INC_SEGMENT: state => ({ ...state, curIdx: state.curIdx + 1 }), + DEC_SEGMENT: state => ({ ...state, curIdx: state.curIdx - 1 }), + INC_WORD: state => ({ ...state, curIdx: selectNextWord(state) }), + DEC_WORD: state => ({ ...state, curIdx: selectPrevWord(state) }), + INC_SENTENCE: state => ({ ...state, curIdx: selectNextSentence(state) }), + DEC_SENTENCE: state => ({ ...state, curIdx: selectPrevSentence(state) }), + SET_MAX_LENGTH: (state, payload) => ({ ...state, maxLength: payload }) } export const reducerFn = (state, { type, payload }) => { diff --git a/src/store/selectors.js b/src/store/selectors.js index 938b0c7..785f98b 100644 --- a/src/store/selectors.js +++ b/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( - state => state.curSegment, - curIdx => curIdx -) +export const selectCurrentSegmentIndex = state => state.curIdx export const selectCurrentSegment = createSelector( selectParsedText, - state => state.curSegment, - (parsedText, curSegment) => parsedText.segments[curSegment] + selectCurrentSegmentIndex, + (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