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/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