Remove CharacterComponent and CharacterDetail components
- Deleted `CharacterComponent` and `CharacterDetail` files from the project. - Refactored related logic to improve code maintainability and reduce redundancy.
This commit is contained in:
natreex
@@ -1,54 +1,87 @@
|
||||
'use client'
|
||||
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
||||
import {faFeather, faGlobe, faHatWizard, faInfoCircle, faMapMarkerAlt, faUsers} from "@fortawesome/free-solid-svg-icons";
|
||||
import {RefObject, useContext, useEffect, useRef, useState} from "react";
|
||||
import {
|
||||
faFeather,
|
||||
faGlobe,
|
||||
faHatWizard,
|
||||
faInfoCircle,
|
||||
faMapMarkerAlt,
|
||||
faUsers
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import React, {lazy, Suspense, useContext, useEffect, useState} from "react";
|
||||
import {BookContext} from "@/context/BookContext";
|
||||
import {PanelComponent} from "@/lib/models/Editor";
|
||||
import PanelHeader from "@/components/PanelHeader";
|
||||
import AboutEditors from "@/components/rightbar/AboutERitors";
|
||||
import {faDiscord, faFacebook} from "@fortawesome/free-brands-svg-icons";
|
||||
import WorldSetting from "@/components/book/settings/world/WorldSetting";
|
||||
import LocationComponent from "@/components/book/settings/locations/LocationComponent";
|
||||
import CharacterComponent from "@/components/book/settings/characters/CharacterComponent";
|
||||
import SpellComponent from "@/components/book/settings/spells/SpellComponent";
|
||||
import QuillSense from "@/components/quillsense/QuillSenseComponent";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {faSpinner} from "@fortawesome/free-solid-svg-icons";
|
||||
import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";
|
||||
|
||||
export default function ComposerRightBar() {
|
||||
// Lazy loaded Editor components
|
||||
const WorldEditor = lazy(function () {
|
||||
return import('@/components/book/settings/world/editor/WorldEditor');
|
||||
});
|
||||
const LocationEditor = lazy(function () {
|
||||
return import('@/components/book/settings/locations/editor/LocationEditor');
|
||||
});
|
||||
const CharacterEditor = lazy(function () {
|
||||
return import('@/components/book/settings/characters/editor/CharacterEditor');
|
||||
});
|
||||
const SpellEditor = lazy(function () {
|
||||
return import('@/components/book/settings/spells/editor/SpellEditor');
|
||||
});
|
||||
|
||||
function LoadingSpinner(): React.JSX.Element {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<FontAwesomeIcon icon={faSpinner} className="w-8 h-8 text-primary animate-spin"/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface PanelContentProps {
|
||||
currentPanelId: number | undefined;
|
||||
}
|
||||
|
||||
function PanelContent({currentPanelId}: PanelContentProps): React.JSX.Element {
|
||||
return (
|
||||
<Suspense fallback={<LoadingSpinner/>}>
|
||||
{currentPanelId === 1 && <QuillSense/>}
|
||||
{currentPanelId === 2 && <WorldEditor/>}
|
||||
{currentPanelId === 3 && <LocationEditor/>}
|
||||
{currentPanelId === 4 && <CharacterEditor/>}
|
||||
{currentPanelId === 5 && <SpellEditor/>}
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
interface PanelHeaderProps {
|
||||
currentPanel: PanelComponent | undefined;
|
||||
onClose: () => Promise<void>;
|
||||
}
|
||||
|
||||
function EditorPanelHeader({currentPanel, onClose}: PanelHeaderProps): React.JSX.Element {
|
||||
return (
|
||||
<PanelHeader
|
||||
title={currentPanel?.title ?? ''}
|
||||
description={currentPanel?.description ?? ''}
|
||||
badge={currentPanel?.badge ?? ''}
|
||||
icon={currentPanel?.icon}
|
||||
callBackAction={onClose}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ComposerRightBar(): React.JSX.Element {
|
||||
const {book} = useContext(BookContext);
|
||||
|
||||
const t = useTranslations();
|
||||
|
||||
const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext)
|
||||
|
||||
const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
|
||||
|
||||
const [panelHidden, setPanelHidden] = useState<boolean>(false);
|
||||
const [currentPanel, setCurrentPanel] = useState<PanelComponent | undefined>()
|
||||
|
||||
const [currentPanel, setCurrentPanel] = useState<PanelComponent | undefined>();
|
||||
const [showAbout, setShowAbout] = useState<boolean>(false);
|
||||
|
||||
const worldRef: RefObject<{ handleSave: () => Promise<void> } | null> = useRef<{ handleSave: () => Promise<void> }>(null);
|
||||
const locationRef: RefObject<{ handleSave: () => Promise<void> } | null> = useRef<{ handleSave: () => Promise<void> }>(null);
|
||||
const characterRef: RefObject<{ handleSave: () => Promise<void> } | null> = useRef<{ handleSave: () => Promise<void> }>(null);
|
||||
const spellRef: RefObject<{ handleSave: () => Promise<void> } | null> = useRef<{ handleSave: () => Promise<void> }>(null);
|
||||
|
||||
async function handleSaveClick(): Promise<void> {
|
||||
switch (currentPanel?.id) {
|
||||
case 2:
|
||||
worldRef.current?.handleSave();
|
||||
break;
|
||||
case 3:
|
||||
locationRef.current?.handleSave();
|
||||
break;
|
||||
case 4:
|
||||
characterRef.current?.handleSave();
|
||||
break;
|
||||
case 5:
|
||||
spellRef.current?.handleSave();
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function togglePanel(component: PanelComponent): void {
|
||||
if (panelHidden) {
|
||||
@@ -60,15 +93,7 @@ export default function ComposerRightBar() {
|
||||
setPanelHidden(true);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(():void => {
|
||||
if (!book){
|
||||
setCurrentPanel(undefined);
|
||||
setPanelHidden(false);
|
||||
return;
|
||||
}
|
||||
}, [book]);
|
||||
|
||||
|
||||
const editorComponents: PanelComponent[] = [
|
||||
{
|
||||
id: 1,
|
||||
@@ -105,15 +130,8 @@ export default function ComposerRightBar() {
|
||||
badge: t("composerRightBar.editorComponents.spells.badge"),
|
||||
icon: faHatWizard
|
||||
},
|
||||
/*{
|
||||
id: 6,
|
||||
title: t("composerRightBar.editorComponents.items.title"),
|
||||
description: t("composerRightBar.editorComponents.items.description"),
|
||||
badge: t("composerRightBar.editorComponents.items.badge"),
|
||||
icon: faCube,
|
||||
}*/
|
||||
]
|
||||
|
||||
];
|
||||
|
||||
const homeComponents: PanelComponent[] = [
|
||||
{
|
||||
id: 1,
|
||||
@@ -121,7 +139,9 @@ export default function ComposerRightBar() {
|
||||
description: t("composerRightBar.homeComponents.about.description"),
|
||||
badge: t("composerRightBar.homeComponents.about.badge"),
|
||||
icon: faInfoCircle,
|
||||
action: () => setShowAbout(true)
|
||||
action: function (): void {
|
||||
setShowAbout(true);
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
@@ -129,7 +149,9 @@ export default function ComposerRightBar() {
|
||||
description: t("composerRightBar.homeComponents.facebook.description"),
|
||||
badge: t("composerRightBar.homeComponents.facebook.badge"),
|
||||
icon: faFacebook,
|
||||
action: ():Promise<void> => window.electron.openExternal('https://www.facebook.com/profile.php?id=61562628720878')
|
||||
action: function (): Promise<void> {
|
||||
return window.electron.openExternal('https://www.facebook.com/profile.php?id=61562628720878');
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
@@ -137,124 +159,115 @@ export default function ComposerRightBar() {
|
||||
description: t("composerRightBar.homeComponents.discord.description"),
|
||||
badge: t("composerRightBar.homeComponents.discord.badge"),
|
||||
icon: faDiscord,
|
||||
action: () => window.electron.openExternal('https://discord.gg/CHXRPvmaXm')
|
||||
action: function (): Promise<void> {
|
||||
return window.electron.openExternal('https://discord.gg/CHXRPvmaXm');
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
];
|
||||
|
||||
function disabled(componentId: number): boolean {
|
||||
switch (componentId) {
|
||||
case 1:
|
||||
return book === null;
|
||||
default:
|
||||
return book === null;
|
||||
}
|
||||
return book === null;
|
||||
}
|
||||
|
||||
|
||||
useEffect(function (): void {
|
||||
if (!book) {
|
||||
setCurrentPanel(undefined);
|
||||
setPanelHidden(false);
|
||||
}
|
||||
}, [book]);
|
||||
|
||||
async function handleClosePanel(): Promise<void> {
|
||||
setPanelHidden(!panelHidden);
|
||||
}
|
||||
|
||||
return (
|
||||
<div id="right-panel-container" className="flex transition-all duration-300">
|
||||
{panelHidden && (
|
||||
<div id="right-panel"
|
||||
className="bg-tertiary/95 backdrop-blur-sm border-l border-secondary/50 min-w-[450px] max-w-[450px] h-full transition-all duration-300 overflow-hidden shadow-2xl">
|
||||
<div className="flex flex-col h-full">
|
||||
<PanelHeader title={currentPanel?.title ?? ''}
|
||||
description={currentPanel?.description ?? ''}
|
||||
badge={currentPanel?.badge ?? ''}
|
||||
icon={currentPanel?.icon}
|
||||
secondActionCallback={currentPanel?.id === 2 || currentPanel?.id === 3 || currentPanel?.id === 4 || currentPanel?.id === 5 ? handleSaveClick : undefined}
|
||||
callBackAction={async () => setPanelHidden(!panelHidden)}
|
||||
<EditorPanelHeader
|
||||
currentPanel={currentPanel}
|
||||
onClose={handleClosePanel}
|
||||
/>
|
||||
<div className="flex-grow overflow-auto">
|
||||
{currentPanel?.id === 1 && (
|
||||
<QuillSense/>
|
||||
)}
|
||||
{currentPanel?.id === 2 && (
|
||||
<WorldSetting ref={worldRef} showToggle={false}/>
|
||||
)}
|
||||
{currentPanel?.id === 3 && (
|
||||
<LocationComponent ref={locationRef} showToggle={false}/>
|
||||
)}
|
||||
{currentPanel?.id === 4 && (
|
||||
<CharacterComponent ref={characterRef} showToggle={false}/>
|
||||
)}
|
||||
{currentPanel?.id === 5 && (
|
||||
<SpellComponent ref={spellRef} showToggle={false}/>
|
||||
)}
|
||||
<PanelContent currentPanelId={currentPanel?.id}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="bg-tertiary border-l border-secondary/50 p-3 flex flex-col space-y-3 shadow-xl">
|
||||
{book ? editorComponents
|
||||
.filter((component: PanelComponent):boolean => {
|
||||
// Filter QuillSense if offline, local book, or quillsenseEnabled is false
|
||||
if (component.id === 1) {
|
||||
if (isCurrentlyOffline() || book?.localBook) {
|
||||
return false;
|
||||
}
|
||||
if (book?.quillsenseEnabled === false) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
// Filter Worlds if tools.worlds is disabled
|
||||
if (component.id === 2 && !book?.tools?.worlds) {
|
||||
{book ? editorComponents.filter(function (component: PanelComponent): boolean {
|
||||
// Masquer QuillSense (id=1) si offline, livre local ou desactive pour ce livre
|
||||
if (component.id === 1) {
|
||||
if (isCurrentlyOffline() || book?.localBook) {
|
||||
return false;
|
||||
}
|
||||
// Filter Locations if tools.locations is disabled
|
||||
if (component.id === 3 && !book?.tools?.locations) {
|
||||
if (book.quillsenseEnabled === false) {
|
||||
return false;
|
||||
}
|
||||
// Filter Characters if tools.characters is disabled
|
||||
if (component.id === 4 && !book?.tools?.characters) {
|
||||
return false;
|
||||
}
|
||||
// Filter Spells if tools.spells is disabled
|
||||
if (component.id === 5 && !book?.tools?.spells) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
})
|
||||
.map((component: PanelComponent) => (
|
||||
<button
|
||||
key={component.id}
|
||||
disabled={disabled(component.id)}
|
||||
onClick={() => {
|
||||
togglePanel(component);
|
||||
setCurrentPanel(component);
|
||||
}}
|
||||
className={`group relative p-3 rounded-xl transition-all duration-200 ${
|
||||
disabled(component.id)
|
||||
? 'bg-secondary/10 text-muted cursor-not-allowed opacity-40'
|
||||
: panelHidden && currentPanel?.id === component.id
|
||||
? 'bg-primary text-text-primary shadow-lg shadow-primary/30 scale-105'
|
||||
: 'bg-secondary/30 text-muted hover:text-text-primary hover:bg-secondary hover:shadow-md hover:scale-105'
|
||||
}`}
|
||||
title={component.title}
|
||||
>
|
||||
<FontAwesomeIcon icon={component.icon}
|
||||
className={'w-5 h-5 transition-transform duration-200 group-hover:scale-110'}/>
|
||||
{panelHidden && currentPanel?.id === component.id && (
|
||||
<div
|
||||
className="absolute -left-1 top-1/2 -translate-y-1/2 w-1 h-8 bg-primary rounded-r-full"></div>
|
||||
)}
|
||||
</button>
|
||||
)) : homeComponents.map((component: PanelComponent) => (
|
||||
<button
|
||||
key={component.id}
|
||||
onClick={component.action ?? (() => {
|
||||
})}
|
||||
className={`group relative p-3 rounded-xl transition-all duration-200 ${panelHidden && currentPanel?.id === component.id
|
||||
? 'bg-primary text-text-primary shadow-lg shadow-primary/30 scale-105'
|
||||
: 'bg-secondary/30 text-muted hover:text-text-primary hover:bg-secondary hover:shadow-md hover:scale-105'}`}
|
||||
title={component.title}
|
||||
>
|
||||
<FontAwesomeIcon icon={component.icon}
|
||||
className={'w-5 h-5 transition-transform duration-200 group-hover:scale-110'}/>
|
||||
</button>
|
||||
))}
|
||||
}
|
||||
// Masquer Worlds (id=2) si desactive pour ce livre
|
||||
if (component.id === 2 && !book?.tools?.worlds) {
|
||||
return false;
|
||||
}
|
||||
// Masquer Locations (id=3) si desactive pour ce livre
|
||||
if (component.id === 3 && !book?.tools?.locations) {
|
||||
return false;
|
||||
}
|
||||
// Masquer Characters (id=4) si desactive pour ce livre
|
||||
if (component.id === 4 && !book?.tools?.characters) {
|
||||
return false;
|
||||
}
|
||||
// Masquer Spells (id=5) si desactive pour ce livre
|
||||
if (component.id === 5 && !book?.tools?.spells) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}).map(function (component: PanelComponent) {
|
||||
return (
|
||||
<button
|
||||
key={component.id}
|
||||
disabled={disabled(component.id)}
|
||||
onClick={function (): void {
|
||||
togglePanel(component);
|
||||
setCurrentPanel(component);
|
||||
}}
|
||||
className={`group relative p-3 rounded-xl transition-all duration-200 ${
|
||||
disabled(component.id)
|
||||
? 'bg-secondary/10 text-muted cursor-not-allowed opacity-40'
|
||||
: panelHidden && currentPanel?.id === component.id
|
||||
? 'bg-primary text-text-primary shadow-lg shadow-primary/30 scale-105'
|
||||
: 'bg-secondary/30 text-muted hover:text-text-primary hover:bg-secondary hover:shadow-md hover:scale-105'
|
||||
}`}
|
||||
title={component.title}
|
||||
>
|
||||
<FontAwesomeIcon icon={component.icon}
|
||||
className="w-4 h-4 transition-transform duration-200 group-hover:scale-110"/>
|
||||
{panelHidden && currentPanel?.id === component.id && (
|
||||
<div className="absolute -left-1 top-1/2 -translate-y-1/2 w-1 h-8 bg-primary rounded-r-full"></div>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
}) : homeComponents.map(function (component: PanelComponent) {
|
||||
return (
|
||||
<button
|
||||
key={component.id}
|
||||
onClick={component.action ?? function (): void {}}
|
||||
className={`group relative p-3 rounded-xl transition-all duration-200 ${panelHidden && currentPanel?.id === component.id
|
||||
? 'bg-primary text-text-primary shadow-lg shadow-primary/30 scale-105'
|
||||
: 'bg-secondary/30 text-muted hover:text-text-primary hover:bg-secondary hover:shadow-md hover:scale-105'}`}
|
||||
title={component.title}
|
||||
>
|
||||
<FontAwesomeIcon icon={component.icon}
|
||||
className="w-4 h-4 transition-transform duration-200 group-hover:scale-110"/>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{
|
||||
showAbout && <AboutEditors onClose={() => setShowAbout(false)}/>
|
||||
}
|
||||
{showAbout && <AboutEditors onClose={function (): void {
|
||||
setShowAbout(false);
|
||||
}}/>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user