138 lines
4.7 KiB
Markdown
138 lines
4.7 KiB
Markdown
# Страницы
|
||
|
||
Эта директория содержит компоненты страниц приложения. Каждая страница представляет собой отдельный маршрут в приложении.
|
||
|
||
## Структура
|
||
|
||
```
|
||
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
|
||
<Route path="/" element={<HomePage />} />
|
||
```
|
||
|
||
## Лучшие практики
|
||
|
||
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 <LoadingSpinner />;
|
||
if (error) return <ErrorMessage message={error} />;
|
||
if (!media) return <NotFound />;
|
||
|
||
return (
|
||
<div className="container mx-auto px-4 py-8">
|
||
<MediaHeader media={media} />
|
||
<MediaContent media={media} />
|
||
<ReviewsSection mediaId={media.id} />
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default MediaPage;
|
||
``` |