Skip to content

Commit 574e52a

Browse files
jabahumjabahum
authored
fix : remove provider reloads (#247)
* fix : remove provider reloads * fix undefined provider * fix build * update fix * fix build * fix undefined * fix * fix build * fix build * fix comments * fix deley in pick button * fix delay in pick button * fix delay in pick button
1 parent 88489b4 commit 574e52a

10 files changed

+130
-110
lines changed

‎packages/esm-patient-queues-app/src/active-visits/active-visits-table.component.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -192,7 +192,7 @@ const ActiveVisitsTable: React.FC<ActiveVisitsTableProps> = ({ status }) => {
192192
},
193193
actions: {
194194
content: (
195-
<>
195+
<div style={{ display: 'flex' }}>
196196
{entry.status === 'COMPLETED' ||
197197
(entry.status === 'PENDING' && (
198198
<>
@@ -204,7 +204,7 @@ const ActiveVisitsTable: React.FC<ActiveVisitsTableProps> = ({ status }) => {
204204
))}
205205
<ViewActionsMenu to={`\${openmrsSpaBase}/patient/${entry?.patientUuid}/chart`} from={fromPage} />
206206
<NotesActionsMenu note={entry} />
207-
</>
207+
</div>
208208
),
209209
},
210210
}));

‎packages/esm-patient-queues-app/src/active-visits/change-status-dialog.component.tsx‎

