Stopwatch / Slomux

Тестовое задание CSSSR

Slomux — упрощённая, сломанная реализация Flux. Перед вами небольшое приложение, написанное на React + Slomux. Это нерабочий секундомер с настройкой интервала обновления.

Исправьте ошибки и потенциально проблемный код, почините приложение и прокомментируйте своё решение.

При нажатии на "старт" должен запускаться секундомер и через заданный интервал времени увеличивать свое значение на значение интервала.

При нажатии на "стоп" секундомер должен останавливаться и сбрасывать свое значение.

Установка:

$ git clone https://[email protected]/unmyke/stopwatch.git

$ npm install

Запуск приложения в режиме разработки:

$ npm start

Сборка проекта (результат сборки в папке './build'):

$ npm build

Внесенные изменения

модуль slomux

StoreContext

• для передачи хранилища использован новый Context API;

Provider

• классовый компонент Provider заменен функциональным;
• использован новый Context API;

createStore

• добавлена функция unsubsсribe для возможности отписаться от изменений в хранилище;
• исправлена инициация состояния хранилища: в случае, если в функцию не передано начальное состояние хранилища, то оно устанавливается в значение начального состояния корневого редьюсера;

connect

• исправлено некорректное поведение, при котором компоненты, обернутые HOC'ом connect в WrappedComponent, не обновлялись при монтировании;
• добавлена отписка от обновления компонента WrappedComponent перед отмонтированием;
• классовый компонент WrappedComponent заменен функциональным с использованием хуков для принудительного обновления оборачиваемых компонентов (useState и useEffect) и получения хранилища состояния (useContext);

reducer

• добавлено значение начального состояние;
• добавлен возврат текущего состояния при передаче экшна, обработка которого не предусмотрена;
• добавлена проверка при обработке экшна CHANGE_INTERVAL, не допускающего установки состояния (интервала времени) в отрицательное значение;

компоненты

Interval

• исправлена очередность аргументов при вызове HOC'а connect;

• добавлена логика UI, предотвращающая:

  • установку отрицательного значения интервала (отключение кнопки декремента);
  • изменение интервала при запущенном секундомере (отключение кнопок изменения интервала);

• классовый компонент IntervalComponent заменен функциональным;

Timer

• функции обработчиков кнопок "Старт" и "Стоп" заменены на стрелочные функции во избежание потери контекста;

• в обработчике кнопки "Старт" изменено использование функции setTimeout на setInterval для предотвращения остановки секундомера по истечению временного интервала currentInterval;

• добавлено состояние компонента сurrentIntervalId, хранящее идентификатор интервала setInterval. На основании значения сurrentIntervalId определяется факт запуска секундомера, что дает возможность корректно выполнить отмену выполнения коллбека setInterval при остановке секундомера, предотвращающая изменение состояния currentTime после остановки;

• добавлена отчистка интервала при отмонтировании компонента;

• добавлена логика UI, предотвращающая:

  • запуск секундомера повторно (отключение кнопки "Старт");
  • запуск секундомера при незаданном значение интервала (отключение кнопки "Старт");
  • остановка уже остановленного секундомера (отключение кнопки "Стоп");

• классовый компонент TimerComponent заменен функциональным, хранение состояния UI реализовано с помощью хука useState.

Демо