feat: include error messages

CS3219-AY2425S1 · Nov 5, 2024 · 938217e · 938217e
1 parent 71f1e8d
commit 938217e
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 19 deletions.
diff --git a/backend/collaboration-service/src/services/socketio.service.ts b/backend/collaboration-service/src/services/socketio.service.ts
@@ -45,8 +45,8 @@ export class WebSocketConnection {
                 this.io.to(roomId).emit('executing-code')
                 try {
                     const dto: SubmissionResponseDto = await submitCode(data)
-                    const { stdout, status, time } = dto
-                    const response: IResponse = { stdout, status, time }
+                    const { stdout, status, time, stderr, compile_output } = dto
+                    const response: IResponse = { stdout, status, time, stderr, compile_output }
                     this.io.to(roomId).emit('code-executed', response, data.expected_output)
                 } catch (err) {
                     this.io.to(roomId).emit('code-executed', { error: err })

diff --git a/frontend/components/customs/custom-tabs.tsx b/frontend/components/customs/custom-tabs.tsx
@@ -29,7 +29,7 @@ export default function CustomTabs({
     return (
         <div
             id="test-tabs"
-            className={`${activeTab === 0 ? 'border-b-2 border-slate-100' : ''} flex items-center ${type === 'label' ? 'gap-2' : ''} ${className}`}
+            className={`${activeTab === 0 ? 'border-slate-100' : ''} flex items-center ${type === 'label' ? 'gap-2' : ''} ${className}`}
         >
             {tabs.map((tab, index) => (
                 <Button

diff --git a/frontend/pages/code/[id]/index.tsx b/frontend/pages/code/[id]/index.tsx
@@ -175,7 +175,7 @@ export default function Code() {
                             bgColor="bg-theme-100"
                         />
                     </div>
-                    <div className="mt-6">{matchData?.question.description}</div>
+                    <div className="mt-6 whitespace-pre-wrap">{matchData?.question.description}</div>
                 </div>
 
                 <div className="border-2 rounded-lg border-slate-100 mt-4 max-h-twoFifthScreen flex flex-col">

diff --git a/frontend/pages/code/test-result.tsx b/frontend/pages/code/test-result.tsx
@@ -2,23 +2,42 @@ import { IResponse } from '@repo/submission-types'
 
 export default function TestResult({ result, expectedOutput }: { result?: IResponse; expectedOutput: string }) {
     if (!result) return <div className="text-sm text-slate-400">No test results yet</div>
-
     return (
-        <div>
-            <div>
+        <div className="w-full">
+            <div className="w-full">
                 {result.status?.id === 3 ? (
-                    <span className="text-lg font-semibold text-green-500">Accepted</span>
+                    <span className="text-lg font-semibold text-green-500">{result.status.description}</span>
                 ) : (
-                    <span className="text-lg font-semibold text-red-500">Wrong Answer</span>
+                    <span className="text-lg font-semibold text-red-500">{result.status.description}</span>
                 )}
                 <p className="text-sm text-gray-600 mt-1">Runtime: {result.time} ms</p>
             </div>
-            <div className="flex flex-col gap-2 text-sm">
-                <span className="mt-2">Your Output = </span>
-                <span className="px-2 py-1 rounded-lg bg-slate-100">{result.stdout ?? 'N/A'}</span>
-                <span className="mt-2">Expected output = </span>
-                <span className="px-2 py-1 rounded-lg bg-slate-100">{expectedOutput}</span>
-            </div>
+            {result.status.id === 6 && result.compile_output && (
+                <div className="mt-2 w-full">
+                    <span className="text-sm font-semibold text-red-500">Error</span>
+                    <p className="px-2 py-1 text-sm text-gray-600 mt-1 whitespace-pre-wrap rounded-lg bg-slate-100 w-full">
+                        {result.compile_output}
+                    </p>
+                </div>
+            )}
+            {result.stderr && (
+                <div className="mt-2 w-full">
+                    <span className="text-sm font-semibold text-red-500">Error</span>
+                    <p className="px-2 py-1 text-sm text-gray-600 mt-1 whitespace-pre-wrap rounded-lg bg-slate-100 w-full">
+                        {result.stderr}
+                    </p>
+                </div>
+            )}
+            {(result.status.id === 3 || result.status.id == 4) && (
+                <div className="flex flex-col gap-2 text-sm">
+                    <span className="mt-2">Your Output = </span>
+                    <span className="px-2 py-1 rounded-lg bg-slate-100 whitespace-pre-wrap">
+                        {result.stdout ?? 'N/A'}
+                    </span>
+                    <span className="mt-2">Expected Output = </span>
+                    <span className="px-2 py-1 rounded-lg bg-slate-100 whitespace-pre-wrap">{expectedOutput}</span>
+                </div>
+            )}
         </div>
     )
 }
diff --git a/frontend/pages/code/testcase-tab.tsx b/frontend/pages/code/testcase-tab.tsx
@@ -15,18 +15,18 @@ export default function TestcasesTab({
 
     if (!testInputs || testInputs.length === 0) return null
     return (
-        <div>
+        <div className="w-full">
             <CustomTabs
                 tabs={testcaseTabs}
                 type="label"
                 activeTab={activeTestcaseIdx}
                 setActiveTab={setActiveTestcaseIdx}
             />
-            <div className="flex flex-col gap-2 text-sm">
+            <div className="flex flex-col gap-2 text-sm w-full">
                 <span className="mt-2">Input = </span>
-                <span className="px-2 py-1 rounded-lg bg-slate-100">{testInputs[activeTestcaseIdx]}</span>
+                <span className="px-2 py-1 rounded-lg bg-slate-100 w-full">{testInputs[activeTestcaseIdx]}</span>
                 <span className="mt-2">Expected output = </span>
-                <span className="px-2 py-1 rounded-lg bg-slate-100">{testOutputs[activeTestcaseIdx]}</span>
+                <span className="px-2 py-1 rounded-lg bg-slate-100 w-full">{testOutputs[activeTestcaseIdx]}</span>
             </div>
         </div>
     )

diff --git a/packages/submission-types/src/IResponse.ts b/packages/submission-types/src/IResponse.ts
@@ -2,4 +2,6 @@ export interface IResponse {
     time: string | null
     status: { id: number; description: string }
     stdout: string | null
+    stderr: string | null
+    compile_output: string | null
 }