feat(submission): use stdout/stderr

Author: angristan

src/components/Dashboard/Dashboard.tsx

@@ -27,7 +27,13 @@ export default function Example() {
     result = 'Processing...';
   }
   if (jobData) {
-    result = <Result status={jobData.status} output={jobData.output}></Result>;
+    result = (
+      <Result
+        status={jobData.status}
+        stdout={jobData.stdout}
+        stderr={jobData.stderr}
+      ></Result>
+    );
   }
 
   return (
@@ -46,7 +52,8 @@ export default function Example() {
             </div>
           </div>
           <button
-            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+            type="button"
+            className="inline-flex items-center px-4 py-2 border border-transparent text-base leading-6 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition ease-in-out duration-150"
             onClick={() => {
               mutate(editorRef.current.getValue());
             }}

src/components/Dashboard/Result.tsx

@@ -2,14 +2,20 @@ import React from 'react';
 
 interface LayoutProps {
   status: string;
-  output?: string;
+  stdout?: string;
+  stderr?: string;
 }
 
-const Result: React.FC<LayoutProps> = ({ status, output }) => {
+const Result: React.FC<LayoutProps> = ({ status, stdout, stderr }) => {
   return (
     <div>
-      <h2>{status}</h2>
-      <pre>{output}</pre>
+      <b>Status: </b>
+      {status}
+      <br />
+      <b>Stdout: </b>
+      <pre>{stdout}</pre>
+      <b>Stderr: </b>
+      <pre>{stderr}</pre>
     </div>
   );
 };

src/hooks/submissions.ts

@@ -52,15 +52,18 @@ function useProcessInterval({
   const { isLoading, data } = useQuery(
     ['processProgress', token, processId],
     async () => {
-      const res: AxiosResponse<{ status: string; output: string }> =
-        await axios.get(
-          `${process.env.REACT_APP_API_ENDPOINT}/submissions/${processId}`,
-          {
-            headers: {
-              Authorization: `Bearer ${token}`,
-            },
+      const res: AxiosResponse<{
+        status: string;
+        stdout: string;
+        stderr: string;
+      }> = await axios.get(
+        `${process.env.REACT_APP_API_ENDPOINT}/submissions/${processId}`,
+        {
+          headers: {
+            Authorization: `Bearer ${token}`,
           },
-        );
+        },
+      );
       return res.data;
     },
     {