feat(patient): provide better feedback on patient form

src/__tests__/patients/GeneralInformation.test.tsx

@@ -17,14 +17,14 @@ describe('Error handling', () => {
         <GeneralInformation
           patient={{} as Patient}
           isEditable
-          errorMessage="patient.errors.patientGivenNameRequired"
+          errorMessage="patient.errors.patientGivenNameRequiredOnCreate"
         />
       </Router>,
     )
 
     const errorMessage = wrapper.find(Alert)
     expect(errorMessage).toBeTruthy()
-    expect(errorMessage.prop('message')).toMatch('patient.errors.patientGivenNameRequired')
+    expect(errorMessage.prop('message')).toMatch('patient.errors.patientGivenNameRequiredOnCreate')
   })
 })
 

src/__tests__/patients/new/NewPatient.test.tsx

@@ -95,8 +95,9 @@ describe('New Patient', () => {
 
     wrapper.update()
     expect(wrapper.find(GeneralInformation).prop('errorMessage')).toMatch(
-      'patient.errors.patientGivenNameRequired',
+      'patient.errors.patientGivenNameRequiredOnCreate',
     )
+    expect(wrapper.update.isInvalid === true)
   })
 
   it('should dispatch createPatient when save button is clicked', async () => {

src/components/input/TextInputWithLabelFormGroup.tsx

@@ -10,16 +10,31 @@ interface Props {
   placeholder?: string
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => 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 (
     <div className="form-group">
       <Label text={label} htmlFor={id} isRequired={isRequired} />
       <TextInput
+        feedback={feedback}
         id={id}
+        isInvalid={isInvalid}
         value={value}
         disabled={!isEditable}
         onChange={onChange}

src/locales/enUs/translations/patient/index.ts

@@ -69,7 +69,9 @@ export default {
       private: 'Private',
     },
     errors: {
-      patientGivenNameRequired: 'Patient Given Name is required.',
+      patientGivenNameRequiredOnCreate: 'Could not create new patient.',
+      patientGivenNameRequiredOnUpdate: 'Could not update patient.',
+      patientGivenNameFeedback: 'Given Name is required.',
     },
   },
 }

src/locales/ptBr/translations/patient/index.ts

@@ -64,7 +64,10 @@ export default {
       private: 'Particular',
     },
     errors: {
-      patientGivenNameRequired: 'Nome do Paciente é necessário.',
+      patientGivenNameRequiredOnCreate: 'Nome do Paciente é necessário.',
+      // todo Portuguese translation
+      patientGivenNameRequiredOnUpdate: '',
+      patientGivenNameFeedback: '',
     },
   },
 }

src/patients/GeneralInformation.tsx

@@ -14,11 +14,20 @@ interface Props {
   isEditable?: boolean
   errorMessage?: string
   onFieldChange?: (key: string, value: string | boolean) => 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<HTMLSelectElement>, fieldName: string) =>
     onFieldChange && onFieldChange(fieldName, event.target.value)
@@ -72,6 +81,8 @@ const GeneralInformation = (props: Props) => {
                 onInputElementChange(event, 'givenName')
               }}
               isRequired
+              isInvalid={isInvalid}
+              feedback={patientGivenNameFeedback}
             />
           </div>
           <div className="col-md-4">

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}
       />
       <div className="row float-right">
         <div className="btn-group btn-group-lg">

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}
       />
       <div className="row float-right">
         <div className="btn-group btn-group-lg mt-3">