Move to store/index.js

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()

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']

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'

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,

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 = () => {

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'

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'

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 {

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'
 

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'

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) {

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'
 

src/store/RSVPStore.js

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

src/store/actions.js

@@ -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 })

src/store/index.js

@@ -1,14 +1,75 @@
-import { createStore } from 'redux'
+import { createStore } from 'potent-reducer'
-import { registerSelectors, getStateWith } from 'reselect-tools'
+import {
+  safeSelectNextWord,
+  safeSelectNextSentence,
+  safeSelectPrevWord,
+  safeSelectPrevSentence,
+  safeSelectNextSegment,
+  safeSelectPrevSegment
+} from './selectors'
 
-import { reducerFn, initialState } from './reducer'
+const initialState = {
-import * as selectors from './selectors'
+  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(
+const thunks = {
-  reducerFn,
+  setText: text => ({ text }),
-  initialState,
+  resetSegment: () => {},
-  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+  incSegment: () => {},
-)
+  decSegment: () => {},
+  incWord: () => {},
+  decWord: () => {},
+  incSentence: () => {},
+  decSentence: () => {},
+  setMaxLength: length => ({ length }),
+  setWpm: wpm => ({ wpm }),
+  setOffset: offset => ({ offset }),
+  start: () => {},
+  stop: () => {},
+  pause: () => {},
+  setLang: lang => ({ lang })
+}
 
-registerSelectors(selectors)
+const reducer = {
-getStateWith(() => store.getState())
+  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

src/store/reducer.js

@@ -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
-}