KostyanB / sorting-tab

SortingTab test-task React, Recoil, Styled Components, React Animation, Users data from API, Modal Currency API, Drag-scroll tab, Support Dark theme.

"Sorting tab"

Тестовое задание.

О приложениии

Демо

• Стартовые настройки приложения в env.json
• Приложение принимает входные параметры: месяц, год, количество пользователей на странице
• При старте в таблицу загружаются данные о длительности визитов пользователя за выбранный месяц по дням и рассчитывается итог за месяц (для демо fake-загрузка данных за 1 месяц)
• Стартовая сортировка по имени пользователя
• Сортировка по всем столбцам. Направление выбирается стрелками
• Пагинация по 10 пользователей на страницу
• Выбор отображаемой страницы кнопками пагинации или кликом по номеру
• При смене направления или столбца сортировки устанавливается 1 страница
• Блокировка кнопок пагинации при достижении первой/последней страницы
• Подсветка активного направления сортировки и активной пагинации
• Вывод в заголовок активного месяца/года
• Поиск по имени (части имени) или ID пользователя
• Показ ID пользователя в title при наведении курсора на User name
• Поддержка drag-scroll с фиксацией первого и последнего столбцов
• При клике на ячейку в заголовке выводится модальное окно с данными API-запроса курсов валют за выбранную дату
• Поддержка темной темы браузера

Стек технологий

• ReactJS, Recoil, StyledComponents, React-indiana-drag-scroll, Grid/Flex.
• Исходные данные юзеров для fake-Api в public/db.
• Получение курсов валют по Api за выбранную дату c openexchangerates.org
• Сборка с помощью Create React App.
• Деплой демо готовой сборки на Firebase Hosting.

Как установить?

• Скопировать содержимое репозитория в рабочую папку
• Для загрузки данных с реального API прописать url в env.backend.getUsersUrl и формирование apiUrl в функции 'prepareUrl' в App.js.
• В терминале выполнить команду npm install
• В случае создания проекта с помощью Create React App дополнительно установить пакеты из add_packages.txt.
• Проверить соответствие версий установленной NodeJS и пакета node-sass в документации.
• Запустить development mode командой npm start.
• Открыть http://localhost:3000 для просмотра в браузере.
• Для сборки приложения команда npm run build. Готовый проект будет в папке build рабочей директории.# Getting