From 29c7aa9cf5729aed826e74af92b1b200b8d020e8 Mon Sep 17 00:00:00 2001
From: Alfred Melch <dev@melch.pro>
Date: Sat, 14 Dec 2019 19:22:18 +0100
Subject: [PATCH] Make debouncer more responsive

---
 src/components/Options.js | 11 +++++++----
 src/store/reducer.js      |  7 ++++++-
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/Options.js b/src/components/Options.js
index 88c326d..a6c3a51 100644
--- a/src/components/Options.js
+++ b/src/components/Options.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useCallback } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import { debounce } from 'debounce'
 
@@ -15,16 +15,19 @@ export const Options = () => {
       <Slider
         title={'Maximum segment length'}
         min={3}
-        max={14}
+        max={15}
         value={maxLength}
-        onChange={debounce(val => dispatch(setMaxLength(val)), 200)}
+        onChange={useCallback(
+          debounce(val => dispatch(setMaxLength(val)), 100, true),
+          [dispatch]
+        )}
       />
       <Slider
         title={'Words per minute'}
         min={100}
         max={1000}
         value={wpm}
-        onChange={debounce(val => dispatch(setWpm(val)), 200)}
+        onChange={debounce(val => dispatch(setWpm(val)), 50)}
       />
     </div>
   )
diff --git a/src/store/reducer.js b/src/store/reducer.js
index 344a4bf..0b65f1f 100644
--- a/src/store/reducer.js
+++ b/src/store/reducer.js
@@ -27,7 +27,12 @@ const reducer = {
   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 }),
+  SET_MAX_LENGTH: (state, payload) => ({
+    ...state,
+    maxLength: payload,
+    running: false,
+    curIdx: 0
+  }),
   SET_WPM: (state, payload) => ({ ...state, wpm: payload }),
   START: state => ({ ...state, running: true }),
   STOP: state => ({ ...state, running: false, curIdx: 0 }),