feat: Add stdin support, improve error reporting and UI

Author: Incharajayaram

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() {
           </StyledButton>
         </div>
       </StyledLayout>
-      <OutputLayout>
-        <div className="output-header">
-          <Typography
-            variant="h6"
-            sx={{ fontSize: "1rem", fontWeight: "bold" }}
-          >
-            Output
-          </Typography>
-          <div className="output-controls">
-            <Button
-              size="small"
-              onClick={copyOutput}
-              startIcon={<FaCopy />}
-              variant="outlined"
-              sx={{ minWidth: "auto", padding: "4px 8px" }}
-            >
-              Copy
-            </Button>
-            <Button
-              size="small"
-              onClick={clearOutput}
-              startIcon={<FaTrash />}
-              variant="outlined"
-              sx={{ minWidth: "auto", padding: "4px 8px", marginLeft: "0.5rem" }}
+      <div style={{ display: "flex", flexDirection: "row" }}>
+        <OutputLayout>
+          <div className="output-header">
+            <Typography
+              variant="h6"
+              sx={{ fontSize: "1rem", fontWeight: "bold" }}
             >
-              Clear
-            </Button>
+              Output
+            </Typography>
+            <div className="output-controls">
+              <Button
+                size="small"
+                onClick={copyOutput}
+                startIcon={<FaCopy />}
+                variant="outlined"
+                sx={{ minWidth: "auto", padding: "4px 8px" }}
+              >
+                Copy
+              </Button>
+              <Button
+                size="small"
+                onClick={clearOutput}
+                startIcon={<FaTrash />}
+                variant="outlined"
+                sx={{ minWidth: "auto", padding: "4px 8px", marginLeft: "0.5rem" }}
+              >
+                Clear
+              </Button>
+            </div>
           </div>
-        </div>
-        <div className="output-content">
-          {Array.isArray(output) && output.length > 0 ? (
-            output.map((result, i) => (
-              <div key={i} className="output-line">
-                {result}
+          <div className="output-content">
+            {Array.isArray(output) && output.length > 0 ? (
+              output.map((result, i) => (
+                <div key={i} className="output-line">
+                  {result}
+                </div>
+              ))
+            ) : (
+              <div className="output-empty">
+                No output yet. Run your code to see results!
               </div>
-            ))
-          ) : (
-            <div className="output-empty">
-              No output yet. Run your code to see results!
-            </div>
-          )}
-        </div>
-      </OutputLayout>
+            )}
+          </div>
+        </OutputLayout>
+        <InputLayout>
+          <Typography variant="h6" sx={{ fontSize: "1rem", fontWeight: "bold" }}>
+            Input
+          </Typography>
+          <StyledTextArea
+            value={stdin}
+            onChange={(e) => setStdin(e.target.value)}
+            placeholder="Provide all program input here before running"
+          />
+        </InputLayout>
+      </div>
     </>
   );