Fix editQuestion form style and error handling

Author: tzyian

peerprep/api/structs.ts

@@ -129,12 +129,12 @@ export type FormatResponse = {
 export const QuestionSchema = z.object({
   difficulty: z.nativeEnum(Difficulty),
   title: z.string().min(2, {
-    message: "Please input a title.",
+    message: "Please input a title of at least length 2.",
   }),
   content: z.string().min(2, {
     message: "Please input content.",
   }),
   topicTags: z.array(z.string()).min(1, {
-    message: "Please input at least one topic tag.",
+    message: "Please input at least one topic tag. Press enter to add a tag.",
   }),
 }) satisfies ZodType<QuestionFullBody>;

peerprep/app/questions/QuestionForm.tsx

@@ -3,9 +3,11 @@
 import {
   Form,
   FormControl,
+  FormDescription,
   FormField,
   FormItem,
   FormLabel,
+  FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import {
@@ -41,7 +43,7 @@ type QuestionFormProps = {
 const QuestionForm = ({ form, onSubmit }: QuestionFormProps) => {
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-2">
         <FormField
           control={form.control}
           name="title"
@@ -51,6 +53,8 @@ const QuestionForm = ({ form, onSubmit }: QuestionFormProps) => {
               <FormControl>
                 <Input placeholder="Two Sum" {...field} />
               </FormControl>
+              <FormDescription>Please input a title.</FormDescription>
+              <FormMessage />
             </FormItem>
           )}
         />
@@ -72,28 +76,34 @@ const QuestionForm = ({ form, onSubmit }: QuestionFormProps) => {
                   <SelectItem value={Difficulty.Hard}>Hard</SelectItem>
                 </SelectContent>
               </Select>
+              <FormDescription>Please select a difficulty.</FormDescription>
+              <FormMessage />
             </FormItem>
           )}
         />
         <FormField
           control={form.control}
           name="topicTags"
           render={({ field }) => (
-            <FormItem className="flex w-full flex-col items-start">
-              <FormLabel className="text-left">Topics</FormLabel>
-              <FormControl className="w-full">
+            <FormItem className="">
+              <FormLabel className="">Topics</FormLabel>
+              <FormControl className="">
                 <Controller
                   name="topicTags"
                   control={form.control}
                   render={({ field }) => (
                     <InputTags
                       value={field.value}
                       onChange={field.onChange}
-                      placeholder="Press 'Enter' to add topics. "
+                      placeholder="Press 'Enter' to add tags."
                     />
                   )}
                 />
               </FormControl>
+              <FormDescription>
+                Please input at least one topic tag.
+              </FormDescription>
+              <FormMessage />
             </FormItem>
           )}
         />
@@ -109,6 +119,8 @@ const QuestionForm = ({ form, onSubmit }: QuestionFormProps) => {
                   onChange={field.onChange}
                 />
               </FormControl>
+              <FormDescription>Please input content.</FormDescription>
+              <FormMessage />
             </FormItem>
           )}
         />

peerprep/app/questions/edit/[question]/EditQuestion.tsx

@@ -28,9 +28,11 @@ const EditQuestion = ({ question }: { question: Question }) => {
       ...values,
     };
     const status = await editQuestion(qn);
+    console.log(status);
     if (status.error) {
       console.log("Failed to add question.");
       console.log(`Code ${status.status}:  ${status.error}`);
+      alert(`Failed to add question. Code ${status.status}:  ${status.error}`);
       return;
     }
     console.log(`Successfully modified the question.`);

peerprep/app/questions/helper.ts

@@ -59,7 +59,7 @@ export async function editQuestion(question: Question): Promise<StatusBody> {
     },
   );
   if (!res.ok) {
-    return { status: res.status };
+    return { status: res.status, error: await res.text() };
   }
   revalidatePath("/questions");
   revalidatePath("/questions/edit/" + question.id);
@@ -81,7 +81,7 @@ export async function addQuestion(
     headers: generateJSONHeaders(),
   });
   if (!res.ok) {
-    return { status: res.status };
+    return { status: res.status, error: await res.text() };
   }
   revalidatePath("/questions");
   const json = await res.json();

peerprep/components/modifyQuestion/Tiptap.tsx

@@ -23,29 +23,26 @@ const Tiptap = ({ defaultContent, onChange }: TipTapProps) => {
       Subscript,
       Superscript,
       Underline,
-
       Link,
       Placeholder.configure({
         placeholder: "Add your question here",
       }),
     ],
     content: defaultContent,
-    immediatelyRender: false, // needed if used in a server component
+    immediatelyRender: false,
     onUpdate({ editor }) {
       onChange(editor.getHTML());
     },
   });
 
   return (
-    <div className="h-96">
+    <div className="flex min-h-80 flex-col">
       <MenuBar editor={editor} />
 
-      <div
-        className="editor-content h-80 resize-y overflow-y-auto overflow-x-hidden rounded-md border bg-gray-1 p-2"
-        style={{ wordBreak: "break-word", overflowWrap: "break-word" }}
-      >
-        <EditorContent editor={editor} />
-      </div>
+      <EditorContent
+        editor={editor}
+        className="flex h-full flex-1 resize-y flex-col overflow-y-auto overflow-x-hidden rounded-md border bg-[#121212] p-2"
+      />
     </div>
   );
 };

