feat(patients): better form feedback for add allergy (#1945)

HospitalRun · Mar 29, 2020 · d6904e7 · d6904e7 · vercel · Mar 29, 2020
1 parent 19768a1
commit d6904e7
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 2 deletions.
diff --git a/src/__tests__/patients/allergies/NewAllergyModal.test.tsx b/src/__tests__/patients/allergies/NewAllergyModal.test.tsx
@@ -84,7 +84,7 @@ describe('New Allergy Modal', () => {
 
  expect(wrapper.find(Alert)).toHaveLength(1)
  expect(wrapper.find(Alert).prop('title')).toEqual('states.error')
- expect(wrapper.find(Alert).prop('message')).toContain('patient.allergies.error.nameRequired')
+ expect(wrapper.find(Alert).prop('message')).toContain('patient.allergies.error.unableToAdd')
  })
  })
 })
diff --git a/src/locales/enUs/translations/patient/index.ts b/src/locales/enUs/translations/patient/index.ts
@@ -42,6 +42,7 @@ export default {
  new: 'Add Allergy',
  error: {
  nameRequired: 'Name is required.',
+ unableToAdd: 'Unable to add allergy.',
  },
  warning: {
  noAllergies: 'No Allergies',

diff --git a/src/patients/allergies/NewAllergyModal.tsx b/src/patients/allergies/NewAllergyModal.tsx
@@ -14,6 +14,8 @@ const NewAllergyModal = (props: NewAllergyModalProps) => {
  const { show, onCloseButtonClick, onSave } = props
  const [allergy, setAllergy] = useState({ name: '' })
  const [errorMessage, setErrorMessage] = useState('')
+ const [isAllergyNameInvalid, setIsAllergynameInvalid] = useState(false)
+ const [nameRequiredFeedback, setNameRequiredFeedback] = useState('')
  const { t } = useTranslation()
 
  useEffect(() => {
@@ -29,7 +31,9 @@ const NewAllergyModal = (props: NewAllergyModalProps) => {
  const onSaveButtonClick = () => {
  let newErrorMessage = ''
  if (!allergy.name) {
- newErrorMessage += `${t('patient.allergies.error.nameRequired')} `
+ newErrorMessage += `${t('patient.allergies.error.unableToAdd')} `
+ setIsAllergynameInvalid(true)
+ setNameRequiredFeedback(`${t('patient.allergies.error.nameRequired')} `)
  }
 
  if (newErrorMessage) {
@@ -49,13 +53,15 @@ const NewAllergyModal = (props: NewAllergyModalProps) => {
  {errorMessage && <Alert color="danger" title={t('states.error')} message={errorMessage} />}
  <form>
  <TextInputWithLabelFormGroup
+ feedback={nameRequiredFeedback}
  name="name"
  isRequired
  label={t('patient.allergies.allergyName')}
  isEditable
  placeholder={t('patient.allergies.allergyName')}
  value={allergy.name}
  onChange={onNameChange}
+ isInvalid={isAllergyNameInvalid}
  />
  </form>
  </>