В тестовом задании представлены обязательные и дополнительные пункты. Чтобы тестовое задание считалось выполненным, необходимо реализовать обязательные пункты. Дополнительные пункты можно делать по желанию в любом количестве, их выполнение будет говорить о вашем профессиональном уровне. В соответствии со сложностью выполнения заданий нами будут оценены ваши компетенции и выдвинуто соответствующее зарплатное предложение.
Необходимо с помощью библиотеки React реализовать небольшое приложение, которое выводит данные, полученные с помощью API запросов, в таблицу. Вы можете использовать любой доступный API (например https://swapi.dev/).
• Приложение написано исключительно на функциональных компонентах (хуках).
• Присутствует минимальная верстка – дизайн также остается на ваше усмотрение. Запрещено использовать библиотеки компонентов.
• Реализовать кнопку, которая при нажатии отправляет запрос на получение данных с сервера.
• При успешном выполнении запроса вывести данные в таблицу 5х10 (без учета заголовков). Какие данные выводить – на ваше усмотрение.
• Реализовать кнопку очистки таблицы. При нажатии на нее, все данные из таблицы должны очиститься до нового запроса.
• До отправки запроса и при полной очистке таблицы выводить заглушку / подсказку об отсутствии загруженных данных.
• Код написан на typescript’e.
• Реализовать механизм управления состоянием приложения. Что должно храниться в состоянии – на ваш выбор. Разрешено использовать библиотеки (предпочтение отдать MobX).
• Каждую строку таблицы можно удалить отдельно. Перед удалением выводить модальное окно для пользователя с кнопками подтверждения, либо отмены.
• Реализовать сортировку по клику на заголовок столбца (например, по алфавиту).
• Реализовать прелоадер загрузки данных.
• Реализовать механизм сохранения – перезагрузка не должна терять текущие данные страницы.
• Строки таблицы можно перемещать между собой (механизм drag & drop). Запрещено использовать библиотеки.
• Столбцы и строки можно ресайзить. Запрещено использовать библиотеки.
• Перезагрузка страницы не должна терять изменения, внесенные с помощью двух указанных выше механизмов.
• Реализовать пагинацию для таблицы. Для удобства можно выводить больше данных. Важно, чтобы пагинация осуществлялась в рамках одной страницы (без изменения URL’a).
• Добавить роутинг в приложение (Разрешено использовать библиотеки). Создать дополнительную страницу, которая содержит форму для ручного добавления новой строки в таблицу. В форме, соответственно, должно быть количество инпутов, соответствующее количеству заголовков колонок таблицы. Каждый инпут должен валидироваться как минимум на непустое значение. Если валидация заполненных данных не проходит – блокировать кнопку отправки формы. При успешном добавлении новой строки – выводить сообщение об успехе (как – на ваш выбор) и перенаправлять пользователя на страницу с таблицей, в которой уже должна быть добавленная строка.