111 lines
4.2 KiB
JavaScript
111 lines
4.2 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
||
import { useParams } from 'react-router-dom';
|
||
import { listMedia } from '../services/pocketbaseService'; // Import listMedia
|
||
import TiltedCard from '../components/reactbits/Components/TiltedCard/TiltedCard'; // Import TiltedCard
|
||
import { useAuth } from '../contexts/AuthContext'; // Import useAuth
|
||
|
||
const DiscoverPage = () => {
|
||
const { type } = useParams();
|
||
const [pageTitle, setPageTitle] = useState('');
|
||
const [mediaList, setMediaList] = useState([]); // State for media list
|
||
const [loading, setLoading] = useState(true);
|
||
const [error, setError] = useState(null);
|
||
const { userProfile } = useAuth(); // Get userProfile from auth context
|
||
|
||
useEffect(() => {
|
||
// Set page title based on the 'type' parameter
|
||
let title = '';
|
||
switch (type) {
|
||
case 'movie': // Changed from 'movies' to 'movie' to match Supabase type
|
||
title = 'Фильмы';
|
||
break;
|
||
case 'tv':
|
||
title = 'Сериалы';
|
||
break;
|
||
case 'game': // Changed from 'games' to 'game' to match Supabase type
|
||
title = 'Игры';
|
||
break;
|
||
case 'anime': // Added case for Anime
|
||
title = 'Аниме';
|
||
break;
|
||
default:
|
||
title = 'Неизвестный тип';
|
||
break;
|
||
}
|
||
setPageTitle(title);
|
||
|
||
// Fetch media based on type
|
||
const fetchMedia = async () => {
|
||
try {
|
||
setLoading(true);
|
||
setError(null);
|
||
console.log(`Attempting to fetch media for type: ${type}`); // Added logging
|
||
// Use listMedia to fetch data filtered by type
|
||
// listMedia now returns data with average_rating and review_count
|
||
// Pass the current user to listMedia for permission checks if needed
|
||
// Pass the type filter
|
||
// Default sort for discover pages could be by creation date or title
|
||
const { data } = await listMedia(type, 1, 20, userProfile, null, true, '-created'); // Pass type filter, userProfile, only published, default sort
|
||
|
||
console.log('Successfully fetched media:', data); // Added logging
|
||
// The data from listMedia is already formatted with average_rating and review_count
|
||
setMediaList(data);
|
||
} catch (err) {
|
||
console.error('Error fetching media list:', err);
|
||
// Check if the error is a ClientResponseError and provide specific message if possible
|
||
if (err.response && err.response.message) {
|
||
setError(`Ошибка загрузки: ${err.response.message}`);
|
||
} else {
|
||
setError('Не удалось загрузить список медиа');
|
||
}
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
if (type) {
|
||
fetchMedia();
|
||
} else {
|
||
// Handle case where type is not provided (e.g., /discover)
|
||
setLoading(false);
|
||
setMediaList([]);
|
||
}
|
||
|
||
}, [type, userProfile]); // Re-run effect when type or userProfile changes
|
||
|
||
if (loading) {
|
||
return <div className="min-h-screen bg-campfire-dark pt-20 flex justify-center items-center"><div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-campfire-amber"></div></div>;
|
||
}
|
||
|
||
if (error) {
|
||
return <div className="min-h-screen bg-campfire-dark pt-20 flex justify-center items-center"><div className="bg-status-error/20 text-status-error p-4 rounded-lg text-center">{error}</div></div>;
|
||
}
|
||
|
||
return (
|
||
// Added min-h-screen and bg-campfire-dark to ensure dark background
|
||
<div className="min-h-screen bg-campfire-dark pt-20 container-custom py-8"> {/* Added bg-campfire-dark */}
|
||
<h1 className="text-3xl font-bold mb-6 text-campfire-light">Раздел: {pageTitle}</h1>
|
||
|
||
{mediaList.length > 0 ? (
|
||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-8 md:gap-20">
|
||
{mediaList.map((mediaItem) => (
|
||
<TiltedCard
|
||
key={mediaItem.id}
|
||
imageSrc={mediaItem.poster_path}
|
||
captionText={mediaItem.title}
|
||
rating={mediaItem.rating}
|
||
releaseDate={mediaItem.release_date}
|
||
/>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<p className="text-campfire-ash">
|
||
Пока нет медиа в этом разделе.
|
||
</p>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default DiscoverPage;
|