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/book/settings/characters/editor/CharacterEditor.tsx
+++ b/components/book/settings/characters/editor/CharacterEditor.tsx
@@ -0,0 +1,206 @@
+'use client';
+import React, {useCallback, useContext, useMemo, useState} from 'react';
+import {useCharacters, UseCharactersConfig} from '@/hooks/settings/useCharacters';
+import {useTranslations} from 'next-intl';
+import {CharacterProps} from '@/lib/models/Character';
+import {SeriesCharacterProps} from '@/lib/models/Series';
+import {BookContext} from '@/context/BookContext';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faSpinner, faToggleOn} from '@fortawesome/free-solid-svg-icons';
+
+import ToolDetailHeader from '@/components/book/settings/ToolDetailHeader';
+import InputField from '@/components/form/InputField';
+import ToggleSwitch from '@/components/form/ToggleSwitch';
+import SeriesImportSelector from '@/components/form/SeriesImportSelector';
+import AlertBox from '@/components/AlertBox';
+
+import CharacterEditorList from './CharacterEditorList';
+import CharacterEditorDetail from './CharacterEditorDetail';
+import CharacterEditorEdit from './CharacterEditorEdit';
+
+/**
+ * CharacterEditor - Orchestrateur pour ComposerRightBar
+ * Mêmes fonctionnalités que CharacterSettings, layout condensé
+ */
+export default function CharacterEditor(): React.JSX.Element {
+    const t = useTranslations();
+    const {book} = useContext(BookContext);
+    const [showDeleteConfirm, setShowDeleteConfirm] = useState<boolean>(false);
+
+    const config: UseCharactersConfig = useMemo(function (): UseCharactersConfig {
+        return {
+            entityType: 'book',
+            entityId: book?.bookId || '',
+        };
+    }, [book?.bookId]);
+
+    const {
+        characters,
+        seriesCharacters,
+        selectedCharacter,
+        toolEnabled,
+        isLoading,
+        bookSeriesId,
+        viewMode,
+        saveCharacter,
+        deleteCharacter,
+        updateCharacterField,
+        addAttribute,
+        removeAttribute,
+        toggleTool,
+        importFromSeries,
+        exportToSeries,
+        refreshSeriesCharacters,
+        setSelectedCharacter,
+        enterDetailMode,
+        enterEditMode,
+        exitEditMode,
+        backToList,
+        addNewCharacter,
+    } = useCharacters(config);
+
+    const availableSeriesCharacters = useMemo(function (): SeriesCharacterProps[] {
+        return seriesCharacters.filter(function (sc: SeriesCharacterProps): boolean {
+            return !characters.some(function (c: CharacterProps): boolean {
+                return c.seriesCharacterId === sc.id;
+            });
+        });
+    }, [seriesCharacters, characters]);
+
+    const handleCharacterChange = useCallback(function (key: keyof CharacterProps, value: string | number | null): void {
+        updateCharacterField(key, value);
+    }, [updateCharacterField]);
+
+    async function handleSave(): Promise<void> {
+        await exitEditMode(true);
+    }
+
+    function handleCancel(): void {
+        exitEditMode(false);
+    }
+
+    async function handleDelete(): Promise<void> {
+        if (selectedCharacter?.id) {
+            await deleteCharacter(selectedCharacter.id);
+            setShowDeleteConfirm(false);
+            backToList();
+        }
+    }
+
+    function getSeriesCharacterForSelected(): SeriesCharacterProps | null {
+        if (!selectedCharacter?.seriesCharacterId) return null;
+        return seriesCharacters.find(function (sc: SeriesCharacterProps): boolean {
+            return sc.id === selectedCharacter.seriesCharacterId;
+        }) || null;
+    }
+
+    if (isLoading) {
+        return (
+            <div className="flex items-center justify-center py-8">
+                <FontAwesomeIcon icon={faSpinner} className="w-6 h-6 text-primary animate-spin"/>
+            </div>
+        );
+    }
+
+    const isNew: boolean = selectedCharacter?.id === null;
+    const canExport: boolean = Boolean(bookSeriesId && selectedCharacter?.id && !selectedCharacter.seriesCharacterId);
+
+    return (
+        <div className="flex flex-col h-full">
+            <ToolDetailHeader
+                title={selectedCharacter?.name || ''}
+                defaultTitle={t('characterDetail.newCharacter')}
+                viewMode={viewMode}
+                isNew={isNew}
+                onBack={backToList}
+                onEdit={enterEditMode}
+                onSave={handleSave}
+                onCancel={handleCancel}
+                onDelete={function (): void { setShowDeleteConfirm(true); }}
+                onExport={canExport ? exportToSeries : undefined}
+                showExport={canExport}
+                showDelete={Boolean(selectedCharacter?.id)}
+            />
+
+            <div className="flex-1 overflow-y-auto">
+                {viewMode === 'list' && (
+                    <div className="space-y-3 p-2">
+                        {/* Toggle tool */}
+                        <div className="bg-secondary/20 rounded-lg p-3 border border-secondary/30">
+                            <InputField
+                                icon={faToggleOn}
+                                fieldName={t('characterComponent.enableTool')}
+                                input={
+                                    <ToggleSwitch
+                                        checked={toolEnabled}
+                                        onChange={toggleTool}
+                                    />
+                                }
+                            />
+                        </div>
+
+                        {toolEnabled && (
+                            <>
+                                {/* Import from series */}
+                                {bookSeriesId && availableSeriesCharacters.length > 0 && (
+                                    <SeriesImportSelector
+                                        availableItems={availableSeriesCharacters.map(function (sc: SeriesCharacterProps) {
+                                            return {
+                                                id: sc.id,
+                                                name: `${sc.name}${sc.lastName ? ' ' + sc.lastName : ''}`
+                                            };
+                                        })}
+                                        onImport={importFromSeries}
+                                        placeholder={t('seriesImport.selectElement')}
+                                        label={t('seriesImport.importFromSeries')}
+                                    />
+                                )}
+
+                                <CharacterEditorList
+                                    characters={characters}
+                                    onCharacterClick={enterDetailMode}
+                                    onAddCharacter={addNewCharacter}
+                                />
+                            </>
+                        )}
+                    </div>
+                )}
+
+                {viewMode === 'detail' && selectedCharacter && (
+                    <div className="p-4">
+                        <CharacterEditorDetail
+                            character={selectedCharacter}
+                            seriesCharacter={getSeriesCharacterForSelected()}
+                        />
+                    </div>
+                )}
+
+                {viewMode === 'edit' && selectedCharacter && (
+                    <div className="p-4">
+                        <CharacterEditorEdit
+                            character={selectedCharacter}
+                            setCharacter={setSelectedCharacter}
+                            onCharacterChange={handleCharacterChange}
+                            onAddAttribute={addAttribute}
+                            onRemoveAttribute={removeAttribute}
+                            seriesCharacter={getSeriesCharacterForSelected()}
+                            onSyncComplete={refreshSeriesCharacters}
+                        />
+                    </div>
+                )}
+            </div>
+
+            {showDeleteConfirm && selectedCharacter?.id && (
+                <AlertBox
+                    title={t('characterDetail.deleteTitle')}
+                    message={t('characterDetail.deleteMessage', {name: selectedCharacter.name})}
+                    type="danger"
+                    confirmText={t('common.delete')}
+                    cancelText={t('common.cancel')}
+                    onConfirm={handleDelete}
+                    onCancel={function (): void { setShowDeleteConfirm(false); }}
+                />
+            )}
+        </div>
+    );
+}