Skip to content
This repository has been archived by the owner on Jan 9, 2023. It is now read-only.

Commit

Permalink
feat(patient): provide better feedback on patient form (#1938)
Browse files Browse the repository at this point in the history
  • Loading branch information
rubencgt authored Mar 24, 2020
1 parent 51043a6 commit 37ac2b5
Show file tree
Hide file tree
Showing 8 changed files with 53 additions and 9 deletions.
4 changes: 2 additions & 2 deletions src/__tests__/patients/GeneralInformation.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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')
})
})

Expand Down
3 changes: 2 additions & 1 deletion src/__tests__/patients/new/NewPatient.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down
17 changes: 16 additions & 1 deletion src/components/input/TextInputWithLabelFormGroup.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
4 changes: 3 additions & 1 deletion src/locales/enUs/translations/patient/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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.',
},
},
}
5 changes: 4 additions & 1 deletion src/locales/ptBr/translations/patient/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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: '',
},
},
}
13 changes: 12 additions & 1 deletion src/patients/GeneralInformation.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -72,6 +81,8 @@ const GeneralInformation = (props: Props) => {
onInputElementChange(event, 'givenName')
}}
isRequired
isInvalid={isInvalid}
feedback={patientGivenNameFeedback}
/>
</div>
<div className="col-md-4">
Expand Down
8 changes: 7 additions & 1 deletion src/patients/edit/EditPatient.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -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">
Expand Down
8 changes: 7 additions & 1 deletion src/patients/new/NewPatient.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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(
Expand Down Expand Up @@ -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">
Expand Down

1 comment on commit 37ac2b5

@vercel
Copy link

@vercel vercel bot commented on 37ac2b5 Mar 24, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.