test-task-gna

Задание.

Ограничения:

• Обязательно использование React, Typescript;
• Желательно использовать UI-библиотеку готовых компонентов (прекрасно если Ant Design, но допустимо также Material UI и любые другие);
• Желательно использовать сервис для подготовки mock API (см. примечания), например Mockoon;
• В остальном разрешено использовать любые библиотеки которые посчитаешь уместными (Redux, Mobx, Axios и др.)

Задача:

1. Подготовить эндпоинты /documents1 и /documents2 С обоих возвращаются данные в формате :

   {
      id: string,
      name: string,
      quantity: number,
      deliveryDate: string,
      price: number,
      currency: ‘USD’ | ‘RUB’,
   } []
   

2. Создать таблицу в которой будут данные из обоих запросов, по умолчанию отсортированные по deliveryDate. Все поля кроме id, являются столбцами этой таблицы.

3. Добавить возможность сортировки по всем столбцам этой таблицы.

4. Для каждой строки таблицы нужно добавить галочку выбора товара, а также в заголовке таблицы галочку выбора всех товаров.

5. В последней строке таблицы вывести результирующий показатель «Общее количество» (сумма всех quantity).

6. Добавить кнопку «Аннулировать», при нажатии на которую должно появляться модальное окно с текстом «Вы уверены что хотите аннулировать товар(ы): [названия выбранных товаров через запятую]», и кнопки «Применить», «Отклонить».

Если пользователь нажимает кнопку «Применить» отправить запрос на эндпоинт /cancel с перечислением id товаров которые мы хотим аннулировать. Если пользователь нажимает кнопку «Отклонить» закрыть модальное окно.

Примечания:

1. Допустимо захардкодить данные, получаемые с сервера по эндпоинтам /documents1 и /documents2 и отправляемые на сервер по эндпоинту /cancel, но будет плюсом имитировать клиент-серверное взаимодействие через сервис mock API или backend-сервис.
2. Требований к дизайну нет, все на усмотрение разработчика.

---

Инструкция для запуска проекта.

На данный момент приложение выложено на GitHub Pages. Соответственно, есть два варианта его просмотреть:

1.Перейти по ссылке: ссылка на приложение;

2.Либо установить приложение локально, но стоит учитывать, что сервер запускать больше нет необходимости (п.п 3-4) поскольку данные запрашиваются с сервиса моковых данных mockapi.io.

1. Скопировать репозиторий:

git clone git@github.com:BentonFraizer/test-task-gna.git

2. Установить зависимости:

npm install

3. Установить mockoon-cli:

npm install -g @mockoon/cli

Предупреждение

Для выполнения шага №4 не рекомендуется использовать Windows Powershell. Желательно воспользоваться Git Bash.

4. Запустить сервер с моковыми данными:

mockoon-cli start --data ./src/mock/data.json --port 3001

При необходимости, остановить сервер можно с помощью команды:

mockoon-cli stop 0

5. Запустить проект в работу:

npm start

6. В том случае если браузер не открылся, адресной строке необходимо ввести следующий путь: http://localhost:3000/

---

Страница приложения.