Merge pull request #4101 from serlo/refactor-editor-state-remove-get

refactor(editor): remove get from child and scalar

packages/editor/src/plugin/child.tsx

@@ -16,9 +16,6 @@ export function child<K extends string, S = unknown>(
   return {
     init(id, onChange) {
       return {
-        get() {
-          return id
-        },
         id,
         render: function Child(props: PluginProps = {}) {
           const pluginProps = {
@@ -67,7 +64,6 @@ export type ChildStateType<K extends string = string, S = unknown> = StateType<
   { plugin: K; state?: S; id?: string },
   string,
   {
-    get(): string
     id: string
     render: (props?: PluginProps) => React.ReactElement
     replace: (plugin: K, state?: S, id?: string) => void

packages/editor/src/plugin/scalar.ts

@@ -56,9 +56,6 @@ export function serializedScalar<S, T>(
         public set value(param: T) {
           this.set(param)
         }
-        public get() {
-          return state
-        }
         public set(
           param: T | ((previousValue: T) => T),
           reverse?: (previousValue: T) => T
@@ -93,7 +90,6 @@ export type SerializedScalarStateType<S, T> = StateType<
   T,
   {
     value: T
-    get(): T
     set(
       value: T | ((currentValue: T) => T),
       reverse?: (previousValue: T) => T
@@ -122,9 +118,6 @@ export function asyncScalar<T, Temp>(
     init(state, onChange) {
       return {
         value: state,
-        get() {
-          return state
-        },
         set(initial, executor) {
           onChange(
             (previousState) => {
@@ -187,7 +180,6 @@ export type AsyncScalarStateType<T, Temp> = StateType<
   T | Temp,
   {
     value: T | Temp
-    get(): T | Temp
     set(
       initial: T | Temp | ((previousValue: T | Temp) => T | Temp),
       executor?: StateExecutor<

packages/editor/src/plugin/upload.ts

@@ -50,7 +50,6 @@ export type UploadStateType<T> = StateType<
 >
 
 export interface UploadStateReturnType<T> {
-  get(): FileState<T>
   value: FileState<T>
   isPending: boolean
   upload(file: File, handler: UploadHandler<T>): Promise<T>

packages/editor/src/plugins/box/editor.tsx

@@ -24,7 +24,7 @@ export function BoxEditor(props: BoxProps) {
 
   const editorStrings = useEditorStrings()
 
-  const contentId = content.get()
+  const contentId = content.id
   const isEmptyContent = useAppSelector((state) =>
     selectIsEmptyRows(state, contentId)
   )

packages/editor/src/plugins/dropzone-image/components/answer-zone/answer-renderer.tsx

@@ -28,13 +28,13 @@ export function AnswerRenderer({
 
   useEffect(() => {
     if (isAnswerTypeText) {
-      dispatch(focus(answer.text.get()))
+      dispatch(focus(answer.text.id))
     }
   })
 
   const answersList = isWrongAnswer
     ? extraDraggableAnswers
-    : answerZones?.find(({ id }) => id.get() === zoneId)?.answers
+    : answerZones?.find(({ id }) => id.value === zoneId)?.answers
 
   if (!answersList || answerIndex >= answersList.length) return <></>
 

packages/editor/src/plugins/dropzone-image/components/answer-zone/answer-zone-answer.tsx

@@ -25,8 +25,8 @@ export function AnswerZoneAnswer(props: AnswerZoneAnswerProps) {
 
   const pluginStrings = useEditorStrings().plugins.dropzoneImage
 
-  const answerImageUrl = getAnswerZoneImageSrc(answer.image.get())
-  const answerText = getAnswerZoneText(answer.text.get())
+  const answerImageUrl = getAnswerZoneImageSrc(answer.image.id)
+  const answerText = getAnswerZoneText(answer.text.id)
 
   return (
     <div
@@ -55,7 +55,7 @@ export function AnswerZoneAnswer(props: AnswerZoneAnswerProps) {
           />
         </button>
         <button
-          data-qa={`answer-zone-${answer.id.get()}-remove-answer-button`}
+          data-qa={`answer-zone-${answer.id.value}-remove-answer-button`}
           onClick={onRemoveAnswer}
           className="serlo-button-editor-secondary serlo-tooltip-trigger z-10 mx-1 h-6 w-6 p-0"
         >

packages/editor/src/plugins/dropzone-image/components/answer-zone/answer-zone.tsx

@@ -37,7 +37,7 @@ export const AnswerZone = (props: AnswerZoneProps) => {
     onClickPlusButton,
     onClickEditAnswerButton,
   } = props
-  const name = answerZone.name.get()
+  const name = answerZone.name.value
 
   const context = useContext(AnswerZonesContext)
   const { dropzoneVisibility } = context || {}
@@ -67,7 +67,7 @@ export const AnswerZone = (props: AnswerZoneProps) => {
       className="absolute flex cursor-move items-center justify-center rounded bg-transparent"
       style={positionState}
       onClick={onClick}
-      data-qa={`answer-zone-${answerZone.id.get()}`}
+      data-qa={`answer-zone-${answerZone.id.value}`}
     >
       <div className="relative z-20">
         <ResizableBox {...resizableBoxProps}>
@@ -87,7 +87,7 @@ export const AnswerZone = (props: AnswerZoneProps) => {
 
             {answerZone.answers.length === 0 ? (
               <AnswerZoneEmpty
-                answerZoneId={answerZone.id.get()}
+                answerZoneId={answerZone.id.value}
                 onClickSettingsButton={onClickSettingsButton}
                 onClickPlusButton={onClickPlusButton}
               />
@@ -109,7 +109,7 @@ export const AnswerZone = (props: AnswerZoneProps) => {
 
             {answerZone.answers.length > 0 ? (
               <AnswerZoneSidebar
-                answerZoneId={answerZone.id.get()}
+                answerZoneId={answerZone.id.value}
                 onClickSettingsButton={onClickSettingsButton}
                 onClickPlusButton={onClickPlusButton}
               />

packages/editor/src/plugins/dropzone-image/components/answer-zone/new-answer-flow.tsx

@@ -32,7 +32,7 @@ export function NewAnswerFlow(props: NewAnswerFlowProps) {
 
   const answersList = isWrongAnswer
     ? extraDraggableAnswers
-    : (answerZones?.find(({ id }) => id.get() === zoneId)
+    : (answerZones?.find(({ id }) => id.value === zoneId)
         ?.answers as typeof extraDraggableAnswers)
 
   const goToStepOne = (newStepOneType: AnswerType) => {

packages/editor/src/plugins/dropzone-image/components/editor/editor-canvas-modal.tsx

@@ -62,12 +62,12 @@ export function EditorCanvasModal(props: EditorCanvasModalProps) {
           <AnswerZoneSettingsForm
             answerZone={currentAnswerZone}
             onDuplicate={() => {
-              duplicateAnswerZone(currentAnswerZone.id.get())
+              duplicateAnswerZone(currentAnswerZone.id.value)
             }}
             onDelete={() => {
               setModalType(ModalType.Unset)
               const index = answerZones.findIndex(
-                (a) => a.id.get() === currentAnswerZone.id.get()
+                (a) => a.id.value === currentAnswerZone.id.value
               )
               answerZones.remove(index)
             }}
@@ -76,14 +76,14 @@ export function EditorCanvasModal(props: EditorCanvasModalProps) {
       case ModalType.CreateDropZone:
         return (
           <NewAnswerFlow
-            zoneId={currentAnswerZone.id.get()}
+            zoneId={currentAnswerZone.id.value}
             onSave={() => setModalType(ModalType.Unset)}
           />
         )
       case ModalType.Edit:
         return (
           <AnswerRenderer
-            zoneId={currentAnswerZone.id.get()}
+            zoneId={currentAnswerZone.id.value}
             answerType={currentAnswerType}
             answerIndex={currentAnswerIndex}
             onSave={() => setModalType(ModalType.Unset)}

packages/editor/src/plugins/dropzone-image/components/editor/editor-canvas.tsx

@@ -18,8 +18,8 @@ interface EditorCanvasProps {
 export function EditorCanvas(props: EditorCanvasProps) {
   const { state, setModalType } = props
   const { answerZones, backgroundImage, canvasDimensions } = state
-  const canvasWidth = canvasDimensions.width.get()
-  const canvasHeight = canvasDimensions.height.get()
+  const canvasWidth = canvasDimensions.width.value
+  const canvasHeight = canvasDimensions.height.value
 
   const context = useContext(AnswerZonesContext)
 
@@ -28,7 +28,7 @@ export function EditorCanvas(props: EditorCanvasProps) {
   const backgroundImageDocument = backgroundImage.defined
     ? (selectStaticDocument(
         store.getState(),
-        backgroundImage.get()
+        backgroundImage.id
       ) as EditorImageDocument)
     : null
   const backgroundImageUrl = (backgroundImageDocument?.state?.src ||
@@ -73,8 +73,8 @@ export function EditorCanvas(props: EditorCanvasProps) {
         const change = monitor.getDifferenceFromInitialOffset()
         if (!change) return
 
-        const width = answerZone.layout.width.get()
-        const currentAbsoluteLeft = canvasWidth * answerZone.position.left.get()
+        const width = answerZone.layout.width.value
+        const currentAbsoluteLeft = canvasWidth * answerZone.position.left.value
         const newAbsoluteLeft = currentAbsoluteLeft + change.x
         const left = getPercentageRounded(canvasWidth, newAbsoluteLeft)
         const right = left + width
@@ -85,8 +85,8 @@ export function EditorCanvas(props: EditorCanvasProps) {
         // Otherwise, position horizontally exactly as dropped
         else answerZone.position.left.set(left)
 
-        const height = answerZone.layout.height.get()
-        const currentAbsoluteTop = canvasHeight * answerZone.position.top.get()
+        const height = answerZone.layout.height.value
+        const currentAbsoluteTop = canvasHeight * answerZone.position.top.value
         const newAbsoluteTop = currentAbsoluteTop + change.y
         const top = getPercentageRounded(canvasHeight, newAbsoluteTop)
         const bottom = top + height
@@ -116,7 +116,7 @@ export function EditorCanvas(props: EditorCanvasProps) {
       data-qa="plugin-dropzone-image-editor-canvas"
     >
       {answerZones?.map((answerZone, index) => {
-        const id = answerZone.id.get()
+        const id = answerZone.id.value
         return (
           <AnswerZone
             key={index}

packages/editor/src/plugins/dropzone-image/editor.tsx

@@ -55,7 +55,7 @@ export function DropzoneImageEditor(props: DropzoneImageProps) {
   const backgroundImagePluginState = useAppSelector((state) =>
     selectDocument(
       state,
-      isBackgroundImagePluginDefined ? backgroundImage.get() : null
+      isBackgroundImagePluginDefined ? backgroundImage.id : null
     )
   ) as EditorImageDocument
   const backgroundImageUrlFromPlugin =
@@ -71,13 +71,13 @@ export function DropzoneImageEditor(props: DropzoneImageProps) {
     duplicateAnswerZone,
   } = useAnswerZones(answerZones)
 
-  const backgroundType = state.backgroundType.get()
+  const backgroundType = state.backgroundType.value
   const isBackgroundTypeBlank = backgroundType === BackgroundType.Blank
   const isBackgroundTypeImage = backgroundType === BackgroundType.Image
 
   if (backgroundType === '') return <BackgroundTypeSelect {...props} />
 
-  const canvasShape = state.canvasShape.get() as BackgroundShape
+  const canvasShape = state.canvasShape.value as BackgroundShape
 
   if (!canvasShape && isBackgroundTypeBlank) {
     return <BackgroundShapeSelect {...props} />
@@ -101,7 +101,7 @@ export function DropzoneImageEditor(props: DropzoneImageProps) {
         currentAnswerType,
         selectAnswerZone,
         selectCurrentAnswer,
-        dropzoneVisibility: dropzoneVisibility.get() as DropzoneVisibility,
+        dropzoneVisibility: dropzoneVisibility.value as DropzoneVisibility,
         extraDraggableAnswers,
       }}
     >
@@ -110,7 +110,7 @@ export function DropzoneImageEditor(props: DropzoneImageProps) {
           id={id}
           showSettingsButton={isBackgroundTypeImage}
           backgroundImageState={{
-            id: isBackgroundImagePluginDefined ? backgroundImage.get() : null,
+            id: isBackgroundImagePluginDefined ? backgroundImage.id : null,
             state: backgroundImagePluginState?.state as unknown as
               | ImageProps['state']
               | undefined,

packages/editor/src/plugins/dropzone-image/hooks/use-answer-zone-resize.tsx

@@ -23,10 +23,10 @@ const resizeHandles: ResizableProps['resizeHandles'] = ['ne', 'se', 'sw', 'nw']
 export const useAnswerZoneResize = (args: UseAnswerZoneResizeArgs) => {
   const { answerZone, canvasSize } = args
   const [canvasWidth, canvasHeight] = canvasSize
-  const left = answerZone.position.left.get()
-  const top = answerZone.position.top.get()
-  const height = answerZone.layout.height.get()
-  const width = answerZone.layout.width.get()
+  const left = answerZone.position.left.value
+  const top = answerZone.position.top.value
+  const height = answerZone.layout.height.value
+  const width = answerZone.layout.width.value
 
   // Calculate the initial absolute position based on percentage values from plugin state
   const [positionState, setPositionState] = useState<PositionState>({

packages/editor/src/plugins/dropzone-image/hooks/use-answer-zones.tsx

@@ -32,7 +32,7 @@ export function useAnswerZones(
   )
 
   const selectAnswerZone = (id: string) => {
-    const answerZone = answerZones.find((zone) => zone.id.get() === id)
+    const answerZone = answerZones.find((zone) => zone.id.value === id)
     if (answerZone) {
       setCurrentAnswerZone(answerZone)
     }
@@ -55,29 +55,29 @@ export function useAnswerZones(
   }
 
   const duplicateAnswerZone = (idToDuplicate: string) => {
-    const toCopy = answerZones.find((zone) => zone.id.get() === idToDuplicate)
+    const toCopy = answerZones.find((zone) => zone.id.value === idToDuplicate)
     if (!toCopy) return
     const currentLength = answerZones.length
     const newZone = {
       id: `answerZone-${currentLength}`,
-      name: toCopy.name.get(),
+      name: toCopy.name.value,
       position: {
-        left: toCopy.position.left.get() + defaultAnswerZonePosition.left,
-        top: toCopy.position.top.get() + defaultAnswerZonePosition.top,
+        left: toCopy.position.left.value + defaultAnswerZonePosition.left,
+        top: toCopy.position.top.value + defaultAnswerZonePosition.top,
       },
       layout: {
-        width: toCopy.layout.width.get(),
-        height: toCopy.layout.height.get(),
+        width: toCopy.layout.width.value,
+        height: toCopy.layout.height.value,
       },
       answers: toCopy.answers.map((answer) => ({
         id: uuidv4(),
         image: {
           plugin: EditorPluginType.Image,
-          state: getAnswerZoneImageState(answer.image.get()),
+          state: getAnswerZoneImageState(answer.image.id),
         },
         text: {
           plugin: EditorPluginType.Text,
-          state: getAnswerZoneText(answer.text.get()),
+          state: getAnswerZoneText(answer.text.id),
         },
       })),
     }
@@ -90,7 +90,7 @@ export function useAnswerZones(
   useHotkeys('backspace, del', (event) => {
     if (!currentAnswerZone) return
     const index = answerZones.findIndex(
-      ({ id }) => id.get() === currentAnswerZone.id.get()
+      ({ id }) => id.value === currentAnswerZone.id.value
     )
     index !== -1 && answerZones.remove(index)
     event.preventDefault()
@@ -103,7 +103,7 @@ export function useAnswerZones(
 
   useHotkeys(['ctrl+v, meta+v'], (event) => {
     if (!answerZoneClipboardItem) return
-    const idToDuplicate = answerZoneClipboardItem.id.get()
+    const idToDuplicate = answerZoneClipboardItem.id.value
     duplicateAnswerZone(idToDuplicate)
     event.preventDefault()
   })

packages/editor/src/plugins/dropzone-image/utils/answer-zone.ts

@@ -37,9 +37,9 @@ export const getAnswerZoneText = (answerZoneTextId: string) => {
 }
 
 export const convertAnswer = (answer: AnswerData) => {
-  const id = answer.image.get()
+  const id = answer.image.id
   const imageUrl = getAnswerZoneImageSrc(id)
-  const zoneTextId = answer.text.get()
+  const zoneTextId = answer.text.id
   const text = getAnswerZoneText(zoneTextId)
   return { id, imageUrl, text }
 }

packages/editor/src/plugins/image-gallery/components/editor-image-grid.tsx

@@ -23,7 +23,7 @@ export function EditorImageGrid({
   onImageClick,
   onRemoveImageButtonClick,
 }: EditorImageGridProps) {
-  const imageIds = state.images.map(({ imagePlugin }) => imagePlugin.get())
+  const imageIds = state.images.map(({ imagePlugin }) => imagePlugin.id)
   const imageDocuments = useAppSelector((state) =>
     selectStaticDocuments(state, imageIds)
   )

packages/editor/src/plugins/image/components/image-selection-screen.tsx

@@ -34,7 +34,7 @@ export function ImageSelectionScreen({
       ? imageStrings.placeholderUploading
       : imageStrings.placeholderFailed
 
-  const imageUrl = src.get() as string
+  const imageUrl = src.value as string
   const showErrorMessage = imageUrl.length > 5 && !isImageUrl(imageUrl)
 
   const onSelectPixabayImage = (imageUrl: string) => {

packages/editor/src/plugins/image/controls/settings-modal-controls.tsx

@@ -60,7 +60,7 @@ export function SettingsModalControls({ state }: Pick<ImageProps, 'state'>) {
         currentLicence={licence.defined ? licence?.value : undefined}
         onLicenseChange={updateOrCreateLicence}
         // eslint-disable-next-line @typescript-eslint/no-base-to-string
-        src={src.get().toString()}
+        src={src.value.toString()}
       />
       <label className="mx-auto mb-0 mt-5 flex flex-row justify-between">
         <span className="w-[20%]">{imageStrings.alt}</span>