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
/
Appointments.tsx
87 lines (77 loc) · 2.28 KB
/
Appointments.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
import React, { useEffect, useState } from 'react'
import { Calendar, Button } from '@hospitalrun/components'
import useTitle from 'page-header/useTitle'
import { useTranslation } from 'react-i18next'
import { useSelector, useDispatch } from 'react-redux'
import { RootState } from 'store'
import { useHistory } from 'react-router'
import PatientRepository from 'clients/db/PatientRepository'
import useAddBreadcrumbs from 'breadcrumbs/useAddBreadcrumbs'
import { useButtonToolbarSetter } from 'page-header/ButtonBarProvider'
import { fetchAppointments } from './appointments-slice'
interface Event {
id: string
start: Date
end: Date
title: string
allDay: boolean
}
const breadcrumbs = [{ i18nKey: 'scheduling.appointments.label', location: '/appointments' }]
const Appointments = () => {
const { t } = useTranslation()
const history = useHistory()
useTitle(t('scheduling.appointments.label'))
const dispatch = useDispatch()
const { appointments } = useSelector((state: RootState) => state.appointments)
const [events, setEvents] = useState<Event[]>([])
const setButtonToolBar = useButtonToolbarSetter()
setButtonToolBar([
<Button
key="newAppointmentButton"
outlined
color="success"
icon="appointment-add"
onClick={() => history.push('/appointments/new')}
>
{t('scheduling.appointments.new')}
</Button>,
])
useAddBreadcrumbs(breadcrumbs, true)
useEffect(() => {
dispatch(fetchAppointments())
return () => {
setButtonToolBar([])
}
}, [dispatch, setButtonToolBar])
useEffect(() => {
const getAppointments = async () => {
const newEvents = await Promise.all(
appointments.map(async (a) => {
const patient = await PatientRepository.find(a.patientId)
return {
id: a.id,
start: new Date(a.startDateTime),
end: new Date(a.endDateTime),
title: patient.fullName || '',
allDay: false,
}
}),
)
setEvents(newEvents)
}
if (appointments) {
getAppointments()
}
}, [appointments])
return (
<div>
<Calendar
events={events}
onEventClick={(event) => {
history.push(`/appointments/${event.id}`)
}}
/>
</div>
)
}
export default Appointments