Added Match Sentences to Reading Generation

src/components/Generation/match.sentences.edit.tsx

@@ -1,7 +1,133 @@
-import React from 'react';
+import React from "react";
+import { MatchSentencesExercise } from "@/interfaces/exam";
+import Input from "@/components/Low/Input";
+import Select from "@/components/Low/Select";
 
-const MatchSentencesEdit = () => {
-    return null;
+interface Props {
+  exercise: MatchSentencesExercise;
+  updateExercise: (data: any) => void;
 }
+const MatchSentencesEdit = (props: Props) => {
+  const { exercise, updateExercise } = props;
 
-export default MatchSentencesEdit;
+  const selectOptions = exercise.options.map((option) => ({
+    value: option.id,
+    label: option.id,
+  }));
+
+  return (
+    <>
+      <Input
+        type="text"
+        label="Prompt"
+        name="prompt"
+        required
+        value={exercise.prompt}
+        onChange={(value) =>
+          updateExercise({
+            prompt: value,
+          })
+        }
+      />
+      <h1>Solutions</h1>
+      <div className="w-full flex flex-wrap -mx-2">
+        {exercise.sentences.map((sentence, index) => (
+          <div key={sentence.id} className="flex flex-col w-full px-2">
+            <div className="flex w-full">
+              <Input
+                type="text"
+                label={`Sentence ${index + 1}`}
+                name="sentence"
+                required
+                value={sentence.sentence.heading}
+                onChange={(value) =>
+                  updateExercise({
+                    sentences: exercise.sentences.map((iSol) =>
+                      iSol.id === sentence.id
+                        ? {
+                            ...iSol,
+                            sentence: {
+                              ...iSol.sentence,
+                              heading: value,
+                            },
+                          }
+                        : iSol
+                    ),
+                  })
+                }
+                className="px-2"
+              />
+              <div className="w-48 flex items-end px-2">
+                <Select
+                  value={selectOptions.find(
+                    (o) => o.value === sentence.solution
+                  )}
+                  options={selectOptions}
+                  onChange={(value) => {
+                    updateExercise({
+                      sentences: exercise.sentences.map((iSol) =>
+                        iSol.id === sentence.id
+                          ? {
+                              ...iSol,
+                              solution: value?.value,
+                            }
+                          : iSol
+                      ),
+                    });
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+        ))}
+        <h1>Options</h1>
+        <div className="w-full flex flex-wrap -mx-2">
+          {exercise.options.map((option, index) => (
+            <div key={option.id} className="flex flex-col w-full px-2">
+              <div className="flex w-full">
+                <Input
+                  type="text"
+                  label={`Option ${index + 1}`}
+                  name="option"
+                  required
+                  value={option.sentence}
+                  onChange={(value) =>
+                    updateExercise({
+                      options: exercise.options.map((iSol) =>
+                        iSol.id === option.id
+                          ? {
+                              ...iSol,
+                              sentence: value,
+                            }
+                          : iSol
+                      ),
+                    })
+                  }
+                  className="px-2"
+                />
+                <div className="w-48 flex items-end px-2">
+                  <Select
+                    value={{
+                      value: option.id,
+                      label: option.id,
+                    }}
+                    options={[
+                      {
+                        value: option.id,
+                        label: option.id,
+                      },
+                    ]}
+                    disabled
+                    onChange={() => {}}
+                  />
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default MatchSentencesEdit;

src/pages/(generation)/ListeningGeneration.tsx

@@ -89,13 +89,13 @@ const PartTab = ({
                       return updatedPart;
                     }
 
-					return part;
+                    return part;
                   })
                 }
               />
             </>
           );
-		  // TODO: This might be broken as they all returns the same
+        // TODO: This might be broken as they all returns the same
         case "writeBlanks":
           return (
             <>
@@ -114,8 +114,7 @@ const PartTab = ({
                       } as ListeningPart;
                     }
 
-					return part;
-
+                    return part;
                   });
                 }}
               />

src/pages/(generation)/ReadingGeneration.tsx

@@ -22,6 +22,7 @@ import { v4 } from "uuid";
 import FillBlanksEdit from "@/components/Generation/fill.blanks.edit";
 import TrueFalseEdit from "@/components/Generation/true.false.edit";
 import WriteBlanksEdit from "@/components/Generation/write.blanks.edit";
+import MatchSentencesEdit from "@/components/Generation/match.sentences.edit";
 
 const DIFFICULTIES: Difficulty[] = ["easy", "medium", "hard"];
 
@@ -148,7 +149,30 @@ const PartTab = ({
               />
             </>
           );
-        // TODO: case "matchSentences": There seems to be an issue with the API
+        case "matchSentences":
+          return (
+            <>
+              <h1>Exercise: Match Sentences</h1>
+              <MatchSentencesEdit
+                exercise={exercise}
+                key={exercise.id}
+                updateExercise={(data: any) => {
+                  updatePart((part?: ReadingPart) => {
+                    if (part) {
+                      return {
+                        ...part,
+                        exercises: part.exercises.map((x) =>
+                          x.id === exercise.id ? { ...x, ...data } : x
+                        ),
+                      } as ReadingPart;
+                    }
+
+                    return part;
+                  });
+                }}
+              />
+            </>
+          );
         default:
           return null;
       }
@@ -246,7 +270,7 @@ const ReadingGeneration = () => {
     { type: "fillBlanks", label: "Fill the Blanks" },
     { type: "trueFalse", label: "True or False" },
     { type: "writeBlanks", label: "Write the Blanks" },
-    { type: "matchSentences", label: "Match Sentences" },
+    { type: "paragraphMatch", label: "Match Sentences" },
   ];
 
   const toggleType = (type: string) =>