feat: SPA pour les pages existantes

2025-02-17 14:50:36 +01:00
parent 668702b1fb
commit 140cc14316
11 changed files with 331 additions and 164 deletions
--- a/assets/react/app/presentation/components/Header.jsx
+++ b/assets/react/app/presentation/components/Header.jsx
@@ -1,9 +1,10 @@
 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, onMangaClick, onAddMangaClick }) {
+export function Header({ onMenuClick }) {
  return (
    <header className="bg-green-600 h-16 flex items-center fixed w-full z-50">
      <button 
@@ -13,13 +14,10 @@ export function Header({ onMenuClick, onMangaClick, onAddMangaClick }) {
        <FontAwesomeIcon icon={faBars} />
      </button>
      <div className="flex items-center flex-1">
-        <a href="/" className="text-white text-2xl font-bold ml-4">
+        <Link to="/" className="text-white text-2xl font-bold ml-4">
          Mangarr
-        </a>
-        <SearchBar 
-          onMangaClick={onMangaClick}
-          onAddMangaClick={onAddMangaClick}
-        />
+        </Link>
+        <SearchBar />
      </div>
    </header>
  );
--- a/assets/react/app/presentation/components/MangaCard.jsx
+++ b/assets/react/app/presentation/components/MangaCard.jsx
@@ -1,12 +1,19 @@
 import React from 'react';
+import { useNavigate } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faStar } from '@fortawesome/free-solid-svg-icons';

-export function MangaCard({ manga, onClick }) {
+export function MangaCard({ manga }) {
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    navigate(`/manga/${manga.slug}`);
+  };
+
  return (
    <div 
      className="bg-white rounded-lg shadow-md overflow-hidden cursor-pointer transition-transform hover:scale-105"
-      onClick={() => onClick?.(manga.slug)}
+      onClick={handleClick}
    >
      <div className="relative h-64">
        <img
--- a/assets/react/app/presentation/components/MangaGrid.jsx
+++ b/assets/react/app/presentation/components/MangaGrid.jsx
@@ -1,14 +1,13 @@
 import React from 'react';
 import { MangaCard } from './MangaCard.jsx';

-export function MangaGrid({ mangas, onMangaClick }) {
+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} 
-          onClick={onMangaClick}
+          manga={manga}
        />
      ))}
    </div>
--- a/assets/react/app/presentation/components/SearchBar/SearchBar.jsx
+++ b/assets/react/app/presentation/components/SearchBar/SearchBar.jsx
@@ -1,4 +1,5 @@
 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';
@@ -7,7 +8,8 @@ import { SearchMangas } from '../../../application/useCases/searchMangas.js';
 const mangaRepository = new ApiMangaRepository();
 const searchMangas = new SearchMangas(mangaRepository);

-export function SearchBar({ onMangaClick, onAddMangaClick }) {
+export function SearchBar() {
+  const navigate = useNavigate();
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [isOpen, setIsOpen] = useState(false);
@@ -50,6 +52,20 @@ export function SearchBar({ onMangaClick, onAddMangaClick }) {
    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">
@@ -82,12 +98,7 @@ export function SearchBar({ onMangaClick, onAddMangaClick }) {
              {results.map((manga) => (
                <button
                  key={manga.id}
-                  onClick={() => {
-                    onMangaClick(manga.slug);
-                    setIsOpen(false);
-                    setQuery('');
-                    setHasSearched(false);
-                  }}
+                  onClick={() => handleMangaClick(manga.slug)}
                  className="w-full px-4 py-2 flex items-center gap-3 hover:bg-gray-700/50 text-white"
                >
                  <img
@@ -105,12 +116,7 @@ export function SearchBar({ onMangaClick, onAddMangaClick }) {
          ) : hasSearched && (
            <div className="py-2">
              <button
-                onClick={() => {
-                  onAddMangaClick(query);
-                  setIsOpen(false);
-                  setQuery('');
-                  setHasSearched(false);
-                }}
+                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} />
--- a/assets/react/app/presentation/components/Sidebar.jsx
+++ b/assets/react/app/presentation/components/Sidebar.jsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { 
  faBook,
@@ -28,24 +29,24 @@ export function Sidebar({ isOpen, onClose, onAddMangaClick }) {
      id: 'mangas',
      subItems: [
        { icon: faPlus, text: 'Ajouter un nouveau', onClick: () => onAddMangaClick() },
-        { icon: faFileImport, text: 'Import bibliothèque', href: '#' },
-        { icon: faCompass, text: 'Découvrir', href: '#' },
+        { icon: faFileImport, text: 'Import bibliothèque', to: '/import' },
+        { icon: faCompass, text: 'Découvrir', to: '/discover' },
      ]
    },
    {
      icon: faExchangeAlt,
      text: 'Convertir CBR en CBZ',
-      href: '#'
+      to: '/convert'
    },
    {
      icon: faCalendar,
      text: 'Calendrier',
-      href: '#'
+      to: '/calendar'
    },
    {
      icon: faClockRotateLeft,
      text: 'Activité',
-      href: '#',
+      to: '/activity',
      badge: '3'
    },
    {
@@ -53,10 +54,10 @@ export function Sidebar({ isOpen, onClose, onAddMangaClick }) {
      text: 'Paramètres',
      id: 'settings',
      subItems: [
-        { text: 'Général', href: '#' },
-        { text: 'Dossiers', href: '#' },
-        { text: 'Scrappers', href: '#' },
-        { text: 'UI', href: '#' }
+        { text: 'Général', to: '/settings/general' },
+        { text: 'Dossiers', to: '/settings/folders' },
+        { text: 'Scrappers', to: '/settings/scrappers' },
+        { text: 'UI', to: '/settings/ui' }
      ]
    },
    {
@@ -64,10 +65,10 @@ export function Sidebar({ isOpen, onClose, onAddMangaClick }) {
      text: 'Système',
      id: 'system',
      subItems: [
-        { text: 'Status', href: '#' },
-        { text: 'Backup', href: '#' },
-        { text: 'Logs', href: '#' },
-        { text: 'Updates', href: '#' }
+        { text: 'Status', to: '/system/status' },
+        { text: 'Backup', to: '/system/backup' },
+        { text: 'Logs', to: '/system/logs' },
+        { text: 'Updates', to: '/system/updates' }
      ]
    },
  ];
@@ -81,65 +82,71 @@ export function Sidebar({ isOpen, onClose, onAddMangaClick }) {

  const MenuItem = ({ item }) => {
    const hasSubItems = item.subItems && item.subItems.length > 0;
-    const isExpanded = item.id && expandedMenus[item.id];
-    const isActive = false; // À implémenter avec un vrai système de routing
-    
-    return (
-      <div className={`border-l-4 ${isActive ? 'border-green-600' : 'border-transparent'}`}>
-        <button
-          onClick={() => {
-            if (hasSubItems) {
-              toggleMenu(item.id);
-            } else if (item.onClick) {
-              item.onClick();
-            } else if (item.href) {
-              window.location.href = item.href;
-            }
-          }}
-          className={`
-            w-full text-left pl-4 py-2 flex items-center justify-between
-            ${isActive ? 'text-green-600 bg-gray-800' : 'text-white hover:bg-gray-700'}
-            transition-colors duration-150
-          `}
+    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}
        >
-          <div className="flex items-center space-x-3">
-            <FontAwesomeIcon icon={item.icon} className="w-5 h-5" />
-            <span>{item.text}</span>
-          </div>
-          {hasSubItems ? (
-            <FontAwesomeIcon 
-              icon={isExpanded ? faChevronUp : faChevronDown} 
-              className="w-4 h-4 mr-4"
-            />
-          ) : item.badge ? (
-            <span className="bg-green-600 text-white text-xs px-2 py-1 rounded mr-4">
-              {item.badge}
+          {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>
-          ) : null}
-        </button>
-        
+            {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) => (
-              <a
-                key={index}
-                href={subItem.href}
-                onClick={(e) => {
-                  e.preventDefault();
-                  if (subItem.onClick) {
-                    subItem.onClick();
-                  } else if (subItem.href !== '#') {
-                    window.location.href = subItem.href;
-                  }
-                }}
-                className="block py-2 text-gray-300 hover:text-green-600 transition-colors duration-150"
-              >
-                {subItem.icon && (
-                  <FontAwesomeIcon icon={subItem.icon} className="w-4 h-4 mr-2" />
-                )}
-                {subItem.text}
-              </a>
-            ))}
+            {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>
--- a/assets/react/app/presentation/components/Toolbar/ToolbarButton.jsx
+++ b/assets/react/app/presentation/components/Toolbar/ToolbarButton.jsx
@@ -1,10 +1,23 @@
 import React from 'react';
+import { useNavigate } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

-export function ToolbarButton({ icon, label, onClick, active = false }) {
+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={onClick}
+      onClick={handleClick}
      className={`
        flex items-center gap-2 px-4 py-2 rounded-lg transition-colors
        ${active