From d0c3c2a2335eb9b433e63bda4da2f93674278572 Mon Sep 17 00:00:00 2001
From: Petri Lehtinen <petri.lehtinen@reaktor.com>
Date: Thu, 28 Nov 2024 14:30:56 +0200
Subject: [PATCH] Fix infinite save loop in child document editor

---
 .../child-documents/ChildDocumentEditor.tsx   | 30 +++++++++++++++----
 .../defaults/employee/i18n/fi.tsx             |  1 +
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/frontend/src/employee-frontend/components/child-documents/ChildDocumentEditor.tsx b/frontend/src/employee-frontend/components/child-documents/ChildDocumentEditor.tsx
index 41191e2a042..1579b9fdc2e 100644
--- a/frontend/src/employee-frontend/components/child-documents/ChildDocumentEditor.tsx
+++ b/frontend/src/employee-frontend/components/child-documents/ChildDocumentEditor.tsx
@@ -46,6 +46,7 @@ import InfoModal from 'lib-components/molecules/modals/InfoModal'
 import { H1, H2 } from 'lib-components/typography'
 import { defaultMargins, Gap } from 'lib-components/white-space'
 import colors from 'lib-customizations/common'
+import { faExclamationTriangle } from 'lib-icons'
 import { fasCheckCircle, fasExclamationTriangle } from 'lib-icons'
 
 import { useTranslation } from '../../state/i18n'
@@ -185,7 +186,7 @@ const ChildDocumentEditViewInner = React.memo(
 
     const [lastSaved, setLastSaved] = useState(HelsinkiDateTime.now())
     const [lastSavedContent, setLastSavedContent] = useState(document.content)
-    const [lockError, setLockError] = useState(false)
+    const [error, setError] = useState<'lock' | 'other' | null>(null)
 
     const { mutateAsync: updateChildDocumentContent, isPending: submitting } =
       useMutationResult(updateChildDocumentContentMutation)
@@ -212,8 +213,8 @@ const ChildDocumentEditViewInner = React.memo(
           setLastSaved(HelsinkiDateTime.now())
           setLastSavedContent(content)
         } else {
-          if (result.isFailure && result.errorCode === 'invalid-lock') {
-            setLockError(true)
+          if (result.isFailure) {
+            setError(result.errorCode === 'invalid-lock' ? 'lock' : 'other')
           }
         }
       },
@@ -232,19 +233,27 @@ const ChildDocumentEditViewInner = React.memo(
 
     useEffect(() => {
       if (
-        !lockError &&
+        error === null &&
         debouncedValidContent !== null &&
         !isEqual(lastSavedContent, debouncedValidContent) &&
         !submitting
       ) {
         void save(debouncedValidContent)
       }
-    }, [lockError, debouncedValidContent, lastSavedContent, save, submitting])
+    }, [error, debouncedValidContent, lastSavedContent, save, submitting])
+
+    useEffect(() => {
+      if (error === 'other') {
+        const handle = setTimeout(() => setError(null), 5000)
+        return () => clearTimeout(handle)
+      }
+      return undefined
+    }, [error])
 
     const goBack = () =>
       navigate(`/child-information/${childIdFromUrl ?? document.child.id}`)
 
-    if (lockError) {
+    if (error === 'lock') {
       return (
         <ConcurrentEditWarning
           documentId={document.id}
@@ -286,6 +295,15 @@ const ChildDocumentEditViewInner = React.memo(
                   {!saved && (
                     <Spinner size={defaultMargins.m} data-qa="saving-spinner" />
                   )}
+                  {error === 'other' && (
+                    <span>
+                      <FontAwesomeIcon
+                        icon={faExclamationTriangle}
+                        color={colors.status.warning}
+                      />{' '}
+                      {i18n.childInformation.childDocuments.editor.saveError}
+                    </span>
+                  )}
                 </FixedSpaceRow>
               </FixedSpaceRow>
 
diff --git a/frontend/src/lib-customizations/defaults/employee/i18n/fi.tsx b/frontend/src/lib-customizations/defaults/employee/i18n/fi.tsx
index a291533e6e8..4b2b0c0d07e 100755
--- a/frontend/src/lib-customizations/defaults/employee/i18n/fi.tsx
+++ b/frontend/src/lib-customizations/defaults/employee/i18n/fi.tsx
@@ -847,6 +847,7 @@ export const fi = {
           'Toinen käyttäjä muokkaa asiakirjaa. Yritä myöhemmin uudelleen.',
         lockedErrorDetailed: (modifiedByName: string, opensAt: string) =>
           `Käyttäjä ${modifiedByName} on muokkaamassa asiakirjaa. Asiakirjan lukitus vapautuu ${opensAt} mikäli muokkaamista ei jatketa. Yritä myöhemmin uudelleen.`,
+        saveError: 'Asiakirjan tallentaminen epäonnistui.',
         preview: 'Esikatsele',
         publish: 'Julkaise huoltajalle',
         publishConfirmTitle: 'Haluatko varmasti julkaista huoltajalle?',