feat: Ajout de React pour le front, début de refonte du front
This commit is contained in:
ext.jeremy.guillot@maxicoffee.domains
parent
73774f84ff
commit
666636e5bf
183
assets/react/app/presentation/pages/MangaDetailPage.jsx
Normal file
183
assets/react/app/presentation/pages/MangaDetailPage.jsx
Normal file
@@ -0,0 +1,183 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { MockMangaRepository } from '../../infrastructure/api/mockMangaRepository.js';
|
||||
import { GetMangaDetail } from '../../application/useCases/getMangaDetail.js';
|
||||
import { Layout } from '../components/Layout/Layout.jsx';
|
||||
import { Toolbar } from '../components/Toolbar/Toolbar.jsx';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import {
|
||||
faStar,
|
||||
faDownload,
|
||||
faEye,
|
||||
faArrowLeft,
|
||||
faRefresh,
|
||||
faBookmark,
|
||||
faShare
|
||||
} from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
const mangaRepository = new MockMangaRepository();
|
||||
const getMangaDetail = new GetMangaDetail(mangaRepository);
|
||||
|
||||
export function MangaDetailPage() {
|
||||
const { slug } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const [manga, setManga] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
const handleRefresh = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const mangaDetail = await getMangaDetail.execute(slug);
|
||||
setManga(mangaDetail);
|
||||
} catch (err) {
|
||||
setError('Failed to load manga details');
|
||||
console.error(err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
handleRefresh();
|
||||
}, [slug]);
|
||||
|
||||
const handleMangaClick = (mangaSlug) => {
|
||||
navigate(`/manga/${mangaSlug}`);
|
||||
};
|
||||
|
||||
const handleAddMangaClick = (query = '') => {
|
||||
navigate(`/add${query ? `?q=${encodeURIComponent(query)}` : ''}`);
|
||||
};
|
||||
|
||||
const toolbarConfig = {
|
||||
leftSection: [
|
||||
{ icon: faArrowLeft, onClick: () => navigate(-1) },
|
||||
{ icon: faRefresh, onClick: handleRefresh }
|
||||
],
|
||||
rightSection: [
|
||||
{ icon: faBookmark, onClick: () => {} },
|
||||
{ icon: faShare, onClick: () => {} },
|
||||
{ icon: faDownload, onClick: () => {} }
|
||||
]
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <div className="flex justify-center items-center h-screen">Loading...</div>;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return <div className="text-red-500 text-center p-4">{error}</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<Layout onMangaClick={handleMangaClick} onAddMangaClick={handleAddMangaClick}>
|
||||
<Toolbar {...toolbarConfig} className="sticky top-16 z-10" />
|
||||
|
||||
{/* Hero section with manga info */}
|
||||
<div className="relative h-[400px]">
|
||||
<div className="absolute inset-0">
|
||||
<img
|
||||
src={manga.imageUrl}
|
||||
alt={manga.title}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent" />
|
||||
</div>
|
||||
|
||||
<div className="relative h-full container mx-auto px-4 flex items-end pb-8">
|
||||
<div className="text-white">
|
||||
<div className="flex items-center gap-4 mb-2">
|
||||
<h1 className="text-4xl font-bold">{manga.title}</h1>
|
||||
<span className="px-2 py-1 bg-green-500 rounded-full text-sm">
|
||||
{manga.status}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-6 mb-4">
|
||||
<div className="flex items-center">
|
||||
<FontAwesomeIcon icon={faStar} className="text-yellow-400 mr-2" />
|
||||
<span>{manga.rating}</span>
|
||||
</div>
|
||||
<span>{manga.publicationYear}</span>
|
||||
<span>{manga.author}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2 mb-4">
|
||||
{manga.genres.map((genre, index) => (
|
||||
<span
|
||||
key={index}
|
||||
className="px-3 py-1 bg-gray-700/50 rounded-full text-sm"
|
||||
>
|
||||
{genre}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<p className="max-w-3xl text-gray-200">
|
||||
{manga.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Chapters section */}
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
{Array.from(manga.chapters.entries()).map(([volume, chapters]) => (
|
||||
<div key={volume} className="mb-8">
|
||||
<h2 className="text-xl font-semibold mb-4">
|
||||
Volume {volume || 'Unknown'}
|
||||
<span className="text-sm text-gray-500 ml-2">
|
||||
({chapters.length} chapters)
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
<div className="bg-white rounded-lg shadow overflow-hidden">
|
||||
<table className="w-full">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
#
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Title
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Added
|
||||
</th>
|
||||
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
{chapters.map((chapter) => (
|
||||
<tr key={chapter.id} className="hover:bg-gray-50">
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
||||
{chapter.number}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
||||
{chapter.title}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{new Date(chapter.createdAt).toLocaleDateString()}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-right">
|
||||
<button className="text-gray-400 hover:text-gray-600 mx-2">
|
||||
<FontAwesomeIcon icon={faDownload} />
|
||||
</button>
|
||||
<button className="text-gray-400 hover:text-gray-600 mx-2">
|
||||
<FontAwesomeIcon icon={faEye} />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user