Add dynamic constraints/examples to QuestionForm

Add dynamic number of constraints and examples to QuestionForm

Author: szelongq

frontend/src/components/Questions/QuestionForm.tsx

@@ -4,8 +4,9 @@ import Grid from '@mui/material/Grid';
 import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
 import Button from '@mui/material/Button';
-import {Autocomplete} from "@mui/material";
+import {Autocomplete, Typography} from "@mui/material";
 import {QUESTION_CATEGORIES} from "./QuestionCategories";
+import {Example} from "../../data/data.context";
 
 interface QuestionFormProps {
     question?: Question;
@@ -19,6 +20,10 @@ const QuestionForm: React.FC<QuestionFormProps> = ({question:initialQuestion, on
             new Question({
                 difficulty: 'Easy',
             }));
+    const [constraints, setConstraints] = useState<string[]>(
+      initialQuestion ? initialQuestion.constraints : []);
+    const [examples, setExamples] = useState<Example[]>(
+      initialQuestion ? initialQuestion.examples : []);
 
     const complexities = [
         {value: 'Easy', label: 'Easy'},
@@ -28,9 +33,6 @@ const QuestionForm: React.FC<QuestionFormProps> = ({question:initialQuestion, on
 
     const handleTextInputChange = (e: { target: { id: any; value: any; }; }) => {
         let {id, value} = e.target;
-        if (id === 'constraints') {
-            value = [value]
-        }
         setQuestion((q) => ({
             ...q,
             [id]: value,
@@ -39,13 +41,32 @@ const QuestionForm: React.FC<QuestionFormProps> = ({question:initialQuestion, on
 
     const handleSubmit = (e: { preventDefault: () => void; }) => {
         e.preventDefault();
-        onSubmit(question);
+        let questionToAdd = {...question};
+        questionToAdd.constraints = constraints.filter((constraint) => constraint !== '');
+        questionToAdd.examples = examples.filter((example) => example.text !== '' || example.image !== '');
+        onSubmit(questionToAdd);
     };
 
     const handleCancel = () => {
         onCancel();
     };
 
+    const handleAddConstraint = () => {
+        setConstraints([...constraints, '']);
+    }
+
+    const handleRemoveConstraint = (index: number) => {
+        setConstraints(constraints.filter((_, i) => i !== index));
+    }
+
+    const handleAddExample = () => {
+        setExamples([...examples, {text: '', image: ''}]);
+    }
+
+    const handleRemoveExample = (index: number) => {
+        setExamples(examples.filter((_, i) => i !== index));
+    }
+
     return (
         <React.Fragment>
             <form>
@@ -111,15 +132,80 @@ const QuestionForm: React.FC<QuestionFormProps> = ({question:initialQuestion, on
                             onChange={handleTextInputChange}
                         />
                     </Grid>
-                    <Grid item xs={12}>
-                        <TextField
-                            id="constraints"
-                            label="Constraints"
-                            multiline
-                            fullWidth
-                            value={question.constraints}
-                            onChange={handleTextInputChange}
-                        />
+                    <Grid container item xs={12} direction={"row"} spacing={3} alignItems={"center"}>
+                        <Grid item>
+                            <Typography variant="h6">Constraints: {constraints.length}</Typography>
+                        </Grid>
+                        <Grid item>
+                            <Button variant="contained" onClick={handleAddConstraint}>+</Button>
+                        </Grid>
+                    </Grid>
+                    <Grid container item xs={12} spacing={3}>
+                        {constraints.map((constraint, index) => (
+                            <Grid container item xs={12} direction={"row"} spacing={3} alignItems={"center"} key={index}>
+                                <Grid item xs={10}>
+                                    <TextField
+                                        id={"constraint" + (index+1)}
+                                        label={"Constraint " + (index + 1)}
+                                        fullWidth
+                                        value={constraint}
+                                        onChange={(e) => {
+                                            let updatedConstraints = [...constraints];
+                                            updatedConstraints[index] = e.target.value;
+                                            setConstraints(updatedConstraints);
+                                        }}
+                                    />
+                                </Grid>
+                                <Grid item xs={2}>
+                                    <Button variant="contained" onClick={() => handleRemoveConstraint(index)}>-</Button>
+                                </Grid>
+                            </Grid>
+                        ))}
+                    </Grid>
+                    <Grid container item xs={12} direction={"row"} spacing={3} alignItems={"center"}>
+                        <Grid item>
+                            <Typography variant="h6">Examples: {examples.length}</Typography>
+                        </Grid>
+                        <Grid item>
+                            <Button variant="contained" onClick={handleAddExample}>+</Button>
+                        </Grid>
+                    </Grid>
+                    <Grid container item xs={12} spacing={3}>
+                        {examples.map((example, index) => (
+                          <Grid container item xs={12} direction={"row"} spacing={3} alignItems={"center"} key={index}>
+                              <Grid container item xs={10} spacing={1} alignItems={"center"}>
+                                  <Grid item xs={12}>
+                                      <TextField
+                                        id={"example" + (index+1) + "text"}
+                                        label={"Example " + (index + 1) + " Text"}
+                                        fullWidth
+                                        value={example.text}
+                                        onChange={(e) => {
+                                            let updatedExamples = [...examples];
+                                            updatedExamples[index].text = e.target.value;
+                                            setExamples(updatedExamples);
+                                        }}
+                                      />
+                                  </Grid>
+                                  <Grid item xs={12}>
+                                      <TextField
+                                        id={"example" + (index+1) + "image"}
+                                        label={"Example " + (index + 1) + " Image"}
+                                        fullWidth
+                                        value={example.image}
+                                        onChange={(e) => {
+                                            let updatedExamples = [...examples];
+                                            updatedExamples[index].image = e.target.value;
+                                            setExamples(updatedExamples);
+                                        }}
+                                      />
+                                  </Grid>
+                              </Grid>
+                              <Grid item xs={2}>
+                                  <Button variant="contained" onClick={() => handleRemoveExample(index)}>-</Button>
+                              </Grid>
+                          </Grid>
+                        ))}
                     </Grid>
                     <Grid container item xs={12} spacing={2}>
                         <Grid item>