Formatted AddQuestion page

Author: WZWren

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

@@ -1,4 +1,5 @@
 import { Question, StatusBody, Difficulty } from "@/api/structs";
+import Chip from "@/components/shared/Chip";
 import styles from '@/style/question.module.css';
 
 interface Props {
@@ -7,9 +8,11 @@ interface Props {
 
 const difficultyColor = (diff: Difficulty) => {
   return (
-    diff === Difficulty.Easy ? <p className={`${styles.title} ${styles.easy}`}>Easy</p>
-    : diff === Difficulty.Medium ? <p className={`${styles.title} ${styles.med}`}>Med</p>
-    : <p className={`${styles.title} ${styles.hard}`}>Hard</p>
+    diff === Difficulty.Easy
+    ? <Chip className={styles.easy}>Easy</Chip>
+    : diff === Difficulty.Medium
+    ? <Chip className={styles.med}>Med</Chip>
+    : <Chip className={styles.hard}>Hard</Chip>
   );
 }
 

peerprep/app/questions/new/page.tsx

@@ -2,6 +2,11 @@
 import { useState, ChangeEvent, MouseEvent, FormEvent } from 'react';
 import { QuestionBody, Difficulty, QuestionFullBody } from '@/api/structs';
 import { addQuestion } from '@/api/gateway';
+import style from "@/style/form.module.css";
+import FormTextInput from '@/components/shared/form/FormTextInput';
+import RadioButtonGroup from '@/components/shared/form/RadioButtonGroup';
+import FormTextAreaInput from '@/components/shared/form/FormTextAreaInput';
+import { useRouter } from 'next/navigation';
 
 type Props = {}
 
@@ -11,40 +16,73 @@ interface Mapping {
 }
 
 function NewQuestion({}: Props) {
-  const [testCases, setTestCases] = useState<Mapping[]>([{
-    key: "", value: ""
-  }]);
+  const router = useRouter();
+  // Form Data is handled as a single submission
   const [formData, setFormData] = useState<QuestionBody>({
     title: "",
     difficulty: Difficulty.Easy,
     description: "",
+    categories: []
+  });
+  // Choice 1: Test cases handled separately to allow modification of multiple fields
+  const [testCases, setTestCases] = useState<Mapping[]>([]);
+  // TODO: Resolve this mess of hooks to combine the form data
+  const [mapping, setMapping] = useState<Mapping>({
+    key: "", value: ""
   });
+  // Choice 2: Categories handled in a separate state, inject into formData on confirm
+  const [category, setCategory] = useState<string>("");
+  const [loading, setLoading] = useState<boolean>(false);
+
+  const handleCategoriesInput = (e: ChangeEvent<HTMLInputElement>) => setCategory(e.target.value);
+  const handleCategoryAdd = (e: MouseEvent<HTMLElement>) => {
+    if (category.length == 0)
+      return;
+    setFormData({
+      ...formData,
+      categories: [...formData.categories, category]
+    })
+    setCategory("");
+  }
+  const handleCategoryDel = (e: MouseEvent<HTMLParagraphElement>, idx: number) => {
+    if (loading)
+      return;
+    const values = [...formData.categories];
+    values.splice(idx, 1);
+    setFormData({
+      ...formData,
+      categories: values
+    })
+  }
 
-  const handleTextInput = (e: ChangeEvent<HTMLInputElement|HTMLTextAreaElement>) => setFormData({
+  const handleFormTextInput = (e: ChangeEvent<HTMLInputElement|HTMLTextAreaElement>) => setFormData({
     ...formData,
     [e.target.name]: e.target.value
   });
 
-  const handleTestCaseInput = (e: ChangeEvent<HTMLInputElement>, idx: number) => {
-    const values = [...testCases];
-    values[idx] = {
-      ...values[idx],
-      [e.target.name]: e.target.value
-    };
-    setTestCases(values); 
-  }
+  const handleMappingInput = (e: ChangeEvent<HTMLInputElement>) => setMapping({
+    ...mapping,
+    [e.target.name]: e.target.value
+  });
 
-  const handleAddField = (e: MouseEvent<HTMLElement>) =>
-    setTestCases([...testCases, { key: "", value: ""}]);
+  const handleMappingAdd = (e: MouseEvent<HTMLElement>) => {
+    if (mapping.key.length == 0 || mapping.value.length == 0)
+      return;
+    setTestCases([...testCases, mapping]);
+    setMapping({key: "", value: ""})
+  }
 
-  const handleDeleteField = (e: MouseEvent<HTMLElement>, idx: number) => {
+  const handleMappingDel = (e: MouseEvent<HTMLElement>, idx: number) => {
+    if (loading)
+      return;
     const values = [...testCases];
     values.splice(idx, 1);
     setTestCases(values);
   }
 
   const handleSubmission = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
+    setLoading(true);
     const question: QuestionFullBody = {
       ...formData,
       test_cases: testCases.map((elem: Mapping) => ({
@@ -55,55 +93,60 @@ function NewQuestion({}: Props) {
     if (status.error) {
       console.log("Failed to add question.");
       console.log(`Code ${status.status}:  ${status.error}`);
+      setLoading(false);
       return;
     }
     console.log(`Successfully added the question.`);
+    router.push('/questions');
   }
 
   return (
-    <div>
-      <form style={{color: "black", padding: "5px"}} onSubmit={handleSubmission}>
-        <input type="text" name="title" value={formData.title} onChange={handleTextInput}/><br/>
-        <input type="radio" id="easy" name="difficulty" value={1} onChange={handleTextInput} />
-        <label htmlFor="easy">Easy</label><br/>
-        <input type="radio" id="med" name="difficulty" value={2} onChange={handleTextInput} />
-        <label htmlFor="med">Medium</label><br/>
-        <input type="radio" id="hard" name="difficulty" value={3} onChange={handleTextInput} />
-        <label htmlFor="hard">Hard</label><br/>
-        <textarea name="description" value={formData.description} onChange={handleTextInput}/><br/>
-        {testCases.map((elem, idx) => (
-          <>
-            <input
-              name="key"
-              type="text"
-              id={`key_${idx.toLocaleString()}`}
-              value={elem.key}
-              onChange={e => handleTestCaseInput(e, idx)} />
-            <input
-              name="value"
-              type="text"
-              id={`val_${idx.toLocaleString()}`}
-              value={elem.value}
-              onChange={e => handleTestCaseInput(e, idx)} />
-            <input
-              type="button"
-              name="del_entry"
-              value="Delete..."
-              onClick={e => handleDeleteField(e, idx)}
-              style={{ backgroundColor: "white"}} />
-            <br/>
-          </>
+    <div className={style.wrapper}>
+      <form className={style.form_container} onSubmit={handleSubmission}>
+        <h1 className={style.title}>Create a new Question</h1>
+        <FormTextInput required disabled={loading} label="Question Title: " name="title"
+          value={formData.title} onChange={handleFormTextInput} />
+        <RadioButtonGroup required disabled={loading} label="Difficulty: " group="difficulty"
+          options={{ "Easy": 1, "Medium": 2, "Hard": 3 }} onChange={handleFormTextInput} />
+        <FormTextAreaInput required disabled={loading} label="Description: " name="description"
+          value={formData.description} onChange={handleFormTextInput}/>
+        <FormTextInput disabled={loading} label="Categories: " name="categories"
+          value={category} onChange={handleCategoriesInput}>
+          <input type="button" onClick={handleCategoryAdd} value="Add" disabled={loading}/>
+        </FormTextInput>
+        <div className={style.radio_container}>
+          {formData.categories.length == 0
+          ? (<p className={style.disabledText}>No Categories added.</p>)
+          : formData.categories.map((elem, idx) => (
+            <p key={idx} className={style.deletableText}
+              onClick={e => handleCategoryDel(e, idx)}>
+              {elem}
+            </p>
+          ))}
+        </div>
+        <div className={style.input_container}>
+          <div>
+            <FormTextInput disabled={loading} label="Test Case: " name="key"
+              value={mapping.key} onChange={handleMappingInput} />
+            <FormTextInput disabled={loading} label="Expected: " name="value"
+              value={mapping.value} onChange={handleMappingInput} />
+          </div>
+          <input type="button" onClick={handleMappingAdd} value="Add" disabled={loading}/>
+        </div>
+        {testCases.length == 0
+        ? (<p className={style.disabledText}>No Test Cases added.</p>)
+        : testCases.map((elem, idx) => (
+          <p key={idx} className={style.deletableText}
+            onClick={e => handleMappingDel(e, idx)}>
+            {elem.key}/{elem.value}
+          </p>
         ))}
-        <input
-          type="button"
-          name="add_entry"
-          value="Add..."
-          onClick={handleAddField}
-          style={{ backgroundColor: "white"}} />
         <button
+          disabled={loading}
           type="submit"
           name="submit"
-          style={{ backgroundColor: "white"}}>Submit</button>
+          className={`${style.title}`
+          }>Submit</button>
       </form>
     </div>
   )

peerprep/components/homepage/PLACEHOLDER

@@ -0,0 +1,17 @@
+import React from 'react'
+import styles from '@/style/layout.module.css';
+
+interface Props {
+  className: string;
+  children: React.ReactNode;
+}
+
+function Chip({ className, children }: Props) {
+  return (
+    <p className={`${styles.chip} ${className}`}>
+      {children}
+    </p>
+  )
+}
+
+export default Chip;

peerprep/components/shared/Chip.tsx

@@ -0,0 +1,26 @@
+import { ChangeEvent } from 'react';
+import style from '@/style/form.module.css';
+
+type Props = {
+  name: string;
+  label: string;
+  value: string;
+  className?: string;
+  required?: boolean;
+  disabled?: boolean
+  id?: string;
+  onChange: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+}
+
+function TextInput({ name, label, value, className, required, id, disabled, onChange }: Props) {
+  return (
+    <div className={style.input_container}> 
+      <p className={style.label}>{label}</p>
+      <textarea required={required} name={name} id={id} value={value}
+          className={`${style.text_input} ${className ? className : ""}`}
+          onChange={onChange} disabled={disabled}/>
+    </div>
+  )
+}
+
+export default TextInput;

peerprep/components/shared/form/FormTextAreaInput.tsx

@@ -0,0 +1,28 @@
+import { ChangeEvent, ReactNode } from 'react';
+import style from '@/style/form.module.css';
+
+type Props = {
+  name: string;
+  label: string;
+  value: string;
+  children?: ReactNode;
+  className?: string;
+  required?: boolean;
+  disabled?: boolean;
+  id?: string;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+}
+
+function TextInput({ name, label, value, className, required, id, children, disabled, onChange }: Props) {
+  return (
+    <div className={style.input_container}>
+      <p className={style.label}>{label}</p>
+      <input required={required} type="text" name={name} id={id} value={value}
+          className={`${style.text_input} ${className ? className : ""}`}
+          onChange={onChange} disabled={disabled}/>
+      {children}
+    </div>
+  )
+}
+
+export default TextInput;

peerprep/components/shared/form/FormTextInput.tsx

@@ -0,0 +1,31 @@
+import { ChangeEvent } from 'react';
+import style from '@/style/form.module.css';
+
+interface Props {
+  label: string;
+  group: string;
+  options: {
+    [label: string]: number;
+  };
+  required?: boolean;
+  disabled?: boolean;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+}
+
+function RadioButtonGroup({ label, group, options, required, disabled, onChange }: Props) {
+  const options_label = Object.keys(options);
+  return (
+    <div className={style.radio_container}>
+      <p className={style.label}>{label}</p>
+      {options_label.map((lbl, idx) => (
+        <div key={idx}>
+          <input type="radio" id={lbl} name={group} required={required} disabled={disabled}
+            value={options[lbl]} onChange={onChange}/>
+          <label htmlFor={lbl}>{lbl}</label>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default RadioButtonGroup