peerprep/components/navbar/Navbar.tsx

@@ -85,7 +85,7 @@ const NavigationList = () => {
 
 const Navbar = () => {
   return (
-    <Disclosure as="nav" className="mb-5 bg-gray-800">
+    <Disclosure as="nav" className="bg-gray-800">
       <div className="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
         <div className="relative flex h-16 items-center justify-between">
           <MobileMenu />

peerprep/components/ui/form.tsx

@@ -1,58 +1,58 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { Slot } from "@radix-ui/react-slot"
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
 import {
   Controller,
   ControllerProps,
   FieldPath,
   FieldValues,
   FormProvider,
   useFormContext,
-} from "react-hook-form"
+} from "react-hook-form";
 
-import { cn } from "@/lib/utils"
-import { Label } from "@/components/ui/label"
+import { cn } from "@/lib/utils";
+import { Label } from "@/components/ui/label";
 
-const Form = FormProvider
+const Form = FormProvider;
 
 type FormFieldContextValue<
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > = {
-  name: TName
-}
+  name: TName;
+};
 
 const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue
-)
+  {} as FormFieldContextValue,
+);
 
 const FormField = <
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >({
   ...props
 }: ControllerProps<TFieldValues, TName>) => {
   return (
     <FormFieldContext.Provider value={{ name: props.name }}>
       <Controller {...props} />
     </FormFieldContext.Provider>
-  )
-}
+  );
+};
 
 const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext)
-  const itemContext = React.useContext(FormItemContext)
-  const { getFieldState, formState } = useFormContext()
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
 
-  const fieldState = getFieldState(fieldContext.name, formState)
+  const fieldState = getFieldState(fieldContext.name, formState);
 
   if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>")
+    throw new Error("useFormField should be used within <FormField>");
   }
 
-  const { id } = itemContext
+  const { id } = itemContext;
 
   return {
     id,
@@ -61,53 +61,54 @@ const useFormField = () => {
     formDescriptionId: `${id}-form-item-description`,
     formMessageId: `${id}-form-item-message`,
     ...fieldState,
-  }
-}
+  };
+};
 
 type FormItemContextValue = {
-  id: string
-}
+  id: string;
+};
 
 const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue
-)
+  {} as FormItemContextValue,
+);
 
 const FormItem = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => {
-  const id = React.useId()
+  const id = React.useId();
 
   return (
     <FormItemContext.Provider value={{ id }}>
       <div ref={ref} className={cn("space-y-2", className)} {...props} />
     </FormItemContext.Provider>
-  )
-})
-FormItem.displayName = "FormItem"
+  );
+});
+FormItem.displayName = "FormItem";
 
 const FormLabel = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
 >(({ className, ...props }, ref) => {
-  const { error, formItemId } = useFormField()
+  const { error, formItemId } = useFormField();
 
   return (
     <Label
       ref={ref}
-      className={cn(error && "text-destructive", className)}
+      className={cn(error && "text-destructive", className, "text-md")}
       htmlFor={formItemId}
       {...props}
     />
-  )
-})
-FormLabel.displayName = "FormLabel"
+  );
+});
+FormLabel.displayName = "FormLabel";
 
 const FormControl = React.forwardRef<
   React.ElementRef<typeof Slot>,
   React.ComponentPropsWithoutRef<typeof Slot>
 >(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
 
   return (
     <Slot
@@ -121,15 +122,15 @@ const FormControl = React.forwardRef<
       aria-invalid={!!error}
       {...props}
     />
-  )
-})
-FormControl.displayName = "FormControl"
+  );
+});
+FormControl.displayName = "FormControl";
 
 const FormDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => {
-  const { formDescriptionId } = useFormField()
+  const { formDescriptionId } = useFormField();
 
   return (
     <p
@@ -138,19 +139,19 @@ const FormDescription = React.forwardRef<
       className={cn("text-[0.8rem] text-muted-foreground", className)}
       {...props}
     />
-  )
-})
-FormDescription.displayName = "FormDescription"
+  );
+});
+FormDescription.displayName = "FormDescription";
 
 const FormMessage = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, children, ...props }, ref) => {
-  const { error, formMessageId } = useFormField()
-  const body = error ? String(error?.message) : children
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message) : children;
 
   if (!body) {
-    return null
+    return null;
   }
 
   return (
@@ -162,9 +163,9 @@ const FormMessage = React.forwardRef<
     >
       {body}
     </p>
-  )
-})
-FormMessage.displayName = "FormMessage"
+  );
+});
+FormMessage.displayName = "FormMessage";
 
 export {
   useFormField,
@@ -175,4 +176,4 @@ export {
   FormDescription,
   FormMessage,
   FormField,
-}
+};