fix: prevent rendering before initial values store populated

dhis2 · Dec 6, 2024 · ef9051b · ef9051b
1 parent 6a98cff
commit ef9051b
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 10 deletions.
diff --git a/src/data-workspace/data-workspace.js b/src/data-workspace/data-workspace.js
@@ -108,7 +108,11 @@ export const DataWorkspace = ({ selectionHasNoFormMessage }) => {
     const dataValueSet = initialDataValuesFetch.data?.dataValues
 
     return (
-        <FormWrapper key={formKey} dataValueSet={dataValueSet}>
+        <FormWrapper
+            key={formKey}
+            dataValueSet={dataValueSet}
+            validFormKey={validFormKey}
+        >
             <div className={styles.wrapper}>
                 <main id="data-workspace" className={styles.formWrapper}>
                     <div className={styles.formArea}>

diff --git a/src/data-workspace/form-wrapper.js b/src/data-workspace/form-wrapper.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React, { useEffect, useState } from 'react'
+import React, { useLayoutEffect, useState } from 'react'
 import { useValueStore } from '../shared/index.js'
 
 function mapObject(input, callback) {
@@ -20,7 +20,7 @@ function createInitialValues(dataValueSet) {
     ])
 }
 
-export function FormWrapper({ children, dataValueSet }) {
+export function FormWrapper({ children, dataValueSet, validFormKey }) {
     // This prevents rerendering on every data value update, but also prevents
     // reinitializing (and populating) an empty form when going back online.
     // TODO: Reinitialize form `onSuccess` of dataValueSets query
@@ -31,15 +31,23 @@ export function FormWrapper({ children, dataValueSet }) {
         (state) => state.setInitialDataValues
     )
 
-    useEffect(() => {
-        if (setInitialDataValues && initialValues) {
-            setInitialDataValues(initialValues)
+    const initialValuesInStore =
+        useValueStore((state) => state.getInitialDataValues())?.formKey ===
+        validFormKey
+
+    useLayoutEffect(() => {
+        if (setInitialDataValues && initialValues && validFormKey) {
+            setInitialDataValues(initialValues, validFormKey)
         }
-    }, [initialValues, setInitialDataValues])
+    }, [initialValues, setInitialDataValues, validFormKey])
 
+    if (!initialValuesInStore) {
+        return null
+    }
     return <>{children}</>
 }
 FormWrapper.propTypes = {
     children: PropTypes.node,
     dataValueSet: PropTypes.object,
+    validFormKey: PropTypes.string,
 }
diff --git a/src/shared/stores/data-value-store.js b/src/shared/stores/data-value-store.js
@@ -24,11 +24,13 @@ export const useValueStore = create((set, get) => ({
             dataValueSet: values ?? initialState.dataValueSet,
         }),
     getInitialDataValue: ({ dataElementId, categoryOptionComboId }) => {
-        return get().initialDataValues?.[dataElementId]?.[categoryOptionComboId]
+        return get().initialDataValues?.values?.[dataElementId]?.[
+            categoryOptionComboId
+        ]
     },
     getInitialDataValues: () => get().initialDataValues,
-    setInitialDataValues: (values) => {
-        set({ initialDataValues: values })
+    setInitialDataValues: (values, formKey) => {
+        set({ initialDataValues: { values, formKey } })
     },
     getMinMaxValues: ({ dataElementId, categoryOptionComboId }) => {
         return get().dataValueSet?.minMaxValues?.find(