Merge pull request #192 from serlo/auto-save

fix: schedule new save even if one is ongoing and taking some time to finish

src/backend/editor-route-handlers.ts

@@ -66,7 +66,7 @@ export async function putEntity(req: Request, res: Response) {
 
   // Modify entity with decodedAccessToken.entityId in database
   await database.mutate('UPDATE lti_entity SET content = ? WHERE id = ?', [
-    req.body.editorState,
+    JSON.stringify(req.body.editorState),
     decodedAccessToken.entityId,
   ])
   logger.info(

src/frontend/SerloEditorWrapper.tsx

@@ -5,7 +5,7 @@ import {
   type SerloEditorProps,
 } from '@serlo/editor'
 import { jwtDecode } from 'jwt-decode'
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useCallback, useRef } from 'react'
 
 interface SerloContentProps {
   initialState: SerloEditorProps['initialState']
@@ -33,19 +33,13 @@ export default function SerloEditorWrapper(props: SerloContentProps) {
   const testingSecret = urlParams.get('testingSecret')
   const accessToken = urlParams.get('accessToken')
 
-  const [editorState, setEditorState] = useState<string>(
-    JSON.stringify(props.initialState)
-  )
-  const [savePending, setSavePending] = useState<boolean>(false)
-
-  const editorStateRef = useRef(editorState)
+  const savePendingRef = useRef<boolean>(false)
 
-  // Save content if there are unsaved changed
-  useEffect(() => {
-    if (!savePending) return
+  const saveTimeoutRef = useRef<number | undefined>(undefined)
 
-    setTimeout(saveContent, 1000)
-    function saveContent() {
+  const save = useCallback(
+    (newState: unknown) => {
+      savePendingRef.current = false
       fetch('/entity', {
         method: 'PUT',
         headers: {
@@ -54,18 +48,31 @@ export default function SerloEditorWrapper(props: SerloContentProps) {
         },
         body: JSON.stringify({
           accessToken,
-          editorState: editorStateRef.current,
+          editorState: newState,
         }),
       }).then((res) => {
         if (res.status === 200) {
-          setSavePending(false)
+          // TODO: Show user content was saved successfully
         } else {
           // TODO: Handle failure
         }
       })
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [savePending])
+    },
+    [accessToken, ltik]
+  )
+
+  const handleOnChange = useCallback(
+    (newState: unknown) => {
+      // If save already scheduled, cancel it
+      if (savePendingRef.current) {
+        clearTimeout(saveTimeoutRef.current)
+      }
+      savePendingRef.current = true
+      // Save after three seconds
+      saveTimeoutRef.current = window.setTimeout(() => save(newState), 2000)
+    },
+    [save]
+  )
 
   const plugins = getPlugins(ltik)
   function getPlugins(ltik: string) {
@@ -85,11 +92,7 @@ export default function SerloEditorWrapper(props: SerloContentProps) {
   return (
     <MemoSerloEditor
       initialState={initialState}
-      onChange={(newState) => {
-        editorStateRef.current = JSON.stringify(newState)
-        setEditorState(editorStateRef.current)
-        setSavePending(true)
-      }}
+      onChange={handleOnChange}
       editorVariant="lti-tool"
       _testingSecret={testingSecret}
       plugins={plugins}