Задание на React + Redux + запросы
Для разработки нам потребуются следующее:
Redux - пакеты redux и react-redux HashRouter - для меню и отдельных страниц из пакета react-router-dom Bootstrap - для визуализации, пакет react-bootstrap и bootstrap axios - для запросов на сервер, пакет axios
Визуальное представление:
Описание страниц
Компонент будет содержать 3 страница (реализуем через HashRouter):
Articles - страница с постами (она же и на скрине выше) Users - страница с пользователями Photos - страница с картинками Функционал страницы с постами
Получаем данные отсюда: https://jsonplaceholder.typicode.com/posts через axios.get() и записываем в стор при загрузки этой страницы
Выводим 3 записи по умолчанию, внизу кнопка "Show more" - при клике на которую из стора получаем ещё 3 записи, итого их 6, кнопку можно кликать до тех пор, пока все записи не будут получены, когда они кончаться, кнопка скрывается.
Вверху есть кнопка, которая переключает отображения по 3 или по 2 карточки на строку "Make big cards" или "Make small cards". Скрин ниже
У каждой записи есть три кнопки "View" - при клике открывается модалка с детальной информацией записи, "Change color" - меняет цвет карточки (любые 3 цвета придумайте) - скрин ниже, "Edit" - модалка с возможность изменить запись (об этом ещё ниже читайте)
Скрин: страница с изменным видом по 2 на строку и примером смены цвета у карточке:
Скрин: пример детального просмотра при клике на кнопку "View"
Также есть кнопка вверху "Add Article" - она открывает модалку с формой, где выводятся поля "title" и "body" и кнопка "Create", при клике на которую в стор добавляется новая запись и она добавляется последний в общий список (Ещё нужно записи дать id)
У каждой записи выводиться кнопка "Edit" при клике на которую открывается такая же модалка, только с заполненными данными данной записи и кнопка "Update", которая меняет в сторе нашу запись
У каждой записи выводиться кнопка "Delete" при клике на которую появляется модалка "Do you really want to delete this card?" и две кнопки "Yes" и "No". При клике на "Yes" - запись удаляется из стора, модалка закрывается, на "No" - просто закрываем модалку
Страница с пользователями
Получаем данные отсюда: https://jsonplaceholder.typicode.com/users через axios.get() и записываем в стор при загрузки этой страницы.
Аналогичный функционал с постами, только выводим данные другие. В карточке - name, email, phone, а в модалках на создание и изменение все оставшиеся поля, кроме address и company.
Страница с фото
Получаем данные отсюда: https://jsonplaceholder.typicode.com/photos через axios.get() и записываем в стор при загрузки этой страницы.
Аналогичный функционал с постами, только выводим данные другие. В карточке - title и отображаем само фото ().
В модалке на создание и редактирование только два поля title и image url (Ссылка на картинку).