fix: use mutators for lastSyncValue

Author: Birkbjo

package.json

@@ -53,6 +53,7 @@
         "classnames": "^2.3.1",
         "expr-eval": "^2.0.2",
         "final-form": "^4.20.6",
+        "final-form-set-field-data": "^1.0.2",
         "history": "^5.1.0",
         "html-react-parser": "^1.4.8",
         "idb-keyval": "^6.1.0",

src/data-workspace/data-entry-cell/inner-wrapper.js

@@ -2,7 +2,7 @@ import { IconMore16, colors } from '@dhis2/ui'
 import { useIsMutating } from '@tanstack/react-query'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
-import React, { useEffect } from 'react'
+import React from 'react'
 import { useField } from 'react-final-form'
 import {
     mutationKeys as dataValueMutationKeys,
@@ -50,8 +50,6 @@ export function InnerWrapper({
     fieldname,
     deId,
     cocId,
-    syncStatus,
-    setSyncStatus,
 }) {
     const hasComment = useValueStore((state) =>
         state.hasComment({
@@ -63,34 +61,17 @@ export function InnerWrapper({
     const highlighted = item && deId === item.de.id && cocId === item.coc.id
     const {
         input: { value },
-        meta: { invalid, active, dirty },
+        meta: { invalid, active, data },
     } = useField(fieldname, {
         subscription: {
             value: true,
             invalid: true,
             active: true,
             dirty: true,
+            data: true,
         },
     })
-    useEffect(
-        () =>
-            setSyncStatus((prev) => ({
-                ...prev,
-                lastSyncedValue: value,
-            })),
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        [setSyncStatus]
-    )
-    // clear sync-status when field changes
-    useEffect(() => {
-        const { synced, lastSyncedValue } = syncStatus
-        if (synced && lastSyncedValue !== value) {
-            setSyncStatus((prev) => ({ ...prev, synced: false }))
-        } else if (!synced && dirty && lastSyncedValue === value) {
-            setSyncStatus((prev) => ({ ...prev, synced: true }))
-        }
-    }, [value, syncStatus, setSyncStatus, dirty])
-
+    const synced = data.lastSyncedValue === value
     // Detect if this field is sending data
     const dataValueParams = useDataValueParams({ deId, cocId })
     const activeMutations = useIsMutating({
@@ -101,7 +82,7 @@ export function InnerWrapper({
     // see https://dhis2.atlassian.net/browse/TECH-1316
     const cellStateClassName = invalid
         ? styles.invalid
-        : activeMutations === 0 && syncStatus.synced
+        : activeMutations === 0 && synced
         ? styles.synced
         : null
 
@@ -117,7 +98,7 @@ export function InnerWrapper({
             {children}
             <SyncStatusIndicator
                 isLoading={activeMutations > 0}
-                isSynced={syncStatus.synced}
+                isSynced={synced}
             />
             <CommentIndicator hasComment={hasComment} />
         </div>
@@ -130,9 +111,4 @@ InnerWrapper.propTypes = {
     disabled: PropTypes.bool,
     fieldname: PropTypes.string,
     locked: PropTypes.bool,
-    setSyncStatus: PropTypes.func,
-    syncStatus: PropTypes.shape({
-        lastSyncedValue: PropTypes.any,
-        synced: PropTypes.bool,
-    }),
 }

src/data-workspace/final-form-wrapper.js

@@ -1,3 +1,4 @@
+import setFieldData from 'final-form-set-field-data'
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
 import { Form } from 'react-final-form'
@@ -37,6 +38,7 @@ export function FinalFormWrapper({ children, dataValueSet }) {
             initialValues={initialValues}
             subscriptions={subscriptions}
             keepDirtyOnReinitialize
+            mutators={{ setFieldData }}
         >
             {() => children}
         </Form>

src/data-workspace/inputs/generic-input.js

@@ -1,7 +1,7 @@
 import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
-import { useField } from 'react-final-form'
+import { useField, useForm } from 'react-final-form'
 import {
     NUMBER_TYPES,
     VALUE_TYPES,
@@ -25,8 +25,6 @@ export const GenericInput = ({
     fieldname,
     deId,
     cocId,
-    setSyncStatus,
-    syncStatus,
     valueType,
     onKeyDown,
     onFocus,
@@ -47,9 +45,10 @@ export const GenericInput = ({
             return value.trim()
         }
     }
+    const form = useForm()
     const { input, meta } = useField(fieldname, {
         validate: validateByValueTypeWithLimits(valueType, limits),
-        subscription: { value: true, dirty: true, valid: true },
+        subscription: { value: true, dirty: true, valid: true, data: true },
         format: formatValue,
         formatOnBlur: true,
         // This is require to ensure form is validated on first page load
@@ -65,8 +64,7 @@ export const GenericInput = ({
             { value: value || '' },
             {
                 onSuccess: () => {
-                    setSyncStatus({
-                        synced: true,
+                    form.mutators.setFieldData(fieldname, {
                         lastSyncedValue: value,
                     })
                 },
@@ -78,7 +76,7 @@ export const GenericInput = ({
         const { value } = input
         const formattedValue = formatValue(value)
         const { valid } = meta
-        if (valid && formattedValue !== syncStatus.lastSyncedValue) {
+        if (valid && formattedValue !== meta.data.lastSyncedValue) {
             syncData(formattedValue)
         }
     }

yarn.lock

@@ -8446,6 +8446,11 @@ filter-obj@^1.1.0:
   resolved "https://registry.yarnpkg.com/filter-obj/-/filter-obj-1.1.0.tgz#9b311112bc6c6127a16e016c6c5d7f19e0805c5b"
   integrity sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==
 
+final-form-set-field-data@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/final-form-set-field-data/-/final-form-set-field-data-1.0.2.tgz#ce19095af5d607148c1e6ce3403d75d40223d848"
+  integrity sha512-gAnENimyQ5GW3OEGca5pbwm4lYshW2orzfBlPUYqzcm7ZxkQrVO8FqCAgEcCM+Rq9U1OU0q+D+UkqETvvDY6jw==
+
 final-form@^4.20.2, final-form@^4.20.6:
   version "4.20.7"
   resolved "https://registry.yarnpkg.com/final-form/-/final-form-4.20.7.tgz#e7e2eb5fd952951d4fe6153d46043da2d68b207e"