Merge pull request #3321 from serlo/fix/undefined-extra-draggable-ans…

…wers-error fix(blank): undefined extra draggable answers error + type simplification
serlo · Jan 30, 2024 · 9b9f6ba · 9b9f6ba
2 parents 184df61 + 8d40e22
commit 9b9f6ba
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 21 deletions.
diff --git a/...ditor/src/plugins/fill-in-the-blanks-exercise/components/extra-incorrect-answers-area.tsx b/...ditor/src/plugins/fill-in-the-blanks-exercise/components/extra-incorrect-answers-area.tsx
@@ -18,13 +18,13 @@ export function ExtraIncorrectAnswersArea(
   const areaRef = useRef<HTMLDivElement>(null)
   const blanksExerciseStrings = useEditorStrings().plugins.blanksExercise
 
-  const incorrectAnswers = extraDraggableAnswers.map(
-    ({ answer }) => answer.value
-  )
+  const incorrectAnswers = extraDraggableAnswers.defined
+    ? extraDraggableAnswers.map(({ answer }) => answer.value)
+    : []
 
   return (
     <div className="mt-8 px-8" ref={areaRef}>
-      {incorrectAnswers.length > 0 ? (
+      {incorrectAnswers.length > 0 && extraDraggableAnswers.defined ? (
         <>
           {blanksExerciseStrings.dummyAnswers}:
           <div className="mb-4 mt-1 flex flex-wrap gap-2">
@@ -41,7 +41,12 @@ export function ExtraIncorrectAnswersArea(
                   }
                 }}
                 onRemoveClick={() => {
-                  extraDraggableAnswers.remove(index)
+                  if (!extraDraggableAnswers.defined) return
+                  // the editor overwrites the remove function of the `list()` if it's inside a `optional()`
+                  // so this is a little helper to remove the value at the index
+                  extraDraggableAnswers.set((currentList) =>
+                    currentList.filter((_, itemIndex) => itemIndex !== index)
+                  )
                   // focus new last input to make sure we don't loose focus
                   const allInputs = areaRef.current?.querySelectorAll('input')
                   if (allInputs) {
@@ -55,7 +60,11 @@ export function ExtraIncorrectAnswersArea(
       ) : null}
       <button
         onClick={() => {
-          extraDraggableAnswers.insert()
+          if (extraDraggableAnswers.defined) {
+            extraDraggableAnswers.insert()
+          } else {
+            extraDraggableAnswers.create([{ answer: '' }])
+          }
         }}
         className="serlo-button-editor-secondary"
       >

diff --git a/packages/editor/src/plugins/fill-in-the-blanks-exercise/editor.tsx b/packages/editor/src/plugins/fill-in-the-blanks-exercise/editor.tsx
@@ -66,7 +66,7 @@ export function FillInTheBlanksExerciseEditor(
               },
             })}
             textPluginState={textPluginState}
-            extraDraggableAnswers={extraDraggableAnswers}
+            extraDraggableAnswers={staticDocument.state.extraDraggableAnswers}
             mode={mode.value as FillInTheBlanksMode}
             initialTextInBlank="correct-answer"
           />

diff --git a/packages/editor/src/plugins/fill-in-the-blanks-exercise/index.tsx b/packages/editor/src/plugins/fill-in-the-blanks-exercise/index.tsx
@@ -6,6 +6,7 @@ import {
   child,
   string,
   list,
+  optional,
 } from '@editor/plugin'
 import { EditorPluginType } from '@editor/types/editor-plugin-type'
 
@@ -46,7 +47,7 @@ function createState() {
       },
     }),
     mode: string(defaultMode),
-    extraDraggableAnswers: list(object({ answer: string() })),
+    extraDraggableAnswers: optional(list(object({ answer: string() }))),
   })
 }
 

diff --git a/packages/editor/src/plugins/fill-in-the-blanks-exercise/renderer.tsx b/packages/editor/src/plugins/fill-in-the-blanks-exercise/renderer.tsx
@@ -2,12 +2,7 @@ import { DndWrapper } from '@editor/core/components/dnd-wrapper'
 import { type ReactNode, useMemo, useState, useCallback } from 'react'
 import { v4 as uuid_v4 } from 'uuid'
 
-import type {
-  BlankId,
-  DraggableId,
-  FillInTheBlanksExerciseProps,
-  FillInTheBlanksMode,
-} from '.'
+import type { BlankId, DraggableId, FillInTheBlanksMode } from '.'
 import { BlankCheckButton } from './components/blank-check-button'
 import { BlankDraggableAnswer } from './components/blank-draggable-answer'
 import { BlankDraggableArea } from './components/blank-draggable-area'
@@ -23,9 +18,7 @@ interface FillInTheBlanksRendererProps {
   }
   mode: FillInTheBlanksMode
   initialTextInBlank: 'empty' | 'correct-answer'
-  extraDraggableAnswers:
-    | FillInTheBlanksExerciseProps['state']['extraDraggableAnswers']
-    | Array<{ answer: string }>
+  extraDraggableAnswers?: Array<{ answer: string }>
   isEditing?: boolean
 }
 
@@ -79,10 +72,11 @@ export function FillInTheBlanksRenderer(props: FillInTheBlanksRendererProps) {
     }))
     if (isEditing) return sorted
 
-    const extraIncorrectAnswers = extraDraggableAnswers.map(({ answer }) => ({
-      draggableId: uuid_v4(),
-      text: typeof answer === 'string' ? answer : answer.value,
-    }))
+    const extraIncorrectAnswers =
+      extraDraggableAnswers?.map(({ answer }) => ({
+        draggableId: uuid_v4(),
+        text: answer,
+      })) ?? []
     const withExtraIncorrectAnswers = [...sorted, ...extraIncorrectAnswers]
     const shuffled = withExtraIncorrectAnswers
       .map((draggable) => ({ draggable, sort: Math.random() }))