import { useEffect, useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { getProject } from '../services/projectService';
import { useEditorStore } from '../store/useEditorStore';
import { useSimulatorStore } from '../store/useSimulatorStore';
import { useProjectStore } from '../store/useProjectStore';
import { EditorPage } from './EditorPage';
export const ProjectPage: React.FC = () => {
const { username, projectName } = useParams<{ username: string; projectName: string }>();
const navigate = useNavigate();
const setCode = useEditorStore((s) => s.setCode);
const { setComponents, setWires, setBoardType } = useSimulatorStore();
const setCurrentProject = useProjectStore((s) => s.setCurrentProject);
const [ready, setReady] = useState(false);
const [error, setError] = useState('');
useEffect(() => {
if (!username || !projectName) return;
getProject(username, projectName)
.then((project) => {
setCode(project.code);
setBoardType(project.board_type as any);
try {
setComponents(JSON.parse(project.components_json));
setWires(JSON.parse(project.wires_json));
} catch {
// keep defaults if JSON is malformed
}
setCurrentProject({
id: project.id,
slug: project.slug,
ownerUsername: project.owner_username,
isPublic: project.is_public,
});
setReady(true);
})
.catch((err) => {
const status = err?.response?.status;
if (status === 404) setError('Project not found.');
else if (status === 403) setError('This project is private.');
else setError('Failed to load project.');
});
}, [username, projectName]);
if (error) {
return (
{error}
);
}
if (!ready) {
return (
);
}
return ;
};