Merge pull request #1703 from HospitalRun/feature/patient-create-succ…

…ess-message

feat(patients): add success message when patient is created successfully

public/locales/en/translation.json

@@ -6,7 +6,8 @@
     "label": "Patients",
     "viewPatients": "View Patients",
     "viewPatient": "View Patient",
-    "newPatient": "New Patient"
+    "newPatient": "New Patient",
+    "successfullyCreated": "Successfully created patient "
   },
   "patient": {
     "suffix": "Suffix",
@@ -47,5 +48,8 @@
     "new": "New",
     "list": "List",
     "search": "Search"
+  },
+  "states": {
+    "success": "Success!"
   }
 }

src/__tests__/containers/HospitalRun.test.tsx

@@ -6,6 +6,7 @@ import { Provider } from 'react-redux'
 import { mocked } from 'ts-jest/utils'
 import thunk from 'redux-thunk'
 import configureMockStore from 'redux-mock-store'
+import { Toaster } from '@hospitalrun/components'
 import NewPatient from '../../patients/new/NewPatient'
 import ViewPatient from '../../patients/view/ViewPatient'
 import PatientRepository from '../../clients/db/PatientRepository'
@@ -64,4 +65,23 @@ describe('HospitalRun', () => {
       expect(wrapper.find(ViewPatient)).toHaveLength(1)
     })
   })
+
+  describe('layout', () => {
+    it('should render a Toaster', () => {
+      const wrapper = mount(
+        <Provider
+          store={mockStore({
+            title: 'test',
+            user: { permissions: [Permissions.WritePatients] },
+          })}
+        >
+          <MemoryRouter initialEntries={['/']}>
+            <HospitalRun />
+          </MemoryRouter>
+        </Provider>,
+      )
+
+      expect(wrapper.find(Toaster)).toHaveLength(1)
+    })
+  })
 })

src/__tests__/patients/patients-slice.test.ts

@@ -1,10 +1,15 @@
+import '../../__mocks__/matchMediaMock'
 import { AnyAction } from 'redux'
 import { createMemoryHistory } from 'history'
 import { mocked } from 'ts-jest/utils'
+import * as components from '@hospitalrun/components'
+import { useTranslation } from 'react-i18next'
 import * as patientsSlice from '../../patients/patients-slice'
 import Patient from '../../model/Patient'
 import PatientRepository from '../../clients/db/PatientRepository'
 
+const { t } = useTranslation()
+
 describe('patients slice', () => {
   beforeEach(() => {
     jest.resetAllMocks()
@@ -100,5 +105,33 @@ describe('patients slice', () => {
 
       expect(history.entries[1].pathname).toEqual(`/patients/${expectedPatientId}`)
     })
+
+    it('should call the Toaster function with the correct data', async () => {
+      jest.spyOn(components, 'Toast')
+      const expectedPatientId = '12345'
+      const expectedGivenName = 'given'
+      const expectedFamilyName = 'family'
+      const expectedSuffix = 'suffix'
+      const expectedPatient = {
+        id: expectedPatientId,
+        givenName: expectedGivenName,
+        familyName: expectedFamilyName,
+        suffix: expectedSuffix,
+      } as Patient
+      const mockedPatientRepository = mocked(PatientRepository, true)
+      mockedPatientRepository.save.mockResolvedValue(expectedPatient)
+      const mockedComponents = mocked(components, true)
+      const history = createMemoryHistory()
+      const dispatch = jest.fn()
+      const getState = jest.fn()
+
+      await patientsSlice.createPatient(expectedPatient, history)(dispatch, getState, null)
+
+      expect(mockedComponents.Toast).toHaveBeenCalledWith(
+        'success',
+        'Success!',
+        `patients.successfullyCreated ${expectedGivenName} ${expectedFamilyName} ${expectedSuffix}`,
+      )
+    })
   })
 })

src/containers/HospitalRun.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { Switch, Route } from 'react-router-dom'
 import { useSelector } from 'react-redux'
+import { Toaster } from '@hospitalrun/components'
 import Sidebar from '../components/Sidebar'
 import Permissions from '../util/Permissions'
 import Dashboard from './Dashboard'
@@ -47,6 +48,7 @@ const HospitalRun = () => {
                 />
               </Switch>
             </div>
+            <Toaster autoClose={5000} hideProgressBar draggable />
           </main>
         </div>
       </div>

src/patients/patients-slice.ts

@@ -1,7 +1,9 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import { Toast } from '@hospitalrun/components'
 import Patient from '../model/Patient'
 import PatientRepository from '../clients/db/PatientRepository'
 import { AppThunk } from '../store'
+import il8n from '../i18n'
 
 interface PatientsState {
   isLoading: boolean
@@ -45,6 +47,13 @@ export const createPatient = (patient: Patient, history: any): AppThunk => async
     const newPatient = await PatientRepository.save(patient)
     dispatch(createPatientSuccess())
     history.push(`/patients/${newPatient.id}`)
+    Toast(
+      'success',
+      il8n.t('Success!'),
+      `${il8n.t('patients.successfullyCreated')} ${patient.givenName} ${patient.familyName} ${
+        patient.suffix
+      }`,
+    )
   } catch (error) {
     console.log(error)
   }