feat(appointments): adds new appointment route

src/HospitalRun.tsx

@@ -3,6 +3,7 @@ import { Switch, Route } from 'react-router-dom'
 import { useSelector } from 'react-redux'
 import { Toaster } from '@hospitalrun/components'
 import Appointments from 'scheduling/appointments/Appointments'
+import NewAppointment from 'scheduling/appointments/new/NewAppointment'
 import Sidebar from './components/Sidebar'
 import Permissions from './model/Permissions'
 import Dashboard from './dashboard/Dashboard'
@@ -52,6 +53,12 @@ const HospitalRun = () => {
                   path="/appointments"
                   component={Appointments}
                 />
+                <PrivateRoute
+                  isAuthenticated={permissions.includes(Permissions.WriteAppointments)}
+                  exact
+                  path="/appointments/new"
+                  component={NewAppointment}
+                />
               </Switch>
             </div>
             <Toaster autoClose={5000} hideProgressBar draggable />

src/__tests__/HospitalRun.test.tsx

@@ -9,6 +9,7 @@ import configureMockStore from 'redux-mock-store'
 import { Toaster } from '@hospitalrun/components'
 import Dashboard from 'dashboard/Dashboard'
 import Appointments from 'scheduling/appointments/Appointments'
+import NewAppointment from 'scheduling/appointments/new/NewAppointment'
 import NewPatient from '../patients/new/NewPatient'
 import ViewPatient from '../patients/view/ViewPatient'
 import PatientRepository from '../clients/db/PatientRepository'
@@ -143,6 +144,42 @@ describe('HospitalRun', () => {
     })
   })
 
+  describe('/appointments/new', () => {
+    it('should render the new appointment screen when /appointments/new is accessed', async () => {
+      const wrapper = mount(
+        <Provider
+          store={mockStore({
+            title: 'test',
+            user: { permissions: [Permissions.WriteAppointments] },
+          })}
+        >
+          <MemoryRouter initialEntries={['/appointments/new']}>
+            <HospitalRun />
+          </MemoryRouter>
+        </Provider>,
+      )
+
+      expect(wrapper.find(NewAppointment)).toHaveLength(1)
+    })
+
+    it('should render the Dashboard when the user does not have read appointment privileges', () => {
+      const wrapper = mount(
+        <Provider
+          store={mockStore({
+            title: 'test',
+            user: { permissions: [] },
+          })}
+        >
+          <MemoryRouter initialEntries={['/appointments/new']}>
+            <HospitalRun />
+          </MemoryRouter>
+        </Provider>,
+      )
+
+      expect(wrapper.find(Dashboard)).toHaveLength(1)
+    })
+  })
+
   describe('layout', () => {
     it('should render a Toaster', () => {
       const wrapper = mount(

src/__tests__/components/Navbar.test.tsx

@@ -84,6 +84,9 @@ describe('Navbar', () => {
       expect(hospitalRunNavbar.prop('navLinks')[1].children[0].label).toEqual(
         'scheduling.appointments.label',
       )
+      expect(hospitalRunNavbar.prop('navLinks')[1].children[1].label).toEqual(
+        'scheduling.appointments.new',
+      )
     })
 
     it('should navigate to to /appointments when the appointment list option is selected', () => {
@@ -96,6 +99,17 @@ describe('Navbar', () => {
 
       expect(history.location.pathname).toEqual('/appointments')
     })
+
+    it('should navigate to /appointments/new when the new appointment list option is selected', () => {
+      const wrapper = setup()
+      const hospitalRunNavbar = wrapper.find(HospitalRunNavbar)
+
+      act(() => {
+        ;(hospitalRunNavbar.prop('navLinks')[1].children[1] as any).onClick()
+      })
+
+      expect(history.location.pathname).toEqual('/appointments/new')
+    })
   })
 
   describe('search', () => {

src/__tests__/scheduling/appointments/new/NewAppointment.test.tsx

@@ -0,0 +1,23 @@
+import '../../../../__mocks__/matchMediaMock'
+import React from 'react'
+import NewAppointment from 'scheduling/appointments/new/NewAppointment'
+import { MemoryRouter } from 'react-router'
+import store from 'store'
+import { Provider } from 'react-redux'
+import { mount } from 'enzyme'
+import * as titleUtil from '../../../../page-header/useTitle'
+
+describe('New Appointment', () => {
+  it('should use "New Appointment" as the header', () => {
+    jest.spyOn(titleUtil, 'default')
+    mount(
+      <Provider store={store}>
+        <MemoryRouter>
+          <NewAppointment />
+        </MemoryRouter>
+      </Provider>,
+    )
+
+    expect(titleUtil.default).toHaveBeenCalledWith('scheduling.appointments.new')
+  })
+})

src/components/Navbar.tsx

@@ -58,6 +58,12 @@ const Navbar = () => {
                 history.push('/appointments')
               },
             },
+            {
+              label: t('scheduling.appointments.new'),
+              onClick: () => {
+                history.push('/appointments/new')
+              },
+            },
           ],
         },
       ]}

src/locales/en-US/translation.json

@@ -66,7 +66,8 @@
   "scheduling": {
     "label": "Scheduling",
     "appointments": {
-      "label": "Appointments"
+      "label": "Appointments",
+      "new": "New Appointment"
     }
   }
 }

src/scheduling/appointments/new/NewAppointment.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import useTitle from 'page-header/useTitle'
+import { useTranslation } from 'react-i18next'
+
+const NewAppointment = () => {
+  const { t } = useTranslation()
+  useTitle(t('scheduling.appointments.new'))
+
+  return <h1>{t('scheduling.appointments.new')}</h1>
+}
+
+export default NewAppointment

src/user/user-slice.ts

@@ -6,7 +6,12 @@ interface UserState {
 }
 
 const initialState: UserState = {
-  permissions: [Permissions.ReadPatients, Permissions.WritePatients, Permissions.ReadAppointments],
+  permissions: [
+    Permissions.ReadPatients,
+    Permissions.WritePatients,
+    Permissions.ReadAppointments,
+    Permissions.WriteAppointments,
+  ],
 }
 
 const userSlice = createSlice({