Skip to content
This repository has been archived by the owner on Jan 9, 2023. It is now read-only.

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

Merged
merged 3 commits into from
Apr 6, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 34 additions & 6 deletions src/__tests__/patients/list/Patients.test.tsx
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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) => {
Expand Down Expand Up @@ -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', () => {
Expand Down
1 change: 1 addition & 0 deletions src/locales/enUs/translations/patient/index.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
export default {
patient: {
code: 'Code',
firstName: 'First Name',
lastName: 'Last Name',
suffix: 'Suffix',
Expand Down
47 changes: 25 additions & 22 deletions src/patients/list/Patients.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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>) => {
Expand Down Expand Up @@ -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>
)
}
Expand Down