This repository has been archived by the owner on Jan 9, 2023. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 2.2k
/
Patients.tsx
75 lines (64 loc) · 2.26 KB
/
Patients.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
import React, { useEffect, useState } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { useHistory } from 'react-router'
import { useTranslation } from 'react-i18next'
import { Spinner, TextInput, Button, List, ListItem, Container, Row } from '@hospitalrun/components'
import { RootState } from '../../store'
import { fetchPatients, searchPatients } from '../patients-slice'
import useTitle from '../../page-header/useTitle'
import useAddBreadcrumbs from '../../breadcrumbs/useAddBreadcrumbs'
const breadcrumbs = [{ i18nKey: 'patients.label', location: '/patients' }]
const Patients = () => {
const { t } = useTranslation()
const history = useHistory()
useTitle(t('patients.label'))
useAddBreadcrumbs(breadcrumbs, true)
const dispatch = useDispatch()
const { patients, isLoading } = useSelector((state: RootState) => state.patients)
const [searchText, setSearchText] = useState<string>('')
useEffect(() => {
dispatch(fetchPatients())
}, [dispatch])
if (isLoading) {
return <Spinner color="blue" loading size={[10, 25]} type="ScaleLoader" />
}
const list = (
<ul>
{patients.map((p) => (
<ListItem action key={p.id} onClick={() => history.push(`/patients/${p.id}`)}>
{p.fullName} ({p.friendlyId})
</ListItem>
))}
</ul>
)
const onSearchBoxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setSearchText(event.target.value)
}
const onSearchFormSubmit = (event: React.FormEvent | React.MouseEvent) => {
event.preventDefault()
dispatch(searchPatients(searchText))
}
return (
<Container>
<form className="form-inline" onSubmit={onSearchFormSubmit}>
<div className="input-group" style={{ width: '100%' }}>
<TextInput
size="lg"
value={searchText}
placeholder={t('actions.search')}
onChange={onSearchBoxChange}
/>
<div className="input-group-append">
<Button onClick={onSearchFormSubmit}>{t('actions.search')}</Button>
</div>
</div>
</form>
<Row>
<List layout="flush" style={{ width: '100%', marginTop: '10px', marginLeft: '-25px' }}>
{list}
</List>
</Row>
</Container>
)
}
export default Patients