Реализовать приложение на React.
- Приложение должно отображать список постов.
- ТакжеТакже необходимо отображать выпадающий список пользователей. При выборе пользователя должны отображаться только его посты (фильтрация должна быть реализована на стороне сервера).
- При клике на пост должна открываться страница с информацией о посте, авторе и комментариях к нему.
Для данных использовать API: https://jsonplaceholder.typicode.com:
- для постов: https://jsonplaceholder.typicode.com/posts
- для пользователей: https://jsonplaceholder.typicode.com/users
- для комментариев: https://jsonplaceholder.typicode.com/comments
Дополнительно:
- Реализовать возможность добавления комментария с отправкой на сервер (запрос post на https://jsonplaceholder.typicode.com/comments).
- Реализовать вывод уведомлений при различных действиях (например, при отправке комментариев / при переходе между роутами).
- Использование ui библиотек приветствуется. Использовать React Router для перехода по страницам.
- На главной странице загружается 10 постов. При прокрутке вниз до определенного момента происходит дополнительная подгрузка постов: каждый раз +10 постов. Во время загрузки постов пользователь видит анимацию скелета.
- Реализован выпадающий список для выбора пользователя. При вводе имени начинается поиск совпадающих имен на сервере (реализовано с помощью debounce). Если найдены совпадения, отображается список имен. Если совпадений не найдено, отображается сообщение о отсутствии результатов. При выборе имени из списка автоматически происходит подгрузка новых постов с фильтром по выбранному пользователю.
- При клике на заголовок поста открывается страница с полной информацией о посте, включая информацию об авторе и комментарии к посту.
- Пользователь может оставлять комментарии. Для этого необходимо ввести имя и текст комментария (не менее 3 символов). Сам инпут для текста сделал с хуком на автоматическое увеличение высоты инпута (что бы инпут был высотой текста, без вертикального скроля внутри) После отправки комментария происходит перерендер страницы, и список комментариев обновляется, включая новый комментарий.
- Хотя я хотел загрузить готовый проект на GitHub, понял, что json-server работает только локально, поэтому некоторые функции не будут доступны.
- react/react-dom
- redux toolkit
- react-router-dom
- axios
- json-server
- react-loading-skeleto
- classnames
Для инициализации приложения выполните следующую команду:
Для просмотра самого приложения выполните следующую команду:
Для запуска сервера и получения данных выполните следующую команду: