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
185
assets/react/app/presentation/pages/AddMangaPage.jsx
Normal file
185
assets/react/app/presentation/pages/AddMangaPage.jsx
Normal file
@@ -0,0 +1,185 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useNavigate, useSearchParams } from 'react-router-dom';
|
||||
import { Layout } from '../components/Layout/Layout';
|
||||
import { Toolbar } from '../components/Toolbar/Toolbar';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faArrowLeft, faSearch, faStar } from '@fortawesome/free-solid-svg-icons';
|
||||
import { MockMangaRepository } from '../../infrastructure/api/mockMangaRepository';
|
||||
import { SearchMangas } from '../../application/useCases/searchMangas';
|
||||
|
||||
const mangaRepository = new MockMangaRepository();
|
||||
const searchMangas = new SearchMangas(mangaRepository);
|
||||
|
||||
export function AddMangaPage() {
|
||||
const navigate = useNavigate();
|
||||
const [searchParams] = useSearchParams();
|
||||
const initialQuery = searchParams.get('q') || '';
|
||||
|
||||
const [query, setQuery] = useState(initialQuery);
|
||||
const [results, setResults] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [selectedManga, setSelectedManga] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (initialQuery) {
|
||||
handleSearch(initialQuery);
|
||||
}
|
||||
}, [initialQuery]);
|
||||
|
||||
const handleSearch = async (searchQuery) => {
|
||||
if (!searchQuery.trim()) {
|
||||
setResults([]);
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const searchResults = await searchMangas.execute(searchQuery);
|
||||
setResults(searchResults);
|
||||
} catch (error) {
|
||||
console.error('Search error:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleMangaClick = (slug) => {
|
||||
navigate(`/manga/${slug}`);
|
||||
};
|
||||
|
||||
const handleAddMangaClick = (query = '') => {
|
||||
navigate(`/add${query ? `?q=${encodeURIComponent(query)}` : ''}`);
|
||||
};
|
||||
|
||||
const toolbarConfig = {
|
||||
leftSection: [
|
||||
{ icon: faArrowLeft, onClick: () => navigate(-1) }
|
||||
]
|
||||
};
|
||||
|
||||
return (
|
||||
<Layout onMangaClick={handleMangaClick} onAddMangaClick={handleAddMangaClick}>
|
||||
<Toolbar {...toolbarConfig} className="sticky top-16 z-10" />
|
||||
|
||||
<div className="container mx-auto px-4 py-6">
|
||||
<h1 className="text-2xl font-bold mb-6">Ajouter un manga</h1>
|
||||
|
||||
<div className="bg-white rounded-lg shadow-sm p-6">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
value={query}
|
||||
onChange={(e) => {
|
||||
setQuery(e.target.value);
|
||||
handleSearch(e.target.value);
|
||||
}}
|
||||
placeholder="Rechercher un manga..."
|
||||
className="w-full px-4 py-2 pl-10 border-b border-gray-300 focus:border-green-600 outline-none transition-colors"
|
||||
/>
|
||||
<FontAwesomeIcon
|
||||
icon={faSearch}
|
||||
className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="text-center py-8">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-2 border-green-600 border-t-transparent mx-auto"></div>
|
||||
</div>
|
||||
) : results.length > 0 ? (
|
||||
<div className="space-y-4 mt-6">
|
||||
{results.map((manga) => (
|
||||
<div
|
||||
key={manga.id}
|
||||
onClick={() => setSelectedManga(manga)}
|
||||
className="flex gap-4 p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer"
|
||||
>
|
||||
<img
|
||||
src={manga.imageUrl}
|
||||
alt={manga.title}
|
||||
className="w-24 h-36 object-cover rounded-lg shadow-sm"
|
||||
/>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-900">{manga.title}</h3>
|
||||
<p className="text-gray-600">{manga.author}</p>
|
||||
</div>
|
||||
<div className="flex items-center text-yellow-500">
|
||||
<FontAwesomeIcon icon={faStar} className="mr-1" />
|
||||
<span>{manga.rating}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<span className="text-sm text-gray-500">
|
||||
{manga.publicationYear} • {manga.status}
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-2 flex flex-wrap gap-2">
|
||||
{manga.genres.map((genre, index) => (
|
||||
<span
|
||||
key={index}
|
||||
className="px-2 py-1 text-xs bg-green-100 text-green-800 rounded-full"
|
||||
>
|
||||
{genre}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : query && !loading && (
|
||||
<div className="text-center py-8 text-gray-500">
|
||||
Aucun résultat trouvé pour "{query}"
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Modal de confirmation */}
|
||||
{selectedManga && (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
||||
<div className="bg-white rounded-lg shadow-xl max-w-lg w-full mx-4">
|
||||
<div className="p-6">
|
||||
<h2 className="text-xl font-semibold mb-4">Ajouter à la bibliothèque</h2>
|
||||
<div className="flex gap-4 mb-4">
|
||||
<img
|
||||
src={selectedManga.imageUrl}
|
||||
alt={selectedManga.title}
|
||||
className="w-24 h-36 object-cover rounded"
|
||||
/>
|
||||
<div>
|
||||
<h3 className="font-semibold">{selectedManga.title}</h3>
|
||||
<p className="text-gray-600">{selectedManga.author}</p>
|
||||
<p className="text-sm text-gray-500 mt-2">
|
||||
{selectedManga.genres.join(', ')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end gap-3">
|
||||
<button
|
||||
onClick={() => setSelectedManga(null)}
|
||||
className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
|
||||
>
|
||||
Annuler
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
handleMangaClick(selectedManga.slug);
|
||||
setSelectedManga(null);
|
||||
}}
|
||||
className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors"
|
||||
>
|
||||
Ajouter
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
80
assets/react/app/presentation/pages/HomePage.jsx
Normal file
80
assets/react/app/presentation/pages/HomePage.jsx
Normal file
@@ -0,0 +1,80 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { MangaGrid } from '../components/MangaGrid.jsx';
|
||||
import { Layout } from '../components/Layout/Layout.jsx';
|
||||
import { Toolbar } from '../components/Toolbar/Toolbar.jsx';
|
||||
import { MockMangaRepository } from '../../infrastructure/api/mockMangaRepository.js';
|
||||
import { GetMangaCollection } from '../../application/useCases/getMangaCollection.js';
|
||||
import {
|
||||
faRefresh,
|
||||
faSearch,
|
||||
faGear,
|
||||
faEye,
|
||||
faSort,
|
||||
faFilter
|
||||
} from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
const mangaRepository = new MockMangaRepository();
|
||||
const getMangaCollection = new GetMangaCollection(mangaRepository);
|
||||
|
||||
export function HomePage() {
|
||||
const navigate = useNavigate();
|
||||
const [mangaCollection, setMangaCollection] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
const handleRefresh = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const collection = await getMangaCollection.execute(1);
|
||||
setMangaCollection(collection);
|
||||
} catch (err) {
|
||||
setError('Failed to load mangas');
|
||||
console.error(err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
handleRefresh();
|
||||
}, []);
|
||||
|
||||
const handleMangaClick = (slug) => {
|
||||
navigate(`/manga/${slug}`);
|
||||
};
|
||||
|
||||
const handleAddMangaClick = (query = '') => {
|
||||
navigate(`/add${query ? `?q=${encodeURIComponent(query)}` : ''}`);
|
||||
};
|
||||
|
||||
const toolbarConfig = {
|
||||
leftSection: [
|
||||
{ icon: faRefresh, label: 'Refresh', onClick: handleRefresh },
|
||||
{ icon: faSearch, label: 'Search', onClick: () => {} }
|
||||
],
|
||||
rightSection: [
|
||||
{ icon: faGear, onClick: () => {} },
|
||||
{ icon: faEye, onClick: () => {} },
|
||||
{ icon: faSort, onClick: () => {} },
|
||||
{ icon: faFilter, 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" />
|
||||
<div className="container mx-auto px-4">
|
||||
<MangaGrid mangas={mangaCollection.items} onMangaClick={handleMangaClick} />
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
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