feat(appointments): provide more information on listed appointments

Co-authored-by: Matteo Vivona <matteo.vivona@me.com>
Co-authored-by: Jack Meyer <jackcmeyer@gmail.com>

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

@@ -1,5 +1,6 @@
 import * as components from '@hospitalrun/components'
-import { mount, ReactWrapper } from 'enzyme'
+import { Table } from '@hospitalrun/components'
+import { mount } from 'enzyme'
 import { createMemoryHistory } from 'history'
 import React from 'react'
 import { act } from 'react-dom/test-utils'
@@ -59,17 +60,58 @@ const setup = (patient = expectedPatient, appointments = expectedAppointments) =
 }
 
 describe('AppointmentsList', () => {
-  it('should render a list of appointments', () => {
-    const wrapper = setup()
-    const listItems: ReactWrapper = wrapper.find(components.ListItem)
-
-    expect(listItems.length === 2).toBeTruthy()
-    expect(listItems.at(0).text()).toEqual(
-      new Date(expectedAppointments[0].startDateTime).toLocaleString(),
-    )
-    expect(listItems.at(1).text()).toEqual(
-      new Date(expectedAppointments[1].startDateTime).toLocaleString(),
-    )
+  describe('Table', () => {
+    it('should render a list of appointments', () => {
+      const wrapper = setup()
+
+      const table = wrapper.find(Table)
+      const columns = table.prop('columns')
+      const actions = table.prop('actions') as any
+
+      expect(table).toHaveLength(1)
+
+      expect(columns[0]).toEqual(
+        expect.objectContaining({
+          label: 'scheduling.appointment.startDate',
+          key: 'startDateTime',
+        }),
+      )
+      expect(columns[1]).toEqual(
+        expect.objectContaining({ label: 'scheduling.appointment.endDate', key: 'endDateTime' }),
+      )
+      expect(columns[2]).toEqual(
+        expect.objectContaining({ label: 'scheduling.appointment.location', key: 'location' }),
+      )
+      expect(columns[3]).toEqual(
+        expect.objectContaining({ label: 'scheduling.appointment.type', key: 'type' }),
+      )
+
+      expect(actions[0]).toEqual(expect.objectContaining({ label: 'actions.view' }))
+      expect(table.prop('actionsHeaderText')).toEqual('actions.label')
+    })
+
+    it('should navigate to appointment profile on appointment click', async () => {
+      const wrapper = setup()
+      const tr = wrapper.find('tr').at(1)
+
+      act(() => {
+        const onClick = tr.find('button').at(0).prop('onClick') as any
+        onClick({ stopPropagation: jest.fn() })
+      })
+
+      expect(history.location.pathname).toEqual('/appointments/456')
+    })
+  })
+
+  describe('Empty list', () => {
+    it('should render a warning message if there are no appointments', () => {
+      const wrapper = setup(expectedPatient, [])
+      const alert = wrapper.find(components.Alert)
+
+      expect(alert).toHaveLength(1)
+      expect(alert.prop('title')).toEqual('patient.appointments.warning.noAppointments')
+      expect(alert.prop('message')).toEqual('patient.appointments.addAppointmentAbove')
+    })
   })
 
   describe('New appointment button', () => {

src/patients/appointments/AppointmentsList.tsx

@@ -1,4 +1,5 @@
-import { Button, List, ListItem, Container, Row } from '@hospitalrun/components'
+import { Button, Table, Spinner, Alert } from '@hospitalrun/components'
+import format from 'date-fns/format'
 import React, { useEffect } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import { useHistory } from 'react-router-dom'
@@ -32,17 +33,6 @@ const AppointmentsList = (props: Props) => {
     dispatch(fetchPatientAppointments(patientId))
   }, [dispatch, patientId])
 
-  const list = (
-    // inline style added to pick up on newlines for string literal
-    <ul style={{ whiteSpace: 'pre-line' }}>
-      {appointments.map((a) => (
-        <ListItem action key={a.id} onClick={() => history.push(`/appointments/${a.id}`)}>
-          {new Date(a.startDateTime).toLocaleString()}
-        </ListItem>
-      ))}
-    </ul>
-  )
-
   return (
     <>
       <div className="row">
@@ -59,13 +49,54 @@ const AppointmentsList = (props: Props) => {
         </div>
       </div>
       <br />
-      <Container>
-        <Row>
-          <List layout="flush" style={{ width: '100%', marginTop: '10px', marginLeft: '-25px' }}>
-            {list}
-          </List>
-        </Row>
-      </Container>
+      <div className="row">
+        <div className="col-md-12">
+          {appointments ? (
+            appointments.length > 0 ? (
+              <Table
+                data={appointments}
+                getID={(row) => row.id}
+                onRowClick={(row) => history.push(`/appointments/${row.id}`)}
+                columns={[
+                  {
+                    label: t('scheduling.appointment.startDate'),
+                    key: 'startDateTime',
+                    formatter: (row) =>
+                      row.startDateTime
+                        ? format(new Date(row.startDateTime), 'yyyy-MM-dd, hh:mm a')
+                        : '',
+                  },
+                  {
+                    label: t('scheduling.appointment.endDate'),
+                    key: 'endDateTime',
+                    formatter: (row) =>
+                      row.endDateTime
+                        ? format(new Date(row.endDateTime), 'yyyy-MM-dd, hh:mm a')
+                        : '',
+                  },
+                  { label: t('scheduling.appointment.location'), key: 'location' },
+                  { label: t('scheduling.appointment.type'), key: 'type' },
+                ]}
+                actionsHeaderText={t('actions.label')}
+                actions={[
+                  {
+                    label: t('actions.view'),
+                    action: (row) => history.push(`/appointments/${row.id}`),
+                  },
+                ]}
+              />
+            ) : (
+              <Alert
+                color="warning"
+                title={t('patient.appointments.warning.noAppointments')}
+                message={t('patient.appointments.addAppointmentAbove')}
+              />
+            )
+          ) : (
+            <Spinner color="blue" loading size={[10, 25]} type="ScaleLoader" />
+          )}
+        </div>
+      </div>
     </>
   )
 }

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

@@ -52,6 +52,10 @@ export default {
     },
     appointments: {
       new: 'Add Appointment',
+      warning: {
+        noAppointments: 'No Appointments',
+      },
+      addAppointmentAbove: 'Add an appointment using the button above.',
     },
     allergies: {
       label: 'Allergies',