[Phani] | BAH-3711 | Refactor appointment patient search component

i18n/appointments/locale_en.json

@@ -173,7 +173,7 @@
   "SELECT_APPOINTMENT_PROVIDER": "Select Provider",
   "INVITED_PROVIDERS": "Invitees",
   "APPOINTMENT_PROVIDER_REMOVE_ACTION": "Remove",
-  "DROPDOWN_NO_OPTIONS_MESSAGE" : "Type to search",
+  "DROPDOWN_NO_OPTIONS_MESSAGE" : "No patients found",
   "DROPDOWN_LOADING_MESSAGE" : "Loading...",
   "RECURRENCE_THIS_APPOINTMENT": "Cancel Occurrence",
   "RECURRENCE_ALL_APPOINTMENTS" : "Cancel All",

ui/package.json

@@ -14,7 +14,7 @@
     "carbon-components-react": "7.55.1",
     "carbon-components": "^10.19.0",
     "carbon-icons": "^7.0.7",
-    "axios": "^0.19.0",
+    "axios": "^1.6.7",
     "babel-polyfill": "^6.26.0",
     "classnames": "^2.2.6",
     "js-cookie": "^2.2.1",

ui/react-components/api/patientApi.js

@@ -1,12 +1,23 @@
 import axios from 'axios';
 import {patientUrl, searchPatientUrl, personUrl} from '../config';
 
