feat(patient): add appointment button

src/__tests__/patients/appointments/AppointmentsList.test.tsx

@@ -0,0 +1,72 @@
+import '../../../__mocks__/matchMediaMock'
+import React from 'react'
+import { mount } from 'enzyme'
+import { createMemoryHistory } from 'history'
+import configureMockStore from 'redux-mock-store'
+import thunk from 'redux-thunk'
+import Patient from 'model/Patient'
+import { Router } from 'react-router'
+import { Provider } from 'react-redux'
+import AppointmentsList from 'patients/appointments/AppointmentsList'
+import * as components from '@hospitalrun/components'
+import { act } from 'react-dom/test-utils'
+import PatientRepository from 'clients/db/PatientRepository'
+
+const expectedPatient = {
+ id: '123',
+} as Patient
+const expectedAppointments = [
+ {
+ id: '123',
+ rev: '1',
+ patientId: '1234',
+ startDateTime: new Date().toISOString(),
+ endDateTime: new Date().toISOString(),
+ location: 'location',
+ reason: 'reason',
+ },
+]
+
+const mockStore = configureMockStore([thunk])
+const history = createMemoryHistory()
+
+let store: any
+
+const setup = (patient = expectedPatient, appointments = expectedAppointments) => {
+ store = mockStore({ patient, appointments: { appointments } })
+ const wrapper = mount(
+ <Router history={history}>
+ <Provider store={store}>
+ <AppointmentsList patientId={patient.id} />
+ </Provider>
+ </Router>,
+ )
+
+ return wrapper
+}
+
+describe('AppointmentsList', () => {
+ describe('add new appointment button', () => {
+ it('should render a new appointment button', () => {
+ const wrapper = setup()
+
+ const addNewAppointmentButton = wrapper.find(components.Button).at(0)
+ expect(addNewAppointmentButton).toHaveLength(1)
+ expect(addNewAppointmentButton.text().trim()).toEqual('scheduling.appointments.new')
+ })
+
+ it('should navigate to new appointment page', () => {
+ const wrapper = setup()
+
+ act(() => {
+ wrapper
+ .find(components.Button)
+ .at(0)
+ .prop('onClick')()
+ })
+ wrapper.update()
+
+ expect(history.location.pathname).toEqual('/appointments/new')
+ })
+ })
+})

src/locales/enUs/translations/patient/index.ts

@@ -37,6 +37,9 @@ export default {
  },
  addRelatedPersonAbove: 'Add a related person using the button above.',
  },
+ appointments: {
+ new: 'Add Appointment',
+ },
  allergies: {
  label: 'Allergies',
  allergyName: 'Allergy Name',

src/patients/appointments/AppointmentsList.tsx

@@ -53,32 +53,48 @@ const AppointmentsList = (props: Props) => {
  }
 
  return (
- <Container>
- <form className="form" onSubmit={onSearchFormSubmit}>
+ <>
+ <div className="row">
+ <div className="col-md-12 d-flex justify-content-end">
+ <Button
+ key="newAppointmentButton"
+ outlined
+ color="success"
+ icon="appointment-add"
+ onClick={() => history.push('/appointments/new')}
+ >
+ {t('scheduling.appointments.new')}
+ </Button>
+ </div>
+ </div>
+ <br />
+ <Container>
+ <form className="form" onSubmit={onSearchFormSubmit}>
+ <Row>
+ <Column md={10}>
+ <TextInput
+ size="lg"
+ type="text"
+ onChange={onSearchBoxChange}
+ value={searchText}
+ placeholder={t('actions.search')}
+ />
+ </Column>
+ <Column md={2}>
+ <Button size="large" onClick={onSearchFormSubmit}>
+ {t('actions.search')}
+ </Button>
+ </Column>
+ </Row>
+ </form>
+
  <Row>
- <Column md={10}>
- <TextInput
- size="lg"
- type="text"
- onChange={onSearchBoxChange}
- value={searchText}
- placeholder={t('actions.search')}
- />
- </Column>
- <Column md={2}>
- <Button size="large" onClick={onSearchFormSubmit}>
- {t('actions.search')}
- </Button>
- </Column>
+ <List layout="flush" style={{ width: '100%', marginTop: '10px', marginLeft: '-25px' }}>
+ {list}
+ </List>
  </Row>
- </form>
-
- <Row>
- <List layout="flush" style={{ width: '100%', marginTop: '10px', marginLeft: '-25px' }}>
- {list}
- </List>
- </Row>
- </Container>
+ </Container>
+ </>
  )
 }