From 222881474daf4293d0aa3eaebd697cbd75f8f7d4 Mon Sep 17 00:00:00 2001
From: Charisma Kausar <charisma.kausar@gmail.com>
Date: Wed, 15 Nov 2023 08:29:01 +0800
Subject: [PATCH] feat: add error messages for invalid test cases

---
 frontend/src/pages/questions/_form.tsx | 31 ++++++++++++++------------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/frontend/src/pages/questions/_form.tsx b/frontend/src/pages/questions/_form.tsx
index dd475b6f..487c3c06 100644
--- a/frontend/src/pages/questions/_form.tsx
+++ b/frontend/src/pages/questions/_form.tsx
@@ -45,7 +45,7 @@ if __name__ == "__main__":
   target = int(input())
   print(" ".join(twoSum(nums, target)))`,
 
-'java': `import java.util.*;
+  'java': `import java.util.*;
 
 class Solution {
   public int[] twoSum(int[] nums, int target) {
@@ -66,7 +66,7 @@ class Solution {
   }
 }`,
 
-'c++': `#include <iostream>
+  'c++': `#include <iostream>
 #include <vector>
 using namespace std;
 
@@ -105,7 +105,7 @@ interface QuestionsFormProps {
 export default function QuestionsForm({
   form,
   onSubmit,
-  onDelete = () => {},
+  onDelete = () => { },
   type = "add",
   loading = false,
 }: QuestionsFormProps) {
@@ -179,7 +179,7 @@ export default function QuestionsForm({
             <FormItem>
               <FormLabel>Question Description</FormLabel>
               <FormControl>
-                <Editor height="50vh" defaultLanguage="markdown" theme="vs-dark" options={{wordWrap: "on"}} defaultValue={"Write your question here in markdown format. Your question may be sanitized to remove harmful HTML tags."} value={field.value} onChange={(e) => {
+                <Editor height="50vh" defaultLanguage="markdown" theme="vs-dark" options={{ wordWrap: "on" }} defaultValue={"Write your question here in markdown format. Your question may be sanitized to remove harmful HTML tags."} value={field.value} onChange={(e) => {
                   field.onChange(e);
                   forceUpdate();
                 }} />
@@ -210,7 +210,7 @@ export default function QuestionsForm({
         })}
         <div className="flex gap-x-4">
           <Button variant="outline" className="border-primary text-primary" onClick={(e) => {
-            e.stopPropagation(); e.preventDefault(); 
+            e.stopPropagation(); e.preventDefault();
             form.setValue('testCasesInputs', [...testCasesInputs, ""]);
             form.setValue('testCasesOutputs', [...testCasesOutputs, ""]);
             forceUpdate();
@@ -222,6 +222,8 @@ export default function QuestionsForm({
             forceUpdate();
           }}>Clear Test Cases</Button>
         </div>
+        { form.getFieldState('testCasesInputs').invalid && <p className="text-destructive text-sm">Test case inputs cannot be empty</p> }
+        { form.getFieldState('testCasesOutputs').invalid && <p className="text-destructive text-sm">Test case outputs cannot be empty</p> }
         <FormField
           control={form.control}
           name="defaultCode.c++"
@@ -246,9 +248,9 @@ export default function QuestionsForm({
               <FormLabel>Default Java Code</FormLabel>
               <FormControl>
                 <Editor height="50vh" defaultLanguage="java" theme="vs-dark" defaultValue={defaultCodes["java"]} value={field.value} onChange={(e) => {
-                    field.onChange(e);
-                    forceUpdate();
-                  }} />
+                  field.onChange(e);
+                  forceUpdate();
+                }} />
               </FormControl>
               <FormMessage />
             </FormItem>
@@ -261,10 +263,10 @@ export default function QuestionsForm({
             <FormItem>
               <FormLabel>Default Python Code</FormLabel>
               <FormControl>
-              <Editor height="50vh" defaultLanguage="python" theme="vs-dark" defaultValue={defaultCodes["python"]} value={field.value} onChange={(e) => {
-                    field.onChange(e);
-                    forceUpdate();
-                  }} />
+                <Editor height="50vh" defaultLanguage="python" theme="vs-dark" defaultValue={defaultCodes["python"]} value={field.value} onChange={(e) => {
+                  field.onChange(e);
+                  forceUpdate();
+                }} />
               </FormControl>
               <FormMessage />
             </FormItem>
@@ -293,8 +295,9 @@ export default function QuestionsForm({
         ) : (
           <div className="flex gap-x-6">
             <Button type="submit" disabled={loading} onClick={e => {
-            e.stopPropagation(); e.preventDefault();
-            onSubmit(form.getValues());
+              e.stopPropagation(); 
+              e.preventDefault();
+              onSubmit(form.getValues());
             }}>Save Changes</Button>
             <Button
               variant="outline"