feat(component): add toaster component on patient success/error

reorganize imports, add toaster for page wide use, separate async dispatch from synchronous event
handler to better handle promises, add toast on patient creation and error, suggest abstraction of
patients into person of various types to prepare for other facility members

fix HospitalRun#1764

src/components/Navbar.tsx

@@ -16,8 +16,8 @@ const Navbar = () => {
       }}
       bg="dark"
       variant="dark"
-      onSearchButtonClick={() => console.log('hello')}
-      onSearchTextBoxChange={() => console.log('hello')}
+      onSearchButtonClick={() => {}}
+      onSearchTextBoxChange={() => {}}
       navLinks={[
         {
           label: t('patients.label'),

src/containers/HospitalRun.tsx

@@ -1,15 +1,16 @@
 import React from 'react'
-import { Switch, Route } from 'react-router-dom'
+import { RootState } from '../store'
 import { useSelector } from 'react-redux'
-import Sidebar from '../components/Sidebar'
-import Permissions from '../util/Permissions'
+import { Switch, Route } from 'react-router-dom'
 import Dashboard from './Dashboard'
 import Patients from './Patients'
 import NewPatient from './NewPatient'
 import ViewPatient from './ViewPatient'
-import { RootState } from '../store'
+import { Toaster } from '@hospitalrun/components'
 import Navbar from '../components/Navbar'
+import Sidebar from '../components/Sidebar'
 import PrivateRoute from '../components/PrivateRoute'
+import Permissions from '../util/Permissions'
 
 const HospitalRun = () => {
   const { title } = useSelector((state: RootState) => state.title)
@@ -49,6 +50,7 @@ const HospitalRun = () => {
             </div>
           </main>
         </div>
+        <Toaster autoClose={3000} hideProgressBar draggable />
       </div>
     </div>
   )

src/containers/NewPatient.tsx

@@ -1,24 +1,43 @@
 import React, { useState } from 'react'
-import { Toast, Toaster } from '@hospitalrun/components'
+import { Toast } from '@hospitalrun/components'
+import { createPatient } from '../slices/patients-slice'
+import { useDispatch } from 'react-redux'
 import { withRouter, useHistory } from 'react-router-dom'
+
 import { useTranslation } from 'react-i18next'
 import PatientForm from '../components/PatientForm'
+import Patient from '../model/Patient'
 import useTitle from '../util/useTitle'
 
 const NewPatient = () => {
   const { t } = useTranslation()
   useTitle(t('patients.newPatient'))
-  // const dispatch = useDispatch()
+
+  const dispatch = useDispatch()
   const history = useHistory()
   const [patient, setPatient] = useState({ firstName: '', lastName: '' })
-  Toast('success', 'This is a toaster!', 'Success')
 
-  const onSaveButtonClick = async () => {
-    // dispatch(createPatient(patient as Patient, history))
-    console.log(history)
+  //Abstract Patient into Person with different types
+  //Patient, Doctor, etc
+  const dispatchCreatePatient = async (patient: Patient, history: any): Promise<any> => {
+    dispatch(createPatient(patient as Patient, history))
+  }
+
+  const onSaveButtonClick = (): void => {
+    dispatchCreatePatient(patient as Patient, history).then(()=>{
+      onSaveSuccess()
+    }).catch(()=>{
+      onSaveError()
+    })
+  }
+  const onSaveSuccess = (): void => {
+    Toast('success', 'Patient created succesfully!', 'Success')
+  }
+  const onSaveError = (): void => {
+    Toast('danger', 'There was a problem, please try again.', 'Error')
   }
 
-  const onCancelButtonClick = () => {
+  const onCancelButtonClick = (): void => {
     history.push(`/patients`)
   }
 
@@ -37,7 +56,6 @@ const NewPatient = () => {
           onSaveButtonClick={onSaveButtonClick}
           onCancelButtonClick={onCancelButtonClick}
         />
-        <Toaster autoClose={3000} hideProgressBar draggable />
       </div>
     </div>
   )