@@ -128,7 +136,7 @@ export const DataWorkspace = ({ selectionHasNoFormMessage }) => {
-
+
)
}
diff --git a/src/data-workspace/entry-form.js b/src/data-workspace/entry-form.js
index 387a8011a..b0d12f47d 100644
--- a/src/data-workspace/entry-form.js
+++ b/src/data-workspace/entry-form.js
@@ -3,12 +3,7 @@ import { NoticeBox } from '@dhis2/ui'
import cx from 'classnames'
import PropTypes from 'prop-types'
import React from 'react'
-import { useFormState } from 'react-final-form'
-import {
- LockedStates,
- useLockedContext,
- useEntryFormStore,
-} from '../shared/index.js'
+import { LockedStates, useLockedContext } from '../shared/index.js'
import { FORM_TYPES } from './constants.js'
import { CustomForm } from './custom-form/index.js'
import { DefaultForm } from './default-form.js'
@@ -67,7 +62,6 @@ export const EntryForm = React.memo(function EntryForm({ dataSet }) {
formType={formType}
/>
)}
- {
- const setFormErrors = useEntryFormStore((state) => state.setErrors)
-
- useFormState({
- onChange: (formState) => {
- setFormErrors(formState.errors)
- },
- subscription: {
- errors: true,
- },
- })
- return null
-}
-
EntryForm.propTypes = {
dataSet: PropTypes.shape({
displayName: PropTypes.string,
diff --git a/src/data-workspace/final-form-wrapper.js b/src/data-workspace/form-wrapper.js
similarity index 57%
rename from src/data-workspace/final-form-wrapper.js
rename to src/data-workspace/form-wrapper.js
index 81df658d9..eb968d719 100644
--- a/src/data-workspace/final-form-wrapper.js
+++ b/src/data-workspace/form-wrapper.js
@@ -1,7 +1,6 @@
-import setFieldData from 'final-form-set-field-data'
import PropTypes from 'prop-types'
-import React, { useState } from 'react'
-import { Form } from 'react-final-form'
+import React, { useEffect, useState } from 'react'
+import { useValueStore } from '../shared/index.js'
function mapObject(input, callback) {
return Object.fromEntries(Object.entries(input).map(callback))
@@ -21,29 +20,34 @@ function createInitialValues(dataValueSet) {
])
}
-const onSubmit = (values, form) => console.log({ values, form })
-
-const subscriptions = {}
-
-export function FinalFormWrapper({ 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
// See https://dhis2.atlassian.net/browse/TECH-1357
const [initialValues] = useState(() => createInitialValues(dataValueSet))
- return (
-
+
+ const setInitialDataValues = useValueStore(
+ (state) => state.setInitialDataValues
)
+
+ const initialValuesInStore =
+ useValueStore((state) => state.getInitialDataValues())?.formKey ===
+ validFormKey
+
+ useEffect(() => {
+ if (setInitialDataValues && initialValues && validFormKey) {
+ setInitialDataValues(initialValues, validFormKey)
+ }
+ }, [initialValues, setInitialDataValues, validFormKey])
+
+ if (!initialValuesInStore) {
+ return null
+ }
+ return <>{children}
}
-FinalFormWrapper.propTypes = {
+FormWrapper.propTypes = {
children: PropTypes.node,
dataValueSet: PropTypes.object,
+ validFormKey: PropTypes.string,
}
diff --git a/src/data-workspace/indicators-table-body/compute-indicator-value.js b/src/data-workspace/indicators-table-body/compute-indicator-value.js
index e9221529a..5e0014cdd 100644
--- a/src/data-workspace/indicators-table-body/compute-indicator-value.js
+++ b/src/data-workspace/indicators-table-body/compute-indicator-value.js
@@ -1,5 +1,4 @@
import { Parser } from 'expr-eval'
-import { getIn } from 'final-form'
import { parseFieldId as parseFieldOperand } from '../get-field-id.js'
/**
@@ -38,9 +37,9 @@ const getDataElementTotalValue = (dataElementCocValues) => {
return 0
}
- return Object.values(dataElementCocValues).reduce((sum, value) => {
- if (!isNaN(value)) {
- sum = sum + Number(value)
+ return Object.values(dataElementCocValues).reduce((sum, valueObject) => {
+ if (!isNaN(valueObject?.value)) {
+ sum = sum + Number(valueObject?.value)
}
return sum
}, 0)
@@ -69,7 +68,7 @@ const getDataElementTotalValue = (dataElementCocValues) => {
* @param {Object} values ReactFinalForm `values`
* @returns {string} a parsed expression template
*/
-const parseExpressionTemplate = (expression, values) => {
+const parseExpressionTemplate = (expression, dataValues) => {
const matches = expression.match(operandInterpolationPattern)
/*
@@ -83,13 +82,14 @@ const parseExpressionTemplate = (expression, values) => {
return matches.reduce((substitudedExpression, match) => {
const operand = match.replace(/[#{}]/g, '')
- const { categoryOptionComboId } = parseFieldOperand(operand)
+ const { dataElementId, categoryOptionComboId } =
+ parseFieldOperand(operand)
const value =
(categoryOptionComboId
? // For COCs we read the data directly from the form values
- getIn(values, operand)
+ dataValues?.[dataElementId]?.[categoryOptionComboId]?.value
: // For data elements we need the sum of all COC form values
- getDataElementTotalValue(values[operand])) || 0
+ getDataElementTotalValue(dataValues?.[dataElementId])) || 0
return substitudedExpression.replace(match, value)
}, expression)
@@ -119,7 +119,7 @@ export const round = (value, decimals) => {
* @param {string} options.denominator Indicator expression template
* @param {string} options.numerator Indicator expression template
* @param {number} options.factor Indicator multiplier
- * @param {{values: object}} options.formState ReactFinalForm formState
+ * @param {Object} options.dataValues {[de]:{[coc]:{...rest,value}}}
* @returns {number} Indicator value
*/
@@ -127,16 +127,13 @@ export const computeIndicatorValue = ({
denominator,
numerator,
factor,
- formState,
+ dataValues,
decimals,
}) => {
- const numeratorExpression = parseExpressionTemplate(
- numerator,
- formState.values
- )
+ const numeratorExpression = parseExpressionTemplate(numerator, dataValues)
const denominatorExpression = parseExpressionTemplate(
denominator,
- formState.values
+ dataValues
)
const numeratorValue = evaluate(numeratorExpression)
const denominatorValue = evaluate(denominatorExpression)
diff --git a/src/data-workspace/indicators-table-body/compute-indicator-value.test.js b/src/data-workspace/indicators-table-body/compute-indicator-value.test.js
index 1027b8189..40ee661c3 100644
--- a/src/data-workspace/indicators-table-body/compute-indicator-value.test.js
+++ b/src/data-workspace/indicators-table-body/compute-indicator-value.test.js
@@ -1,25 +1,23 @@
import { computeIndicatorValue, round } from './compute-indicator-value.js'
describe('computeIndicatorValue', () => {
- const formState = {
- values: {
- a: {
- a1: '1',
- a2: '2',
- },
- b: {
- b1: '2',
- },
- c: {
- c1: '3',
- },
- d: {
- d1: '1',
- d2: '1',
- d3: '1',
- d4: '1',
- d5: '1',
- },
+ const dataValues = {
+ a: {
+ a1: { value: '1' },
+ a2: { value: '2' },
+ },
+ b: {
+ b1: { value: '2' },
+ },
+ c: {
+ c1: { value: '3' },
+ },
+ d: {
+ d1: { value: '1' },
+ d2: { value: '1' },
+ d3: { value: '1' },
+ d4: { value: '1' },
+ d5: { value: '1' },
},
}
it('produces a correct value for category option combos', () => {
@@ -27,7 +25,7 @@ describe('computeIndicatorValue', () => {
numerator: '#{a.a1}+#{b.b1}*#{c.c1}', // 1+2*3=7
denominator: '#{d.d1}*#{c.c1}', // 1*3=3
factor: 1,
- formState,
+ dataValues,
})
expect(value).toBe(7 / 3)
})
@@ -36,7 +34,7 @@ describe('computeIndicatorValue', () => {
numerator: '#{a}+#{b.b1}*#{c.c1}', // 3+2*3=9
denominator: '#{d}*#{c}', // 5*3=15
factor: 1,
- formState,
+ dataValues,
})
expect(value).toBe(9 / 15)
})
@@ -45,7 +43,7 @@ describe('computeIndicatorValue', () => {
numerator: '#{a}+#{b.b1}*#{c.c1}', // 3+2*3=9
denominator: '#{d}*#{c}', // 5*3=15
factor: 100,
- formState,
+ dataValues,
})
expect(value).toBe((9 / 15) * 100)
})
@@ -54,7 +52,7 @@ describe('computeIndicatorValue', () => {
numerator: '#{nothing}',
denominator: '#{nothing_also}',
factor: 1,
- formState,
+ dataValues,
})
expect(value).toBe('')
})
@@ -63,7 +61,7 @@ describe('computeIndicatorValue', () => {
numerator: '#{a}+#{b.b1}*#{c.c1}', // 3+2*3=9
denominator: '#{nothing}',
factor: 1,
- formState,
+ dataValues,
})
expect(value).toBe('')
})
@@ -72,7 +70,7 @@ describe('computeIndicatorValue', () => {
numerator: '#{a.a1}', // 1
denominator: '#{c.c1}', // 3
factor: 100,
- formState,
+ dataValues,
decimals: 3,
})
expect(value).toBe(33.333)
diff --git a/src/data-workspace/indicators-table-body/indicator-table-cell.js b/src/data-workspace/indicators-table-body/indicator-table-cell.js
index a1b25511a..977befcac 100644
--- a/src/data-workspace/indicators-table-body/indicator-table-cell.js
+++ b/src/data-workspace/indicators-table-body/indicator-table-cell.js
@@ -1,7 +1,6 @@
import { TableCell } from '@dhis2/ui'
import PropTypes from 'prop-types'
import React from 'react'
-import { useForm } from 'react-final-form'
import { useBlurredField } from '../../shared/index.js'
import styles from '../table-body.module.css'
import { useIndicatorValue } from './use-indicator-value.js'
@@ -12,13 +11,11 @@ export const IndicatorTableCell = ({
numerator,
decimals,
}) => {
- const form = useForm()
const blurredField = useBlurredField()
const indicatorValue = useIndicatorValue({
blurredField,
denominator,
factor,
- form,
numerator,
decimals,
})
diff --git a/src/data-workspace/indicators-table-body/indicators-table-body.test.js b/src/data-workspace/indicators-table-body/indicators-table-body.test.js
index 4a1990d05..a81c012d9 100644
--- a/src/data-workspace/indicators-table-body/indicators-table-body.test.js
+++ b/src/data-workspace/indicators-table-body/indicators-table-body.test.js
@@ -1,7 +1,7 @@
import { getAllByTestId, queryAllByTestId } from '@testing-library/react'
import React from 'react'
import { render } from '../../test-utils/index.js'
-import { FinalFormWrapper } from '../final-form-wrapper.js'
+import { FormWrapper } from '../form-wrapper.js'
import { IndicatorsTableBody } from './indicators-table-body.js'
const tableIndicators = [
@@ -27,9 +27,7 @@ describe('
- {children}
-
+ {children}
),
}
)
@@ -53,9 +51,7 @@ describe('
- {children}
-
+ {children}
),
}
)
@@ -80,9 +76,7 @@ describe('
- {children}
-
+ {children}
),
}
)
@@ -107,9 +101,7 @@ describe('
- {children}
-
+ {children}
),
}
)
diff --git a/src/data-workspace/indicators-table-body/use-indicator-value.js b/src/data-workspace/indicators-table-body/use-indicator-value.js
index ffb8d143d..6e916de31 100644
--- a/src/data-workspace/indicators-table-body/use-indicator-value.js
+++ b/src/data-workspace/indicators-table-body/use-indicator-value.js
@@ -1,4 +1,5 @@
import { useMemo, useRef } from 'react'
+import { useValueStore } from '../../shared/index.js'
import { parseFieldId as parseFieldOperand } from '../get-field-id.js'
import {
computeIndicatorValue,
@@ -13,7 +14,6 @@ import {
* @param {string} options.blurredField The key of the blurred field
* @param {string} options.denominator Indicator expression template
* @param {number} options.factor Indicator multiplier
- * @param {Object} options.form Form instance returned by `useForm()`
* @param {string} options.numerator Indicator expression template
* @returns {number} Indicator value
*/
@@ -21,11 +21,11 @@ export const useIndicatorValue = ({
blurredField,
denominator,
factor,
- form,
numerator,
decimals,
}) => {
const indicatorValueRef = useRef(null)
+ const dataValues = useValueStore((state) => state.getDataValues())
const affectedDataElementsLookup = useMemo(
() =>
[denominator, numerator].reduce((lookup, expression) => {
@@ -57,7 +57,7 @@ export const useIndicatorValue = ({
denominator,
numerator,
factor,
- formState: form.getState(),
+ dataValues,
decimals,
})
}
@@ -68,7 +68,7 @@ export const useIndicatorValue = ({
blurredField,
denominator,
factor,
- form,
+ dataValues,
numerator,
decimals,
])
diff --git a/src/data-workspace/inputs/boolean-radios.js b/src/data-workspace/inputs/boolean-radios.js
index 1d264b0ba..f504b338b 100644
--- a/src/data-workspace/inputs/boolean-radios.js
+++ b/src/data-workspace/inputs/boolean-radios.js
@@ -1,103 +1,72 @@
import i18n from '@dhis2/d2-i18n'
import { Button, Radio } from '@dhis2/ui'
import cx from 'classnames'
-import React from 'react'
-import { useField } from 'react-final-form'
+import React, { useEffect, useState } from 'react'
import { useSetDataValueMutation } from '../../shared/index.js'
import styles from './inputs.module.css'
-import { convertCallbackSignatures, InputPropTypes } from './utils.js'
+import { InputPropTypes, convertBooleanValue } from './utils.js'
-// ? Will this fail to reflect a value on the server if it's not exactly `true` or `false`?
-// todo: may need to handle that when mapping server values to form initial values, e.g.
-// Currently it's working okay
-// boolean: accepts 1, 0, 'true', 'false'
-// Ex: if (dv.valueType === boolean) { formValue = dv.value ... etc }
-// does `isEqual` prop help make 1/true and 0/false/'' equal?
export const BooleanRadios = ({
- fieldname,
- form,
deId,
cocId,
disabled,
locked,
onKeyDown,
onFocus,
+ onBlur,
+ setValueSynced,
+ initialValue,
}) => {
- const useFieldWithPatchedOnFocus = (...args) => {
- const { input, ...rest } = useField(...args)
- return {
- ...rest,
- input: {
- ...input,
- onFocus: (...args) => {
- input.onFocus(...args)
- onFocus?.(...args)
- },
- },
- }
- }
- const yesField = useFieldWithPatchedOnFocus(fieldname, {
- type: 'radio',
- value: 'true',
- subscription: { value: true },
- })
-
- const noField = useFieldWithPatchedOnFocus(fieldname, {
- type: 'radio',
- value: 'false',
- subscription: { value: true },
- })
-
- // Used for the 'clear' button, but works
- const clearField = useFieldWithPatchedOnFocus(fieldname, {
- type: 'radio',
- value: '',
- subscription: { value: true },
- })
+ const [value, setValue] = useState(() => convertBooleanValue(initialValue))
+ const [lastSyncedValue, setLastSyncedValue] = useState(() =>
+ convertBooleanValue(initialValue)
+ )
+ const [syncTouched, setSyncTouched] = useState(false)
- const {
- input: { value: fieldvalue },
- meta: { valid, data },
- } = useField(fieldname, {
- subscription: { value: true, valid: true, data: true },
- })
+ useEffect(() => {
+ if (syncTouched) {
+ setValueSynced(value === lastSyncedValue)
+ }
+ }, [value, lastSyncedValue, syncTouched, setValueSynced])
const { mutate } = useSetDataValueMutation({ deId, cocId })
- const syncData = (value) => {
+
+ const syncData = (newValue) => {
+ setSyncTouched(true)
// todo: Here's where an error state could be set: ('onError')
mutate(
// Empty values need an empty string
- { value: value || '' },
+ { value: newValue || '' },
{
onSuccess: () => {
- form.mutators.setFieldData(fieldname, {
- lastSyncedValue: value,
- })
+ setLastSyncedValue(newValue)
},
}
)
}
- const clearButtonProps = convertCallbackSignatures(clearField.input)
- delete clearButtonProps.type
-
- const handleChange = (value) => {
+ const handleChange = (newValue) => {
+ setValue(newValue)
// If this value has changed, sync it to server if valid
- if (valid && value !== data.lastSyncedValue) {
- syncData(value)
+ // we skip validation as the values are limited to 'false', 'true', ''
+ if (newValue !== lastSyncedValue) {
+ syncData(newValue)
}
}
return (
-
+
{
+ checked={value === 'true'}
+ onChange={() => {
handleChange('true')
- yesField.input.onChange(e)
}}
onKeyDown={onKeyDown}
disabled={disabled || locked}
@@ -106,10 +75,9 @@ export const BooleanRadios = ({
dense
label={i18n.t('No')}
value={'false'}
- {...convertCallbackSignatures(noField.input)}
- onChange={(_, e) => {
+ checked={value === 'false'}
+ onChange={() => {
handleChange('false')
- noField.input.onChange(e)
}}
onKeyDown={onKeyDown}
disabled={disabled || locked}
@@ -119,15 +87,11 @@ export const BooleanRadios = ({
secondary
className={cx(styles.whiteButton, {
// If no value to clear, hide but still reserve space
- [styles.hidden]: !fieldvalue,
+ [styles.hidden]: value === '',
})}
- // Callback signatures are transformed above
- {...clearButtonProps}
- // On click, set field value to '', sync, and blur
onClick={() => {
- clearField.input.onChange('')
- syncData('')
- clearField.input.onBlur()
+ handleChange('')
+ onFocus()
}}
onKeyDown={onKeyDown}
disabled={disabled || locked}
diff --git a/src/data-workspace/inputs/boolean-radios.test.js b/src/data-workspace/inputs/boolean-radios.test.js
index 7cd9e519d..850cff772 100644
--- a/src/data-workspace/inputs/boolean-radios.test.js
+++ b/src/data-workspace/inputs/boolean-radios.test.js
@@ -1,6 +1,5 @@
import userEvent from '@testing-library/user-event'
import React from 'react'
-import { useField } from 'react-final-form'
import { useSetDataValueMutation } from '../../shared/index.js'
import { render } from '../../test-utils/render.js'
import { BooleanRadios } from './boolean-radios.js'
@@ -17,41 +16,12 @@ describe('boolean-radios', () => {
setSyncStatus: jest.fn(),
onFocus: jest.fn(),
onKeyDown: jest.fn(),
+ onBlur: jest.fn(),
+ setValueSynced: jest.fn(),
}
const mutate = jest.fn()
- const mockUseField = (value) => {
- useField.mockImplementation(() => {
- return {
- input: {
- name: 'DgnwZliJuh5.HllvX50cXC0',
- value,
- onFocus: jest.fn(),
- onChange: jest.fn(),
- onBlur: jest.fn(),
- },
- meta: {
- active: false,
- data: {},
- dirty: true,
- dirtySinceLastSubmit: false,
- initial: '',
- invalid: false,
- modified: true,
- modifiedSinceLastSubmit: false,
- pristine: true,
- submitFailed: false,
- submitSucceeded: false,
- submitting: false,
- touched: true,
- valid: true,
- validating: false,
- visited: true,
- },
- }
- })
- }
beforeEach(() => {
useSetDataValueMutation.mockReturnValue({
mutate,
@@ -61,23 +31,27 @@ describe('boolean-radios', () => {
afterEach(jest.clearAllMocks)
it('should show Clear button if Yes is selected', () => {
- mockUseField('true')
- const { getByText } = render(
{
onFocus()
- input.onFocus()
}}
className={styles.dateInputContainer}
>
{
const selectedDate = date?.calendarDateString
@@ -88,7 +83,6 @@ export const DateInput = ({
calendar
)
: ''
- input.onChange(selectedDate)
handleChange(selectedDate)
}}
locale={keyUiLocale}
diff --git a/src/data-workspace/inputs/date-input.test.js b/src/data-workspace/inputs/date-input.test.js
index 27905501e..054923deb 100644
--- a/src/data-workspace/inputs/date-input.test.js
+++ b/src/data-workspace/inputs/date-input.test.js
@@ -1,7 +1,5 @@
import { useConfig } from '@dhis2/app-runtime'
-import { ReactFinalForm } from '@dhis2/ui'
import userEvent from '@testing-library/user-event'
-import PropTypes from 'prop-types'
import React from 'react'
import { useSetDataValueMutation, useUserInfo } from '../../shared/index.js'
import { render } from '../../test-utils/index.js'
@@ -26,34 +24,17 @@ jest.mock('@dhis2/app-runtime', () => {
const DE = 'rkAZZFGFEQ7'
const COC = 'HllvX50cXC0'
-const { Form } = ReactFinalForm
-
-const FormWrapper = ({ initialValues, children }) => (
-
-)
-
-FormWrapper.propTypes = {
- children: PropTypes.node,
- initialValues: PropTypes.object,
-}
-
describe('date input field', () => {
const props = {
cocId: COC,
deId: DE,
disabled: undefined,
fieldname: `${DE}.${COC}`,
- form: {},
locked: false,
onFocus: jest.fn(),
onKeyDown: jest.fn(),
+ onBlur: jest.fn(),
+ setValueSynced: jest.fn(),
}
const mutate = jest.fn()
@@ -87,9 +68,7 @@ describe('date input field', () => {
})
const { getByText, getByRole, getByTestId, queryByTestId } = render(
-
-
+
-
+
-
+
-
- )
+ const { getByText, getByRole } = render(
-
+
-
- )
+ const { getByText, getByRole } = render(
-
+ {
const DE = 'rkAZZFGFEQ7'
const COC = 'HllvX50cXC0'
-const { Form } = ReactFinalForm
-
-const FormWrapper = ({ initialValues, children }) => (
-
-)
-
-FormWrapper.propTypes = {
- children: PropTypes.node,
- initialValues: PropTypes.object,
-}
-
describe('date input field', () => {
const props = {
cocId: COC,
deId: DE,
disabled: undefined,
fieldname: `${DE}.${COC}`,
- form: {},
locked: false,
onFocus: jest.fn(),
onKeyDown: jest.fn(),
+ onBlur: jest.fn(),
+ setValueSynced: jest.fn(),
}
const mutate = jest.fn()
@@ -88,9 +69,7 @@ describe('date input field', () => {
})
const { getByText, getByRole, getByTestId, queryByTestId } = render(
-
-
+
-
+
-
+
-
+
-
- )
+ } = render(
-
+
-
+
-
+ {
- input.onFocus(...args)
onFocus?.(...args)
}}
- onBlur={input.onBlur}
+ onBlur={onBlur}
onKeyDown={onKeyDown}
small
buttonLabel={
@@ -164,7 +166,3 @@ FileResourceInput.propTypes = {
...InputPropTypes,
image: PropTypes.bool,
}
-
-export const ImageInput = (props) => {
- return