MF-798: Add swr to appointments widget #400
Conversation
denniskigen
changed the title
1. Refactor the appointments Form logic to: - Use SWR for data fetching. - Add a call to mutate so that the appointments widgets get a trigger to revalidate their data when a new appointment is successfully scheduled. - Simplify state change handlers so it's absolutely clear what's changing at any given time. - Render a SearchSkeleton instead of a DataTableSkeleton when the form is loading after launch. 2. Rename the appointments form workspace extension slot to the plural form `appointment-form-workspace`. 3. Move the useAppointmentService hook to the appointments resource.
| <section className={styles.formGroup}> | ||
| <span>{t('location', 'Location')}</span> | ||
| <Select | ||
| id="location" |
There was a problem hiding this comment.
Let's pick a stronger ID. These need to be globally unique, right?
| id="location" | |
| id="appointmentLocation" |
| jest.mock('@openmrs/esm-framework', () => { | ||
| const originalModule = jest.requireActual('@openmrs/esm-framework'); | ||
|
|
||
| return { | ||
| ...originalModule, | ||
| detach: jest.fn(), | ||
| useLocations: jest.fn().mockImplementation(() => mockLocations), | ||
| useSessionUser: jest.fn().mockImplementation(() => mockSessionDataResponse.data), | ||
| showToast: jest.fn(), | ||
| }; | ||
| }); |
There was a problem hiding this comment.
Just for my understanding, why do we do this?
There was a problem hiding this comment.
I want to mock only a small subset of functions that the module provides. Here I'm saying I want to mock detach and showToast without actually overriding their implementations. This is because I want to be able to track calls to those functions so that I can assert that they were called a certain number of times and that they were called with certain arguments. For useLocations and useSessionUser, I want to override their implementations so that all the tests in my suite get access to the same locations and session data.
| userEvent.clear(dateInput); | ||
| userEvent.type(dateInput, '4/4/2021'); | ||
| userEvent.clear(timeInput); | ||
| userEvent.type(timeInput, '09:30'); | ||
| userEvent.selectOptions(timeFormat, 'AM'); | ||
| userEvent.selectOptions(serviceSelect, ['Outpatient']); | ||
| userEvent.selectOptions(serviceTypeSelect, ['Chemotherapy']); | ||
| userEvent.selectOptions(appointmentTypeSelect, ['Scheduled']); |
|
|
||
| export function useAppointments(patientUuid: string, startDate: string, abortController: AbortController) { | ||
| /* | ||
| SWR isn't meant to make POST requests for data fetching. This is a consequence of the API only exposing this resource via POST. |
There was a problem hiding this comment.
Why... is the API like that...???
There was a problem hiding this comment.
This seems like a good workaround, anyway, assuming it's a fake POST (doesn't actually do any mutation)
There was a problem hiding this comment.
But yeah, who do we talk to to fix that
There was a problem hiding this comment.
I don't know, I think I fielded this same question on a squad call in the past even.
There was a problem hiding this comment.
Who owns that API?
EDIT: Oh sorry, you just said, unknown. Let's try and find that out?
| : null; | ||
|
|
||
| const pastAppointments = appointments?.filter((appointment) => | ||
| dayjs((appointment.startDateTime / 1000) * 1000).isBefore(dayjs()), |
There was a problem hiding this comment.
Hmmm, good question. Doesn't seem to do anything. I'll remove it in a future PR.
Thanks, Brandon! |
Requirements
Summary
This PR:
extract-translationstask to the package.json file in the appointments microfrontend.Issue
https://issues.openmrs.org/browse/MF-798