melch/rsvp-reader
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Move to store/index.js

Browse Source
This commit is contained in:
Alfred Melch 2020-02-01 18:58:13 +01:00
parent 444ef30587
commit 366c338528
16 changed files with 84 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Book.js
View File

@ -2,7 +2,7 @@ import React from 'react'
import { getBook } from '../lib/gutenberg'
import styles from './Book.css'
import { useStore } from '../store/RSVPStore'
import { useStore } from '../store'
export const Book = ({ author, language, title, id }) => {
const [_, { setText, setLang }] = useStore()

2
src/components/Options.js
View File

@ -3,7 +3,7 @@ import { debounce } from 'debounce'
import { Slider } from './Slider'
import { selectOffset, selectLang } from '../store/selectors'
import { useSelector, useDispatch } from '../store/RSVPStore'
import { useSelector, useDispatch } from '../store'
import { useTranslation } from 'react-i18next'
const availableLanguages = ['en', 'de']

2
src/components/PivotMarker.js
View File

@ -1,5 +1,5 @@
import React from 'react'
import { useSelector } from '../store/RSVPStore'
import { useSelector } from '../store'
import styles from './PivotMarker.css'
import { selectOffset } from '../store/selectors'

2
src/components/PlayerControl.js
View File

@ -1,6 +1,6 @@
import React from 'react'
import { useDispatch, useSelector } from '../store/RSVPStore'
import { useDispatch, useSelector } from '../store'
import {
selectHasNextSegment,

2
src/components/Progress.js
View File

@ -1,5 +1,5 @@
import React from 'react'
import { useSelector } from '../store/RSVPStore'
import { useSelector } from '../store'
import { selectCurrentSegmentIndex, selectSegments } from '../store/selectors'
export const Progress = () => {

2
src/components/SearchBar.js
View File

@ -2,7 +2,7 @@ import React, { useState, useEffect, useCallback } from 'react'
import { debounce } from 'debounce'
import classNames from 'classnames'
import { FiSearch } from 'react-icons/fi'
import { useDispatch } from '../store/RSVPStore'
import { useDispatch } from '../store'
import { useTranslation } from 'react-i18next'
import axios from 'axios'

2
src/components/Segment.js
View File

@ -1,5 +1,5 @@
import React from 'react'
import { useSelector } from '../store/RSVPStore'
import { useSelector } from '../store'
import { selectPivotizedSegment, selectOffset } from '../store/selectors'
import styles from './Segment.css'

2
src/components/SegmentControl.js
View File

@ -5,7 +5,7 @@ import {
FiRewind,
FiFastForward
} from 'react-icons/fi'
import { useDispatch, useSelector } from '../store/RSVPStore'
import { useDispatch, useSelector } from '../store'
import { IconButton } from '../styles/IconButton'
import {

2
src/components/TextInput.js
View File

@ -1,5 +1,5 @@
import React, { useState } from 'react'
import { useDispatch } from '../store/RSVPStore'
import { useDispatch } from '../store'
import styles from './TextInput.css'

2
src/components/TextOutput.js
View File

@ -1,5 +1,5 @@
import React from 'react'
import { useSelector } from '../store/RSVPStore'
import { useSelector } from '../store'
import classNames from 'classnames'
import { getNextSmallerNumber } from '../lib/array-util.js'

2
src/components/TotalTime.js
View File

@ -1,5 +1,5 @@
import React from 'react'
import { useSelector } from '../store/RSVPStore'
import { useSelector } from '../store'
import { selectTotalTime } from '../store/selectors'
function formatTime(totalSeconds) {

2
src/index.js
View File

@ -2,7 +2,7 @@ import 'regenerator-runtime/runtime'
import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from './store/RSVPStore'
import { Provider } from './store'
import { App } from './App'

75
src/store/RSVPStore.js
View File

@ -1,75 +0,0 @@
import { createStore } from 'potent-reducer'
import {
safeSelectNextWord,
safeSelectNextSentence,
safeSelectPrevWord,
safeSelectPrevSentence,
safeSelectNextSegment,
safeSelectPrevSegment
} from './selectors'
const initialState = {
originalText: 'Sample Text',
curIdx: 0,
maxLength: 10,
isPlaying: false,
wpm: 300,
offset: -15,
running: false,
lang: 'en',
textDisplay: {
mode: 'pagination',
options: {
pagination: { pageLength: 50 },
segments: { prev: 9, next: 40 },
sentences: { prev: 1, next: 8 }
}
}
}
const thunks = {
setText: text => dispatch => dispatch({ text }),
resetSegment: () => dispatch => dispatch(),
incSegment: () => dispatch => dispatch(),
decSegment: () => dispatch => dispatch(),
incWord: () => dispatch => dispatch(),
decWord: () => dispatch => dispatch(),
incSentence: () => dispatch => dispatch(),
decSentence: () => dispatch => dispatch(),
setMaxLength: length => dispatch => dispatch({ length }),
setWpm: wpm => dispatch => dispatch({ wpm }),
setOffset: offset => dispatch => dispatch({ offset }),
start: () => dispatch => dispatch(),
stop: () => dispatch => dispatch(),
pause: () => dispatch => dispatch(),
setLang: lang => dispatch => dispatch({ lang })
}
const reducer = {
SET_TEXT: (state, { text }) => ({ ...state, originalText: text, curIdx: 0 }),
RESET_SEGMENT: state => ({ ...state, curIdx: 0 }),
INC_SEGMENT: state => ({ ...state, curIdx: safeSelectNextSegment(state) }),
DEC_SEGMENT: state => ({ ...state, curIdx: safeSelectPrevSegment(state) }),
INC_WORD: state => ({ ...state, curIdx: safeSelectNextWord(state) }),
DEC_WORD: state => ({ ...state, curIdx: safeSelectPrevWord(state) }),
INC_SENTENCE: state => ({ ...state, curIdx: safeSelectNextSentence(state) }),
DEC_SENTENCE: state => ({ ...state, curIdx: safeSelectPrevSentence(state) }),
SET_MAX_LENGTH: (state, { maxLength }) => ({
...state,
maxLength,
running: false,
curIdx: 0
}),
SET_WPM: (state, { wpm }) => ({ ...state, wpm }),
SET_OFFSET: (state, { offset }) => ({ ...state, offset }),
START: state => ({ ...state, running: true }),
STOP: state => ({ ...state, running: false, curIdx: 0 }),
PAUSE: state => ({ ...state, running: false }),
SET_LANG: (state, { lang }) => ({ ...state, lang })
}
const store = createStore({ reducer, thunks, initialState, logging: true })
export const Provider = store.Provider
export const useStore = store.useStore
export const useSelector = store.useSelector
export const useDispatch = store.useDispatch

18
src/store/actions.js
View File

@ -1,18 +0,0 @@
export const setText = text => ({ type: 'SET_TEXT', payload: text })
export const resetSegment = () => ({ type: 'SET_CURRENT_SEGMENT', payload: 0 })
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
})
export const setWpm = wpm => ({ type: 'SET_WPM', payload: wpm })
export const setOffset = offset => ({ type: 'SET_OFFSET', payload: offset })
export const start = () => ({ type: 'START' })
export const stop = () => ({ type: 'STOP' })
export const pause = () => ({ type: 'PAUSE' })
export const setLang = lang => ({ type: 'SET_LANG', payload: lang })

83
src/store/index.js
View File

@ -1,14 +1,75 @@
import { createStore } from 'redux'
import { registerSelectors, getStateWith } from 'reselect-tools'
import { createStore } from 'potent-reducer'
import {
safeSelectNextWord,
safeSelectNextSentence,
safeSelectPrevWord,
safeSelectPrevSentence,
safeSelectNextSegment,
safeSelectPrevSegment
} from './selectors'
import { reducerFn, initialState } from './reducer'
import * as selectors from './selectors'
const initialState = {
originalText: 'Sample Text',
curIdx: 0,
maxLength: 10,
isPlaying: false,
wpm: 300,
offset: -15,
running: false,
lang: 'en',
textDisplay: {
mode: 'pagination',
options: {
pagination: { pageLength: 50 },
segments: { prev: 9, next: 40 },
sentences: { prev: 1, next: 8 }
}
}
}
export const store = createStore(
reducerFn,
initialState,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)
const thunks = {
setText: text => ({ text }),
resetSegment: () => {},
incSegment: () => {},
decSegment: () => {},
incWord: () => {},
decWord: () => {},
incSentence: () => {},
decSentence: () => {},
setMaxLength: length => ({ length }),
setWpm: wpm => ({ wpm }),
setOffset: offset => ({ offset }),
start: () => {},
stop: () => {},
pause: () => {},
setLang: lang => ({ lang })
}
registerSelectors(selectors)
getStateWith(() => store.getState())
const reducer = {
SET_TEXT: (state, { text }) => ({ ...state, originalText: text, curIdx: 0 }),
RESET_SEGMENT: state => ({ ...state, curIdx: 0 }),
INC_SEGMENT: state => ({ ...state, curIdx: safeSelectNextSegment(state) }),
DEC_SEGMENT: state => ({ ...state, curIdx: safeSelectPrevSegment(state) }),
INC_WORD: state => ({ ...state, curIdx: safeSelectNextWord(state) }),
DEC_WORD: state => ({ ...state, curIdx: safeSelectPrevWord(state) }),
INC_SENTENCE: state => ({ ...state, curIdx: safeSelectNextSentence(state) }),
DEC_SENTENCE: state => ({ ...state, curIdx: safeSelectPrevSentence(state) }),
SET_MAX_LENGTH: (state, { maxLength }) => ({
...state,
maxLength,
running: false,
curIdx: 0
}),
SET_WPM: (state, { wpm }) => ({ ...state, wpm }),
SET_OFFSET: (state, { offset }) => ({ ...state, offset }),
START: state => ({ ...state, running: true }),
STOP: state => ({ ...state, running: false, curIdx: 0 }),
PAUSE: state => ({ ...state, running: false }),
SET_LANG: (state, { lang }) => ({ ...state, lang })
}
const store = createStore({ reducer, thunks, initialState, logging: true })
export const Provider = store.Provider
export const useStore = store.useStore
export const useSelector = store.useSelector
export const useDispatch = store.useDispatch

58
src/store/reducer.js
View File

@ -1,58 +0,0 @@
import {
safeSelectNextWord,
safeSelectNextSentence,
safeSelectPrevWord,
safeSelectPrevSentence,
safeSelectNextSegment,
safeSelectPrevSegment
} from './selectors'
export const initialState = {
originalText: 'Sample Text',
curIdx: 0,
maxLength: 10,
isPlaying: false,
wpm: 300,
offset: -15,
running: false,
lang: 'en',
textDisplay: {
mode: 'pagination',
options: {
pagination: { pageLength: 50 },
segments: { prev: 9, next: 40 },
sentences: { prev: 1, next: 8 }
}
}
}
const reducer = {
SET_TEXT: (state, payload) => ({
...state,
originalText: payload,
curIdx: 0
}),
SET_CURRENT_SEGMENT: (state, payload) => ({ ...state, curIdx: payload }),
INC_SEGMENT: state => ({ ...state, curIdx: safeSelectNextSegment(state) }),
DEC_SEGMENT: state => ({ ...state, curIdx: safeSelectPrevSegment(state) }),
INC_WORD: state => ({ ...state, curIdx: safeSelectNextWord(state) }),
DEC_WORD: state => ({ ...state, curIdx: safeSelectPrevWord(state) }),
INC_SENTENCE: state => ({ ...state, curIdx: safeSelectNextSentence(state) }),
DEC_SENTENCE: state => ({ ...state, curIdx: safeSelectPrevSentence(state) }),
SET_MAX_LENGTH: (state, payload) => ({
...state,
maxLength: payload,
running: false,
curIdx: 0
}),
SET_WPM: (state, payload) => ({ ...state, wpm: payload }),
SET_OFFSET: (state, payload) => ({ ...state, offset: payload }),
START: state => ({ ...state, running: true }),
STOP: state => ({ ...state, running: false, curIdx: 0 }),
PAUSE: state => ({ ...state, running: false }),
SET_LANG: (state, payload) => ({ ...state, lang: payload })
}
export const reducerFn = (state, { type, payload }) => {
return reducer[type] ? reducer[type](state, payload) : state
}