Skip to content

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

Notifications You must be signed in to change notification settings

KostyanB/sorting-tab

Repository files navigation

"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

About

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

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published