feat: add the output and error message based on the status

Author: rahulpeacock

src/client/store/editor.ts

@@ -16,6 +16,7 @@ type State = {
 		token: string | null;
 		time: string | null;
 		memory: number | null;
+		compile_output: string | null;
 	};
 };
 
@@ -40,6 +41,7 @@ export const useEditor = create<State & Action>((set) => ({
 		token: null,
 		time: null,
 		memory: null,
+		compile_output: null,
 	},
 
 	setcode: (code) => set((state) => ({ code })),

src/components/pages/home/client.tsx

@@ -4,9 +4,11 @@ import { useEditor } from '@/client/store/editor';
 import { useEditorOptions } from '@/client/store/editor-options';
 import { api } from '@/client/trpc';
 import { Button } from '@/components/ui/button';
+import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Textarea } from '@/components/ui/textarea';
 import { languageOptions } from '@/constants/app';
+import { cn } from '@/lib/utils/cn';
 import Editor from '@monaco-editor/react';
 import { CSSProperties } from 'react';
 import { toast } from 'sonner';
@@ -63,10 +65,27 @@ function CodeEditorLoading() {
 export function CodeOutput() {
 	const output = useEditor((state) => state.output);
 
-	// Change the theme depending of the error state
+	function getOutput() {
+		if (!output.status) return { className: '', val: null };
+
+		const { id } = output.status;
+		// Compilation Error
+		if (id === 6) return { className: 'text-red-500', val: output.compile_output ? atob(output.compile_output) : null };
+
+		// Accepted
+		if (id === 3) return { className: 'text-green-500', val: output.stdout ? atob(output.stdout) : null };
+
+		// Time limit exceeded
+		if (id === 5) return { className: 'text-red-500', val: 'Time Limit Exceeded' };
+
+		return { className: 'text-red-500', val: output.stderr ? atob(output.stderr) : null };
+	}
 
 	return (
-		<pre className='bg-muted rounded-lg my-2 p-3 text-sm min-h-56 text-muted-foreground'>{output.stdout ? atob(output.stdout) : 'Output panel'}</pre>
+		<ScrollArea className='bg-muted h-56 rounded-lg py-2 my-2'>
+			<pre className={cn('px-3 text-sm text-muted-foreground', getOutput()?.className)}>{getOutput()?.val}</pre>
+			<ScrollBar className='px-3' scrollAreaThumbClassname='bg-muted-foreground/30' orientation='horizontal' />
+		</ScrollArea>
 	);
 }
 

src/server/api/routers/code.ts

@@ -61,6 +61,7 @@ export const codeRouter = createTRPCRouter({
 				token: z.string(),
 				time: z.string().nullable(),
 				memory: z.number().nullable(),
+				compile_output: z.string().nullable(),
 			}),
 		)
 		.mutation(async ({ input }) => {
@@ -87,6 +88,7 @@ export const codeRouter = createTRPCRouter({
 					token: response.data.token,
 					time: response.data.time,
 					memory: response.data.memory,
+					compile_output: response.data.compile_output,
 				};
 			} catch (error) {
 				throw new Error('Failed to process code');