Add a timer that counts down every second. The timer starts only if the test has been configured as a timed typing test. When the timer reaches 0 seconds, the test is marked complete.
Bug Fixes / Minor Changes
Miscellaneous formatting with prettier
Why
A timed typing test is one of the two common types of typing tests, the other being a test in which a target number of words are completed.
How
The timer is implemented in a useEffect hook using setInterval which updates a state variable showing the remaining time, or the countdown. A separate useEffect call marks the test complete by watching the countdown and acting only when it has reached 0.
Notes
I attempted to make the timer a separate component, but it ended up needing a lot of parameters passed to it to manage itself and then propagating changes upstream to the parent became complicated. So for now, the timer is bundled along with all the other state variables in the typing window.
Changes
Major Changes
Add a timer that counts down every second. The timer starts only if the test has been configured as a timed typing test. When the timer reaches 0 seconds, the test is marked complete.
Bug Fixes / Minor Changes
Why
A timed typing test is one of the two common types of typing tests, the other being a test in which a target number of words are completed.
How
The timer is implemented in a
useEffecthook usingsetIntervalwhich updates a state variable showing the remaining time, or the countdown. A separateuseEffectcall marks the test complete by watching the countdown and acting only when it has reached 0.Notes
I attempted to make the timer a separate component, but it ended up needing a lot of parameters passed to it to manage itself and then propagating changes upstream to the parent became complicated. So for now, the timer is bundled along with all the other state variables in the typing window.