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>
     </>