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
/
AppointmentsList.tsx
94 lines (83 loc) · 2.83 KB
/
AppointmentsList.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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
import React, { useEffect, useState } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { useHistory } from 'react-router'
import { useTranslation } from 'react-i18next'
import { TextInput, Button, List, ListItem, Container, Row } from '@hospitalrun/components'
import { RootState } from '../../store'
import { fetchPatientAppointments } from '../../scheduling/appointments/appointments-slice'
import useAddBreadcrumbs from '../../breadcrumbs/useAddBreadcrumbs'
interface Props {
patientId: string
}
const AppointmentsList = (props: Props) => {
const dispatch = useDispatch()
const history = useHistory()
const { t } = useTranslation()
const { patientId } = props
const { appointments } = useSelector((state: RootState) => state.appointments)
const [searchText, setSearchText] = useState<string>('')
const breadcrumbs = [
{
i18nKey: 'scheduling.appointments.label',
location: `/patients/${patientId}/appointments`,
},
]
useAddBreadcrumbs(breadcrumbs)
useEffect(() => {
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>
)
const onSearchBoxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setSearchText(event.target.value)
}
const onSearchFormSubmit = (event: React.FormEvent | React.MouseEvent) => {
event.preventDefault()
dispatch(fetchPatientAppointments(patientId, searchText))
}
return (
<Container>
<div className="row">
<div className="col-md-12 d-flex justify-content-end">
<Button
key="newAppointmentButton"
outlined
color="success"
icon="appointment-add"
onClick={() => history.push('/appointments/new')}
>
{t('scheduling.appointments.new')}
</Button>
</div>
</div>
<br />
<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 AppointmentsList