From 89430f79c25e793171d5eff73ced0338b6fbf1c4 Mon Sep 17 00:00:00 2001 From: Jack Meyer Date: Mon, 6 Apr 2020 17:02:24 -0500 Subject: [PATCH] feat(patients): refactor patient list to use table (#1965) --- src/__tests__/patients/list/Patients.test.tsx | 40 +++++++++++++--- .../enUs/translations/patient/index.ts | 1 + src/patients/list/Patients.tsx | 47 ++++++++++--------- 3 files changed, 60 insertions(+), 28 deletions(-) diff --git a/src/__tests__/patients/list/Patients.test.tsx b/src/__tests__/patients/list/Patients.test.tsx index bcfe79afcf..bfce7907c7 100644 --- a/src/__tests__/patients/list/Patients.test.tsx +++ b/src/__tests__/patients/list/Patients.test.tsx @@ -1,7 +1,7 @@ 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' @@ -9,6 +9,7 @@ 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', () => { diff --git a/src/locales/enUs/translations/patient/index.ts b/src/locales/enUs/translations/patient/index.ts index f548ebf832..95c36e0973 100644 --- a/src/locales/enUs/translations/patient/index.ts +++ b/src/locales/enUs/translations/patient/index.ts @@ -1,5 +1,6 @@ export default { patient: { + code: 'Code', firstName: 'First Name', lastName: 'Last Name', suffix: 'Suffix', diff --git a/src/patients/list/Patients.tsx b/src/patients/list/Patients.tsx index 4d426a50a4..9cdef6b619 100644 --- a/src/patients/list/Patients.tsx +++ b/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 = ( - + + + + + + + + + + + + {patients.map((p) => ( + history.push(`/patients/${p.id}`)}> + + + + + + + ))} + +
{t('patient.code')}{t('patient.givenName')}{t('patient.familyName')}{t('patient.sex')}{t('patient.dateOfBirth')}
{p.code}{p.givenName}{p.familyName}{p.sex}{p.dateOfBirth ? format(new Date(p.dateOfBirth), 'yyyy-MM-dd') : ''}
) const onSearchBoxChange = (event: React.ChangeEvent) => { @@ -95,11 +102,7 @@ const Patients = () => { - - - {list} - - + {list} ) }