feat(patients): refactor patient list to use table (#1965)

src/__tests__/patients/list/Patients.test.tsx

@@ -1,14 +1,15 @@
 import '../../../__mocks__/matchMediaMock'
 import React from 'react'
 import { mount } from 'enzyme'
-import { TextInput, Button, Spinner, ListItem } from '@hospitalrun/components'
+import { TextInput, Button, Spinner } from '@hospitalrun/components'
 import { MemoryRouter } from 'react-router-dom'
 import { Provider } from 'react-redux'
 import thunk from 'redux-thunk'
 import configureStore from 'redux-mock-store'
 import { mocked } from 'ts-jest/utils'
 import { act } from 'react-dom/test-utils'
 import * as ButtonBarProvider from 'page-header/ButtonBarProvider'
+import format from 'date-fns/format'
 import Patients from '../../../patients/list/Patients'
 import PatientRepository from '../../../clients/db/PatientRepository'
 import * as patientSlice from '../../../patients/patients-slice'
@@ -17,7 +18,17 @@ const middlewares = [thunk]
 const mockStore = configureStore(middlewares)
 
 describe('Patients', () => {
-  const patients = [{ id: '123', fullName: 'test test', code: 'P12345' }]
+  const patients = [
+    {
+      id: '123',
+      fullName: 'test test',
+      givenName: 'test',
+      familyName: 'test',
+      code: 'P12345',
+      sex: 'male',
+      dateOfBirth: new Date().toISOString(),
+    },
+  ]
   const mockedPatientRepository = mocked(PatientRepository, true)
 
   const setup = (isLoading?: boolean) => {
@@ -62,12 +73,29 @@ describe('Patients', () => {
       expect(wrapper.find(Spinner)).toHaveLength(1)
     })
 
-    it('should render a list of patients', () => {
+    it('should render a table of patients', () => {
       const wrapper = setup()
 
-      const patientListItems = wrapper.find(ListItem)
-      expect(patientListItems).toHaveLength(1)
-      expect(patientListItems.at(0).text()).toEqual(`${patients[0].fullName} (${patients[0].code})`)
+      const table = wrapper.find('table')
+      const tableHeaders = table.find('th')
+      const tableColumns = table.find('td')
+
+      expect(table).toHaveLength(1)
+      expect(tableHeaders).toHaveLength(5)
+      expect(tableColumns).toHaveLength(5)
+      expect(tableHeaders.at(0).text()).toEqual('patient.code')
+      expect(tableHeaders.at(1).text()).toEqual('patient.givenName')
+      expect(tableHeaders.at(2).text()).toEqual('patient.familyName')
+      expect(tableHeaders.at(3).text()).toEqual('patient.sex')
+      expect(tableHeaders.at(4).text()).toEqual('patient.dateOfBirth')
+
+      expect(tableColumns.at(0).text()).toEqual(patients[0].code)
+      expect(tableColumns.at(1).text()).toEqual(patients[0].givenName)
+      expect(tableColumns.at(2).text()).toEqual(patients[0].familyName)
+      expect(tableColumns.at(3).text()).toEqual(patients[0].sex)
+      expect(tableColumns.at(4).text()).toEqual(
+        format(new Date(patients[0].dateOfBirth), 'yyyy-MM-dd'),
+      )
     })
 
     it('should add a "New Patient" button to the button tool bar', () => {

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

@@ -1,5 +1,6 @@
 export default {
   patient: {
+    code: 'Code',
     firstName: 'First Name',
     lastName: 'Last Name',
     suffix: 'Suffix',

src/patients/list/Patients.tsx

@@ -2,17 +2,9 @@ import React, { useEffect, useState } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import { useHistory } from 'react-router'
 import { useTranslation } from 'react-i18next'
-import {
-  Spinner,
-  Button,
-  List,
-  ListItem,
-  Container,
-  Row,
-  TextInput,
-  Column,
-} from '@hospitalrun/components'
+import { Spinner, Button, Container, Row, TextInput, Column } from '@hospitalrun/components'
 import { useButtonToolbarSetter } from 'page-header/ButtonBarProvider'
+import format from 'date-fns/format'
 import { RootState } from '../../store'
 import { fetchPatients, searchPatients } from '../patients-slice'
 import useTitle from '../../page-header/useTitle'
@@ -56,13 +48,28 @@ const Patients = () => {
   }
 
   const list = (
-    <ul>
-      {patients.map((p) => (
-        <ListItem action key={p.id} onClick={() => history.push(`/patients/${p.id}`)}>
-          {p.fullName} ({p.code})
-        </ListItem>
-      ))}
-    </ul>
+    <table className="table table-hover">
+      <thead className="thead-light ">
+        <tr>
+          <th>{t('patient.code')}</th>
+          <th>{t('patient.givenName')}</th>
+          <th>{t('patient.familyName')}</th>
+          <th>{t('patient.sex')}</th>
+          <th>{t('patient.dateOfBirth')}</th>
+        </tr>
+      </thead>
+      <tbody>
+        {patients.map((p) => (
+          <tr key={p.id} onClick={() => history.push(`/patients/${p.id}`)}>
+            <td>{p.code}</td>
+            <td>{p.givenName}</td>
+            <td>{p.familyName}</td>
+            <td>{p.sex}</td>
+            <td>{p.dateOfBirth ? format(new Date(p.dateOfBirth), 'yyyy-MM-dd') : ''}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
   )
 
   const onSearchBoxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -95,11 +102,7 @@ const Patients = () => {
         </Row>
       </form>
 
-      <Row>
-        <List layout="flush" style={{ width: '100%', marginTop: '10px', marginLeft: '-25px' }}>
-          {list}
-        </List>
-      </Row>
+      <Row>{list}</Row>
     </Container>
   )
 }