- В данном приложение реализована таблица, где данные разбиты по страницам.
- В приложение доступны такие функции как: переключение страниц, сортировка строк, поиск текста.
- Данные для таблицы получены с помощью стороннего api. Ссылка на api.
- Максимальное количество строк на странице можно изменить. За это отвечает переменная - maxAmountStringsOnPage. Дефолтное значение 10.
- Внизу страницы отображаются кнопки для переключения страниц. Номер кнопки обозначает номер страницы для перехода. Максимальное количество кнопок на странице можно изменить. За это отвечает переменная maxAmountButtonsOnPage. Дефолтное значение 5. Кнопка с номером страницы, на которой вы находитесь в данный момент, меняет цвет. Если количество доступных страниц меньше значения максимально возможных, то будет отображаться количество доступных. Например, если ввести в строку поиска: 'fa', то будет 3 кнопки.
- Внизу есть кнопки "Назад" и "Далее", для перехода на следующую и предыдущую страницу. Если вы находитесь на последней странице, то кнопка далее перенаправит вас на первую страницу, и наоборот. Если доступна только одна страница, то данные кнопки будут отсутствовать.
- Количество роутов (routes) у приложения два. Первый роут (route) это первая страница приложения. Второй роут, это страница, которая генерируется, при использовании кнопок перехода по страницам. Редактирование URL 'руками', всегда будет приводить к переходу на первую страницу, чтобы не возникало ошибок. Так же, если вы перешли на не первую страницу и нажали кнопку обновить страницу, то произойдет перенаправление на первую.
- В приложение доступна строка поиска. Поиск осуществляется по всем данным. Отображение найденных элементов, где содержится введенный текст, происходит моментально. Кроме ввода текста в поле input ничего нажимать не надо.
- При поиске вы окажетесь на той странице, на которой были до этого, если это возможно. Если невозможно, то на последней доступной странице. Описание примера, который будет далее, основывается на дефолтном значение максимального количества строк на странице.
-
- Например, вы открыли приложение и находитесь на странице 1. Переходите на последнюю страницу это 10. Вводите в строку поиска: 'a'. Данный текст содержится абсолютно во всех строках (то есть страниц будет по-прежнему 10). Далее вы добавляете пробел в строку поиска. То есть в строке поиска будет: 'a '. Такой текст встречается в 89 строках. Так как до этого вы были на 10 странице, а теперь доступно 9, произойдет переход на 9. Далее, если вы добавите: 'a', то есть в строке поиска будет: 'a a', вы окажитесь на второй странице. Потому что такой текст встречается в 20 строках, то есть максимальное количество страниц это 2. (При таких переходах в URL, порой, отображается неправильный номер страницы, хотя приложение, фактически, находится на правильной)
- Если на странице недостаточно данных для заполнения максимального количества строк, то недостающие строки заполняются пустыми значениями.
- В приложение доступна сортировка столбцов. Сортировка с названием столбца 'ID' осуществляется по числу. С названием 'Заголовок' и 'Описание' по алфавиту. Названия столбца, по которому происходит сортировка, меняет цвет. Стрелочка указывает направление сортировки. Если она указывает вверх, то от меньшего к большему, и наоборот. Дефолтное значение сортировки: ID, от меньшего к большему.
- При переходе на другую страницу способ сортировки сохраняется.
- При сортировке пустые строки всегда находятся внизу.
- npm i
- Создайте файл .env с текстом
REACT_APP_PRODUCTION=dev
Для этого можно воспользоваться командой:
echo -e "REACT_APP_PRODUCTION=dev" > .env
- npm run start
Если вы находитесь в корне папки, то можете воспользоваться командой:
npm i && echo -e "REACT_APP_PRODUCTION=dev" > .env && npm run start