/task6

Primary LanguageTypeScript

Задание №6 «Switch»

В рамках данного задания вам необходимо реализовать три задачи, за каждую из которых вы получаете по баллу. При этом внутри задач 2 и 3 вы можете выбрать подзадачу, которую хотите реализовать.

1. Bleeding Edge

Проект становится больше и с CSS появляются проблемы: БЭМ не решает проблему изоляции стилей и button написанный вами и button вашего соседа влияют друга на друга. Переведите проект на использование CSS модулей, но не забывайте о терминах и правилах, которые ввела БЭМ методология, они помогут и дальше поддерживать ваши стили в чистоте и порядке.

Динамическая природа JavaScript играет злую шутку с программистами. Они начинают забывать с каким типом данных работают, опечатываются, допускают глупые логические ошибки. Чтобы предотвратить эту проблему переведите проект на использование TypeScript вместо JavaScript.

В документации Create React App вы найдёте ответы на все вопросы о том как добавить в свой проект CSS Modules и TypeScript.

2. Пришел дизайнер и...

2.1

Некоторые приложения имеют специальный "ночной" режим, чтобы глаза не уставали при долгой работе за экраном. Добавьте на страницу возможность переключать светлую тему оформления на темную и обратно. Переключатель должен находиться в шапке и при нажатии на него вся страница меняет цветовую гамму на темную. Требования: Фон страницы должен поменяться на темный, цвет текста на светлый, логотип должен стать белым, если есть картинки со светлым фоном - нужно затемнить. Если есть иконки, то они должны стать светлыми. Также проверьте, что текст читаемый и достаточно контрастный.

Задание со звездочкой: Сделать так, чтобы после перезагрузки страницы, выбранная тема, сохранялась.

2.2

При совершении некоторых действий нужно отдельно убедиться, не ошибся ли пользователь. Вам необходимо при удалении писем добавить модальное окно, в котором вы подтверждаете действие пользователя. Для реализации данного поведения необходимо использовать элемент <dialog>. Если задание вам кажется слишком простым, то это не так, ведь многие браузеры не поддерживают этот элемент, а работать должно не только в последнем Chrome.

2.3

Нужно добавить в интерфейс Accessibility. Подробнее что это можно узнать из лекции. Да, мы будем проверять эту домашку Screen Reader'ом.

3. Новые фичи

3.1

Сверху у вас есть поле с поиском. Настало время его оживить. Ожидаемое поведение данного контрола – вы вводите текст, в списке писем остаются только те письма, которые содержат в теме/авторе/тексте письма заданный текст. Для того чтобы запустить поиск не нужно нажимать Enter или отдельную кнопку, нужно чтобы он работал практически мгновенно после нажатия клавиши, но при этом оптимально с точки зрения JS. Так же нужно показывать спиннер внутри поля, пока у вас идёт фильтрация. Контрол должен корректно работать даже тогда, когда у вас в почтовом ящике больше 10 тысяч разных писем.

3.2

Иногда появляется необходимость искать письма не только по какому-то конкретному тексту, но и по дате сообщения. Добавьте на страницу календарь, с возможностью выбора периода дат. Вы можете использовать любой календарь на react, который подходит под задачу. При выборе дат в календаре, должны выводиться только письма, пришедшие в эти даты. Так же должна быть возможность сбросить фильтры. Работа с фильтрами должна органично вписатсься в остальную фуникцональность — фильтр по тексту, выделение писем и т.д. Не забудьте, про UX: если пользователь что-то сделал не так, не нашлось писем — он должен понимать что происходит.

3.3

Писем в почтовом ящике может накопиться очень много (особенно если это уведомления от Github о новых правках работ от студентов в группе). Представьте, что писем сотни, а может и вовсе тысячи. Веб-интерфейс может к этому и не быть готов. Вам предстоит столкнуться с вопросом оптимизации рендеринга большого списка писем. Хорошенько подумайте о том, как можно отрендерить список из 1 000 писем и сделать это не более чем за 500 миллисекунд. 🔥

Дедлайн по всем 3-м заданиям – 4 мая. В PR указывайте явно какие подзадачи вы взяли в работу, чтобы нам не пришлось гадать.


Начало работы

Форкните репозиторий itmo2019/task6. Склонируйте форк и установите зависимости:

git clone https://github.com/<username>/task6/
cd task6
npm install

Настройка IDE

WebStorm включает в себя всё необходимое для работы.

Для VSCode рекомендуется установить следующие плагины:

Доступные команды

Вызываются следующим образом: npm run <command>

Команда Действие
dev Запуск приложения в режиме разработки
test Запуск тестов
build Сборка скриптов, стилей и других ресурсов для production
lint Проверка кода на потенциальные ошибки и соответствие стилю
lint-fix Исправление ошибок выявленных в процессе проверки
format Форматирование кода

Особенности команд:

  • dev — Вызывает скрипт start из react-scripts, который, в свою очередь, запускает webpack и webpack-dev-server. Сам webpack выполняет сборку скриптов, стилей и других ресурсов (картинки, шрифты, etc...), а webpack-dev-server раздаёт полученные артефакты сборки, обновляет их в режиме реального времени при изменении исходного кода.
  • test — Запускает jest в режиме watch. Он, в свою очередь, запускает тесты, которые затрагивают изменившийся код. Подробнее можно прочитать здесь.
  • build — Вызывает скрипт build из react-scripts. Он выполняет сборку скриптов, стилей и ресурсов также как и start, но применяет различные оптимизации.
  • lint — Запускает eslint, используется конфиг основанный на популярном наборе правил от airbnb.
  • lint-fix — Запускает eslint с флагом --fix. Исправляет все ошибки, для которых есть возможность автоматического фикса, остальные же требуют ручной обработки.
  • format — Запускает утилиту prettier, которая приводит весь код к единому стилю.

Перед отправкой решения рекомендуется применять команды lint-fix и format.

Документация