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
/
ViewPatient.tsx
94 lines (84 loc) · 2.97 KB
/
ViewPatient.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 } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { useParams, withRouter, Route, useHistory, useLocation } from 'react-router-dom'
import { Panel, Spinner, TabsHeader, Tab, Button } from '@hospitalrun/components'
import { useTranslation } from 'react-i18next'
import useTitle from '../../page-header/useTitle'
import { fetchPatient } from '../patient-slice'
import { RootState } from '../../store'
import { getPatientFullName } from '../util/patient-name-util'
import Patient from '../../model/Patient'
import GeneralInformation from '../GeneralInformation'
import RelatedPerson from '../related-persons/RelatedPersonTab'
import AppointmentsList from '../appointments/AppointmentsList'
const getFriendlyId = (p: Patient): string => {
if (p) {
return p.friendlyId
}
return ''
}
const ViewPatient = () => {
const { t } = useTranslation()
const history = useHistory()
const dispatch = useDispatch()
const location = useLocation()
const { patient, isLoading } = useSelector((state: RootState) => state.patient)
useTitle(`${getPatientFullName(patient)} (${getFriendlyId(patient)})`)
const { id } = useParams()
useEffect(() => {
if (id) {
dispatch(fetchPatient(id))
}
}, [dispatch, id])
if (isLoading || !patient) {
return <Spinner color="blue" loading size={[10, 25]} type="ScaleLoader" />
}
return (
<div>
<TabsHeader>
<Tab
active={location.pathname === `/patients/${patient.id}`}
label={t('patient.generalInformation')}
onClick={() => history.push(`/patients/${patient.id}`)}
/>
<Tab
active={location.pathname === `/patients/${patient.id}/relatedpersons`}
label={t('patient.relatedPersons.label')}
onClick={() => history.push(`/patients/${patient.id}/relatedpersons`)}
/>
<Tab
active={location.pathname === `/patients/${patient.id}/appointments`}
label={t('scheduling.appointments.label')}
onClick={() => history.push(`/patients/${patient.id}/appointments`)}
/>
</TabsHeader>
<Panel>
<Route exact path="/patients/:id">
<div className="row">
<div className="col-md-12 d-flex justify-content-end">
<Button
color="success"
outlined
icon="edit"
onClick={() => {
history.push(`/patients/edit/${patient.id}`)
}}
>
{t('actions.edit')}
</Button>
</div>
</div>
<br />
<GeneralInformation patient={patient} />
</Route>
<Route exact path="/patients/:id/relatedpersons">
<RelatedPerson patient={patient} />
</Route>
<Route exact path="/patients/:id/appointments">
<AppointmentsList patientId={patient.id} />
</Route>
</Panel>
</div>
)
}
export default withRouter(ViewPatient)