Remove CharacterComponent and CharacterDetail components

- Deleted `CharacterComponent` and `CharacterDetail` files from the project. - Refactored related logic to improve code maintainability and reduce redundancy.
2026-02-05 14:12:08 -05:00
parent cec5830360
commit 209dc6f85a
133 changed files with 17673 additions and 3110 deletions
--- a/components/SyncSeries.tsx
+++ b/components/SyncSeries.tsx
@@ -0,0 +1,131 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCloud, faCloudArrowDown, faCloudArrowUp, faSpinner } from "@fortawesome/free-solid-svg-icons";
+import { useTranslations } from "next-intl";
+import { useState, useContext, useEffect } from "react";
+import OfflineContext, { OfflineContextType } from "@/context/OfflineContext";
+import { SeriesSyncType } from "@/context/SeriesSyncContext";
+import useSyncSeries from "@/hooks/useSyncSeries";
+
+interface SyncSeriesProps {
+    seriesId: string;
+    status: SeriesSyncType;
+}
+
+export default function SyncSeries({ seriesId, status }: SyncSeriesProps) {
+    const t = useTranslations();
+    const { isCurrentlyOffline } = useContext<OfflineContextType>(OfflineContext);
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+    const [currentStatus, setCurrentStatus] = useState<SeriesSyncType>(status);
+    const { upload: hookUpload, download: hookDownload, syncFromServer: hookSyncFromServer, syncToServer: hookSyncToServer } = useSyncSeries();
+
+    // Synchroniser le state local avec le prop quand il change (ex: après sync auto)
+    useEffect(() => {
+        setCurrentStatus(status);
+    }, [status]);
+
+    const isOffline: boolean = isCurrentlyOffline();
+
+    async function upload(event: React.MouseEvent): Promise<void> {
+        event.stopPropagation();
+        if (isOffline) return;
+        setIsLoading(true);
+        const success: boolean = await hookUpload(seriesId);
+        if (success) setCurrentStatus('synced');
+        setIsLoading(false);
+    }
+
+    async function download(event: React.MouseEvent): Promise<void> {
+        event.stopPropagation();
+        if (isOffline) return;
+        setIsLoading(true);
+        const success = await hookDownload(seriesId);
+        if (success) setCurrentStatus('synced');
+        setIsLoading(false);
+    }
+
+    async function syncFromServer(event: React.MouseEvent): Promise<void> {
+        event.stopPropagation();
+        if (isOffline) return;
+        setIsLoading(true);
+        const success = await hookSyncFromServer(seriesId);
+        if (success) setCurrentStatus('synced');
+        setIsLoading(false);
+    }
+
+    async function syncToServer(event: React.MouseEvent): Promise<void> {
+        event.stopPropagation();
+        if (isOffline || isLoading) return;
+        setIsLoading(true);
+        const success = await hookSyncToServer(seriesId);
+        if (success) setCurrentStatus('synced');
+        setIsLoading(false);
+    }
+
+    if (isLoading) {
+        return (
+            <div className="flex items-center gap-2">
+                <span className="text-primary">
+                    <FontAwesomeIcon icon={faSpinner} className="w-4 h-4 animate-spin"/>
+                </span>
+            </div>
+        );
+    }
+
+    return (
+        <div className="flex items-center gap-2">
+            {currentStatus === 'synced' && (
+                <span
+                    className="text-gray-light"
+                    title={t("seriesCard.synced")}
+                >
+                    <FontAwesomeIcon icon={faCloud} className="w-4 h-4"/>
+                </span>
+            )}
+
+            {currentStatus === 'local-only' && (
+                <button
+                    onClick={upload}
+                    className={`transition-colors ${isOffline ? 'text-gray-dark cursor-not-allowed' : 'text-gray hover:text-primary cursor-pointer'}`}
+                    title={t("seriesCard.localOnly")}
+                    type="button"
+                    disabled={isOffline}
+                >
+                    <FontAwesomeIcon icon={faCloudArrowUp} className="w-4 h-4"/>
+                </button>
+            )}
+            {currentStatus === 'server-only' && (
+                <button
+                    onClick={download}
+                    className={`transition-colors ${isOffline ? 'text-gray-dark cursor-not-allowed' : 'text-gray hover:text-primary cursor-pointer'}`}
+                    title={t("seriesCard.serverOnly")}
+                    type="button"
+                    disabled={isOffline}
+                >
+                    <FontAwesomeIcon icon={faCloudArrowDown} className="w-4 h-4"/>
+                </button>
+            )}
+            {currentStatus === 'to-sync-from-server' && (
+                <button
+                    onClick={syncFromServer}
+                    className={`transition-colors ${isOffline ? 'text-gray-dark cursor-not-allowed' : 'text-warning hover:text-primary cursor-pointer'}`}
+                    title={t("seriesCard.toSyncFromServer")}
+                    type="button"
+                    disabled={isOffline}
+                >
+                    <FontAwesomeIcon icon={faCloudArrowDown} className="w-4 h-4"/>
+                </button>
+            )}
+            {currentStatus === 'to-sync-to-server' && (
+                <button
+                    onClick={syncToServer}
+                    className={`transition-colors ${isOffline ? 'text-gray-dark cursor-not-allowed' : 'text-warning hover:text-primary cursor-pointer'}`}
+                    title={t("seriesCard.toSyncToServer")}
+                    type="button"
+                    disabled={isOffline}
+                >
+                    <FontAwesomeIcon icon={faCloudArrowUp} className="w-4 h-4"/>
+                </button>
+            )}
+        </div>
+    );
+}