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
/
NewAppointment.tsx
94 lines (83 loc) · 2.92 KB
/
NewAppointment.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, { useState } from 'react'
import useTitle from 'page-header/useTitle'
import { useTranslation } from 'react-i18next'
import roundToNearestMinutes from 'date-fns/roundToNearestMinutes'
import { useHistory } from 'react-router'
import { useDispatch } from 'react-redux'
import Appointment from 'model/Appointment'
import addMinutes from 'date-fns/addMinutes'
import { isBefore } from 'date-fns'
import { Button } from '@hospitalrun/components'
import useAddBreadcrumbs from '../../../breadcrumbs/useAddBreadcrumbs'
import { createAppointment } from '../appointment-slice'
import AppointmentDetailForm from '../AppointmentDetailForm'
const breadcrumbs = [
{ i18nKey: 'scheduling.appointments.label', location: '/appointments' },
{ i18nKey: 'scheduling.appointments.newAppointment', location: '/appointments/new' },
]
const NewAppointment = () => {
const { t } = useTranslation()
const history = useHistory()
const dispatch = useDispatch()
useTitle(t('scheduling.appointments.newAppointment'))
useAddBreadcrumbs(breadcrumbs, true)
const startDateTime = roundToNearestMinutes(new Date(), { nearestTo: 15 })
const endDateTime = addMinutes(startDateTime, 60)
const [appointment, setAppointment] = useState({
patientId: '',
startDateTime: startDateTime.toISOString(),
endDateTime: endDateTime.toISOString(),
location: '',
reason: '',
type: '',
})
const [errorMessage, setErrorMessage] = useState('')
const onCancelClick = () => {
history.push('/appointments')
}
const onNewAppointmentSaveSuccess = (newAppointment: Appointment) => {
history.push(`/appointments/${newAppointment.id}`)
}
const onSave = () => {
let newErrorMessage = ''
if (!appointment.patientId) {
newErrorMessage += t('scheduling.appointment.errors.patientRequired')
}
if (isBefore(new Date(appointment.endDateTime), new Date(appointment.startDateTime))) {
newErrorMessage += ` ${t('scheduling.appointment.errors.startDateMustBeBeforeEndDate')}`
}
if (newErrorMessage) {
setErrorMessage(newErrorMessage.trim())
return
}
dispatch(createAppointment(appointment as Appointment, onNewAppointmentSaveSuccess))
}
const onFieldChange = (key: string, value: string | boolean) => {
setAppointment({
...appointment,
[key]: value,
})
}
return (
<div>
<form>
<AppointmentDetailForm
appointment={appointment as Appointment}
errorMessage={errorMessage}
onFieldChange={onFieldChange}
/>
<div className="row float-right">
<div className="btn-group btn-group-lg">
<Button className="mr-2" color="success" onClick={onSave}>
{t('actions.save')}
</Button>
<Button color="danger" onClick={onCancelClick}>
{t('actions.cancel')}
</Button>
</div>
</div>
</form>
</div>
)
}
export default NewAppointment