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({