-export const getPatientsByLocation = async (locationUuid, searchQuery, startIndex = 0) => {
+export const getPatientsByLocation = async (locationUuid, searchQuery, cancelToken, startIndex = 0) => {
     try {
-        const response = await axios.get(`${searchPatientUrl}?loginLocationUuid=${locationUuid}&filterOnAllIdentifiers=true&identifier=${searchQuery}&q=${searchQuery}&startIndex=${startIndex}`);
+        const response = await axios.get(searchPatientUrl, {
+            params: {
+                loginLocationUuid: locationUuid,
+                filterOnAllIdentifiers: true,
+                identifier: searchQuery,
+                q: searchQuery,
+                startIndex: startIndex
+            },
+            cancelToken: cancelToken
+        });
         return response.data.pageOfResults;
     } catch (error) {
-        console.error(error);
+        if (!axios.isCancel(error)) {
+            console.error(error);
+        }
         return error.response;
     }
 };
@@ -25,7 +36,7 @@ export const getPersonAttribute = async (uuid, attribute) => {
     try {
         const response = await axios.get(`${personUrl}/${uuid}/attribute`);
         for (let i = 0; i < response.data.results.length; i++) {
-            if(response.data.results[i].attributeType.display == attribute)
+            if (response.data.results[i].attributeType.display == attribute)
                 return response.data.results[i].value;
         }
         return null;

ui/react-components/api/patientApi.spec.js

@@ -9,9 +9,20 @@ afterEach(() => {
 });
 
 describe('Patient Api', () => {
-    it('should take location uuid and search query to return list of patients', async () =>{
+    it('should take location uuid and search query and cancel Token to return list of patients', async () =>{
         let locationUuid = "locationUuid";
         let searchQuery = "searchquery";
+        let cancelToken = "CancelToken";
+        let expectedParams =  {
+            cancelToken: cancelToken,
+            params: {
+                filterOnAllIdentifiers: true,
+                identifier: searchQuery,
+                loginLocationUuid: locationUuid,
+                q: searchQuery,
+                startIndex: 0
+            }
+        }
         let mockResponse = {
             "totalCount": null,
             "pageOfResults": [
@@ -41,18 +52,28 @@ describe('Patient Api', () => {
             })
         );
 
-        let patientsByLocation = await getPatientsByLocation(locationUuid, searchQuery);
+        let patientsByLocation = await getPatientsByLocation(locationUuid, searchQuery, cancelToken);
 
         expect(mockAxios.get)
-            .toHaveBeenCalledWith(
-                `${searchPatientUrl}?loginLocationUuid=${locationUuid}&filterOnAllIdentifiers=true&identifier=${searchQuery}&q=${searchQuery}&startIndex=0`);
+            .toHaveBeenCalledWith(searchPatientUrl, expectedParams);
         expect(patientsByLocation).toEqual(mockResponse.pageOfResults);
     });
 
     it('should take location uuid and search query and start index to return list of patients', async () => {
         let locationUuid = "locationUuid";
         let searchQuery = "searchquery";
         let startIndex = 6;
+        let cancelToken = "CancelToken";
+        let expectedParams =  {
+            cancelToken: cancelToken,
+            params: {
+                filterOnAllIdentifiers: true,
+                identifier: searchQuery,
+                loginLocationUuid: locationUuid,
+                q: searchQuery,
+                startIndex: startIndex
+            }
+        }
         let mockResponse = {
             "totalCount": null,
             "pageOfResults": [
@@ -82,11 +103,10 @@ describe('Patient Api', () => {
             })
         );
 
-        await getPatientsByLocation(locationUuid, searchQuery, startIndex);
+        await getPatientsByLocation(locationUuid, searchQuery, cancelToken, startIndex);
 
         expect(mockAxios.get)
-            .toHaveBeenCalledWith(
-                `${searchPatientUrl}?loginLocationUuid=${locationUuid}&filterOnAllIdentifiers=true&identifier=${searchQuery}&q=${searchQuery}&startIndex=${startIndex}`);
+            .toHaveBeenCalledWith(searchPatientUrl, expectedParams);
     });
 
     it('should fetch patient by given uuid', async () =>{

ui/react-components/carbon-theme.scss

@@ -86,8 +86,8 @@ $css--body: false;
 .bx--radio-button:checked+.bx--radio-button__label .bx--radio-button__appearance::before {
   background-color: #0a74ff;
 }
-.bx--list-box__wrapper{
-  max-width: 250px;
+.bx--list-box__menu-item[disabled] .bx--list-box__menu-item__option {
+  color: #363463;
 }
 .bx--number__control-btn{
   border: none;

ui/react-components/components/AddAppointment/AddAppointment.test.jsx

@@ -77,9 +77,9 @@ describe('Add Appointment', () => {
             "enableServiceTypes": true
         };
         const {container, getByTestId} = renderWithReactIntl(<AddAppointment appConfig={config}/>);
-        expect(container.querySelector('.bx--search-input')).not.toBeNull();
+        expect(container.querySelector('.bx--text-input')).not.toBeNull();
         expect(container.querySelector('.bx--list-box')).not.toBeNull();
-        expect(container.querySelectorAll('.bx--list-box').length).toEqual(4);
+        expect(container.querySelectorAll('.bx--list-box').length).toEqual(5);
         expect(getByTestId('search-patient')).not.toBeNull();
         expect(getByTestId('service-search')).not.toBeNull();
         expect(() => getByTestId('speciality-search')).toThrow();
@@ -93,9 +93,9 @@ describe('Add Appointment', () => {
             "enableServiceTypes": true
         };
         const {container, getByTestId} = renderWithReactIntl(<AddAppointment appConfig={config}/>);
-        expect(container.querySelector('.bx--search-input')).not.toBeNull();
+        expect(container.querySelector('.bx--text-input')).not.toBeNull();
         expect(container.querySelector('.bx--list-box')).not.toBeNull();
-        expect(container.querySelectorAll('.bx--list-box').length).toEqual(5);
+        expect(container.querySelectorAll('.bx--list-box').length).toEqual(6);
         expect(getByTestId('patient-search')).not.toBeNull();
         expect(getByTestId('service-search')).not.toBeNull();
         expect(getByTestId('speciality-search')).not.toBeNull();
@@ -136,18 +136,17 @@ describe('Add Appointment', () => {
 
         //select patient
         const targetPatient = '9DEC74AB 9DEC74B7 (IQ1110)';
-        const inputBox = container.querySelector('.bx--search-input');
-        fireEvent.blur(inputBox);
+        const inputBox = container.querySelector('.bx--text-input');
         fireEvent.change(inputBox, { target: { value: "abc" } });
         await waitForElement(
-            () => (container.querySelector('.bx--tile--clickable'))
+            () => (container.querySelector('.bx--list-box__menu-item'))
         );
-        fireEvent.click(container.querySelector('.bx--tile--clickable'))
+        fireEvent.click(container.querySelector('.bx--list-box__menu-item'))
 
 
         //select service
         const targetService = 'Physiotherapy OPD';
-        const inputBoxService = container.querySelector('.bx--text-input');
+        const inputBoxService = container.querySelectorAll('.bx--text-input')[1];
         fireEvent.change(inputBoxService, { target: { value: "Phy" } });
         await waitForElement(() => (container.querySelector('.bx--list-box__menu')));
         const option = getByText(targetService);
@@ -494,9 +493,9 @@ describe('Add Appointment', () => {
 
         expect(queryByText("Provider One")).not.toBeNull();
         getByText("Please select maximum of 1 provider(s)");
-        expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function), 200);
-        jest.runAllTimers();
-        expect(queryByText("Please select maximum of 1 provider(s)")).toBeNull();
+        setTimeout(() => {
+            expect(queryByText("Please select maximum of 1 provider(s)")).toBeNull();
+        }, 3000);
     });
 
     it('should hide service appointment type if enableServiceTypes is undefined', () => {
@@ -554,10 +553,6 @@ describe('Add Appointment', () => {
         expect(dateInputField.value).toBe(selectedDate.format('MM/DD/YYYY'));
 
     });
-    it('should fetch patient details on load if patient is present in url params', () => {
-        const {findByText} = renderWithReactIntl(<AddAppointment urlParams={{patient:"6bb24e7e-5c04-4561-9e7a-2d2bbf8074ad"}}/>);
-        expect(findByText('Test Patient')).not.toBeNull();
-    });
 });
 
 describe('Add appointment with appointment request enabled', () => {
@@ -566,12 +561,11 @@ describe('Add appointment with appointment request enabled', () => {
 
     const selectPatient = async (container, getByText) => {
         const targetPatient = '9DEC74AB 9DEC74B7 (IQ1110)';
-        const inputBox = container.querySelector('.bx--search-input');
-        fireEvent.blur(inputBox);
+        const inputBox = container.querySelector('.bx--text-input');
         fireEvent.change(inputBox, { target: { value: "abc" } });
         let searchedPatient;
         await waitForElement(
-            () => (searchedPatient = container.querySelector('.bx--tile--clickable'))
+            () => (searchedPatient = container.querySelector('.bx--list-box__menu-item'))
         );
         expect(getByText(targetPatient)).toBeTruthy();
         fireEvent.click(searchedPatient);
@@ -627,13 +621,13 @@ describe('Add appointment with appointment request enabled', () => {
     });
 
     it('should update the appointment status and provider responses if the AppointmentRequest is Enabled', async () => {
-        const {container, getByText, getByTestId, queryByText} = renderWithReactIntl(
+        const {container, queryAllByText, getByText, getByTestId, queryByText} = renderWithReactIntl(
             <AppContext.Provider value={{setViewDate: jest.fn()}}>
                 <AddAppointment appConfig={config} appointmentParams={appointmentTime} currentProvider={currentProvider}/>
             </AppContext.Provider>
 
         );
-        await selectPatient(container, getByText);
+        await selectPatient(container, queryAllByText);
         await selectService(getByTestId, getByText);
         await selectProvider(getByTestId, getByText, "Two", "Provider Two");
         await selectProvider(getByTestId, getByText, "Three", "Provider Three");
@@ -678,6 +672,10 @@ describe('Add appointment with appointment request enabled', () => {
         expect(appointmentRequestData.providers[0].response).toEqual("ACCEPTED");
         expect(appointmentRequestData.providers[1].name).toEqual("Provider Two");
         expect(appointmentRequestData.providers[1].response).toEqual("AWAITING");
-    })
-});
+    });
 
+    it('should fetch patient details on load if patient is present in url params', () => {
+        const {findByText} = renderWithReactIntl(<AddAppointment urlParams={{patient:"6bb24e7e-5c04-4561-9e7a-2d2bbf8074ad"}}/>);
+        expect(findByText('Test Patient')).not.toBeNull();
+    });
+});