35 lines
863 B
JavaScript
35 lines
863 B
JavaScript
import React, { useCallback } from 'react'
|
|
import { useSelector, useDispatch } from 'react-redux'
|
|
import { debounce } from 'debounce'
|
|
|
|
import { setMaxLength, setWpm } from '../store/actions'
|
|
import { Slider } from './Slider'
|
|
|
|
export const Options = () => {
|
|
const dispatch = useDispatch()
|
|
const maxLength = useSelector(state => state.maxLength)
|
|
const wpm = useSelector(state => state.wpm)
|
|
|
|
return (
|
|
<div>
|
|
<Slider
|
|
title={'Maximum segment length'}
|
|
min={3}
|
|
max={15}
|
|
value={maxLength}
|
|
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)), 50)}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|