Validation_form-table

1. 📋 Общее описание
2. 📦 Технологический стек
3. ⚙️ Архитектура приложения
4. 🧪 Тестирование компонентов
5. ✅ Запуск проекта

📋 Общее описание

Проект использует менеджер пакетов yarn.-> Реализована форма для регистрации, которая принимает и валидирует следующие данные:

• Email 📧
• Пароль 🔒
• ФИО 👤
• Возраст 🎂
• Пол ⚧️

Форма также включает состояние кнопки (disabled во время отправки) и таблицу, которая реализует infinite loader для отображения данных.

📦 Технологический стек

• Конфигурация проекта: Vite + React + TypeScript
• Менеджер пакетов: Yarn
• Сервер данных: json-server

⚙️ Архитектура приложения

Использование TanStack Query

Приложение не использует state-manager (например, Redux или MobX). Вместо этого, для управления состоянием данных применяется TanStack Query и его хук useInfiniteQuery. Это решение было выбрано по следующим причинам:

• Упрощение кода: TanStack Query позволяет писать меньше кода, связанного с управлением состоянием.
• Автоматическое кэширование и обновление данных: TanStack Query автоматически кэширует данные и обновляет их при необходимости, это упрощает работу с API.
• Поддержка infinite scrolling: Хук useInfiniteQuery подходит для реализации бесконечной прокрутки, что позволяет загружать данные по мере необходимости, а так же обновлять только те данные что нужны в конкретный момент.

Сервер и API

В качестве сервера json-server. Используется роут /posts для обработки всех запросов, связанных с данными.

• Форма отправляет данные на сервер, создавая новую запись.
• Таблица при прокрутке загружает новые записи, делая запрос к API /posts, пока данные не закончатся. Для отслеживания видимости элементов и инициирования запросов используется библиотека react-intersection-observer.

🧪 Тестирование компонентов

Запуск тестов

• Пропишите yarn test в директории с проектом

Тесты для ValidationForm

Тесты для компонента ValidationForm проверяют, что все данные корректно отправляются в функцию createPost. Вот основные моменты:

• Проверяется, что при заполнении всех полей формы и нажатии кнопки "Отправить" вызывается функция createPost с правильными данными.

Тесты для DataTable

Тесты для компонента DataTable проверяют:

1. Корректный рендеринг данных после успешного запроса.
2. Обработку ошибок при неудачном запросе.

✅ Запуск проекта

1. Убедитесь, что установлен Node.js LTS
2. Скачайте проект: https://github.com/yermaka-a/validation_form-table
3. Для установки зависимостей: yarn install
4. Запустите сервер: npx json-server ./db/db.json
5. Запустите приложение в отдельном терминале yarn dev