authentification nocodebackend ok
This commit is contained in:
162
components/AppRouter.tsx
Normal file
162
components/AppRouter.tsx
Normal file
@@ -0,0 +1,162 @@
|
||||
|
||||
import React, { useState, useRef } from 'react';
|
||||
import { ViewMode, BookProject, UserProfile, Chapter, Entity } from '../types';
|
||||
import LandingPage from './LandingPage';
|
||||
import FeaturesPage from './FeaturesPage';
|
||||
import Pricing from './Pricing';
|
||||
import Checkout from './Checkout';
|
||||
import AuthPage from './AuthPage';
|
||||
import LoginPage from './LoginPage';
|
||||
import Dashboard from './Dashboard';
|
||||
import UserProfileSettings from './UserProfileSettings';
|
||||
import ExportModal from './ExportModal';
|
||||
import HelpModal from './HelpModal';
|
||||
import EditorShell from './layout/EditorShell';
|
||||
import RichTextEditor, { RichTextEditorHandle } from './RichTextEditor';
|
||||
import WorldBuilder from './WorldBuilder';
|
||||
import StoryWorkflow from './StoryWorkflow';
|
||||
import IdeaBoard from './IdeaBoard';
|
||||
import BookSettingsComponent from './BookSettings';
|
||||
import { transformText } from '../services/geminiService';
|
||||
|
||||
interface AppRouterProps {
|
||||
user: UserProfile | null;
|
||||
projects: BookProject[];
|
||||
currentProjectId: string | null;
|
||||
viewMode: ViewMode;
|
||||
chatHistory: any[];
|
||||
isGenerating: boolean;
|
||||
onLogin: (data: any) => Promise<any>;
|
||||
onSignup: (data: any) => Promise<any>;
|
||||
onLogout: () => void;
|
||||
onViewModeChange: (mode: ViewMode) => void;
|
||||
onSelectProject: (id: string) => void;
|
||||
onCreateProject: () => void;
|
||||
onUpdateProject: (updates: Partial<BookProject>) => void;
|
||||
onUpdateChapter: (chapterId: string, updates: Partial<Chapter>) => void;
|
||||
onAddChapter: () => Promise<string | null>;
|
||||
onCreateEntity: (entity: Omit<Entity, 'id'>) => Promise<string | null>;
|
||||
onUpdateEntity: (entityId: string, updates: Partial<Entity>) => void;
|
||||
onDeleteEntity: (entityId: string) => void;
|
||||
onUpdateProfile: (updates: Partial<UserProfile>) => void;
|
||||
onUpgradePlan: (plan: any) => void;
|
||||
onSendMessage: (msg: string) => void;
|
||||
onIncrementUsage: () => void;
|
||||
}
|
||||
|
||||
const AppRouter: React.FC<AppRouterProps> = (props) => {
|
||||
const [currentChapterId, setCurrentChapterId] = useState<string>('');
|
||||
const [isExportModalOpen, setIsExportModalOpen] = useState(false);
|
||||
const [isHelpModalOpen, setIsHelpModalOpen] = useState(false);
|
||||
const [targetEntityId, setTargetEntityId] = useState<string | null>(null);
|
||||
const editorRef = useRef<RichTextEditorHandle>(null);
|
||||
|
||||
const { user, viewMode, currentProjectId, projects } = props;
|
||||
const project = projects.find(p => p.id === currentProjectId);
|
||||
console.log('props', props);
|
||||
// DEBUG: Check all props
|
||||
console.log("[AppRouter DEBUG] PROPS RECEIVED:", {
|
||||
user,
|
||||
userId: user?.id,
|
||||
viewMode,
|
||||
currentProjectId,
|
||||
projectsCount: projects?.length,
|
||||
fullProps: props
|
||||
});
|
||||
React.useEffect(() => {
|
||||
if (project && (!currentChapterId || !project.chapters.some(c => c.id === currentChapterId))) {
|
||||
setCurrentChapterId(project.chapters[0]?.id || '');
|
||||
}
|
||||
}, [currentProjectId, project]);
|
||||
|
||||
if (viewMode === 'landing') return <LandingPage onLogin={() => props.onViewModeChange('auth')} onFeatures={() => props.onViewModeChange('features')} onPricing={() => props.onViewModeChange('pricing')} />;
|
||||
|
||||
// Use new LoginPage for 'auth' view (Login)
|
||||
if (viewMode === 'auth') return <LoginPage onSuccess={() => props.onViewModeChange('dashboard')} onRegister={() => props.onViewModeChange('signup')} />;
|
||||
|
||||
// Use existing AuthPage for 'signup' view (Register) - defaulted to signup mode inside AuthPage if possible,
|
||||
// but AuthPage manages its own state. We can pass a prop if AuthPage supports it, or just let user toggle.
|
||||
// Since AuthPage has internal state for mode, we might just render it.
|
||||
// Ideally AuthPage should accept an initialMode prop. Let's check AuthPage again or just render it.
|
||||
if (viewMode === 'signup') return <AuthPage onBack={() => props.onViewModeChange('landing')} onSuccess={() => props.onViewModeChange('dashboard')} initialMode='signup' />;
|
||||
if (viewMode === 'features') return <FeaturesPage onBack={() => props.onViewModeChange(user ? 'dashboard' : 'landing')} />;
|
||||
if (viewMode === 'pricing') return <Pricing currentPlan={user?.subscription.plan || 'free'} onBack={() => props.onViewModeChange(user ? 'dashboard' : 'landing')} onSelectPlan={() => user ? props.onViewModeChange('checkout') : props.onViewModeChange('auth')} />;
|
||||
if (viewMode === 'checkout') return <Checkout onComplete={() => props.onUpgradePlan('pro')} onCancel={() => props.onViewModeChange('pricing')} />;
|
||||
if (viewMode === 'dashboard' && user) return <Dashboard user={user} projects={projects} onSelect={props.onSelectProject} onCreate={props.onCreateProject} onLogout={props.onLogout} onPricing={() => props.onViewModeChange('pricing')} onProfile={() => props.onViewModeChange('profile')} />;
|
||||
if (viewMode === 'profile' && user) return <UserProfileSettings user={user} onUpdate={props.onUpdateProfile} onBack={() => props.onViewModeChange('dashboard')} />;
|
||||
|
||||
console.log("[AppRouter] Render State:", { viewMode, hasUser: !!user, hasProject: !!project, currentProjectId, currentChapterId });
|
||||
|
||||
if (!project || !user) {
|
||||
// If we are here, we are in a protected route ('write', 'world_building', etc.)
|
||||
// BUT we don't have a project or user. This is an invalid state.
|
||||
console.warn("[AppRouter] Fallthrough to NULL - displaying fallback");
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center h-screen bg-slate-100 text-slate-800">
|
||||
<h2 className="text-xl font-bold mb-2">État Indéfini</h2>
|
||||
<p>Mode: {viewMode}</p>
|
||||
<p>Utilisateur: {user ? 'Connecté' : 'Non connecté'}</p>
|
||||
<p>Projet sélectionné: {currentProjectId || 'Aucun'}</p>
|
||||
<button className="mt-4 px-4 py-2 bg-blue-600 text-white rounded" onClick={() => props.onViewModeChange('landing')}>
|
||||
Retour à l'accueil
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const currentChapter = project.chapters.find(c => c.id === currentChapterId);
|
||||
|
||||
return (
|
||||
<EditorShell
|
||||
project={project}
|
||||
user={user}
|
||||
viewMode={viewMode}
|
||||
currentChapterId={currentChapterId}
|
||||
chatHistory={props.chatHistory}
|
||||
isGenerating={props.isGenerating}
|
||||
onViewModeChange={props.onViewModeChange}
|
||||
onChapterSelect={(id) => { setCurrentChapterId(id); props.onViewModeChange('write'); }}
|
||||
onUpdateProject={props.onUpdateProject}
|
||||
onAddChapter={async () => {
|
||||
const id = await props.onAddChapter();
|
||||
if (id) setCurrentChapterId(id);
|
||||
}}
|
||||
onDeleteChapter={(id) => {
|
||||
if (project.chapters.length > 1) {
|
||||
const newChapters = project.chapters.filter(c => c.id !== id);
|
||||
props.onUpdateProject({ chapters: newChapters });
|
||||
if (currentChapterId === id) setCurrentChapterId(newChapters[0].id);
|
||||
}
|
||||
}}
|
||||
onLogout={props.onLogout}
|
||||
onSendMessage={props.onSendMessage}
|
||||
onInsertText={(text) => editorRef.current?.insertHtml(text)}
|
||||
onOpenExport={() => setIsExportModalOpen(true)}
|
||||
onOpenHelp={() => setIsHelpModalOpen(true)}
|
||||
>
|
||||
<ExportModal isOpen={isExportModalOpen} onClose={() => setIsExportModalOpen(false)} project={project} onPrint={() => { }} />
|
||||
<HelpModal isOpen={isHelpModalOpen} onClose={() => setIsHelpModalOpen(false)} viewMode={viewMode} />
|
||||
|
||||
{viewMode === 'write' && <RichTextEditor
|
||||
ref={editorRef}
|
||||
initialContent={currentChapter?.content || ""}
|
||||
onSave={(html) => props.onUpdateChapter(currentChapterId, { content: html })}
|
||||
onAiTransform={(text, mode) => transformText(text, mode, currentChapter?.content || "", user, props.onIncrementUsage)}
|
||||
/>}
|
||||
{viewMode === 'world_building' && <WorldBuilder
|
||||
entities={project.entities}
|
||||
onCreate={props.onCreateEntity}
|
||||
onUpdate={props.onUpdateEntity}
|
||||
onDelete={props.onDeleteEntity}
|
||||
templates={project.templates || []}
|
||||
onUpdateTemplates={(t) => props.onUpdateProject({ templates: t })}
|
||||
initialSelectedId={targetEntityId}
|
||||
/>}
|
||||
{viewMode === 'ideas' && <IdeaBoard ideas={project.ideas || []} onUpdate={(i) => props.onUpdateProject({ ideas: i })} />}
|
||||
{viewMode === 'workflow' && <StoryWorkflow data={project.workflow || { nodes: [], connections: [] }} onUpdate={(w) => props.onUpdateProject({ workflow: w })} entities={project.entities} onNavigateToEntity={(id) => { setTargetEntityId(id); props.onViewModeChange('world_building'); }} />}
|
||||
{viewMode === 'settings' && <BookSettingsComponent project={project} onUpdate={props.onUpdateProject} />}
|
||||
</EditorShell>
|
||||
);
|
||||
};
|
||||
|
||||
export default AppRouter;
|
||||
Reference in New Issue
Block a user