better state management

This commit is contained in:
Xuan Son Nguyen 2025-02-08 15:25:39 +01:00
parent e1f03c4009
commit 84919d2fbf
2 changed files with 8 additions and 13 deletions

Binary file not shown.

View file

@ -52,22 +52,22 @@ if (StorageUtils.getConfig().pyIntepreterEnabled) {
export default function CanvasPyInterpreter() { export default function CanvasPyInterpreter() {
const { canvasData, setCanvasData } = useAppContext(); const { canvasData, setCanvasData } = useAppContext();
const [code, setCode] = useState(canvasData?.content ?? ''); // copy to avoid direct mutation
const [running, setRunning] = useState(false); const [running, setRunning] = useState(false);
const [output, setOutput] = useState(''); const [output, setOutput] = useState('');
const runCode = async () => { const runCode = async (pycode: string) => {
const code = canvasData?.content;
if (!code) return;
setRunning(true); setRunning(true);
setOutput('Running...'); setOutput('Running...');
const out = await PyodideWrapper.run(code); const out = await PyodideWrapper.run(pycode);
setOutput(out); setOutput(out);
setRunning(false); setRunning(false);
}; };
// run code on mount // run code on mount
useEffect(() => { useEffect(() => {
runCode(); setCode(canvasData?.content ?? '');
runCode(canvasData?.content ?? '');
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [canvasData?.content]); }, [canvasData?.content]);
@ -88,19 +88,14 @@ export default function CanvasPyInterpreter() {
<div className="grid grid-rows-3 gap-4 h-full"> <div className="grid grid-rows-3 gap-4 h-full">
<textarea <textarea
className="textarea textarea-bordered w-full h-full font-mono" className="textarea textarea-bordered w-full h-full font-mono"
value={canvasData.content} value={code}
onChange={(e) => onChange={(e) => setCode(e.target.value)}
setCanvasData({
...canvasData,
content: e.target.value,
})
}
></textarea> ></textarea>
<div className="font-mono flex flex-col row-span-2"> <div className="font-mono flex flex-col row-span-2">
<div className="flex items-center mb-2"> <div className="flex items-center mb-2">
<button <button
className="btn btn-sm bg-base-100" className="btn btn-sm bg-base-100"
onClick={runCode} onClick={() => runCode(code)}
disabled={running} disabled={running}
> >
<PlayIcon className="h-6 w-6" />{' '} <PlayIcon className="h-6 w-6" />{' '}