From eaf0436db07f00052599b99fff8aec8673a63711 Mon Sep 17 00:00:00 2001 From: Incharajayaram Date: Wed, 29 Oct 2025 16:56:01 +0530 Subject: [PATCH 1/3] feat: Implement automatic code saving and loading to local storage --- src/pages/EditorComponent.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/pages/EditorComponent.js b/src/pages/EditorComponent.js index 777d0e9..e012778 100644 --- a/src/pages/EditorComponent.js +++ b/src/pages/EditorComponent.js @@ -133,9 +133,20 @@ function EditorComponent() { DEFAULT_LANGUAGE: selectedLanguage.DEFAULT_LANGUAGE, NAME: selectedLanguage.NAME, }); - setCode(selectedLanguage.HELLO_WORLD); + const savedCode = localStorage.getItem(`code-${currentLanguage}`); + if (savedCode) { + setCode(savedCode); + } else { + setCode(selectedLanguage.HELLO_WORLD); + } }, [currentLanguage]); + useEffect(() => { + if (code) { + localStorage.setItem(`code-${currentLanguage}`, code); + } + }, [code, currentLanguage]); + const handleEditorThemeChange = async (_, theme) => { if (["light", "vs-dark"].includes(theme.ID)) { setCurrentEditorTheme(theme); From 13a60e90df7ebb78f5972875e0d878e327ae2a70 Mon Sep 17 00:00:00 2001 From: Incharajayaram Date: Wed, 29 Oct 2025 17:38:13 +0530 Subject: [PATCH 2/3] feat: Add stdin support, improve error reporting and UI --- src/pages/EditorComponent.js | 153 +++++++++++++++++++++++------------ 1 file changed, 102 insertions(+), 51 deletions(-) diff --git a/src/pages/EditorComponent.js b/src/pages/EditorComponent.js index e012778..7be7d6d 100644 --- a/src/pages/EditorComponent.js +++ b/src/pages/EditorComponent.js @@ -65,6 +65,41 @@ const OutputLayout = styled("div")(({ theme }) => ({ "@media (min-width: 1024px)": { height: "30vh", padding: "1rem", + width: "50%", + }, +})); + +const InputLayout = styled("div")(({ theme }) => ({ + backgroundColor: theme.palette.background.paper, + height: "20vh", + margin: "1rem 0", + overflow: "auto", + border: `2px solid ${theme.palette.divider}`, + borderRadius: "1rem", + padding: "1rem", + "@media (min-width: 1024px)": { + height: "30vh", + padding: "1rem", + width: "50%", + margin: "1rem 0 0 1rem", + }, +})); + +const StyledTextArea = styled("textarea")(({ theme }) => ({ + width: "100%", + height: "calc(100% - 40px)", + background: "transparent", + color: theme.palette.text.primary, + border: "none", + resize: "none", + outline: "none", + fontSize: "1rem", + "&::placeholder": { + color: theme.palette.text.secondary, + opacity: 0.8, + }, + "&:focus::placeholder": { + color: "transparent", }, })); @@ -79,6 +114,7 @@ const decodeFormat = (data) => { function EditorComponent() { const [code, setCode] = useState(null); + const [stdin, setStdin] = useState(""); const [output, setOutput] = useState([]); const [currentLanguage, setCurrentLanguage] = useState( LANGUAGES[0].DEFAULT_LANGUAGE @@ -189,7 +225,7 @@ function EditorComponent() { body: JSON.stringify({ source_code: encodedCode, language_id: languageDetails.ID, - stdin: "", + stdin: btoa(stdin), expected_output: "", }), } @@ -219,16 +255,19 @@ function EditorComponent() { ) .then((response) => response.json()) .then((data) => { - if (!data.stdout) { - enqueueSnackbar("Please check the code", { variant: "error" }); - if (data.stderr) { - setOutput(decodeFormat(data.stderr)); - } else if (data.compile_output) { - setOutput(decodeFormat(data.compile_output)); - } - return; + const newOutput = []; + if (data.stdout) { + newOutput.push(...decodeFormat(data.stdout)); } - setOutput(decodeFormat(data.stdout)); + if (data.stderr) { + newOutput.push(...decodeFormat(data.stderr)); + enqueueSnackbar("Error in code", { variant: "error" }); + } + if (data.compile_output) { + newOutput.push(...decodeFormat(data.compile_output)); + enqueueSnackbar("Compilation error", { variant: "error" }); + } + setOutput(newOutput); }) .catch((error) => { enqueueSnackbar("Error retrieving output: " + error.message, { @@ -240,7 +279,7 @@ function EditorComponent() { } catch (error) { enqueueSnackbar("Error: " + error.message, { variant: "error" }); } - }, [enqueueSnackbar, languageDetails]); + }, [enqueueSnackbar, languageDetails, stdin]); // import file const [isImporting, setIsImporting] = React.useState(false); @@ -662,49 +701,61 @@ function EditorComponent() { - -
- - Output - -
- - + Output + +
+ + +
-
-
- {Array.isArray(output) && output.length > 0 ? ( - output.map((result, i) => ( -
- {result} +
+ {Array.isArray(output) && output.length > 0 ? ( + output.map((result, i) => ( +
+ {result} +
+ )) + ) : ( +
+ No output yet. Run your code to see results!
- )) - ) : ( -
- No output yet. Run your code to see results! -
- )} -
- + )} +
+ + + + Input + + setStdin(e.target.value)} + placeholder="Provide all program input here before running" + /> + +
); From 81c6f73ce78aa6620de9dbdb48b47e6091140be6 Mon Sep 17 00:00:00 2001 From: Incharajayaram Date: Wed, 29 Oct 2025 21:05:28 +0530 Subject: [PATCH 3/3] making changes according to copilot --- src/pages/EditorComponent.js | 30 ++++++++++++++++++++++-------- 1 file changed, 22 insertions(+), 8 deletions(-) diff --git a/src/pages/EditorComponent.js b/src/pages/EditorComponent.js index 7be7d6d..8c887bf 100644 --- a/src/pages/EditorComponent.js +++ b/src/pages/EditorComponent.js @@ -169,8 +169,8 @@ function EditorComponent() { DEFAULT_LANGUAGE: selectedLanguage.DEFAULT_LANGUAGE, NAME: selectedLanguage.NAME, }); - const savedCode = localStorage.getItem(`code-${currentLanguage}`); - if (savedCode) { + const savedCode = localStorage.getItem(`code-${selectedLanguage.DEFAULT_LANGUAGE}`); + if (savedCode !== null) { setCode(savedCode); } else { setCode(selectedLanguage.HELLO_WORLD); @@ -178,10 +178,18 @@ function EditorComponent() { }, [currentLanguage]); useEffect(() => { - if (code) { - localStorage.setItem(`code-${currentLanguage}`, code); - } - }, [code, currentLanguage]); + const handler = setTimeout(() => { + if (code) { + localStorage.setItem(`code-${currentLanguage}`, code); + } else { + localStorage.removeItem(`code-${currentLanguage}`); + } + }, 500); + + return () => { + clearTimeout(handler); + }; + }, [code]); const handleEditorThemeChange = async (_, theme) => { if (["light", "vs-dark"].includes(theme.ID)) { @@ -256,16 +264,22 @@ function EditorComponent() { .then((response) => response.json()) .then((data) => { const newOutput = []; + let errorMessage = []; + if (data.stdout) { newOutput.push(...decodeFormat(data.stdout)); } if (data.stderr) { newOutput.push(...decodeFormat(data.stderr)); - enqueueSnackbar("Error in code", { variant: "error" }); + errorMessage.push("Error in code"); } if (data.compile_output) { newOutput.push(...decodeFormat(data.compile_output)); - enqueueSnackbar("Compilation error", { variant: "error" }); + errorMessage.push("Compilation error"); + } + + if (errorMessage.length > 0) { + enqueueSnackbar(errorMessage.join(" and "), { variant: "error" }); } setOutput(newOutput); })