) => void
isRequired?: boolean
+ feedback?: string
+ isInvalid?: boolean
}
const TextInputWithLabelFormGroup = (props: Props) => {
- const { value, label, name, isEditable, onChange, placeholder, type, isRequired } = props
+ const {
+ value,
+ label,
+ name,
+ isEditable,
+ onChange,
+ placeholder,
+ type,
+ isRequired,
+ feedback,
+ isInvalid,
+ } = props
const id = `${name}TextInput`
return (
void
+ isInvalid?: boolean
+ patientGivenNameFeedback?: string
}
const GeneralInformation = (props: Props) => {
const { t } = useTranslation()
- const { patient, isEditable, onFieldChange, errorMessage } = props
+ const {
+ patient,
+ isEditable,
+ onFieldChange,
+ errorMessage,
+ isInvalid,
+ patientGivenNameFeedback,
+ } = props
const onSelectChange = (event: React.ChangeEvent, fieldName: string) =>
onFieldChange && onFieldChange(fieldName, event.target.value)
@@ -72,6 +81,8 @@ const GeneralInformation = (props: Props) => {
onInputElementChange(event, 'givenName')
}}
isRequired
+ isInvalid={isInvalid}
+ feedback={patientGivenNameFeedback}
/>
diff --git a/src/patients/edit/EditPatient.tsx b/src/patients/edit/EditPatient.tsx
index 89e9bbce82..ea45f85338 100644
--- a/src/patients/edit/EditPatient.tsx
+++ b/src/patients/edit/EditPatient.tsx
@@ -27,6 +27,8 @@ const EditPatient = () => {
const [patient, setPatient] = useState({} as Patient)
const [errorMessage, setErrorMessage] = useState('')
+ const [isInvalid, setIsInvalid] = useState(false)
+ const [patientGivenNameFeedback, setPatientGivenNameFeedback] = useState('')
const { patient: reduxPatient, isLoading } = useSelector((state: RootState) => state.patient)
useTitle(
@@ -68,7 +70,9 @@ const EditPatient = () => {
const onSave = () => {
if (!patient.givenName) {
- setErrorMessage(t('patient.errors.patientGivenNameRequired'))
+ setErrorMessage(t('patient.errors.patientGivenNameRequiredOnUpdate'))
+ setIsInvalid(true)
+ setPatientGivenNameFeedback(t('patient.errors.patientGivenNameFeedback'))
} else {
dispatch(
updatePatient(
@@ -100,6 +104,8 @@ const EditPatient = () => {
patient={patient}
onFieldChange={onFieldChange}
errorMessage={errorMessage}
+ isInvalid={isInvalid}
+ patientGivenNameFeedback={patientGivenNameFeedback}
/>
diff --git a/src/patients/new/NewPatient.tsx b/src/patients/new/NewPatient.tsx
index 70cc1de882..5e60756fbe 100644
--- a/src/patients/new/NewPatient.tsx
+++ b/src/patients/new/NewPatient.tsx
@@ -23,6 +23,8 @@ const NewPatient = () => {
const [patient, setPatient] = useState({} as Patient)
const [errorMessage, setErrorMessage] = useState('')
+ const [isInvalid, setIsInvalid] = useState(false)
+ const [patientGivenNameFeedback, setPatientGivenNameFeedback] = useState('')
useTitle(t('patients.newPatient'))
useAddBreadcrumbs(breadcrumbs, true)
@@ -42,7 +44,9 @@ const NewPatient = () => {
const onSave = () => {
if (!patient.givenName) {
- setErrorMessage(t('patient.errors.patientGivenNameRequired'))
+ setErrorMessage(t('patient.errors.patientGivenNameRequiredOnCreate'))
+ setIsInvalid(true)
+ setPatientGivenNameFeedback(t('patient.errors.patientGivenNameFeedback'))
} else {
dispatch(
createPatient(
@@ -70,6 +74,8 @@ const NewPatient = () => {
patient={patient}
onFieldChange={onFieldChange}
errorMessage={errorMessage}
+ isInvalid={isInvalid}
+ patientGivenNameFeedback={patientGivenNameFeedback}
/>