- В данном приложение реализован просмотр списка документов, с возможностью поиска, фильтрации и сортировки.
- Документы разбиваются на страницы в зависимости от высоты экрана. Таким образом реализована пагинация.
- Документ состоит из наименования, текста, анимации, id и даты создания.
- Каждый документ можно раскрыть. При этом будет подгружено изображение. Таким образом реализована отложенная загрузка.
- Поиск осуществляется по id. Фильтрация по дате и наименованию.
- Сортировка осуществляется по наименованию и дате. Направление: по возрастанию и убыванию.
- При первом заходе и при обновлении страницы подгружается 100 случайных документов.
- Поиск по id происходит по точному совпадению. При нахождении происходит переход на первую страницу. При фокусе на input ввода id документа всплывает подсказка со случайным id, который точно есть среди списка документов.
- При фокусе на дата пикер всплывает подсказка со случайной датой создания, которая точно есть среди списка документов.
- Фильтрация по наименованию происходит по подстроке с игнорированием регистра.
- При вводе текста в input фильтрации по наименованию отображается подсказка сколько документов найдено и происходит переход на первую страницу. Если в результате фильтрации найдено ноль документов, то фильтрация работать не будет, тогда отображаются все документы.
- Кнопка "Сбросить" сбрасывает фильтрацию, сортировку и переходит на первую страницу, если вы не на первой. На вторую если вы на первой.
- Если перейти на страницу, номер которой больше чем максимальное количество страниц или не является натуральным числом (1, 2, 3, ...), то будут отображаться документы последней страницы. Если перейти на страницу, которая не является числом, ничего отображаться не будет.
- Под кнопкой сбросить отображается панель переключения страниц с помощью кнопок. Максимальное количество кнопок, которые отображаются в панели - пять. Номер текущий страницы стремится быть в середине, если это возможно. Например: если доступно 10 страниц, вы на первой, то список будет: 1, 2, 3, 4, 5. Другой пример: если доступно 10 страниц, вы на четвертой, то список будет: 2, 3, 4, 5, 6.
- Для создания дата пикера используется библиотека react-datepicker - https://reactdatepicker.com/.
- Для создания select используется библиотека react-select - https://react-select.com/home/.
- Для создания документа используется бесплатное API - https://jservice.io/api/random/.
- Для получения случайного изображения (анимации) используется бесплатное API - https://yesno.wtf/api/.
- Оптимизировать стили с помощью scss.
В приложение установлена библиотека scss v.6.0.0 для node v.16. Если у вас другая версия node, то обновите библиотеку scss.
- npm i
- npm run start
Если вы находитесь в корне папки, то можете воспользоваться командой:
npm i && npm run start
Для запуска тестов используйте команду
npm run test