chore: suppression du front en react
This commit is contained in:
ext.jeremy.guillot@maxicoffee.domains
parent
c813368e2b
commit
e29433bb0c
@@ -1,53 +0,0 @@
|
||||
import React from 'react';
|
||||
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
|
||||
import { HomePage } from './presentation/pages/HomePage.jsx';
|
||||
import { MangaDetailPage } from './presentation/pages/MangaDetailPage.jsx';
|
||||
import { AddMangaPage } from './presentation/pages/AddMangaPage.jsx';
|
||||
import { ReaderPage } from './presentation/pages/ReaderPage.jsx';
|
||||
import { MangaProvider } from './presentation/context/MangaContext.jsx';
|
||||
import { ReaderProvider } from './presentation/context/ReaderContext.jsx';
|
||||
|
||||
// Placeholder components for new routes
|
||||
const PlaceholderPage = ({ title }) => (
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<h1 className="text-2xl font-bold mb-4">{title}</h1>
|
||||
<p className="text-gray-600">Cette fonctionnalité sera bientôt disponible.</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<MangaProvider>
|
||||
<ReaderProvider>
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/" element={<HomePage />} />
|
||||
<Route path="/manga/:slug" element={<MangaDetailPage />} />
|
||||
<Route path="/add" element={<AddMangaPage />} />
|
||||
<Route path="/reader/:chapterId" element={<ReaderPage />} />
|
||||
|
||||
<Route path="/import" element={<PlaceholderPage title="Import de bibliothèque" />} />
|
||||
<Route path="/discover" element={<PlaceholderPage title="Découvrir" />} />
|
||||
<Route path="/convert" element={<PlaceholderPage title="Convertir CBR en CBZ" />} />
|
||||
<Route path="/calendar" element={<PlaceholderPage title="Calendrier" />} />
|
||||
<Route path="/activity" element={<PlaceholderPage title="Activité" />} />
|
||||
|
||||
<Route path="/settings/general" element={<PlaceholderPage title="Paramètres généraux" />} />
|
||||
<Route path="/settings/folders" element={<PlaceholderPage title="Gestion des dossiers" />} />
|
||||
<Route path="/settings/scrappers" element={<PlaceholderPage title="Configuration des scrappers" />} />
|
||||
<Route path="/settings/ui" element={<PlaceholderPage title="Paramètres de l'interface" />} />
|
||||
|
||||
<Route path="/system/status" element={<PlaceholderPage title="Status du système" />} />
|
||||
<Route path="/system/backup" element={<PlaceholderPage title="Sauvegarde" />} />
|
||||
<Route path="/system/logs" element={<PlaceholderPage title="Journaux système" />} />
|
||||
<Route path="/system/updates" element={<PlaceholderPage title="Mises à jour" />} />
|
||||
|
||||
<Route path="*" element={<Navigate to="/" replace />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
</ReaderProvider>
|
||||
</MangaProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
@@ -1,9 +0,0 @@
|
||||
export class GetChapterContext {
|
||||
constructor(readerRepository) {
|
||||
this.readerRepository = readerRepository;
|
||||
}
|
||||
|
||||
async execute(chapterId) {
|
||||
return await this.readerRepository.getChapterContext(chapterId);
|
||||
}
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
export class GetMangaCollection {
|
||||
constructor(mangaRepository) {
|
||||
this.mangaRepository = mangaRepository;
|
||||
}
|
||||
|
||||
async execute(page = 1) {
|
||||
return await this.mangaRepository.getMangaCollection(page);
|
||||
}
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
export class GetMangaDetail {
|
||||
constructor(mangaRepository) {
|
||||
this.mangaRepository = mangaRepository;
|
||||
}
|
||||
|
||||
async execute(slug) {
|
||||
return await this.mangaRepository.getMangaBySlug(slug);
|
||||
}
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
export class GetPage {
|
||||
constructor(readerRepository) {
|
||||
this.readerRepository = readerRepository;
|
||||
}
|
||||
|
||||
async execute(chapterId, pageNumber) {
|
||||
return await this.readerRepository.getPage(chapterId, pageNumber);
|
||||
}
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
export class GetPages {
|
||||
constructor(readerRepository) {
|
||||
this.readerRepository = readerRepository;
|
||||
}
|
||||
|
||||
async execute(chapterId) {
|
||||
return await this.readerRepository.getPages(chapterId);
|
||||
}
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
export class SearchMangas {
|
||||
constructor(mangaRepository) {
|
||||
this.mangaRepository = mangaRepository;
|
||||
}
|
||||
|
||||
async execute(query) {
|
||||
return await this.mangaRepository.searchMangas(query);
|
||||
}
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 4.0 KiB |
@@ -1,10 +0,0 @@
|
||||
export class Chapter {
|
||||
constructor(id, number, title, volume, isVisible, createdAt) {
|
||||
this.id = id;
|
||||
this.number = number;
|
||||
this.title = title;
|
||||
this.volume = volume;
|
||||
this.isVisible = isVisible;
|
||||
this.createdAt = createdAt;
|
||||
}
|
||||
}
|
||||
@@ -1,78 +0,0 @@
|
||||
import { Chapter } from './chapter.js';
|
||||
|
||||
export class Manga {
|
||||
constructor(
|
||||
id,
|
||||
title,
|
||||
slug,
|
||||
imageUrl,
|
||||
author,
|
||||
publicationYear,
|
||||
genres,
|
||||
status,
|
||||
rating,
|
||||
description = '',
|
||||
createdAt = null
|
||||
) {
|
||||
this.id = id;
|
||||
this.title = title;
|
||||
this.slug = slug;
|
||||
this.imageUrl = imageUrl;
|
||||
this.author = author;
|
||||
this.publicationYear = publicationYear;
|
||||
this.genres = genres;
|
||||
this.status = status;
|
||||
this.rating = rating;
|
||||
this.description = description;
|
||||
this.createdAt = createdAt;
|
||||
}
|
||||
}
|
||||
|
||||
export class MangaCollection {
|
||||
constructor(items, total, page, limit, hasNextPage, hasPreviousPage) {
|
||||
this.items = items;
|
||||
this.total = total;
|
||||
this.page = page;
|
||||
this.limit = limit;
|
||||
this.hasNextPage = hasNextPage;
|
||||
this.hasPreviousPage = hasPreviousPage;
|
||||
}
|
||||
}
|
||||
|
||||
export class MangaDetail extends Manga {
|
||||
constructor(manga, chapters = []) {
|
||||
super(
|
||||
manga.id,
|
||||
manga.title,
|
||||
manga.slug,
|
||||
manga.imageUrl,
|
||||
manga.author,
|
||||
manga.publicationYear,
|
||||
manga.genres,
|
||||
manga.status,
|
||||
manga.rating,
|
||||
manga.description,
|
||||
manga.createdAt
|
||||
);
|
||||
this.chapters = this.organizeChaptersByVolume(chapters);
|
||||
}
|
||||
|
||||
organizeChaptersByVolume(chapters) {
|
||||
const volumeMap = new Map();
|
||||
|
||||
chapters.forEach(chapter => {
|
||||
const volume = chapter.volume || 0;
|
||||
if (!volumeMap.has(volume)) {
|
||||
volumeMap.set(volume, []);
|
||||
}
|
||||
volumeMap.get(volume).push(chapter);
|
||||
});
|
||||
|
||||
// Sort chapters within each volume
|
||||
volumeMap.forEach(chapters => {
|
||||
chapters.sort((a, b) => b.number - a.number);
|
||||
});
|
||||
|
||||
return new Map([...volumeMap.entries()].sort((a, b) => b[0] - a[0]));
|
||||
}
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
// Port (interface) for manga data access
|
||||
export class MangaRepository {
|
||||
async getMangaCollection(page = 1) {
|
||||
throw new Error('Not implemented');
|
||||
}
|
||||
}
|
||||
@@ -1,30 +0,0 @@
|
||||
// Port (interface) for reader data access
|
||||
export class ReaderRepository {
|
||||
/**
|
||||
* Récupère le contexte d'un chapitre
|
||||
* @param {string} chapterId - L'identifiant du chapitre
|
||||
* @returns {Promise<ReaderContext>}
|
||||
*/
|
||||
async getChapterContext(chapterId) {
|
||||
throw new Error('Not implemented');
|
||||
}
|
||||
|
||||
/**
|
||||
* Récupère une page spécifique d'un chapitre
|
||||
* @param {string} chapterId - L'identifiant du chapitre
|
||||
* @param {number} pageNumber - Le numéro de la page
|
||||
* @returns {Promise<Page>}
|
||||
*/
|
||||
async getPage(chapterId, pageNumber) {
|
||||
throw new Error('Not implemented');
|
||||
}
|
||||
|
||||
/**
|
||||
* Récupère toutes les pages d'un chapitre
|
||||
* @param {string} chapterId - L'identifiant du chapitre
|
||||
* @returns {Promise<{pages: Page[], totalItems: number, currentPage: number, itemsPerPage: number, totalPages: number}>}
|
||||
*/
|
||||
async getPages(chapterId) {
|
||||
throw new Error('Not implemented');
|
||||
}
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
export class ReaderContext {
|
||||
constructor(id, title, number, manga, navigation) {
|
||||
this.id = id;
|
||||
this.title = title;
|
||||
this.number = number;
|
||||
this.manga = manga;
|
||||
this.navigation = navigation;
|
||||
}
|
||||
}
|
||||
|
||||
export class Page {
|
||||
constructor(id, pageNumber, base64Content, mimeType, dimensions) {
|
||||
this.id = id;
|
||||
this.pageNumber = pageNumber;
|
||||
this.base64Content = base64Content;
|
||||
this.mimeType = mimeType;
|
||||
this.dimensions = dimensions;
|
||||
}
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
import React from 'react'
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import App from './App.jsx'
|
||||
import '../../styles/app.scss'
|
||||
|
||||
createRoot(document.getElementById('react-app')).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
)
|
||||
@@ -1,104 +0,0 @@
|
||||
import axios from 'axios';
|
||||
import { Manga, MangaCollection, MangaDetail } from '../../domain/manga';
|
||||
import { Chapter } from '../../domain/chapter';
|
||||
|
||||
export class ApiMangaRepository {
|
||||
constructor() {
|
||||
this.api = axios.create({
|
||||
baseURL: '/api'
|
||||
});
|
||||
}
|
||||
|
||||
async getMangaCollection(page = 1) {
|
||||
try {
|
||||
const response = await this.api.get(`/mangas?page=${page}`);
|
||||
const data = response.data;
|
||||
|
||||
const mangas = data.items.map(item => new Manga(
|
||||
item.id,
|
||||
item.title,
|
||||
item.slug,
|
||||
item.imageUrl,
|
||||
item.author,
|
||||
item.publicationYear,
|
||||
item.genres,
|
||||
item.status,
|
||||
item.rating,
|
||||
item.description,
|
||||
item.createdAt
|
||||
));
|
||||
|
||||
return new MangaCollection(
|
||||
mangas,
|
||||
data.total,
|
||||
data.page,
|
||||
data.limit,
|
||||
data.hasNextPage,
|
||||
data.hasPreviousPage
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('Error fetching manga collection:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
async searchMangas(query) {
|
||||
try {
|
||||
const response = await this.api.get(`/mangas-search?title=${encodeURIComponent(query)}`);
|
||||
const data = response.data;
|
||||
|
||||
return data.items.map(item => new Manga(
|
||||
item.externalId,
|
||||
item.title,
|
||||
item.slug,
|
||||
item.imageUrl,
|
||||
item.author,
|
||||
item.publicationYear,
|
||||
item.genres,
|
||||
item.status,
|
||||
item.rating,
|
||||
item.description,
|
||||
item.createdAt
|
||||
));
|
||||
} catch (error) {
|
||||
console.error('Error searching mangas:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
async getMangaBySlug(slug) {
|
||||
try {
|
||||
const mangaResponse = await this.api.get(`/mangas/by-slug/${slug}`);
|
||||
const mangaData = mangaResponse.data;
|
||||
|
||||
const chaptersResponse = await this.api.get(`/mangas/${mangaData.id}/chapters?page=1&limit=1000&sortOrder=desc`);
|
||||
const chaptersData = chaptersResponse.data;
|
||||
|
||||
const chapters = chaptersData.items.map(item => new Chapter(
|
||||
item.id,
|
||||
parseFloat(item.number),
|
||||
item.title,
|
||||
item.volume,
|
||||
item.isVisible,
|
||||
item.createdAt
|
||||
));
|
||||
|
||||
return new MangaDetail({
|
||||
id: mangaData.id,
|
||||
title: mangaData.title,
|
||||
slug: mangaData.slug,
|
||||
imageUrl: mangaData.imageUrl,
|
||||
author: mangaData.author,
|
||||
publicationYear: mangaData.publicationYear,
|
||||
genres: mangaData.genres,
|
||||
status: mangaData.status,
|
||||
rating: mangaData.rating,
|
||||
description: mangaData.description,
|
||||
createdAt: mangaData.createdAt
|
||||
}, chapters);
|
||||
} catch (error) {
|
||||
console.error('Error fetching manga details:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,74 +0,0 @@
|
||||
import axios from 'axios';
|
||||
import { ReaderContext, Page } from '../../domain/reader';
|
||||
import { ReaderRepository } from '../../domain/ports/readerRepository';
|
||||
|
||||
export class ApiReaderRepository extends ReaderRepository {
|
||||
constructor() {
|
||||
super();
|
||||
this.api = axios.create({
|
||||
baseURL: '/api'
|
||||
});
|
||||
}
|
||||
|
||||
async getChapterContext(chapterId) {
|
||||
try {
|
||||
const response = await this.api.get(`/reader/chapter/${chapterId}`);
|
||||
const data = response.data;
|
||||
|
||||
return new ReaderContext(
|
||||
data.id,
|
||||
data.title,
|
||||
data.number,
|
||||
data.manga,
|
||||
data.navigation
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('Error fetching chapter context:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
async getPage(chapterId, pageNumber) {
|
||||
try {
|
||||
const response = await this.api.get(`/reader/chapter/${chapterId}/page/${pageNumber}`);
|
||||
const data = response.data;
|
||||
|
||||
return new Page(
|
||||
data.id,
|
||||
data.pageNumber,
|
||||
data.base64Content,
|
||||
data.mimeType,
|
||||
data.dimensions
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('Error fetching page:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
async getPages(chapterId) {
|
||||
try {
|
||||
const response = await this.api.get(`/reader/chapter/${chapterId}/pages`);
|
||||
const data = response.data;
|
||||
|
||||
// Charger chaque page individuellement pour obtenir le contenu base64
|
||||
const pagesPromises = data.pages.map(async (page) => {
|
||||
const pageResponse = await this.getPage(chapterId, page.pageNumber);
|
||||
return pageResponse;
|
||||
});
|
||||
|
||||
const loadedPages = await Promise.all(pagesPromises);
|
||||
|
||||
return {
|
||||
pages: loadedPages,
|
||||
totalItems: data.totalItems,
|
||||
currentPage: data.currentPage,
|
||||
itemsPerPage: data.itemsPerPage,
|
||||
totalPages: data.totalPages
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Error fetching pages:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,109 +0,0 @@
|
||||
import { Manga, MangaCollection, MangaDetail } from '../../domain/manga.js';
|
||||
import { Chapter } from '../../domain/chapter.js';
|
||||
|
||||
export class MockMangaRepository {
|
||||
constructor() {
|
||||
this.mangas = {
|
||||
'one-piece': {
|
||||
id: '1',
|
||||
title: 'One Piece',
|
||||
slug: 'one-piece',
|
||||
imageUrl: 'https://images.unsplash.com/photo-1607604276583-eef5d076aa5f?auto=format&fit=crop&w=800&q=80',
|
||||
author: 'Eiichiro Oda',
|
||||
publicationYear: 1997,
|
||||
genres: ['Action', 'Adventure', 'Comedy'],
|
||||
status: 'ongoing',
|
||||
rating: 4.9,
|
||||
description: 'Monkey D. Luffy refuses to let anyone or anything stand in the way of his quest to become king of all pirates.'
|
||||
},
|
||||
'naruto': {
|
||||
id: '2',
|
||||
title: 'Naruto',
|
||||
slug: 'naruto',
|
||||
imageUrl: 'https://images.unsplash.com/photo-1618519764620-7403abdbdfe9?auto=format&fit=crop&w=800&q=80',
|
||||
author: 'Masashi Kishimoto',
|
||||
publicationYear: 1999,
|
||||
genres: ['Action', 'Adventure', 'Fantasy'],
|
||||
status: 'completed',
|
||||
rating: 4.8,
|
||||
description: 'Twelve years ago the Village Hidden in the Leaves was attacked by a fearsome threat.'
|
||||
},
|
||||
'berserk': {
|
||||
id: '3',
|
||||
title: 'Berserk',
|
||||
slug: 'berserk',
|
||||
imageUrl: 'https://images.unsplash.com/photo-1607604276583-eef5d076aa5f?auto=format&fit=crop&w=800&q=80',
|
||||
author: 'Kentaro Miura',
|
||||
publicationYear: 1989,
|
||||
genres: ['Action', 'Dark Fantasy', 'Horror', 'Psychological'],
|
||||
status: 'ongoing',
|
||||
rating: 4.9,
|
||||
description: 'Guts, known as the Black Swordsman, seeks sanctuary from the demonic forces.'
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
async searchMangas(query) {
|
||||
if (!query) return [];
|
||||
|
||||
const normalizedQuery = query.toLowerCase();
|
||||
return Object.values(this.mangas)
|
||||
.filter(manga =>
|
||||
manga.title.toLowerCase().includes(normalizedQuery) ||
|
||||
manga.author.toLowerCase().includes(normalizedQuery)
|
||||
)
|
||||
.map(manga => new Manga(
|
||||
manga.id,
|
||||
manga.title,
|
||||
manga.slug,
|
||||
manga.imageUrl,
|
||||
manga.author,
|
||||
manga.publicationYear,
|
||||
manga.genres,
|
||||
manga.status,
|
||||
manga.rating
|
||||
));
|
||||
}
|
||||
|
||||
async getMangaCollection(page = 1) {
|
||||
const mangas = Object.values(this.mangas).map(manga => new Manga(
|
||||
manga.id,
|
||||
manga.title,
|
||||
manga.slug,
|
||||
manga.imageUrl,
|
||||
manga.author,
|
||||
manga.publicationYear,
|
||||
manga.genres,
|
||||
manga.status,
|
||||
manga.rating
|
||||
));
|
||||
|
||||
return new MangaCollection(
|
||||
mangas,
|
||||
mangas.length,
|
||||
page,
|
||||
10,
|
||||
false,
|
||||
false
|
||||
);
|
||||
}
|
||||
|
||||
async getMangaBySlug(slug) {
|
||||
const manga = this.mangas[slug];
|
||||
|
||||
if (!manga) {
|
||||
throw new Error(`Manga with slug "${slug}" not found`);
|
||||
}
|
||||
|
||||
const chapters = [
|
||||
new Chapter('1', 378, 'Un assassin invité', 42, true, '2024-02-15'),
|
||||
new Chapter('2', 377, 'Snake In One\'s Bosom', 42, true, '2024-02-01'),
|
||||
new Chapter('3', 376, 'La mer tremble, la guerre se profile', 42, true, '2024-01-15'),
|
||||
new Chapter('4', 375, 'L\'aube suivant la nuit brumeuse', 41, true, '2024-01-01'),
|
||||
new Chapter('5', 374, 'Le monstre noir va-t-il se laisser faire ?', 41, true, '2023-12-15'),
|
||||
new Chapter('6', 373, 'Confrontation', 41, true, '2023-12-01'),
|
||||
];
|
||||
|
||||
return new MangaDetail(manga, chapters);
|
||||
}
|
||||
}
|
||||
@@ -1,61 +0,0 @@
|
||||
export class MockReaderRepository {
|
||||
async getChapterContext(chapterId) {
|
||||
// Simuler un délai réseau
|
||||
await new Promise(resolve => setTimeout(resolve, 500));
|
||||
|
||||
return {
|
||||
id: chapterId,
|
||||
title: "Un assassin invité",
|
||||
number: "378",
|
||||
manga: {
|
||||
id: "1",
|
||||
title: "One Piece"
|
||||
},
|
||||
navigation: {
|
||||
previous: {
|
||||
id: "prev-chapter",
|
||||
number: "377"
|
||||
},
|
||||
next: {
|
||||
id: "next-chapter",
|
||||
number: "379"
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
async getPage(chapterId, pageNumber) {
|
||||
// Simuler un délai réseau
|
||||
await new Promise(resolve => setTimeout(resolve, 500));
|
||||
|
||||
return {
|
||||
id: `page-${pageNumber}`,
|
||||
pageNumber: pageNumber,
|
||||
base64Content: "data:image/jpeg;base64,/9j/4AAQSkZJRg...", // Simulé
|
||||
mimeType: "image/jpeg",
|
||||
dimensions: {
|
||||
width: 800,
|
||||
height: 1200
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
async getPages(chapterId) {
|
||||
// Simuler un délai réseau
|
||||
await new Promise(resolve => setTimeout(resolve, 500));
|
||||
|
||||
return {
|
||||
pages: Array.from({ length: 20 }, (_, i) => ({
|
||||
number: i + 1,
|
||||
dimensions: {
|
||||
width: 800,
|
||||
height: 1200
|
||||
}
|
||||
})),
|
||||
totalItems: 20,
|
||||
currentPage: 1,
|
||||
itemsPerPage: 20,
|
||||
totalPages: 1
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faBars } from '@fortawesome/free-solid-svg-icons';
|
||||
import { SearchBar } from './SearchBar/SearchBar.jsx';
|
||||
|
||||
export function Header({ onMenuClick }) {
|
||||
return (
|
||||
<header className="bg-green-600 h-16 flex items-center fixed w-full z-50">
|
||||
<button
|
||||
onClick={onMenuClick}
|
||||
className="ml-4 text-white p-2 md:hidden"
|
||||
>
|
||||
<FontAwesomeIcon icon={faBars} />
|
||||
</button>
|
||||
<div className="flex items-center flex-1">
|
||||
<Link to="/" className="text-white text-2xl font-bold ml-4">
|
||||
Mangarr
|
||||
</Link>
|
||||
<SearchBar />
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Header } from '../Header';
|
||||
import { Sidebar } from '../Sidebar';
|
||||
|
||||
export function Layout({ children, onMangaClick, onAddMangaClick }) {
|
||||
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<Header
|
||||
onMenuClick={() => setIsSidebarOpen(!isSidebarOpen)}
|
||||
onMangaClick={onMangaClick}
|
||||
onAddMangaClick={onAddMangaClick}
|
||||
/>
|
||||
<Sidebar
|
||||
isOpen={isSidebarOpen}
|
||||
onClose={() => setIsSidebarOpen(false)}
|
||||
onAddMangaClick={onAddMangaClick}
|
||||
/>
|
||||
|
||||
<main className="pt-16 md:ml-60">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,43 +0,0 @@
|
||||
import React from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
export function MangaCard({ manga }) {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleClick = () => {
|
||||
navigate(`/manga/${manga.slug}`);
|
||||
};
|
||||
|
||||
const formatDate = (dateString) => {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric'
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="bg-white rounded-lg shadow-md overflow-hidden cursor-pointer transition-transform hover:scale-105"
|
||||
onClick={handleClick}
|
||||
>
|
||||
<div className="relative pb-[150%]">
|
||||
<img
|
||||
src={manga.imageUrl || 'https://via.placeholder.com/300x400'}
|
||||
alt={manga.title}
|
||||
className="absolute inset-0 w-full h-full object-contain bg-gray-100"
|
||||
/>
|
||||
</div>
|
||||
<div className="p-2">
|
||||
<h3 className="text-lg font-semibold text-gray-800 mb-1">{manga.title}</h3>
|
||||
<div className="flex items-center">
|
||||
<span className="text-sm text-gray-500">{manga.publicationYear}</span>
|
||||
</div>
|
||||
<div className="mt-1 text-sm text-gray-500">
|
||||
Added: {formatDate(manga.createdAt)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
import React from 'react';
|
||||
import { MangaCard } from './MangaCard.jsx';
|
||||
|
||||
export function MangaGrid({ mangas }) {
|
||||
return (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 p-6">
|
||||
{mangas.map((manga) => (
|
||||
<MangaCard
|
||||
key={manga.id}
|
||||
manga={manga}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,131 +0,0 @@
|
||||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faSearch, faPlus } from '@fortawesome/free-solid-svg-icons';
|
||||
import { ApiMangaRepository } from '../../../infrastructure/api/apiMangaRepository.js';
|
||||
import { SearchMangas } from '../../../application/useCases/searchMangas.js';
|
||||
|
||||
const mangaRepository = new ApiMangaRepository();
|
||||
const searchMangas = new SearchMangas(mangaRepository);
|
||||
|
||||
export function SearchBar() {
|
||||
const navigate = useNavigate();
|
||||
const [query, setQuery] = useState('');
|
||||
const [results, setResults] = useState([]);
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [hasSearched, setHasSearched] = useState(false);
|
||||
const searchRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event) => {
|
||||
if (searchRef.current && !searchRef.current.contains(event.target)) {
|
||||
setIsOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const searchManga = async () => {
|
||||
if (!query.trim()) {
|
||||
setResults([]);
|
||||
setHasSearched(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const searchResults = await searchMangas.execute(query);
|
||||
setResults(searchResults);
|
||||
setHasSearched(true);
|
||||
} catch (error) {
|
||||
console.error('Search error:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const timeoutId = setTimeout(searchManga, 300);
|
||||
return () => clearTimeout(timeoutId);
|
||||
}, [query]);
|
||||
|
||||
const handleMangaClick = (slug) => {
|
||||
navigate(`/manga/${slug}`);
|
||||
setIsOpen(false);
|
||||
setQuery('');
|
||||
setHasSearched(false);
|
||||
};
|
||||
|
||||
const handleAddMangaClick = () => {
|
||||
navigate(`/add${query ? `?q=${encodeURIComponent(query)}` : ''}`);
|
||||
setIsOpen(false);
|
||||
setQuery('');
|
||||
setHasSearched(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div ref={searchRef} className="relative flex-1 max-w-xl mx-4">
|
||||
<div className="flex items-center py-1">
|
||||
<FontAwesomeIcon
|
||||
icon={faSearch}
|
||||
className="text-white"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={query}
|
||||
onChange={(e) => {
|
||||
setQuery(e.target.value);
|
||||
setIsOpen(true);
|
||||
}}
|
||||
onFocus={() => setIsOpen(true)}
|
||||
placeholder="Rechercher"
|
||||
className="appearance-none outline-none ml-2 pl-0 bg-transparent border-b border-white w-full placeholder:text-white text-white py-1 px-2 leading-tight transition-all duration-500 ease-in-out focus:placeholder:text-opacity-0 focus:border-opacity-0"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{isOpen && query.trim() && (
|
||||
<div className="absolute w-full mt-2 bg-gray-800/95 backdrop-blur-sm rounded-lg shadow-lg border border-gray-700 max-h-96 overflow-y-auto z-50">
|
||||
{loading ? (
|
||||
<div className="p-4 text-center text-gray-400">Chargement...</div>
|
||||
) : results.length > 0 ? (
|
||||
<div className="py-2">
|
||||
<h3 className="px-4 py-2 text-sm font-semibold text-gray-400">
|
||||
Mangas existants
|
||||
</h3>
|
||||
{results.map((manga) => (
|
||||
<button
|
||||
key={manga.id}
|
||||
onClick={() => handleMangaClick(manga.slug)}
|
||||
className="w-full px-4 py-2 flex items-center gap-3 hover:bg-gray-700/50 text-white"
|
||||
>
|
||||
<img
|
||||
src={manga.imageUrl}
|
||||
alt={manga.title}
|
||||
className="w-10 h-14 object-cover rounded"
|
||||
/>
|
||||
<div className="text-left">
|
||||
<div className="font-medium">{manga.title}</div>
|
||||
<div className="text-sm text-gray-400">{manga.author} ({manga.publicationYear})</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
) : hasSearched && (
|
||||
<div className="py-2">
|
||||
<button
|
||||
onClick={handleAddMangaClick}
|
||||
className="w-full px-4 py-2 flex items-center gap-2 text-green-400 hover:bg-gray-700/50"
|
||||
>
|
||||
<FontAwesomeIcon icon={faPlus} />
|
||||
<span>Ajouter "{query}"</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,171 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import {
|
||||
faBook,
|
||||
faPlus,
|
||||
faFileImport,
|
||||
faCompass,
|
||||
faExchangeAlt,
|
||||
faCalendar,
|
||||
faClockRotateLeft,
|
||||
faCog,
|
||||
faDesktop,
|
||||
faChevronDown,
|
||||
faChevronUp
|
||||
} from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
export function Sidebar({ isOpen, onClose, onAddMangaClick }) {
|
||||
const [expandedMenus, setExpandedMenus] = useState({
|
||||
mangas: true, // Par défaut, le menu Mangas est ouvert
|
||||
settings: false,
|
||||
system: false
|
||||
});
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
icon: faBook,
|
||||
text: 'Mangas',
|
||||
id: 'mangas',
|
||||
subItems: [
|
||||
{ icon: faPlus, text: 'Ajouter un nouveau', onClick: () => onAddMangaClick() },
|
||||
{ icon: faFileImport, text: 'Import bibliothèque', to: '/import' },
|
||||
{ icon: faCompass, text: 'Découvrir', to: '/discover' },
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: faExchangeAlt,
|
||||
text: 'Convertir CBR en CBZ',
|
||||
to: '/convert'
|
||||
},
|
||||
{
|
||||
icon: faCalendar,
|
||||
text: 'Calendrier',
|
||||
to: '/calendar'
|
||||
},
|
||||
{
|
||||
icon: faClockRotateLeft,
|
||||
text: 'Activité',
|
||||
to: '/activity',
|
||||
badge: '3'
|
||||
},
|
||||
{
|
||||
icon: faCog,
|
||||
text: 'Paramètres',
|
||||
id: 'settings',
|
||||
subItems: [
|
||||
{ text: 'Général', to: '/settings/general' },
|
||||
{ text: 'Dossiers', to: '/settings/folders' },
|
||||
{ text: 'Scrappers', to: '/settings/scrappers' },
|
||||
{ text: 'UI', to: '/settings/ui' }
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: faDesktop,
|
||||
text: 'Système',
|
||||
id: 'system',
|
||||
subItems: [
|
||||
{ text: 'Status', to: '/system/status' },
|
||||
{ text: 'Backup', to: '/system/backup' },
|
||||
{ text: 'Logs', to: '/system/logs' },
|
||||
{ text: 'Updates', to: '/system/updates' }
|
||||
]
|
||||
},
|
||||
];
|
||||
|
||||
const toggleMenu = (menuId) => {
|
||||
setExpandedMenus(prev => ({
|
||||
...prev,
|
||||
[menuId]: !prev[menuId]
|
||||
}));
|
||||
};
|
||||
|
||||
const MenuItem = ({ item }) => {
|
||||
const hasSubItems = item.subItems && item.subItems.length > 0;
|
||||
const isExpanded = item.id ? expandedMenus[item.id] : false;
|
||||
|
||||
const handleClick = (e) => {
|
||||
if (hasSubItems) {
|
||||
e.preventDefault();
|
||||
toggleMenu(item.id);
|
||||
}
|
||||
};
|
||||
|
||||
const renderLink = (linkItem, className) => {
|
||||
if (linkItem.onClick) {
|
||||
return (
|
||||
<button
|
||||
onClick={linkItem.onClick}
|
||||
className={className}
|
||||
>
|
||||
{linkItem.icon && <FontAwesomeIcon icon={linkItem.icon} className="w-4 h-4 mr-2" />}
|
||||
{linkItem.text}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Link
|
||||
to={linkItem.to}
|
||||
className={className}
|
||||
>
|
||||
{linkItem.icon && <FontAwesomeIcon icon={linkItem.icon} className="w-4 h-4 mr-2" />}
|
||||
{linkItem.text}
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
{item.to || item.onClick ? (
|
||||
renderLink(item, "flex items-center px-4 py-2 text-gray-300 hover:text-green-600 transition-colors duration-150")
|
||||
) : (
|
||||
<button
|
||||
onClick={handleClick}
|
||||
className="w-full flex items-center justify-between px-4 py-2 text-gray-300 hover:text-green-600 transition-colors duration-150"
|
||||
>
|
||||
<span className="flex items-center">
|
||||
<FontAwesomeIcon icon={item.icon} className="w-4 h-4 mr-2" />
|
||||
{item.text}
|
||||
</span>
|
||||
{hasSubItems && (
|
||||
<FontAwesomeIcon
|
||||
icon={isExpanded ? faChevronUp : faChevronDown}
|
||||
className="w-3 h-3"
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{hasSubItems && isExpanded && (
|
||||
<div className="ml-8 mt-2 space-y-2">
|
||||
{item.subItems.map((subItem, index) => {
|
||||
const link = renderLink(
|
||||
subItem,
|
||||
"block py-2 text-gray-300 hover:text-green-600 transition-colors duration-150"
|
||||
);
|
||||
|
||||
return React.cloneElement(link, { key: `${subItem.text}-${index}` });
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<nav className={`
|
||||
w-60 bg-gray-600 h-full overflow-y-auto fixed left-0 top-16 transform transition-transform duration-200 ease-in-out z-40
|
||||
${isOpen ? 'translate-x-0' : '-translate-x-full'}
|
||||
md:translate-x-0
|
||||
`}>
|
||||
<div className="py-4">
|
||||
<div className="space-y-1">
|
||||
{menuItems.map((item, index) => (
|
||||
<MenuItem key={index} item={item} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
import React from 'react';
|
||||
import { ToolbarButton } from './ToolbarButton';
|
||||
|
||||
export function Toolbar({
|
||||
leftSection = [],
|
||||
centerSection = [],
|
||||
rightSection = [],
|
||||
className = ''
|
||||
}) {
|
||||
const renderSection = (items) => (
|
||||
<div className="flex items-center gap-2">
|
||||
{items.map((item, index) => (
|
||||
<ToolbarButton key={index} {...item} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={`bg-gray-800 shadow-sm border-b border-gray-700 ${className}`}>
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="h-14 flex items-center justify-between">
|
||||
{renderSection(leftSection)}
|
||||
{renderSection(centerSection)}
|
||||
{renderSection(rightSection)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
import React from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
|
||||
export function ToolbarButton({ icon, label, onClick, navigateTo, navigateBack = false, active = false }) {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleClick = () => {
|
||||
if (navigateBack) {
|
||||
navigate(-1, { replace: true });
|
||||
} else if (navigateTo) {
|
||||
navigate(navigateTo, { replace: true });
|
||||
} else if (onClick) {
|
||||
onClick();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={handleClick}
|
||||
className={`
|
||||
flex items-center gap-2 px-4 py-2 rounded-lg transition-colors
|
||||
${active
|
||||
? 'bg-green-600 text-white'
|
||||
: 'text-gray-300 hover:text-green-600'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<FontAwesomeIcon icon={icon} />
|
||||
{label && <span>{label}</span>}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -1,194 +0,0 @@
|
||||
import React, { createContext, useContext, useReducer, useCallback, useEffect } from 'react';
|
||||
import { ApiMangaRepository } from '../../infrastructure/api/apiMangaRepository';
|
||||
import { GetMangaCollection } from '../../application/useCases/getMangaCollection';
|
||||
import { GetMangaDetail } from '../../application/useCases/getMangaDetail';
|
||||
|
||||
const mangaRepository = new ApiMangaRepository();
|
||||
const getMangaCollection = new GetMangaCollection(mangaRepository);
|
||||
const getMangaDetail = new GetMangaDetail(mangaRepository);
|
||||
|
||||
const MangaContext = createContext(null);
|
||||
|
||||
const initialState = {
|
||||
collection: null,
|
||||
detailedMangas: {},
|
||||
loading: false,
|
||||
error: null,
|
||||
lastCollectionUpdate: null,
|
||||
isBackgroundLoading: false
|
||||
};
|
||||
|
||||
function mangaReducer(state, action) {
|
||||
switch (action.type) {
|
||||
case 'SET_LOADING':
|
||||
return { ...state, loading: action.payload };
|
||||
case 'SET_BACKGROUND_LOADING':
|
||||
return { ...state, isBackgroundLoading: action.payload };
|
||||
case 'SET_ERROR':
|
||||
return { ...state, error: action.payload, loading: false };
|
||||
case 'SET_COLLECTION':
|
||||
return {
|
||||
...state,
|
||||
collection: action.payload,
|
||||
loading: false,
|
||||
error: null,
|
||||
lastCollectionUpdate: Date.now()
|
||||
};
|
||||
case 'UPDATE_COLLECTION':
|
||||
return {
|
||||
...state,
|
||||
collection: action.payload,
|
||||
isBackgroundLoading: false,
|
||||
lastCollectionUpdate: Date.now()
|
||||
};
|
||||
case 'SET_MANGA_DETAIL':
|
||||
// Mettre à jour également le manga dans la collection si présent
|
||||
const updatedCollection = state.collection ? {
|
||||
...state.collection,
|
||||
items: state.collection.items.map(manga =>
|
||||
manga.slug === action.payload.slug
|
||||
? {
|
||||
...manga,
|
||||
...action.payload,
|
||||
createdAt: manga.createdAt || action.payload.createdAt
|
||||
}
|
||||
: manga
|
||||
)
|
||||
} : state.collection;
|
||||
|
||||
return {
|
||||
...state,
|
||||
collection: updatedCollection,
|
||||
detailedMangas: {
|
||||
...state.detailedMangas,
|
||||
[action.payload.slug]: {
|
||||
...action.payload,
|
||||
createdAt: state.collection?.items.find(m => m.slug === action.payload.slug)?.createdAt || action.payload.createdAt
|
||||
}
|
||||
},
|
||||
loading: false,
|
||||
error: null
|
||||
};
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
||||
export function MangaProvider({ children }) {
|
||||
const [state, dispatch] = useReducer(mangaReducer, initialState);
|
||||
|
||||
// Fonction pour charger la collection en arrière-plan
|
||||
const refreshCollectionInBackground = useCallback(async () => {
|
||||
if (state.isBackgroundLoading) return;
|
||||
|
||||
dispatch({ type: 'SET_BACKGROUND_LOADING', payload: true });
|
||||
try {
|
||||
const collection = await getMangaCollection.execute(1);
|
||||
dispatch({ type: 'UPDATE_COLLECTION', payload: collection });
|
||||
} catch (error) {
|
||||
console.error('Background collection refresh failed:', error);
|
||||
dispatch({ type: 'SET_BACKGROUND_LOADING', payload: false });
|
||||
}
|
||||
}, [state.isBackgroundLoading]);
|
||||
|
||||
// Rafraîchir la collection toutes les 5 minutes si elle est chargée
|
||||
useEffect(() => {
|
||||
if (!state.collection) return;
|
||||
|
||||
const interval = setInterval(() => {
|
||||
refreshCollectionInBackground();
|
||||
}, 5 * 60 * 1000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [state.collection, refreshCollectionInBackground]);
|
||||
|
||||
const loadCollection = useCallback(async () => {
|
||||
// Si nous avons déjà des données, les afficher immédiatement
|
||||
if (state.collection) {
|
||||
// Rafraîchir en arrière-plan si les données sont vieilles de plus de 30 secondes
|
||||
const isStale = state.lastCollectionUpdate &&
|
||||
(Date.now() - state.lastCollectionUpdate) > 30 * 1000;
|
||||
|
||||
if (isStale && !state.isBackgroundLoading) {
|
||||
refreshCollectionInBackground();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
dispatch({ type: 'SET_LOADING', payload: true });
|
||||
try {
|
||||
const collection = await getMangaCollection.execute(1);
|
||||
dispatch({ type: 'SET_COLLECTION', payload: collection });
|
||||
} catch (error) {
|
||||
dispatch({ type: 'SET_ERROR', payload: 'Failed to load manga collection' });
|
||||
console.error(error);
|
||||
}
|
||||
}, [state.collection, state.lastCollectionUpdate, state.isBackgroundLoading, refreshCollectionInBackground]);
|
||||
|
||||
const loadMangaDetail = useCallback(async (slug) => {
|
||||
// Retourner les données en cache si disponibles
|
||||
if (state.detailedMangas[slug]) {
|
||||
// Rafraîchir en arrière-plan si les données sont vieilles de plus de 5 minutes
|
||||
const cachedManga = state.detailedMangas[slug];
|
||||
const isStale = cachedManga.lastUpdate &&
|
||||
(Date.now() - cachedManga.lastUpdate) > 5 * 60 * 1000;
|
||||
|
||||
if (isStale) {
|
||||
// Charger les nouvelles données en arrière-plan
|
||||
getMangaDetail.execute(slug).then(manga => {
|
||||
dispatch({ type: 'SET_MANGA_DETAIL', payload: { ...manga, lastUpdate: Date.now() } });
|
||||
}).catch(console.error);
|
||||
}
|
||||
|
||||
return state.detailedMangas[slug];
|
||||
}
|
||||
|
||||
// Si le manga est dans la collection, l'utiliser comme données temporaires
|
||||
const collectionManga = getMangaFromCollection(slug);
|
||||
if (collectionManga) {
|
||||
dispatch({
|
||||
type: 'SET_MANGA_DETAIL',
|
||||
payload: { ...collectionManga, isPartial: true, lastUpdate: Date.now() }
|
||||
});
|
||||
}
|
||||
|
||||
// Charger les détails complets
|
||||
dispatch({ type: 'SET_LOADING', payload: true });
|
||||
try {
|
||||
const manga = await getMangaDetail.execute(slug);
|
||||
dispatch({ type: 'SET_MANGA_DETAIL', payload: { ...manga, lastUpdate: Date.now() } });
|
||||
return manga;
|
||||
} catch (error) {
|
||||
dispatch({ type: 'SET_ERROR', payload: 'Failed to load manga details' });
|
||||
console.error(error);
|
||||
return null;
|
||||
}
|
||||
}, [state.detailedMangas]);
|
||||
|
||||
const getMangaFromCollection = useCallback((slug) => {
|
||||
if (!state.collection) return null;
|
||||
return state.collection.items.find(manga => manga.slug === slug);
|
||||
}, [state.collection]);
|
||||
|
||||
const value = {
|
||||
...state,
|
||||
loadCollection,
|
||||
loadMangaDetail,
|
||||
getMangaFromCollection,
|
||||
refreshCollectionInBackground
|
||||
};
|
||||
|
||||
return (
|
||||
<MangaContext.Provider value={value}>
|
||||
{children}
|
||||
</MangaContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useManga() {
|
||||
const context = useContext(MangaContext);
|
||||
if (!context) {
|
||||
throw new Error('useManga must be used within a MangaProvider');
|
||||
}
|
||||
return context;
|
||||
}
|
||||
@@ -1,129 +0,0 @@
|
||||
import React, { createContext, useContext, useReducer, useCallback } from 'react';
|
||||
import { ApiReaderRepository } from '../../infrastructure/api/apiReaderRepository';
|
||||
import { GetChapterContext } from '../../application/useCases/getChapterContext';
|
||||
import { GetPage } from '../../application/useCases/getPage';
|
||||
import { GetPages } from '../../application/useCases/getPages';
|
||||
|
||||
const readerRepository = new ApiReaderRepository();
|
||||
const getChapterContext = new GetChapterContext(readerRepository);
|
||||
const getPage = new GetPage(readerRepository);
|
||||
const getPages = new GetPages(readerRepository);
|
||||
|
||||
const ReaderContext = createContext(null);
|
||||
|
||||
const initialState = {
|
||||
context: null,
|
||||
currentPage: 1,
|
||||
pages: [],
|
||||
loading: false,
|
||||
error: null,
|
||||
mode: 'classic', // 'classic' ou 'scrolling'
|
||||
};
|
||||
|
||||
function readerReducer(state, action) {
|
||||
switch (action.type) {
|
||||
case 'SET_LOADING':
|
||||
return { ...state, loading: action.payload };
|
||||
case 'SET_ERROR':
|
||||
return { ...state, error: action.payload, loading: false };
|
||||
case 'SET_CONTEXT':
|
||||
return { ...state, context: action.payload, loading: false };
|
||||
case 'SET_PAGES':
|
||||
return { ...state, pages: action.payload, loading: false };
|
||||
case 'SET_CURRENT_PAGE':
|
||||
return { ...state, currentPage: action.payload };
|
||||
case 'SET_MODE':
|
||||
return { ...state, mode: action.payload };
|
||||
case 'RESET_STATE':
|
||||
return initialState;
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
||||
export function ReaderProvider({ children }) {
|
||||
const [state, dispatch] = useReducer(readerReducer, initialState);
|
||||
|
||||
const loadChapterContext = useCallback(async (chapterId) => {
|
||||
dispatch({ type: 'RESET_STATE' });
|
||||
dispatch({ type: 'SET_LOADING', payload: true });
|
||||
try {
|
||||
const context = await getChapterContext.execute(chapterId);
|
||||
dispatch({ type: 'SET_CONTEXT', payload: context });
|
||||
return true;
|
||||
} catch (error) {
|
||||
dispatch({ type: 'SET_ERROR', payload: error.response?.status === 404 ? 'Chapitre introuvable' : 'Erreur lors du chargement du chapitre' });
|
||||
console.error(error);
|
||||
return false;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const loadPage = useCallback(async (chapterId, pageNumber) => {
|
||||
dispatch({ type: 'SET_LOADING', payload: true });
|
||||
try {
|
||||
const page = await getPage.execute(chapterId, pageNumber);
|
||||
dispatch({ type: 'SET_LOADING', payload: false });
|
||||
return page;
|
||||
} catch (error) {
|
||||
const errorMessage = error.response?.status === 404
|
||||
? 'Page introuvable'
|
||||
: 'Erreur lors du chargement de la page';
|
||||
dispatch({ type: 'SET_ERROR', payload: errorMessage });
|
||||
dispatch({ type: 'SET_LOADING', payload: false });
|
||||
return null;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const loadPages = useCallback(async (chapterId) => {
|
||||
dispatch({ type: 'SET_LOADING', payload: true });
|
||||
try {
|
||||
const { pages } = await getPages.execute(chapterId);
|
||||
if (!pages || pages.length === 0) {
|
||||
dispatch({ type: 'SET_ERROR', payload: 'Aucune page trouvée dans ce chapitre' });
|
||||
return false;
|
||||
}
|
||||
dispatch({ type: 'SET_PAGES', payload: pages });
|
||||
dispatch({ type: 'SET_CURRENT_PAGE', payload: 1 });
|
||||
dispatch({ type: 'SET_LOADING', payload: false });
|
||||
return true;
|
||||
} catch (error) {
|
||||
const errorMessage = error.response?.status === 404
|
||||
? 'Chapitre introuvable'
|
||||
: 'Erreur lors du chargement des pages';
|
||||
dispatch({ type: 'SET_ERROR', payload: errorMessage });
|
||||
dispatch({ type: 'SET_LOADING', payload: false });
|
||||
return false;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const setCurrentPage = useCallback((pageNumber) => {
|
||||
dispatch({ type: 'SET_CURRENT_PAGE', payload: pageNumber });
|
||||
}, []);
|
||||
|
||||
const setMode = useCallback((mode) => {
|
||||
dispatch({ type: 'SET_MODE', payload: mode });
|
||||
}, []);
|
||||
|
||||
const value = {
|
||||
...state,
|
||||
loadChapterContext,
|
||||
loadPage,
|
||||
loadPages,
|
||||
setCurrentPage,
|
||||
setMode,
|
||||
};
|
||||
|
||||
return (
|
||||
<ReaderContext.Provider value={value}>
|
||||
{children}
|
||||
</ReaderContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useReader() {
|
||||
const context = useContext(ReaderContext);
|
||||
if (!context) {
|
||||
throw new Error('useReader must be used within a ReaderProvider');
|
||||
}
|
||||
return context;
|
||||
}
|
||||
@@ -1,185 +0,0 @@
|
||||
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 { ApiMangaRepository } from '../../infrastructure/api/apiMangaRepository';
|
||||
import { SearchMangas } from '../../application/useCases/searchMangas';
|
||||
|
||||
const mangaRepository = new ApiMangaRepository();
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -1,74 +0,0 @@
|
||||
import React, { useEffect } 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 { useManga } from '../context/MangaContext.jsx';
|
||||
import {
|
||||
faRefresh,
|
||||
faSearch,
|
||||
faGear,
|
||||
faEye,
|
||||
faSort,
|
||||
faFilter
|
||||
} from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
export function HomePage() {
|
||||
const navigate = useNavigate();
|
||||
const {
|
||||
collection,
|
||||
loading,
|
||||
error,
|
||||
isBackgroundLoading,
|
||||
loadCollection,
|
||||
refreshCollectionInBackground
|
||||
} = useManga();
|
||||
|
||||
useEffect(() => {
|
||||
loadCollection();
|
||||
}, [loadCollection]);
|
||||
|
||||
const handleAddMangaClick = (query = '') => {
|
||||
navigate(`/add${query ? `?q=${encodeURIComponent(query)}` : ''}`);
|
||||
};
|
||||
|
||||
const toolbarConfig = {
|
||||
leftSection: [
|
||||
{
|
||||
icon: faRefresh,
|
||||
label: 'Refresh',
|
||||
onClick: refreshCollectionInBackground,
|
||||
active: isBackgroundLoading
|
||||
},
|
||||
{ icon: faSearch, label: 'Search', onClick: () => {} }
|
||||
],
|
||||
rightSection: [
|
||||
{ icon: faGear, onClick: () => {} },
|
||||
{ icon: faEye, onClick: () => {} },
|
||||
{ icon: faSort, onClick: () => {} },
|
||||
{ icon: faFilter, onClick: () => {} }
|
||||
]
|
||||
};
|
||||
|
||||
if (loading && !collection) {
|
||||
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 onAddMangaClick={handleAddMangaClick}>
|
||||
<Toolbar {...toolbarConfig} className="sticky top-16 z-10" />
|
||||
<div className="container mx-auto px-4">
|
||||
<MangaGrid mangas={collection?.items || []} />
|
||||
{isBackgroundLoading && (
|
||||
<div className="fixed bottom-4 right-4 bg-gray-800 text-white px-4 py-2 rounded-lg shadow-lg">
|
||||
Mise à jour en cours...
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
@@ -1,205 +0,0 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { Layout } from '../components/Layout/Layout.jsx';
|
||||
import { Toolbar } from '../components/Toolbar/Toolbar.jsx';
|
||||
import { useManga } from '../context/MangaContext.jsx';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import {
|
||||
faStar,
|
||||
faDownload,
|
||||
faEye,
|
||||
faArrowLeft,
|
||||
faRefresh,
|
||||
faBookmark,
|
||||
faShare
|
||||
} from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
export function MangaDetailPage() {
|
||||
const { slug } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const {
|
||||
detailedMangas,
|
||||
loading,
|
||||
error,
|
||||
loadMangaDetail,
|
||||
getMangaFromCollection
|
||||
} = useManga();
|
||||
|
||||
const [isLoadingDetails, setIsLoadingDetails] = useState(false);
|
||||
|
||||
// Obtenir les données du manga depuis le cache ou la collection
|
||||
const manga = detailedMangas[slug];
|
||||
const collectionManga = getMangaFromCollection(slug);
|
||||
const displayManga = manga || collectionManga;
|
||||
|
||||
useEffect(() => {
|
||||
const loadDetails = async () => {
|
||||
if (!manga && displayManga) {
|
||||
setIsLoadingDetails(true);
|
||||
await loadMangaDetail(slug);
|
||||
setIsLoadingDetails(false);
|
||||
} else if (!manga && !displayManga) {
|
||||
await loadMangaDetail(slug);
|
||||
}
|
||||
};
|
||||
|
||||
loadDetails();
|
||||
}, [slug, manga, displayManga, loadMangaDetail]);
|
||||
|
||||
const handleAddMangaClick = (query = '') => {
|
||||
navigate(`/add${query ? `?q=${encodeURIComponent(query)}` : ''}`);
|
||||
};
|
||||
|
||||
const toolbarConfig = {
|
||||
leftSection: [
|
||||
{ icon: faArrowLeft, navigateBack: true },
|
||||
{ icon: faRefresh, onClick: () => {} }
|
||||
],
|
||||
rightSection: [
|
||||
{ icon: faBookmark, onClick: () => {} },
|
||||
{ icon: faShare, onClick: () => {} },
|
||||
{ icon: faDownload, onClick: () => {} }
|
||||
]
|
||||
};
|
||||
|
||||
if (loading && !displayManga) {
|
||||
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>;
|
||||
}
|
||||
|
||||
if (!displayManga) {
|
||||
return <div className="text-center p-4">Manga not found</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<Layout 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={displayManga.imageUrl}
|
||||
alt={displayManga.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">{displayManga.title}</h1>
|
||||
<span className="px-2 py-1 bg-green-500 rounded-full text-sm">
|
||||
{displayManga.status}
|
||||
</span>
|
||||
{isLoadingDetails && (
|
||||
<span className="text-sm text-gray-300">
|
||||
Chargement des détails...
|
||||
</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>{displayManga.rating}</span>
|
||||
</div>
|
||||
<span>{displayManga.publicationYear}</span>
|
||||
<span>{displayManga.author}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2 mb-4">
|
||||
{displayManga.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">
|
||||
{displayManga.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Chapters section - only shown when full details are loaded */}
|
||||
{manga && manga.chapters && (
|
||||
<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
|
||||
onClick={() => navigate(`/reader/${chapter.id}`)}
|
||||
className="text-gray-400 hover:text-gray-600 mx-2"
|
||||
>
|
||||
<FontAwesomeIcon icon={faEye} />
|
||||
</button>
|
||||
<button className="text-gray-400 hover:text-gray-600 mx-2">
|
||||
<FontAwesomeIcon icon={faDownload} />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!manga && (
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<div className="bg-gray-100 rounded-lg p-4 text-gray-600 text-center">
|
||||
Chargement des chapitres...
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
@@ -1,239 +0,0 @@
|
||||
import React, { useEffect, useState, useCallback } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { useReader } from '../context/ReaderContext';
|
||||
import { Toolbar } from '../components/Toolbar/Toolbar.jsx';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import {
|
||||
faArrowLeft,
|
||||
faList,
|
||||
faExpand,
|
||||
faCompress,
|
||||
faBookOpen,
|
||||
faScroll
|
||||
} from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
export function ReaderPage() {
|
||||
const { chapterId } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const {
|
||||
context,
|
||||
currentPage,
|
||||
pages,
|
||||
loading,
|
||||
error,
|
||||
mode,
|
||||
loadChapterContext,
|
||||
loadPage,
|
||||
loadPages,
|
||||
setCurrentPage,
|
||||
setMode
|
||||
} = useReader();
|
||||
|
||||
const [currentPageData, setCurrentPageData] = useState(null);
|
||||
const [isFullscreen, setIsFullscreen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const initializeChapter = async () => {
|
||||
const contextLoaded = await loadChapterContext(chapterId);
|
||||
if (contextLoaded) {
|
||||
await loadPages(chapterId);
|
||||
}
|
||||
};
|
||||
initializeChapter();
|
||||
}, [chapterId, loadChapterContext, loadPages]);
|
||||
|
||||
useEffect(() => {
|
||||
if (mode === 'classic' && currentPage > 0 && pages.length > 0) {
|
||||
loadPage(chapterId, currentPage).then(setCurrentPageData);
|
||||
}
|
||||
}, [chapterId, currentPage, loadPage, mode, pages.length]);
|
||||
|
||||
const handleKeyDown = useCallback((e) => {
|
||||
if (mode === 'classic') {
|
||||
if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
|
||||
if (currentPage > 1) {
|
||||
setCurrentPage(currentPage - 1);
|
||||
} else if (context?.navigation.previous) {
|
||||
navigate(`/reader/${context.navigation.previous.id}`);
|
||||
}
|
||||
} else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
|
||||
if (currentPage < pages.length) {
|
||||
setCurrentPage(currentPage + 1);
|
||||
} else if (context?.navigation.next) {
|
||||
navigate(`/reader/${context.navigation.next.id}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [currentPage, context, mode, navigate, pages.length, setCurrentPage]);
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => window.removeEventListener('keydown', handleKeyDown);
|
||||
}, [handleKeyDown]);
|
||||
|
||||
const toggleFullscreen = () => {
|
||||
if (!document.fullscreenElement) {
|
||||
document.documentElement.requestFullscreen();
|
||||
setIsFullscreen(true);
|
||||
} else {
|
||||
document.exitFullscreen();
|
||||
setIsFullscreen(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleImageClick = (e) => {
|
||||
if (mode !== 'classic') return;
|
||||
|
||||
const rect = e.target.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left;
|
||||
const width = rect.width;
|
||||
|
||||
if (x < width / 2) {
|
||||
// Clic sur la partie gauche
|
||||
if (currentPage > 1) {
|
||||
setCurrentPage(currentPage - 1);
|
||||
} else if (context?.navigation.previous) {
|
||||
navigate(`/reader/${context.navigation.previous.id}`);
|
||||
}
|
||||
} else {
|
||||
// Clic sur la partie droite
|
||||
if (currentPage < pages.length) {
|
||||
setCurrentPage(currentPage + 1);
|
||||
} else if (context?.navigation.next) {
|
||||
navigate(`/reader/${context.navigation.next.id}`);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const toolbarConfig = {
|
||||
leftSection: [
|
||||
{ icon: faArrowLeft, navigateBack: true }
|
||||
],
|
||||
rightSection: [
|
||||
{
|
||||
icon: mode === 'classic' ? faScroll : faBookOpen,
|
||||
onClick: () => setMode(mode === 'classic' ? 'scrolling' : 'classic'),
|
||||
label: `Mode ${mode === 'classic' ? 'défilement' : 'page par page'}`
|
||||
},
|
||||
{
|
||||
icon: isFullscreen ? faCompress : faExpand,
|
||||
onClick: toggleFullscreen,
|
||||
label: isFullscreen ? 'Quitter le plein écran' : 'Plein écran'
|
||||
},
|
||||
{ icon: faList, onClick: () => {}, label: 'Chapitres' }
|
||||
]
|
||||
};
|
||||
|
||||
if (loading || (!currentPageData && mode === 'classic' && pages.length === 0)) {
|
||||
return (
|
||||
<div className="flex justify-center items-center h-screen bg-gray-900 text-white">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-white mx-auto mb-4"></div>
|
||||
<div>Chargement du chapitre...</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="flex flex-col justify-center items-center h-screen bg-gray-900 text-white">
|
||||
<div className="text-red-500 text-xl mb-4">{error}</div>
|
||||
<button
|
||||
onClick={() => navigate(-1)}
|
||||
className="px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors"
|
||||
>
|
||||
Retour
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-900 text-white">
|
||||
{/* Toolbar */}
|
||||
<div className="fixed top-0 left-0 right-0 bg-gray-800 z-50">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="h-16 flex items-center justify-between">
|
||||
<Toolbar {...toolbarConfig} />
|
||||
{context && (
|
||||
<div className="text-center flex-1">
|
||||
<span className="font-medium">Chapitre {context.number}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Reader content */}
|
||||
<div className="pt-16">
|
||||
{mode === 'classic' ? (
|
||||
// Mode classique
|
||||
<div className="relative max-w-5xl mx-auto">
|
||||
{currentPageData && (
|
||||
<img
|
||||
src={`data:${currentPageData.mimeType};base64,${currentPageData.base64Content}`}
|
||||
alt={`Page ${currentPageData.pageNumber}`}
|
||||
className="w-full h-auto cursor-pointer"
|
||||
onClick={handleImageClick}
|
||||
/>
|
||||
)}
|
||||
<div className="fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-gray-800 px-4 py-2 rounded-lg">
|
||||
Page {currentPage} of {pages.length}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
// Mode scrolling
|
||||
<div className="max-w-5xl mx-auto space-y-4 p-4">
|
||||
{pages.map((page, index) => (
|
||||
<div key={index} className="relative">
|
||||
{page.base64Content ? (
|
||||
<img
|
||||
src={`data:${page.mimeType};base64,${page.base64Content}`}
|
||||
alt={`Page ${page.pageNumber}`}
|
||||
className="w-full h-auto"
|
||||
loading="lazy"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full aspect-[2/3] bg-gray-800 animate-pulse flex items-center justify-center">
|
||||
<span className="text-gray-400">Chargement...</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Navigation buttons for classic mode */}
|
||||
{mode === 'classic' && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => {
|
||||
if (currentPage > 1) {
|
||||
setCurrentPage(currentPage - 1);
|
||||
} else if (context?.navigation.previous) {
|
||||
navigate(`/reader/${context.navigation.previous.id}`);
|
||||
}
|
||||
}}
|
||||
className="fixed left-4 top-1/2 transform -translate-y-1/2 bg-gray-800 p-4 rounded-full opacity-50 hover:opacity-100 transition-opacity"
|
||||
>
|
||||
←
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
if (currentPage < pages.length) {
|
||||
setCurrentPage(currentPage + 1);
|
||||
} else if (context?.navigation.next) {
|
||||
navigate(`/reader/${context.navigation.next.id}`);
|
||||
}
|
||||
}}
|
||||
className="fixed right-4 top-1/2 transform -translate-y-1/2 bg-gray-800 p-4 rounded-full opacity-50 hover:opacity-100 transition-opacity"
|
||||
>
|
||||
→
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user