From 366c338528525b0a7346d60afc08d3b97dea1361 Mon Sep 17 00:00:00 2001 From: Alfred Melch Date: Sat, 1 Feb 2020 18:58:13 +0100 Subject: [PATCH] Move to store/index.js --- src/components/Book.js | 2 +- src/components/Options.js | 2 +- src/components/PivotMarker.js | 2 +- src/components/PlayerControl.js | 2 +- src/components/Progress.js | 2 +- src/components/SearchBar.js | 2 +- src/components/Segment.js | 2 +- src/components/SegmentControl.js | 2 +- src/components/TextInput.js | 2 +- src/components/TextOutput.js | 2 +- src/components/TotalTime.js | 2 +- src/index.js | 2 +- src/store/RSVPStore.js | 75 ----------------------------- src/store/actions.js | 18 ------- src/store/index.js | 83 +++++++++++++++++++++++++++----- src/store/reducer.js | 58 ---------------------- 16 files changed, 84 insertions(+), 174 deletions(-) delete mode 100644 src/store/RSVPStore.js delete mode 100644 src/store/actions.js delete mode 100644 src/store/reducer.js diff --git a/src/components/Book.js b/src/components/Book.js index 537fddd..e00a038 100644 --- a/src/components/Book.js +++ b/src/components/Book.js @@ -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() diff --git a/src/components/Options.js b/src/components/Options.js index ee19b7c..b4da9d5 100644 --- a/src/components/Options.js +++ b/src/components/Options.js @@ -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'] diff --git a/src/components/PivotMarker.js b/src/components/PivotMarker.js index 6b988ab..ac7b3ea 100644 --- a/src/components/PivotMarker.js +++ b/src/components/PivotMarker.js @@ -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' diff --git a/src/components/PlayerControl.js b/src/components/PlayerControl.js index ad3f238..d40f8d0 100644 --- a/src/components/PlayerControl.js +++ b/src/components/PlayerControl.js @@ -1,6 +1,6 @@ import React from 'react' -import { useDispatch, useSelector } from '../store/RSVPStore' +import { useDispatch, useSelector } from '../store' import { selectHasNextSegment, diff --git a/src/components/Progress.js b/src/components/Progress.js index 23b9872..f03e9ca 100644 --- a/src/components/Progress.js +++ b/src/components/Progress.js @@ -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 = () => { diff --git a/src/components/SearchBar.js b/src/components/SearchBar.js index 849f159..40d530d 100644 --- a/src/components/SearchBar.js +++ b/src/components/SearchBar.js @@ -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' diff --git a/src/components/Segment.js b/src/components/Segment.js index f03d96b..051db4c 100644 --- a/src/components/Segment.js +++ b/src/components/Segment.js @@ -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' diff --git a/src/components/SegmentControl.js b/src/components/SegmentControl.js index c379fde..07eeb6d 100644 --- a/src/components/SegmentControl.js +++ b/src/components/SegmentControl.js @@ -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 { diff --git a/src/components/TextInput.js b/src/components/TextInput.js index 548258a..fc62777 100644 --- a/src/components/TextInput.js +++ b/src/components/TextInput.js @@ -1,5 +1,5 @@ import React, { useState } from 'react' -import { useDispatch } from '../store/RSVPStore' +import { useDispatch } from '../store' import styles from './TextInput.css' diff --git a/src/components/TextOutput.js b/src/components/TextOutput.js index 67939bf..46ee5ee 100644 --- a/src/components/TextOutput.js +++ b/src/components/TextOutput.js @@ -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' diff --git a/src/components/TotalTime.js b/src/components/TotalTime.js index 6381b4b..d65ec56 100644 --- a/src/components/TotalTime.js +++ b/src/components/TotalTime.js @@ -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) { diff --git a/src/index.js b/src/index.js index 7cbe6da..5bbbaa0 100644 --- a/src/index.js +++ b/src/index.js @@ -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' diff --git a/src/store/RSVPStore.js b/src/store/RSVPStore.js deleted file mode 100644 index 78b7b61..0000000 --- a/src/store/RSVPStore.js +++ /dev/null @@ -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 diff --git a/src/store/actions.js b/src/store/actions.js deleted file mode 100644 index 674fbbf..0000000 --- a/src/store/actions.js +++ /dev/null @@ -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 }) diff --git a/src/store/index.js b/src/store/index.js index b280643..c2489ba 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -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 diff --git a/src/store/reducer.js b/src/store/reducer.js deleted file mode 100644 index f2d9bab..0000000 --- a/src/store/reducer.js +++ /dev/null @@ -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 -}