feat: update save mechanism for handwriting tasks

the-answerbook-project · Sep 5, 2024 · ea781ef · ea781ef
1 parent 9a18074
commit ea781ef
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 20 deletions.
diff --git a/src/components/questionStructure/Task/variants/handwriting/ProcessedHandwritingTask.tsx b/src/components/questionStructure/Task/variants/handwriting/ProcessedHandwritingTask.tsx
@@ -1,14 +1,13 @@
 import { Pencil2Icon } from '@radix-ui/react-icons'
 import { Button, Card, Dialog, Flex } from '@radix-ui/themes'
 import { MathJax } from 'better-react-mathjax'
-import { isEmpty } from 'lodash'
-import { FC } from 'react'
+import { isEmpty, isEqual } from 'lodash'
+import { FC, useEffect, useMemo, useState } from 'react'
 
 import { TaskType } from '../../constants'
 import { TaskBaseProps } from '../../types'
 import { ViewOnlyCanvas } from './components/ViewOnlyCanvas'
 import { ProcessedHandwritingEditor } from './editors/ProcessedHandwritingEditor'
-import { ProcessedHandwritingAnswer } from './types'
 
 export interface ProcessedHandwritingProps extends TaskBaseProps {
   type: TaskType.PROCESSED_HANDWRITING
@@ -19,9 +18,19 @@ export const ProcessedHandwritingTask: FC<ProcessedHandwritingProps> = ({
   onAnswerUpdate,
   disabled = false,
 }) => {
-  const value: ProcessedHandwritingAnswer = answer?.answer
-    ? JSON.parse(answer.answer)
-    : { latex: '' }
+  const initialValue = useMemo(
+    () => (answer?.answer ? JSON.parse(answer.answer) : { latex: '' }),
+    [answer]
+  )
+
+  const [value, setValue] = useState(initialValue)
+  useEffect(() => {
+    if (!isEqual(value.latex, initialValue.latex)) {
+      answer.answer = JSON.stringify(value)
+      onAnswerUpdate(answer)
+    }
+  }, [answer, value, onAnswerUpdate, initialValue])
+
   const strokes = value?.raw?.elements
   return (
     <Dialog.Root>
@@ -46,11 +55,7 @@ export const ProcessedHandwritingTask: FC<ProcessedHandwritingProps> = ({
 
       <Dialog.Content className="excalidraw-dialog-content">
         <Flex direction="column" height="100%" gap="3">
-          <ProcessedHandwritingEditor
-            answer={value}
-            // onAnswerChange={(v) => onAnswerUpdate(JSON.stringify(v))}
-            onAnswerChange={(v) => {}}
-          />
+          <ProcessedHandwritingEditor answer={value} onAnswerChange={setValue} />
           <Flex justify="end">
             <Dialog.Close>
               <Button>Save</Button>

diff --git a/src/components/questionStructure/Task/variants/handwriting/RawHandwritingTask.tsx b/src/components/questionStructure/Task/variants/handwriting/RawHandwritingTask.tsx
@@ -1,13 +1,12 @@
 import { Pencil2Icon } from '@radix-ui/react-icons'
 import { Button, Dialog, Flex } from '@radix-ui/themes'
-import { isEmpty } from 'lodash'
-import { FC } from 'react'
+import { isEmpty, isEqual } from 'lodash'
+import { FC, useEffect, useMemo, useState } from 'react'
 
 import { TaskType } from '../../constants'
 import { TaskBaseProps } from '../../types'
 import { ViewOnlyCanvas } from './components/ViewOnlyCanvas'
 import RawHandwritingEditor from './editors/RawHandwritingEditor/rawHandwritingEditor'
-import { RawHandwritingAnswer } from './types'
 
 export interface RawHandwritingProps extends TaskBaseProps {
   type: TaskType.RAW_HANDWRITING
@@ -18,7 +17,16 @@ export const RawHandwritingTask: FC<RawHandwritingProps> = ({
   onAnswerUpdate,
   disabled = false,
 }) => {
-  const value: RawHandwritingAnswer = answer?.answer ? JSON.parse(answer.answer) : {}
+  const initialValue = useMemo(() => (answer?.answer ? JSON.parse(answer.answer) : {}), [answer])
+
+  const [value, setValue] = useState(initialValue)
+  useEffect(() => {
+    if (!isEqual(value.latex, initialValue.latex)) {
+      answer.answer = JSON.stringify(value)
+      onAnswerUpdate(answer)
+    }
+  }, [answer, value, onAnswerUpdate, initialValue])
+
   return (
     <Dialog.Root>
       {!disabled && (
@@ -37,11 +45,7 @@ export const RawHandwritingTask: FC<RawHandwritingProps> = ({
 
       <Dialog.Content className="excalidraw-dialog-content">
         <Flex direction="column" height="100%" gap="3">
-          <RawHandwritingEditor
-            answer={value}
-            // onAnswerChange={(value) => onAnswerUpdate(JSON.stringify(value))}
-            onAnswerChange={(value) => {}}
-          />
+          <RawHandwritingEditor answer={value} onAnswerChange={setValue} />
           <Flex justify="end">
             <Dialog.Close>
               <Button>Save</Button>