Spaces:
No application file
No application file
File size: 4,150 Bytes
8d8a5e1 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 |
import React, { useState } from 'react';
import Sidebar from './components/Sidebar';
import PipelineStudio from './components/PipelineStudio';
import ChallengeMode from './components/ChallengeMode';
import CustomFunctionEditor from './components/CustomFunctionEditor';
import CodeCorrector from './components/CodeCorrector';
import { ViewState, NodeDefinition, Language, Challenge } from './types';
import { CHALLENGES } from './constants';
const App: React.FC = () => {
const [currentView, setCurrentView] = useState<ViewState>('STUDIO');
const [language, setLanguage] = useState<Language>('en');
const [customNodes, setCustomNodes] = useState<NodeDefinition[]>([]);
const [activeChallenge, setActiveChallenge] = useState<Challenge | null>(null);
const [userChallenges, setUserChallenges] = useState<Challenge[]>([]);
const [completedChallenges, setCompletedChallenges] = useState<Record<string, { date: string }>>({});
const handleCustomNodeCreated = (node: NodeDefinition) => {
setCustomNodes(prev => [...prev, node]);
setCurrentView('STUDIO');
};
const handleImportCommunityNode = (node: NodeDefinition) => {
// Clone the node to avoid reference issues
const importedNode = { ...node, id: `imported_${Date.now()}` };
setCustomNodes(prev => [...prev, importedNode]);
};
const handleEnterChallengeWorkspace = (challenge: Challenge) => {
setActiveChallenge(challenge);
setCurrentView('CHALLENGE_WORKSPACE');
};
const handleExitChallenge = () => {
setActiveChallenge(null);
setCurrentView('CHALLENGES');
};
const handleChallengeComplete = (challengeId: string) => {
setCompletedChallenges(prev => ({
...prev,
[challengeId]: { date: new Date().toISOString() }
}));
};
const getChallengesWithStatus = () => {
return [...CHALLENGES, ...userChallenges].map(c => ({
...c,
isCompleted: !!completedChallenges[c.id],
completionDate: completedChallenges[c.id]?.date || null
}));
};
const renderContent = () => {
switch (currentView) {
case 'STUDIO':
return <PipelineStudio
customNodes={customNodes}
language={language}
onImportCommunityNode={handleImportCommunityNode}
/>;
case 'CHALLENGES':
return <ChallengeMode
language={language}
onEnterChallengeWorkspace={handleEnterChallengeWorkspace}
userChallenges={getChallengesWithStatus().filter(c => c.isUserCreated)}
allChallengesWithStatus={getChallengesWithStatus()} // Pass full list with status
onSaveChallenge={(c) => setUserChallenges([...userChallenges, c])}
/>;
case 'EDITOR':
return <CustomFunctionEditor onNodeCreated={handleCustomNodeCreated} language={language} />;
case 'CORRECTOR':
return <CodeCorrector language={language} />;
case 'CHALLENGE_WORKSPACE':
return (
<PipelineStudio
key="challenge-workspace"
customNodes={[]} // No custom nodes in challenge mode
language={language}
activeChallenge={activeChallenge}
onExitChallenge={handleExitChallenge}
onChallengeComplete={handleChallengeComplete}
/>
);
default:
return <PipelineStudio customNodes={customNodes} language={language} />;
}
};
return (
<div className="flex h-screen w-screen bg-slate-950 text-slate-100 font-sans selection:bg-cyan-500/30">
<Sidebar
currentView={currentView === 'CHALLENGE_WORKSPACE' ? 'CHALLENGES' : currentView}
onChangeView={(view) => {
if (currentView === 'CHALLENGE_WORKSPACE' && view !== 'CHALLENGES') {
setActiveChallenge(null);
}
setCurrentView(view);
}}
language={language}
onToggleLanguage={() => setLanguage(l => l === 'en' ? 'fr' : 'en')}
/>
<main className="flex-1 overflow-hidden relative">
{renderContent()}
</main>
</div>
);
};
export default App;
|