Lines changed: 36 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ import {
88
Select,
99
SelectItem,
1010
Switch,
11+
InlineLoading,
1112
TextArea,
1213
} from '@carbon/react';
13-
1414
import {
1515
navigate,
1616
parseDate,
@@ -21,19 +21,16 @@ import {
2121
useSession,
2222
useVisit,
2323
} from '@openmrs/esm-framework';
24-
2524
import { addQueueEntry, getCareProvider, updateQueueEntry } from './active-visits-table.resource';
2625
import { first } from 'rxjs/operators';
27-
2826
import React, { useCallback, useEffect, useMemo, useState } from 'react';
2927
import { useTranslation } from 'react-i18next';
3028
import { useQueueRoomLocations } from '../hooks/useQueueRooms';
3129
import { MappedQueueEntry } from '../types';
3230
import { ArrowUp, ArrowDown } from '@carbon/react/icons';
33-
3431
import styles from './change-status-dialog.scss';
3532
import { useProviders } from '../visit-form/queue.resource';
36-
import { QueueStatus } from '../utils/utils';
33+
import { QueueStatus, extractErrorMessagesFromResponse } from '../utils/utils';
3734

3835
interface ChangeStatusDialogProps {
3936
queueEntry: MappedQueueEntry;
@@ -66,20 +63,35 @@ const ChangeStatus: React.FC<ChangeStatusDialogProps> = ({ queueEntry, currentEn
6663

6764
const { activeVisit } = useVisit(queueEntry.patientUuid);
6865

69-
getCareProvider(sessionUser?.user?.uuid).then(
70-
(response) => {
71-
setProvider(response?.data?.results[0].uuid);
72-
mutate();
73-
},
74-
(error) => {
75-
showNotification({
76-
title: t(`errorGettingProvider', 'Couldn't get provider`),
77-
kind: 'error',
78-
critical: true,
79-
description: error?.message,
80-
});
81-
},
82-
);
66+
const [isLoading, setIsLoading] = useState(true);
67+
68+
// Memoize the function to fetch the provider using useCallback
69+
const fetchProvider = useCallback(() => {
70+
if (!sessionUser?.user?.uuid) return;
71+
72+
setIsLoading(true);
73+
74+
getCareProvider(sessionUser?.user?.uuid).then(
75+
(response) => {
76+
const uuid = response?.data?.results[0].uuid;
77+
setIsLoading(false);
78+
setProvider(uuid);
79+
mutate();
80+
},
81+
(error) => {
82+
const errorMessages = extractErrorMessagesFromResponse(error);
83+
setIsLoading(false);
84+
showNotification({
85+
title: "Couldn't get provider",
86+
kind: 'error',
87+
critical: true,
88+
description: errorMessages.join(','),
89+
});
90+
},
91+
);
92+
}, [sessionUser?.user?.uuid, mutate]);
93+
94+
useEffect(() => fetchProvider(), [fetchProvider]);
8395

8496
useMemo(() => {
8597
switch (statusSwitcherIndex) {
@@ -457,7 +469,11 @@ const ChangeStatus: React.FC<ChangeStatusDialogProps> = ({ queueEntry, currentEn
457469
<Button kind="danger" onClick={endCurrentVisit}>
458470
{t('endVisit', 'End Visit')}
459471
</Button>
460-
<Button type="submit">{status === 'pending' ? 'Save' : 'Move to the next queue room'}</Button>
472+
{isLoading ? (
473+
<InlineLoading description={'Fetching Provider..'} />
474+
) : (
475+
<Button type="submit">{status === 'pending' ? 'Save' : 'Move to the next queue room'}</Button>
476+
)}
461477
</ModalFooter>
462478
</Form>
463479
</div>

‎packages/esm-patient-queues-app/src/active-visits/change-status-move-to-next-dialog.component.tsx‎

Lines changed: 36 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useCallback, useEffect, useMemo, useState } from 'react';
1+
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
22
import {
33
Button,
44
ContentSwitcher,
@@ -10,6 +10,7 @@ import {
1010
SelectItem,
1111
Switch,
1212
TextArea,
13+
InlineLoading,
1314
} from '@carbon/react';
1415
import { useTranslation } from 'react-i18next';
1516
import {
@@ -42,6 +43,8 @@ const ChangeStatusMoveToNext: React.FC<ChangeStatusDialogProps> = ({ patientUuid
4243

4344
const { providers } = useProviders();
4445

46+
const [isLoading, setIsLoading] = useState(true);
47+
4548
const [contentSwitcherIndex, setContentSwitcherIndex] = useState(1);
4649

4750
const [statusSwitcherIndex, setStatusSwitcherIndex] = useState(1);
@@ -60,22 +63,33 @@ const ChangeStatusMoveToNext: React.FC<ChangeStatusDialogProps> = ({ patientUuid
6063

6164
const { activeVisit } = useVisit(patientUuid);
6265

63-
getCareProvider(sessionUser?.user?.uuid).then(
64-
(response) => {
65-
setProvider(response?.data?.results[0].uuid);
66-
mutate();
67-
},
68-
(error) => {
69-
const errorMessages = extractErrorMessagesFromResponse(error);
70-
71-
showNotification({
72-
title: t(`errorGettingProvider', 'Couldn't get provider`),
73-
kind: 'error',
74-
critical: true,
75-
description: errorMessages.join(','),
76-
});
77-
},
78-
);
66+
// Memoize the function to fetch the provider using useCallback
67+
const fetchProvider = useCallback(() => {
68+
if (!sessionUser?.user?.uuid) return;
69+
70+
setIsLoading(true);
71+
72+
getCareProvider(sessionUser?.user?.uuid).then(
73+
(response) => {
74+
const uuid = response?.data?.results[0].uuid;
75+
setIsLoading(false);
76+
setProvider(uuid);
77+
mutate();
78+
},
79+
(error) => {
80+
const errorMessages = extractErrorMessagesFromResponse(error);
81+
setIsLoading(false);
82+
showNotification({
83+
title: "Couldn't get provider",
84+
kind: 'error',
85+
critical: true,
86+
description: errorMessages.join(','),
87+
});
88+
},
89+
);
90+
}, [sessionUser?.user?.uuid, mutate]);
91+
92+
useEffect(() => fetchProvider(), [fetchProvider]);
7993

8094
useMemo(() => {
8195
switch (statusSwitcherIndex) {
@@ -594,7 +608,11 @@ const ChangeStatusMoveToNext: React.FC<ChangeStatusDialogProps> = ({ patientUuid
594608
<Button kind="danger" onClick={endCurrentVisit}>
595609
{t('endVisit', 'End Visit')}
596610
</Button>
597-
<Button type="submit">{status === 'pending' ? 'Save' : 'Move to the next queue room'}</Button>
611+
{isLoading ? (
612+
<InlineLoading description={'Fetching Provider..'} />
613+
) : (
614+
<Button type="submit">{status === 'pending' ? 'Save' : 'Move to the next queue room'}</Button>
615+
)}
598616
</ModalFooter>
599617
</Form>
600618
</div>

‎packages/esm-patient-queues-app/src/active-visits/edit-action-menu.components.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Button, Tooltip } from '@carbon/react';
1+
import { Button } from '@carbon/react';
22
import { Edit } from '@carbon/react/icons';
33
import { interpolateUrl, navigate } from '@openmrs/esm-framework';
44

@@ -10,23 +10,23 @@ interface NameLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
1010
from: string;
1111
}
1212

13-
const EditActionsMenu: React.FC<NameLinkProps> = ({ from, to, children }) => {
13+
const EditActionsMenu: React.FC<NameLinkProps> = ({ from, to }) => {
1414
const { t } = useTranslation();
1515
const handleNameClick = (event: MouseEvent, to: string) => {
1616
event.preventDefault();
1717
navigate({ to });
1818
localStorage.setItem('fromPage', from);
1919
};
2020
return (
21-
<Tooltip align="bottom" label="Edit Patient">
21+
<div>
2222
<Button
2323
kind="ghost"
2424
onClick={(e) => handleNameClick(e, to)}
2525
href={interpolateUrl(to)}
2626
iconDescription={t('editPatient', 'Edit Patient')}
2727
renderIcon={(props) => <Edit size={16} {...props} />}
28-
></Button>
29-
</Tooltip>
28+
/>
29+
</div>
3030
);
3131
};
3232
export default EditActionsMenu;

‎packages/esm-patient-queues-app/src/active-visits/notes-action-menu.components.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Button, Tooltip } from '@carbon/react';
1+
import { Button } from '@carbon/react';
22
import { CatalogPublish } from '@carbon/react/icons';
33
import React, { useCallback } from 'react';
44
import { useTranslation } from 'react-i18next';
@@ -18,14 +18,14 @@ const NotesActionsMenu: React.FC<NotesActionsMenuProps> = ({ note }) => {
1818
});
1919
}, [note]);
2020
return (
21-
<Tooltip align="bottom" label="View Notes">
21+
<div>
2222
<Button
2323
kind="ghost"
2424
onClick={launchNotesModal}
2525
iconDescription={t('viewNotes', 'View Notes')}
2626
renderIcon={(props) => <CatalogPublish size={16} {...props} />}
2727
/>
28-
</Tooltip>
28+
</div>
2929
);
3030
};
3131
export default NotesActionsMenu;

‎packages/esm-patient-queues-app/src/active-visits/pick-patient-dialog.component.tsx‎

Lines changed: 30 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,13 @@
1-
import {
2-
Button,
3-
ContentSwitcher,
4-
Form,
5-
ModalBody,
6-
ModalFooter,
7-
ModalHeader,
8-
Select,
9-
SelectItem,
10-
Switch,
11-
TextArea,
12-
} from '@carbon/react';
13-
14-
import {
15-
formatDate,
16-
navigate,
17-
parseDate,
18-
showNotification,
19-
showToast,
20-
useLocations,
21-
useSession,
22-
} from '@openmrs/esm-framework';
1+
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
2+
import { Button, Form, ModalBody, ModalFooter, ModalHeader, InlineLoading } from '@carbon/react';
3+
import { formatDate, navigate, parseDate, showNotification, showToast, useSession } from '@openmrs/esm-framework';
234

245
import { getCareProvider, updateQueueEntry } from './active-visits-table.resource';
25-
26-
import React, { useCallback, useEffect, useState } from 'react';
276
import { useTranslation } from 'react-i18next';
287
import { useQueueRoomLocations } from '../hooks/useQueueRooms';
298
import { MappedQueueEntry } from '../types';
30-
31-
import styles from './change-status-dialog.scss';
329
import { trimVisitNumber } from '../helpers/functions';
10+
import { extractErrorMessagesFromResponse } from '../utils/utils';
3311

3412
interface PickPatientDialogProps {
3513
queueEntry: MappedQueueEntry;
@@ -39,39 +17,43 @@ interface PickPatientDialogProps {
3917
const PickPatientStatus: React.FC<PickPatientDialogProps> = ({ queueEntry, closeModal }) => {
4018
const { t } = useTranslation();
4119

42-
const locations = useLocations();
43-
44-
const [selectedLocation, setSelectedLocation] = useState('');
45-
4620
const sessionUser = useSession();
4721

22+
const [isLoading, setIsLoading] = useState(true);
23+
4824
const { queueRoomLocations, mutate } = useQueueRoomLocations(sessionUser?.sessionLocation?.uuid);
4925

5026
const [provider, setProvider] = useState('');
27+
5128
const [priorityComment, setPriorityComment] = useState('');
5229

53-
useEffect(() => {
30+
// Memoize the function to fetch the provider using useCallback
31+
const fetchProvider = useCallback(() => {
32+
if (!sessionUser?.user?.uuid) return;
33+
34+
setIsLoading(true);
35+
5436
getCareProvider(sessionUser?.user?.uuid).then(
5537
(response) => {
56-
setProvider(response?.data?.results[0].uuid);
38+
const uuid = response?.data?.results[0].uuid;
39+
setIsLoading(false);
40+
setProvider(uuid);
5741
mutate();
5842
},
5943
(error) => {
44+
const errorMessages = extractErrorMessagesFromResponse(error);
45+
setIsLoading(false);
6046
showNotification({
61-
title: t(`errorGettingProvider', 'Couldn't get provider`),
47+
title: "Couldn't get provider",
6248
kind: 'error',
6349
critical: true,
64-
description: error?.message,
50+
description: errorMessages.join(','),
6551
});
6652
},
6753
);
68-
});
54+
}, [sessionUser?.user?.uuid, mutate]);
6955

70-
useEffect(() => {
71-
if (locations?.length && sessionUser) {
72-
setSelectedLocation(sessionUser?.sessionLocation?.uuid);
73-
}
74-
}, [locations, sessionUser]);
56+
useEffect(() => fetchProvider(), [fetchProvider]);
7557

7658
const pickPatientQueueStatus = useCallback(
7759
(event) => {
@@ -127,7 +109,14 @@ const PickPatientStatus: React.FC<PickPatientDialogProps> = ({ queueEntry, close
127109
<Button kind="secondary" onClick={closeModal}>
128110
{t('cancel', 'Cancel')}
129111
</Button>
130-
<Button type="submit">{t('pickPatient', 'Pick Patient')}</Button>
112+
113+
{isLoading ? (
114+
<InlineLoading description={'Fetching Provider..'} />
115+
) : (
116+
<Button disabled={isLoading} type="submit">
117+
{t('pickPatient', 'Pick Patient')}
118+
</Button>
119+
)}
131120
</ModalFooter>
132121
</Form>
133122
</div>

0 commit comments

Comments
 (0)