From ecc3a53df5a462c6eaba454e622971a7a0ccc627 Mon Sep 17 00:00:00 2001
From: Leung Cheng <monewckl@hotmail.com.hk>
Date: Fri, 24 May 2024 20:13:09 +0800
Subject: [PATCH 1/2] Use choice id instead

---
 src/app/components/editor.tsx | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/app/components/editor.tsx b/src/app/components/editor.tsx
index d388ffd..f945f47 100644
--- a/src/app/components/editor.tsx
+++ b/src/app/components/editor.tsx
@@ -93,12 +93,16 @@ interface QuestionInput {
 }
 
 interface ChoiceInput {
+  readonly id: number
   answer: string
   isFixedPosition: boolean
   isCorrect: boolean
 }
 
+let choiceCounter = 0
+
 const newChoice = (): ChoiceInput => ({
+  id: choiceCounter++,
   answer: '',
   isFixedPosition: false,
   isCorrect: false,
@@ -387,11 +391,11 @@ function ChoicesEditor(props: {
   const { choices, questionNumber, onChoicesUpdate } = props
 
   const handleInternalChoiceUpdate = (
-    choiceIndex: number,
+    choiceId: number,
     choiceUpdate: Partial<ChoiceInput>,
   ) => {
-    const newChoices = choices.map((oldChoice, index) => {
-      if (index === choiceIndex) {
+    const newChoices = choices.map((oldChoice) => {
+      if (oldChoice.id === choiceId) {
         return {
           ...oldChoice,
           ...choiceUpdate,
@@ -400,8 +404,8 @@ function ChoicesEditor(props: {
       return oldChoice
     })
     if (choiceUpdate.isCorrect) {
-      newChoices.forEach((choice, index) => {
-        if (index !== choiceIndex) {
+      newChoices.forEach((choice) => {
+        if (choice.id !== choiceId) {
           choice.isCorrect = false
         }
       })
@@ -412,15 +416,15 @@ function ChoicesEditor(props: {
   const choiceEditors = []
   for (let choiceIndex = 0; choiceIndex < choices.length; choiceIndex++) {
     const choiceNumber = choiceIndex + 1
-    // TODO: Not to use choiceIndex for key and param of handleInternalChoiceUpdate. Especially, if wanna add remove choices in future
+    const choice = choices[choiceIndex]
     choiceEditors.push(
-      <tr key={choiceIndex}>
+      <tr key={choice.id}>
         <td className="border border-slate-300">
           <input
             type="text"
             className="border border-gray-300 px-2 py-1"
             onChange={(e) => {
-              handleInternalChoiceUpdate(choiceIndex, {
+              handleInternalChoiceUpdate(choice.id, {
                 answer: e.target.value,
               })
             }}
@@ -434,9 +438,9 @@ function ChoicesEditor(props: {
           <input
             type="checkbox"
             className="mr-1"
-            checked={choices[choiceIndex].isCorrect}
+            checked={choice.isCorrect}
             onChange={(e) => {
-              handleInternalChoiceUpdate(choiceIndex, {
+              handleInternalChoiceUpdate(choice.id, {
                 isCorrect: e.target.checked,
               })
             }}
@@ -455,7 +459,7 @@ function ChoicesEditor(props: {
               questionNumber,
             })}
             onChange={(e) => {
-              handleInternalChoiceUpdate(choiceIndex, {
+              handleInternalChoiceUpdate(choice.id, {
                 isFixedPosition: e.target.checked,
               })
             }}

From 5014bd3effaf26fe512835e3e418fbb4a6f18cc9 Mon Sep 17 00:00:00 2001
From: Leung Cheng <monewckl@hotmail.com.hk>
Date: Fri, 24 May 2024 20:56:13 +0800
Subject: [PATCH 2/2] Restructure ChoicesEditor

---
 src/app/components/editor.tsx | 188 +++++++++++++++++-----------------
 1 file changed, 93 insertions(+), 95 deletions(-)

diff --git a/src/app/components/editor.tsx b/src/app/components/editor.tsx
index f945f47..519f3dc 100644
--- a/src/app/components/editor.tsx
+++ b/src/app/components/editor.tsx
@@ -303,45 +303,16 @@ function QuestionSetEditor({
                   }}
                 />
               </label>
-              <div className="form-group">
-                <h3 className="text-lg font-bold mb-2">Choices:</h3>
-                <table className="border-collapse border border-slate-400">
-                  <thead>
-                    <tr>
-                      <th className="border border-slate-300">Answer</th>
-                      <th className="border border-slate-300">Correct</th>
-                      <th className="border border-slate-300">
-                        Fixed Position
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <ChoicesEditor
-                      questionNumber={questionNumber}
-                      choices={question.choices}
-                      onChoicesUpdate={(choices) => {
-                        handleQuestionUpdate(question.id, (oldQuestion) => ({
-                          ...oldQuestion,
-                          choices,
-                        }))
-                      }}
-                    />
-                  </tbody>
-                </table>
-
-                <button
-                  type="button"
-                  className="bg-blue-500 text-white px-4 py-2 rounded"
-                  onClick={() => {
-                    handleQuestionUpdate(question.id, (oldQuestion) => ({
-                      ...oldQuestion,
-                      choices: [...oldQuestion.choices, newChoice()],
-                    }))
-                  }}
-                >
-                  Add Choice
-                </button>
-              </div>
+              <ChoicesEditor
+                questionNumber={questionNumber}
+                choices={question.choices}
+                onChoicesUpdate={(choices) => {
+                  handleQuestionUpdate(question.id, (oldQuestion) => ({
+                    ...oldQuestion,
+                    choices,
+                  }))
+                }}
+              />
             </div>
           )
         })}
@@ -413,60 +384,87 @@ function ChoicesEditor(props: {
     onChoicesUpdate(newChoices)
   }
 
-  const choiceEditors = []
-  for (let choiceIndex = 0; choiceIndex < choices.length; choiceIndex++) {
-    const choiceNumber = choiceIndex + 1
-    const choice = choices[choiceIndex]
-    choiceEditors.push(
-      <tr key={choice.id}>
-        <td className="border border-slate-300">
-          <input
-            type="text"
-            className="border border-gray-300 px-2 py-1"
-            onChange={(e) => {
-              handleInternalChoiceUpdate(choice.id, {
-                answer: e.target.value,
-              })
-            }}
-            aria-label={QuestionSetEditorAriaLabel.answerInput({
-              choiceNumber,
-              questionNumber,
-            })}
-          />
-        </td>
-        <td className="border border-slate-300">
-          <input
-            type="checkbox"
-            className="mr-1"
-            checked={choice.isCorrect}
-            onChange={(e) => {
-              handleInternalChoiceUpdate(choice.id, {
-                isCorrect: e.target.checked,
-              })
-            }}
-            aria-label={QuestionSetEditorAriaLabel.isCorrectAnswerCheckbox({
-              choiceNumber,
-              questionNumber,
-            })}
-          />
-        </td>
-        <td className="border border-slate-300">
-          <input
-            type="checkbox"
-            className="mr-1"
-            aria-label={QuestionSetEditorAriaLabel.isFixedPositionCheckbox({
-              choiceNumber,
-              questionNumber,
-            })}
-            onChange={(e) => {
-              handleInternalChoiceUpdate(choice.id, {
-                isFixedPosition: e.target.checked,
-              })
-            }}
-          />
-        </td>
-      </tr>,
-    )
-  }
-  return choiceEditors
+  return (
+    <div className="form-group">
+      <h3 className="text-lg font-bold mb-2">Choices:</h3>
+      <table className="border-collapse border border-slate-400">
+        <thead>
+          <tr>
+            <th className="border border-slate-300">Answer</th>
+            <th className="border border-slate-300">Correct</th>
+            <th className="border border-slate-300">Fixed Position</th>
+          </tr>
+        </thead>
+        <tbody>
+          {choices.map((choice, choiceIndex) => {
+            const choiceNumber = choiceIndex + 1
+            return (
+              <tr key={choice.id}>
+                <td className="border border-slate-300">
+                  <input
+                    type="text"
+                    className="border border-gray-300 px-2 py-1"
+                    onChange={(e) => {
+                      handleInternalChoiceUpdate(choice.id, {
+                        answer: e.target.value,
+                      })
+                    }}
+                    aria-label={QuestionSetEditorAriaLabel.answerInput({
+                      choiceNumber,
+                      questionNumber,
+                    })}
+                  />
+                </td>
+                <td className="border border-slate-300">
+                  <input
+                    type="checkbox"
+                    className="mr-1"
+                    checked={choice.isCorrect}
+                    onChange={(e) => {
+                      handleInternalChoiceUpdate(choice.id, {
+                        isCorrect: e.target.checked,
+                      })
+                    }}
+                    aria-label={QuestionSetEditorAriaLabel.isCorrectAnswerCheckbox(
+                      {
+                        choiceNumber,
+                        questionNumber,
+                      },
+                    )}
+                  />
+                </td>
+                <td className="border border-slate-300">
+                  <input
+                    type="checkbox"
+                    className="mr-1"
+                    aria-label={QuestionSetEditorAriaLabel.isFixedPositionCheckbox(
+                      {
+                        choiceNumber,
+                        questionNumber,
+                      },
+                    )}
+                    onChange={(e) => {
+                      handleInternalChoiceUpdate(choice.id, {
+                        isFixedPosition: e.target.checked,
+                      })
+                    }}
+                  />
+                </td>
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
+
+      <button
+        type="button"
+        className="bg-blue-500 text-white px-4 py-2 rounded"
+        onClick={() => {
+          onChoicesUpdate([...choices, newChoice()])
+        }}
+      >
+        Add Choice
+      </button>
+    </div>
+  )
 }