diff --git a/README.md b/README.md index 0f12014..b16d3a1 100644 --- a/README.md +++ b/README.md @@ -1,187 +1,130 @@ # CampFire Critics -CampFire Critics — это веб-приложение, созданное с использованием React, Vite и Tailwind CSS, предназначенное для каталогизации медиаконтента (фильмов, сериалов, игр, аниме) и управления пользовательскими отзывами. Приложение включает в себя систему аутентификации, подробные страницы медиа, профили пользователей, систему достижений, систему поддержки и административную панель для модерации контента и управления данными. В качестве бэкенда используется PocketBase. +CampFire Critics — это современное веб-приложение для управления медиаконтентом и пользовательскими отзывами, построенное на React, Vite и Tailwind CSS. Приложение предоставляет богатый функционал для работы с медиа, рецензиями и пользовательскими профилями. -## Функции +## Основные возможности -* **Аутентификация пользователей**: Полная система регистрации, входа, выхода и сброса пароля с использованием PocketBase Auth. -* **Профили пользователей**: Просмотр профилей пользователей, отображение их статистики (количество рецензий, средний рейтинг, XP, уровень), списка достижений и витрины избранных рецензий. Возможность редактирования собственного профиля (описание, аватар, баннер, витрина). -* **Каталог медиа**: Просмотр списка медиа с фильтрацией по типу (фильмы, сериалы, игры, аниме) и поиском. -* **Страницы обзора медиа**: Подробные страницы для каждого медиа, включающие информацию о нем, список сезонов (для сериалов/аниме), а также раздел с пользовательскими рецензиями и рейтингами. -* **Система рецензий**: Пользователи могут оставлять рецензии на медиа или отдельные сезоны, выставлять оценки по нескольким характеристикам, указывать прогресс просмотра/прохождения и отмечать спойлеры. Рецензии отображаются на страницах медиа/сезонов и в профилях пользователей. -* **Система лайков рецензий**: Пользователи могут ставить лайки рецензиям других пользователей. -* **Система XP и уровней**: Пользователи получают XP за создание рецензий и получение достижений, что повышает их уровень. Уровень и XP отображаются в профиле. -* **Система достижений**: Пользователи могут получать достижения за различные действия. Список достижений отображается в профиле. -* **Система поддержки**: Пользователи могут создавать тикеты поддержки с выбором категории и описанием проблемы. -* **Административная панель**: Раздел для администраторов с возможностью управления медиа, пользователями, сезонами, достижениями и тикетами поддержки. Включает дашборд с общей статистикой. -* **Адаптивный дизайн**: Приложение адаптировано для корректного отображения на различных устройствах с использованием Tailwind CSS. +* **Управление медиаконтентом** + - Просмотр и поиск фильмов, сериалов и игр + - Детальная информация о медиа с рейтингами и отзывами + - Карусель и карточный интерфейс для удобной навигации + - Анимированные переходы и интерактивные элементы -## Технологии +* **Система рецензий** + - Создание и редактирование рецензий + - Рейтинговая система с визуализацией + - Последние рецензии в бегущей строке + - Интеграция с профилями пользователей -* **Фронтенд**: - * React: Библиотека для построения пользовательских интерфейсов. - * Vite: Быстрый сборщик фронтенда. - * Tailwind CSS: Утилитарный CSS-фреймворк для быстрой стилизации. - * React Router DOM: Для маршрутизации в приложении. - * `react-icons`: Набор популярных иконок. - * `chart.js` и `react-chartjs-2`: Для построения графиков рейтингов. - * `react-datepicker`: Для выбора дат. - * `react-fast-marquee`: Для бегущей строки (если используется). - * `react-quill`: WYSIWYG редактор для контента рецензий/описаний. - * `react-select`: Кастомизируемый компонент выбора. - * `react-toastify`: Для уведомлений (тостов). - * `dompurify`: Для очистки HTML контента. - * `uuid`: Для генерации уникальных ID. -* **Бэкенд**: - * PocketBase: Опенсорсный бэкенд в одном файле (Go) с базой данных SQLite, системой аутентификации, файловым хранилищем, realtime подписками и хуками. -* **Внешние API**: - * TMDB (The Movie Database): Используется для получения информации о фильмах, сериалах и, возможно, другом медиаконтенте (подразумевается, исходя из предыдущего README). +* **Пользовательские профили** + - Персонализированные профили с аватарами + - История рецензий и активности + - Рейтинг пользователей + - Настройки профиля -## Настройка проекта +* **Административные функции** + - Модерация контента + - Управление медиа + - Административная панель + - Статистика и аналитика -1. **Клонирование репозитория** (стандартный шаг, не применимо в WebContainer): +## Технологический стек - ```bash - git clone https://github.com/your-username/campfire-critics.git - cd campfire-critics - ``` +* **Фронтенд** + - React 18+ + - Vite + - Tailwind CSS + - Framer Motion для анимаций + - React Router для маршрутизации + - React Icons для иконок -2. **Установка зависимостей**: +* **Бэкенд** + - PocketBase для аутентификации и базы данных + - REST API + - Файловое хранилище - ```bash - npm install - ``` +* **Инструменты разработки** + - ESLint для линтинга + - PostCSS для обработки CSS + - Git для контроля версий -3. **Настройка PocketBase**: - * Скачайте и запустите PocketBase с [официального сайта](https://pocketbase.io/docs/getting-started/). - * Перейдите в Admin UI (обычно `http://127.0.0.1:8090/_/`). - * Создайте следующие коллекции (убедитесь, что включены необходимые поля и связи): - * `users` (тип `auth`): Стандартная коллекция пользователей PocketBase. Добавьте поля: `role` (select, options: `user`, `admin`), `is_critic` (bool), `description` (text), `profile_picture` (file), `banner_picture` (file), `review_count` (number, default 0), `average_rating` (number, default 0), `xp` (number, default 0), `level` (number, default 1), `showcase` (relation to `reviews`, multiple). - * `media`: Поля: `title` (text), `type` (select, options: `movie`, `tv`, `game`, `anime`), `path` (text, unique), `overview` (text), `release_date` (date), `poster` (file), `backdrop` (file), `trailer_url` (url), `characteristics` (json), `average_rating` (number, default 0), `review_count` (number, default 0), `is_published` (bool, default false), `is_popular` (bool, default false), `progress_type` (select, options: `percentage`, `episodes`, `chapters`, `none`), `created_by` (relation to `users`), `created` (datetime), `updated` (datetime). - * `seasons`: Поля: `media_id` (relation to `media`, required), `season_number` (number, required), `title` (text), `overview` (text), `release_date` (date), `poster` (file), `average_rating` (number, default 0), `review_count` (number, default 0), `is_published` (bool, default false), `created_by` (relation to `users`), `created` (datetime), `updated` (datetime). - * `reviews`: Поля: `user_id` (relation to `users`, required), `media_id` (relation to `media`, required), `season_id` (relation to `seasons`, optional), `content` (text), `ratings` (json), `overall_rating` (number, default 0), `has_spoilers` (bool, default false), `progress` (number), `created` (datetime), `updated` (datetime). - * `achievements`: Поля: `name` (text), `description` (text), `icon` (file), `xp_reward` (number, default 0), `created` (datetime), `updated` (datetime). - * `user_achievements`: Поля: `user_id` (relation to `users`, required), `achievement_id` (relation to `achievements`, required), `awarded_at` (datetime), `awarded_by` (relation to `users`, optional), `created` (datetime), `updated` (datetime). - * `review_likes`: Поля: `review_id` (relation to `reviews`, required), `user_id` (relation to `users`, required), `created` (datetime). - * `support_tickets`: Поля: `user_id` (relation to `users`, required), `category` (select, options: `bug`, `feature_request`, `question`, `other`), `subject` (text), `message` (text), `status` (select, options: `open`, `in_progress`, `closed`, default `open`), `admin_notes` (text), `created` (datetime), `updated` (datetime). - * **Настройте RLS (Row Level Security)** для каждой коллекции, чтобы определить, кто может просматривать, создавать, обновлять и удалять записи. - * **Настройте Hooks/Triggers** в PocketBase для автоматического обновления полей `average_rating` и `review_count` в коллекциях `media`, `seasons` и `users` при создании, обновлении или удалении записей в коллекциях `reviews` и `review_likes`. Также настройте хуки для обновления `xp` и `level` пользователя при создании рецензии или получении достижения. *Это критически важный шаг для корректной работы статистики.* - -4. **Настройте переменные окружения**: - - * Создайте файл `.env` в корне проекта, если его нет. - * Добавьте URL вашего PocketBase инстанса: - ``` - VITE_POCKETBASE_URL=http://127.0.0.1:8090 - ``` - Замените URL на адрес вашего запущенного PocketBase. - -5. **Запустите сервер разработки**: - - ```bash - npm run dev - ``` - -Приложение будет доступно по адресу, указанному Vite (обычно `http://localhost:5173`). - -## Структура проекта и описание модулей - -Проект организован следующим образом: +## Структура проекта ``` src/ -├── App.jsx # Основной компонент приложения, определяет маршруты. -├── main.jsx # Точка входа в приложение, инициализирует React и оборачивает App в контекст-провайдеры и роутер. -├── index.css # Основной файл стилей, импортирует Tailwind CSS. -├── pages/ # Компоненты, представляющие целые страницы приложения. -│ ├── HomePage.jsx # Главная страница с обзорами и статистикой. -│ ├── CatalogPage.jsx # Страница каталога медиа. -│ ├── MediaOverviewPage.jsx# Страница с подробным обзором конкретного медиа. -│ ├── ProfilePage.jsx # Страница профиля пользователя. -│ ├── RatingPage.jsx # Страница с рейтингами пользователей (по рецензиям, по уровню). -│ ├── SupportPage.jsx # Страница для создания тикетов поддержки. -│ ├── NotFoundPage.jsx # Страница 404. -│ ├── LoginPage.jsx # Страница входа. -│ ├── RegisterPage.jsx # Страница регистрации. -│ ├── ForgotPasswordPage.jsx# Страница сброса пароля. -│ └── admin/ # Страницы административной панели. -│ ├── AdminDashboard.jsx -│ ├── AdminMediaPage.jsx -│ ├── AdminUsersPage.jsx -│ ├── AdminSeasonsPage.jsx -│ ├── AdminAchievementsPage.jsx -│ ├── AdminTicketsPage.jsx -│ └── AdminTicketDetailPage.jsx -├── components/ # Переиспользуемые UI-компоненты. -│ ├── auth/ # Компоненты и логика, связанные с аутентификацией (AuthRoute, GuestRoute). -│ ├── layout/ # Компоненты макета (Header, Footer, Layout). -│ ├── admin/ # Компоненты для административной панели (AdminLayout). -│ ├── MediaCard.jsx # Карточка медиа для каталога/списков. -│ ├── ReviewCard.jsx # Карточка рецензии. -│ ├── RatingChart.jsx # Компонент графика рейтинга. -│ ├── SearchBar.jsx # Компонент поиска. -│ ├── UserRankCard.jsx # Карточка пользователя для рейтингов. -│ ├── AchievementCard.jsx # Карточка достижения. -│ ├── SupportTicketCard.jsx# Карточка тикета поддержки. -│ └── ... другие компоненты -├── contexts/ # React Context провайдеры для глобального состояния. -│ ├── AuthContext.jsx # Управляет состоянием аутентификации пользователя. -│ └── ProfileActionsContext.jsx # Управляет действиями, связанными с профилем (например, витрина). -├── services/ # Утилиты и сервисы для взаимодействия с API/бэкендом. -│ └── pocketbaseService.js # **Основной модуль для взаимодействия с PocketBase API.** -├── assets/ # Статические файлы (изображения, шрифты и т.д.). -└── ... другие файлы конфигурации (tailwind.config.js, postcss.config.js, vite.config.js) +├── components/ # React компоненты +│ ├── home/ # Компоненты главной страницы +│ ├── media/ # Компоненты для работы с медиа +│ ├── navigation/ # Навигационные компоненты +│ ├── profile/ # Компоненты профиля +│ ├── reactbits/ # Переиспользуемые UI компоненты +│ └── reviews/ # Компоненты для рецензий +├── contexts/ # React контексты +├── pages/ # Страницы приложения +├── services/ # Сервисы и API +└── utils/ # Вспомогательные функции ``` -### Описание ключевых модулей: +## Установка и запуск -* **`src/services/pocketbaseService.js`**: - Этот файл является центральным слоем для всех операций взаимодействия с бэкендом PocketBase. Он инициализирует PocketBase SDK и экспортирует функции для: - * **Аутентификации**: `signUp`, `signIn`, `signOut`, `getCurrentUser`, `requestPasswordReset`. - * **Пользователей**: `getUserProfile`, `getUserProfileByUsername`, `updateUserProfile`, `updateUserShowcase`, `listUsersRankedByReviews`, `listUsersRankedByLevel`. - * **Медиа**: `createMedia`, `getMediaByPath`, `getMediaById`, `listMedia`, `listPopularMedia`, `updateMedia`, `deleteMedia`, `searchMedia`. - * **Рецензий**: `getLatestReviews`, `getReviewsByMediaId`, `getReviewsByUserId`, `getUserReviewForMedia`, `createReview`, `updateReview`, `deleteReview`. - * **Сезонов**: `getSeasonsByMediaId`, `getSeasonById`, `createSeason`, `updateSeason`, `deleteSeason`. - * **Достижений**: `getAllAchievements`, `getUserAchievements`, `awardAchievement`. - * **Лайков рецензий**: `likeReview`, `unlikeReview`, `getReviewLikeCount`, `hasUserLikedReview`. - * **Тикетов поддержки**: `createSupportTicket`, `getUserTickets`, `getAllTickets`, `getTicketById`, `updateSupportTicket`. - * **Файлового хранилища**: `uploadFile`, `deleteFile`, `getFileUrl`. - * **Утилит**: `calculateLevel`, `getXpForNextLevel`, `getXpForCurrentLevel`, `validateMediaData`, `formatMediaData`, `updateRatingStats` (функция для пересчета средних рейтингов и количества рецензий, часто вызывается после операций с рецензиями). - Этот модуль абстрагирует логику работы с API, делая компоненты более чистыми. +1. **Клонируйте репозиторий** +```bash +git clone https://git.campfiregg.ru/CampFire/CampFireCritics.git +cd CampFireCritics +``` -* **`src/contexts/AuthContext.jsx`**: - Предоставляет глобальный доступ к состоянию аутентификации текущего пользователя. Использует `pocketbaseService` для выполнения операций входа/выхода/регистрации и хранит информацию о пользователе в состоянии React Context. Компоненты могут использовать хук `useAuth` для доступа к данным пользователя и функциям аутентификации. +2. **Установите зависимости** +```bash +npm install +``` -* **`src/contexts/ProfileActionsContext.jsx`**: - Предоставляет контекст для управления действиями, специфичными для страницы профиля, такими как обновление витрины рецензий. +3. **Настройте переменные окружения** +Создайте файл `.env` в корне проекта: +```env +VITE_POCKETBASE_URL=your_pocketbase_url +``` -* **`src/App.jsx`**: - Определяет структуру маршрутизации приложения с использованием `react-router-dom`. Здесь настраиваются публичные маршруты, маршруты только для гостей (`GuestRoute`) и защищенные маршруты (`AuthRoute`), включая маршруты административной панели. +4. **Запустите сервер разработки** +```bash +npm run dev +``` -* **`src/components/auth/AuthRoute.jsx` и `src/components/auth/GuestRoute.jsx`**: - Вспомогательные компоненты маршрутизации, которые используют `AuthContext` для проверки статуса аутентификации пользователя и его роли, перенаправляя пользователя на другие страницы при необходимости (например, перенаправление неаутентифицированных пользователей с защищенных маршрутов или аутентифицированных пользователей со страниц входа/регистрации). +5. **Соберите проект для продакшена** +```bash +npm run build +``` -* **`src/pages/` и `src/components/`**: - Эти директории содержат компоненты пользовательского интерфейса. `pages` содержат компоненты верхнего уровня, представляющие целые страницы, а `components` содержат более мелкие, переиспользуемые блоки UI. Стилизация в основном выполняется с помощью классов Tailwind CSS. +## Разработка -* **Административная панель (`src/pages/admin/`, `src/components/admin/AdminLayout.jsx`)**: - Набор страниц и компонентов, доступных только пользователям с ролью 'admin'. `AdminLayout` предоставляет общую структуру макета для всех страниц админки (навигация, заголовок). Страницы внутри `pages/admin/` используют функции из `pocketbaseService` для управления данными (создание, чтение, обновление, удаление) медиа, пользователей, сезонов, достижений и тикетов поддержки. +### Основные команды + +* `npm run dev` - Запуск сервера разработки +* `npm run build` - Сборка проекта +* `npm run lint` - Проверка кода линтером +* `npm run preview` - Предпросмотр собранного проекта + +### Стиль кода + +Проект использует ESLint для поддержания качества кода. Основные правила: +- Использование функциональных компонентов +- Строгая типизация пропсов +- Следование принципам чистого кода +- Комментирование сложных участков кода ## Вклад в проект -1. Откройте issue для обсуждения новой функции или исправления. -2. Сделайте fork репозитория. -3. Создайте новую ветку (`git checkout -b feature-name`). -4. Зафиксируйте изменения. -5. Запушьте ветку (`git push origin feature-name`). -6. Создайте Pull Request. - -## Требования - -* Node.js 18+ -* npm 8+ -* Запущенный инстанс PocketBase с настроенными коллекциями, RLS и хуками. +1. Создайте форк репозитория +2. Создайте ветку для новой функции (`git checkout -b feature/amazing-feature`) +3. Зафиксируйте изменения (`git commit -m 'Add amazing feature'`) +4. Отправьте изменения в форк (`git push origin feature/amazing-feature`) +5. Создайте Pull Request ## Лицензия MIT License. Подробнее см. [LICENSE](LICENSE). + +## Контакты + +CampFire Team - [@campfiregg](https://t.me/campfiregg) + +Project Link: [https://git.campfiregg.ru/CampFire/CampFireCritics](https://git.campfiregg.ru/CampFire/CampFireCritics) diff --git a/src/components/README.md b/src/components/README.md new file mode 100644 index 0000000..b6cedf3 --- /dev/null +++ b/src/components/README.md @@ -0,0 +1,77 @@ +# Компоненты + +Эта директория содержит все React компоненты приложения, организованные по функциональным категориям. + +## Структура + +``` +components/ +├── home/ # Компоненты главной страницы +├── media/ # Компоненты для работы с медиа +├── navigation/ # Навигационные компоненты +├── profile/ # Компоненты профиля +├── reactbits/ # Переиспользуемые UI компоненты +└── reviews/ # Компоненты для рецензий +``` + +## Описание категорий + +### home/ +Компоненты, используемые на главной странице приложения: +- `HeroSection` - Главный баннер с призывом к действию +- `GridSection` - Сетка с популярным контентом +- `FeaturedMedia` - Выделенные медиа +- `StatsSection` - Статистика платформы + +### media/ +Компоненты для работы с медиаконтентом: +- `MediaCard` - Карточка медиа для каталога +- `MediaDetails` - Детальная информация о медиа +- `MediaGrid` - Сетка медиа +- `MediaSearch` - Поиск медиа + +### navigation/ +Навигационные компоненты: +- `AppDock` - Док приложения +- `Navbar` - Верхняя навигационная панель +- `Sidebar` - Боковая панель навигации +- `Breadcrumbs` - Навигационные хлебные крошки + +### profile/ +Компоненты для работы с профилями пользователей: +- `ProfileHeader` - Заголовок профиля +- `ProfileStats` - Статистика пользователя +- `ProfileReviews` - Рецензии пользователя +- `ProfileSettings` - Настройки профиля + +### reactbits/ +Переиспользуемые UI компоненты: +- `TiltedCard` - Карточка с эффектом наклона +- `GridMotion` - Анимированная сетка +- `ClickSpark` - Эффект искры при клике +- `RotateText` - Вращающийся текст + +### reviews/ +Компоненты для работы с рецензиями: +- `ReviewCard` - Карточка рецензии +- `ReviewForm` - Форма создания/редактирования рецензии +- `ReviewList` - Список рецензий +- `LatestReviewsMarquee` - Бегущая строка последних рецензий + +## Использование + +Все компоненты следуют единому стилю кодирования и используют: +- Функциональные компоненты +- React Hooks +- Tailwind CSS для стилизации +- Framer Motion для анимаций +- PropTypes для типизации пропсов + +## Лучшие практики + +1. Компоненты должны быть максимально переиспользуемыми +2. Используйте мемоизацию для оптимизации производительности +3. Следуйте принципу единственной ответственности +4. Документируйте пропсы и их типы +5. Используйте контекст для глобального состояния +6. Тестируйте компоненты на разных размерах экрана \ No newline at end of file diff --git a/src/contexts/README.md b/src/contexts/README.md new file mode 100644 index 0000000..2ac382e --- /dev/null +++ b/src/contexts/README.md @@ -0,0 +1,102 @@ +# Контексты + +Эта директория содержит React Context провайдеры, которые управляют глобальным состоянием приложения. + +## Структура + +``` +contexts/ +├── AuthContext.jsx # Контекст аутентификации +├── ProfileActionsContext.jsx # Контекст действий профиля +└── ClickSparkContext.jsx # Контекст для эффекта искры при клике +``` + +## Описание контекстов + +### AuthContext +Управляет состоянием аутентификации пользователя: +- Хранит информацию о текущем пользователе +- Предоставляет методы для входа, выхода и регистрации +- Обрабатывает обновление профиля +- Управляет состоянием загрузки и ошибками + +```javascript +const { user, login, logout, register, updateProfile } = useAuth(); +``` + +### ProfileActionsContext +Управляет действиями, связанными с профилем пользователя: +- Обновление витрины рецензий +- Управление настройками профиля +- Обработка действий с достижениями +- Управление статистикой пользователя + +```javascript +const { updateShowcase, updateSettings, handleAchievement } = useProfileActions(); +``` + +### ClickSparkContext +Управляет эффектом искры при клике: +- Добавление и удаление искр +- Анимация искр +- Настройка параметров эффекта + +```javascript +const { addSpark, removeSpark, setSparkConfig } = useClickSpark(); +``` + +## Использование + +1. Импортируйте нужный контекст: +```javascript +import { useAuth } from '../contexts/AuthContext'; +``` + +2. Используйте хук в компоненте: +```javascript +const MyComponent = () => { + const { user } = useAuth(); + // ... +}; +``` + +## Лучшие практики + +1. Используйте контексты только для глобального состояния +2. Разделяйте контексты по функциональности +3. Мемоизируйте значения контекста +4. Обрабатывайте случаи, когда контекст не доступен +5. Документируйте API контекста +6. Используйте TypeScript для типизации контекста + +## Пример создания контекста + +```javascript +import React, { createContext, useContext, useState } from 'react'; + +const MyContext = createContext(); + +export const MyProvider = ({ children }) => { + const [state, setState] = useState(initialState); + + const value = { + state, + setState, + // другие методы + }; + + return ( + + {children} + + ); +}; + +export const useMyContext = () => { + const context = useContext(MyContext); + if (!context) { + throw new Error('useMyContext must be used within a MyProvider'); + } + return context; +}; +``` \ No newline at end of file diff --git a/src/pages/README.md b/src/pages/README.md new file mode 100644 index 0000000..50d1975 --- /dev/null +++ b/src/pages/README.md @@ -0,0 +1,138 @@ +# Страницы + +Эта директория содержит компоненты страниц приложения. Каждая страница представляет собой отдельный маршрут в приложении. + +## Структура + +``` +pages/ +├── HomePage.jsx # Главная страница +├── MediaPage.jsx # Страница медиа +├── ProfilePage.jsx # Страница профиля +├── ReviewsPage.jsx # Страница рецензий +├── SearchPage.jsx # Страница поиска +├── SettingsPage.jsx # Страница настроек +└── admin/ # Административные страницы + ├── DashboardPage.jsx # Панель управления + ├── MediaPage.jsx # Управление медиа + ├── UsersPage.jsx # Управление пользователями + └── ReviewsPage.jsx # Управление рецензиями +``` + +## Описание страниц + +### HomePage +Главная страница приложения: +- Отображает популярный контент +- Показывает последние рецензии +- Предоставляет быстрый доступ к основным функциям +- Включает статистику платформы + +### MediaPage +Страница с информацией о медиа: +- Детальная информация о медиа +- Список рецензий +- Возможность оставить рецензию +- Похожие медиа + +### ProfilePage +Страница профиля пользователя: +- Информация о пользователе +- История рецензий +- Достижения +- Настройки профиля + +### ReviewsPage +Страница с рецензиями: +- Список рецензий +- Фильтрация и сортировка +- Возможность создания рецензии +- Лайки и комментарии + +### SearchPage +Страница поиска: +- Поиск по медиа +- Фильтры и категории +- Результаты поиска +- Быстрый доступ к найденному + +### SettingsPage +Страница настроек: +- Настройки профиля +- Настройки приложения +- Уведомления +- Безопасность + +### admin/ +Административные страницы: +- DashboardPage: Общая статистика и управление +- MediaPage: Управление медиаконтентом +- UsersPage: Управление пользователями +- ReviewsPage: Модерация рецензий + +## Использование + +1. Импортируйте страницу в маршрутизатор: +```javascript +import HomePage from '../pages/HomePage'; +``` + +2. Добавьте маршрут: +```javascript +} /> +``` + +## Лучшие практики + +1. Разделяйте логику и представление +2. Используйте контексты для глобального состояния +3. Реализуйте ленивую загрузку для больших страниц +4. Обрабатывайте состояния загрузки и ошибок +5. Оптимизируйте производительность +6. Следуйте принципам доступности + +## Пример структуры страницы + +```javascript +import React, { useState, useEffect } from 'react'; +import { useParams } from 'react-router-dom'; +import { useAuth } from '../contexts/AuthContext'; +import { getMediaById } from '../services/pocketbaseService'; + +const MediaPage = () => { + const { id } = useParams(); + const { user } = useAuth(); + const [media, setMedia] = useState(null); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + + useEffect(() => { + const fetchMedia = async () => { + try { + const data = await getMediaById(id); + setMedia(data); + } catch (err) { + setError(err.message); + } finally { + setLoading(false); + } + }; + + fetchMedia(); + }, [id]); + + if (loading) return ; + if (error) return ; + if (!media) return ; + + return ( +
+ + + +
+ ); +}; + +export default MediaPage; +``` \ No newline at end of file diff --git a/src/services/README.md b/src/services/README.md new file mode 100644 index 0000000..4580a09 --- /dev/null +++ b/src/services/README.md @@ -0,0 +1,172 @@ +# Сервисы + +Эта директория содержит сервисы для взаимодействия с API и внешними сервисами. + +## Структура + +``` +services/ +└── pocketbaseService.js # Сервис для работы с PocketBase API +``` + +## Описание сервисов + +### pocketbaseService +Основной сервис для взаимодействия с PocketBase API. Предоставляет методы для: + +#### Аутентификация +```javascript +signUp(email, password, username) +signIn(email, password) +signOut() +getCurrentUser() +requestPasswordReset(email) +``` + +#### Пользователи +```javascript +getUserProfile(userId) +getUserProfileByUsername(username) +updateUserProfile(userId, data) +updateUserShowcase(userId, reviewIds) +listUsersRankedByReviews(limit) +listUsersRankedByLevel(limit) +``` + +#### Медиа +```javascript +createMedia(data) +getMediaByPath(path) +getMediaById(id) +listMedia(filters, page, perPage, userProfile, includeSeasons, includeReviews, sort) +listPopularMedia(limit) +updateMedia(id, data) +deleteMedia(id) +searchMedia(query) +``` + +#### Рецензии +```javascript +getLatestReviews(limit) +getReviewsByMediaId(mediaId) +getReviewsByUserId(userId) +getUserReviewForMedia(userId, mediaId) +createReview(data) +updateReview(id, data) +deleteReview(id) +``` + +#### Сезоны +```javascript +getSeasonsByMediaId(mediaId) +getSeasonById(id) +createSeason(data) +updateSeason(id, data) +deleteSeason(id) +``` + +#### Достижения +```javascript +getAllAchievements() +getUserAchievements(userId) +awardAchievement(userId, achievementId) +``` + +#### Лайки рецензий +```javascript +likeReview(reviewId, userId) +unlikeReview(reviewId, userId) +getReviewLikeCount(reviewId) +hasUserLikedReview(reviewId, userId) +``` + +#### Тикеты поддержки +```javascript +createSupportTicket(data) +getUserTickets(userId) +getAllTickets() +getTicketById(id) +updateSupportTicket(id, data) +``` + +#### Файловое хранилище +```javascript +uploadFile(file, collection, recordId, field) +deleteFile(collection, recordId, field) +getFileUrl(record, field, options) +``` + +#### Утилиты +```javascript +calculateLevel(xp) +getXpForNextLevel(level) +getXpForCurrentLevel(level) +validateMediaData(data) +formatMediaData(data) +updateRatingStats(collection, recordId) +``` + +## Использование + +1. Импортируйте нужные методы: +```javascript +import { getMediaById, createReview } from '../services/pocketbaseService'; +``` + +2. Используйте в компонентах: +```javascript +const MyComponent = () => { + const fetchMedia = async () => { + const media = await getMediaById(id); + // ... + }; +}; +``` + +## Лучшие практики + +1. Обрабатывайте ошибки API +2. Используйте мемоизацию для кэширования данных +3. Реализуйте механизм повторных попыток для нестабильных запросов +4. Логируйте важные операции +5. Валидируйте данные перед отправкой +6. Используйте TypeScript для типизации + +## Пример использования + +```javascript +import { getMediaById, createReview } from '../services/pocketbaseService'; + +const MediaPage = () => { + const [media, setMedia] = useState(null); + const [error, setError] = useState(null); + + useEffect(() => { + const fetchMedia = async () => { + try { + const data = await getMediaById(id); + setMedia(data); + } catch (err) { + setError(err.message); + } + }; + + fetchMedia(); + }, [id]); + + const handleReview = async (reviewData) => { + try { + await createReview({ + ...reviewData, + mediaId: media.id, + userId: currentUser.id + }); + // Обновить UI + } catch (err) { + setError(err.message); + } + }; + + // ... +}; +``` \ No newline at end of file