diff --git a/src/__tests__/patients/notes/NewNoteModal.test.tsx b/src/__tests__/patients/notes/NewNoteModal.test.tsx
index abba5584f3..2c01c10803 100644
--- a/src/__tests__/patients/notes/NewNoteModal.test.tsx
+++ b/src/__tests__/patients/notes/NewNoteModal.test.tsx
@@ -2,7 +2,7 @@ import '../../../__mocks__/matchMediaMock'
import React from 'react'
import NewNoteModal from 'patients/notes/NewNoteModal'
import { shallow, mount } from 'enzyme'
-import { Modal, Label, RichText, TextField } from '@hospitalrun/components'
+import { Modal, Alert } from '@hospitalrun/components'
import { act } from '@testing-library/react'
import TextFieldWithLabelFormGroup from 'components/input/TextFieldWithLabelFormGroup'
@@ -86,18 +86,26 @@ describe('New Note Modal', () => {
})
})
- it('should require a note be added', () => {
+ it('should require a note be added', async () => {
const onSaveSpy = jest.fn()
const wrapper = mount(
,
)
- act(() => {
+ await act(async () => {
const modal = wrapper.find(Modal)
const { onClick } = modal.prop('successButton') as any
- onClick()
+ await onClick()
})
+ wrapper.update()
+
+ const notesTextField = wrapper.find(TextFieldWithLabelFormGroup)
+ const errorAlert = wrapper.find(Alert)
+ expect(errorAlert).toHaveLength(1)
+ expect(errorAlert.prop('title')).toEqual('states.error')
+ expect(errorAlert.prop('message')).toEqual('patient.notes.error.unableToAdd')
+ expect(notesTextField.prop('feedback')).toEqual('patient.notes.error.noteRequired')
expect(onSaveSpy).not.toHaveBeenCalled()
})
})
diff --git a/src/components/input/TextFieldWithLabelFormGroup.tsx b/src/components/input/TextFieldWithLabelFormGroup.tsx
index 0be6dd24d2..86948b5760 100644
--- a/src/components/input/TextFieldWithLabelFormGroup.tsx
+++ b/src/components/input/TextFieldWithLabelFormGroup.tsx
@@ -8,16 +8,25 @@ interface Props {
isEditable?: boolean
placeholder?: string
onChange?: (event: React.ChangeEvent) => void
- isRequired: boolean
+ isRequired?: boolean
+ feedback?: string
+ isInvalid?: boolean
}
const TextFieldWithLabelFormGroup = (props: Props) => {
- const { value, label, name, isEditable, onChange } = props
+ const { value, label, name, isEditable, isInvalid, feedback, onChange } = props
const id = `${name}TextField`
return (
-
+
)
}
diff --git a/src/locales/enUs/translations/patient/index.ts b/src/locales/enUs/translations/patient/index.ts
index 7c10fffe59..f548ebf832 100644
--- a/src/locales/enUs/translations/patient/index.ts
+++ b/src/locales/enUs/translations/patient/index.ts
@@ -69,12 +69,13 @@ export default {
note: 'Note',
notes: {
label: 'Notes',
- new: 'New Note',
+ new: 'Add New Note',
warning: {
noNotes: 'No Notes',
},
error: {
noteRequired: 'Note is required.',
+ unableToAdd: 'Unable to add new note.',
},
addNoteAbove: 'Add a note using the button above.',
},
diff --git a/src/patients/notes/NewNoteModal.tsx b/src/patients/notes/NewNoteModal.tsx
index b3695ee682..4159185efc 100644
--- a/src/patients/notes/NewNoteModal.tsx
+++ b/src/patients/notes/NewNoteModal.tsx
@@ -1,5 +1,5 @@
import React, { useState } from 'react'
-import { Modal, Alert, RichText, Label } from '@hospitalrun/components'
+import { Modal, Alert } from '@hospitalrun/components'
import { useTranslation } from 'react-i18next'
import TextFieldWithLabelFormGroup from 'components/input/TextFieldWithLabelFormGroup'
import Note from '../../model/Note'
@@ -14,7 +14,8 @@ interface Props {
const NewNoteModal = (props: Props) => {
const { show, toggle, onCloseButtonClick, onSave } = props
const { t } = useTranslation()
- const [errorMessage, setErrorMessage] = useState('')
+ const [isNoteInvalid, setIsNoteInvalid] = useState(false)
+ const [noteFeedback, setNoteFeedback] = useState()
const [note, setNote] = useState({
date: new Date(Date.now().valueOf()).toISOString(),
text: '',
@@ -33,30 +34,35 @@ const NewNoteModal = (props: Props) => {
}
const onSaveButtonClick = () => {
- let newErrorMessage = ''
-
- if (!note) {
- newErrorMessage += `${t('patient.notes.error.noteRequired')} `
+ if (!note.text) {
+ setIsNoteInvalid(true)
+ setNoteFeedback(t('patient.notes.error.noteRequired'))
+ return
}
- if (!newErrorMessage) {
- onSave(note as Note)
- } else {
- setErrorMessage(newErrorMessage.trim())
- }
+ onSave(note as Note)
}
const body = (