Россомахина Арина, M3337

README.md

@@ -1,27 +1,68 @@
-# Задание №5 «Catharsis»
+# Задание №6 «Switch»
 
-Современный Web шагнул далеко вперед. Для решения актуальных задач классический подход к созданию сайтов подвергается значительной трансформации как в идеологическом, так и в техническом планах.
+В рамках данного задания вам необходимо реализовать три задачи, за каждую из которых вы получаете по баллу. При этом внутри задач 2 и 3 вы можете выбрать подзадачу, которую хотите реализовать.
 
-Мы предлагаем вам перенести всю функциональность реализованную ранее на новый технологический стек, в основе которого лежит React и подготовили для вас шаблон проекта, в котором уже решены трудности, с которыми сталкиваются программисты в начале разработки.
+## 1. Bleeding Edge
 
-## Требования
+Проект становится больше и с CSS появляются проблемы: БЭМ не решает проблему изоляции стилей и button написанный вами и button вашего соседа влияют друга на друга. Переведите проект на использование CSS модулей, но не забывайте о терминах и правилах, которые ввела БЭМ методология, они помогут и дальше поддерживать ваши стили в чистоте и порядке.
 
-– Приложение должно быть разработано на основе шаблона без модификаций сборки.
+Динамическая природа JavaScript играет злую шутку с программистами. Они начинают забывать с каким типом данных работают, опечатываются, допускают глупые логические ошибки. Чтобы предотвратить эту проблему переведите проект на использование TypeScript вместо JavaScript.
 
-– Логика не должна пострадать: должно работать добавление/удаление/выделение/открытие писем.
+В документации Create React App вы найдёте ответы на все вопросы о том как добавить в свой проект
+[CSS Modules](https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet) и
+[TypeScript](https://facebook.github.io/create-react-app/docs/adding-typescript).
 
-– Анимации тоже должны остаться и они так же должны быть сделаны с использованием CSS.
+## 2. Пришел дизайнер и...
 
-Стилизовать можно любым способом описанным в документации [Create React App](https://facebook.github.io/create-react-app/docs/adding-a-stylesheet), но не забывайте о БЭМ.
+### 2.1
+
+Некоторые приложения имеют специальный "ночной" режим, чтобы глаза не уставали при долгой работе за экраном.
+Добавьте на страницу возможность переключать светлую тему оформления на темную и обратно. Переключатель должен находиться в шапке и при нажатии на него вся страница меняет цветовую гамму на темную.
+Требования:
+Фон страницы должен поменяться на темный, цвет текста на светлый, логотип должен стать белым, если есть картинки со светлым фоном - нужно затемнить. Если есть иконки, то они должны стать светлыми. Также проверьте, что текст читаемый и достаточно контрастный.
+
+Задание со звездочкой:
+Сделать так, чтобы после перезагрузки страницы, выбранная тема, сохранялась.
+
+### 2.2
+
+При совершении некоторых действий нужно отдельно убедиться, не ошибся ли пользователь. Вам необходимо при удалении писем добавить модальное окно, в котором вы подтверждаете действие пользователя. Для реализации данного поведения необходимо использовать элемент [`<dialog>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog). Если задание вам кажется слишком простым, то это не так, ведь многие браузеры не поддерживают этот элемент, а работать должно не только в последнем Chrome.
+
+### 2.3
+
+Нужно добавить в интерфейс Accessibility. Подробнее что это можно узнать из [лекции](https://youtu.be/36SkjSZhNY0). Да, мы будем проверять эту домашку Screen Reader'ом.
+
+## 3. Новые фичи
+
+### 3.1
+
+Сверху у вас есть поле с поиском. Настало время его оживить. Ожидаемое поведение данного контрола – вы вводите текст, в списке писем остаются только те письма, которые содержат в теме/авторе/тексте письма заданный текст. Для того чтобы запустить поиск не нужно нажимать Enter или отдельную кнопку, нужно чтобы он работал практически мгновенно после нажатия клавиши, но при этом оптимально с точки зрения JS. Так же нужно показывать спиннер внутри поля, пока у вас идёт фильтрация. Контрол должен корректно работать даже тогда, когда у вас в почтовом ящике больше 10 тысяч разных писем.
+
+### 3.2
+
+Иногда появляется необходимость искать письма не только по какому-то конкретному тексту, но и по дате сообщения.
+Добавьте на страницу календарь, с возможностью выбора периода дат. Вы можете использовать любой календарь на react, который подходит под задачу.
+При выборе дат в календаре, должны выводиться только письма, пришедшие в эти даты. Так же должна быть возможность сбросить фильтры.
+Работа с фильтрами должна органично вписатсься в остальную фуникцональность — фильтр по тексту, выделение писем и т.д.
+Не забудьте, про UX: если пользователь что-то сделал не так, не нашлось писем — он должен понимать что происходит.
+
+### 3.3
+
+Писем в почтовом ящике может накопиться очень много (особенно если это уведомления от Github о новых правках работ от студентов в группе). Представьте, что писем сотни, а может и вовсе тысячи. Веб-интерфейс может к этому и не быть готов. Вам предстоит столкнуться с вопросом оптимизации рендеринга большого списка писем. Хорошенько подумайте о том, как можно отрендерить список из 1 000 писем и сделать это не более чем за 500 миллисекунд. 🔥
+
+Дедлайн по всем 3-м заданиям – <b>4 мая</b>.
+В PR указывайте явно какие подзадачи вы взяли в работу, чтобы нам не пришлось гадать.
+
+<hr>
 
 ## Начало работы
 
-Форкните репозиторий `itmo2019/task5`.
+Форкните репозиторий `itmo2019/task6`.
 Склонируйте форк и установите зависимости:
 
 ```bash
-git clone https://github.com/<username>/task5/
-cd task5
+git clone https://github.com/<username>/task6/
+cd task6
 npm install
 ```
 
@@ -66,5 +107,4 @@ WebStorm включает в себя всё необходимое для ра
 - [React](https://reactjs.org) 🇺🇸
 - [React](https://ru.reactjs.org) 🇷🇺
 - [Create React App](https://facebook.github.io/create-react-app/docs/getting-started) 🇺🇸
-
-![We need to go deeper](https://raw.githubusercontent.com/evgenymarkov/public-images/master/go-deeper.png)
+- [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/basic-types.html) 🇺🇸