Review changes

packages/esm-patient-list-app/src/AddPatientToList/index.tsx

@@ -6,52 +6,46 @@ import { usePatientListData } from '../patientListData';
 import { useTranslation } from 'react-i18next';
 import styles from './add-patient-to-list.scss';
 
-import { OpenmrsCohort, addPatientToList } from '../patientListData/api';
+import { OpenmrsCohort, addPatientToList, getPatientListsForPatient } from '../patientListData/api';
 import SkeletonText from 'carbon-components-react/es/components/SkeletonText';
 import { toOmrsIsoString } from '@openmrs/esm-framework';
-
-const CheckboxedPatientList = ({ name, uuid, checked, handleChange }) => {
-  return (
-    <div className={styles.checkbox}>
-      <Checkbox checked={checked} labelText={name} id={uuid} onChange={(e) => handleChange(uuid, e)} />
-    </div>
-  );
-};
+import { useCallback } from 'react';
 
 const AddPatient: React.FC<{ close: () => void; patientUuid: string }> = ({ close, patientUuid }) => {
   const { t } = useTranslation();
-  const [searchValue, setSearchValue] = React.useState('');
+  const [searchValue, setSearchValue] = useState('');
   const { loading, data } = usePatientListData(undefined, undefined, undefined, searchValue);
   const [selectedLists, setSelectedList] = useState({});
 
   useEffect(() => {
     const lists = {};
     if (data) {
-      data.map((patientList, ind) => {
+      data.map((patientList) => {
         lists[patientList.uuid] = false;
       });
     }
+    getPatientListsForPatient(patientUuid).then((res) => console.log(res));
     setSelectedList(lists);
   }, [data]);
 
-  const handleChange = (uuid, e) => {
+  const handleChange = useCallback((uuid, e) => {
     setSelectedList((selectedLists) => ({
       ...selectedLists,
       [uuid]: e,
     }));
-  };
+  }, []);
 
-  const handleSubmit = () => {
+  const handleSubmit = useCallback(() => {
     data.map((patientList) => {
       if (selectedLists[patientList.uuid]) {
         addPatientToList({
-          patient: 'b2f86b28-7998-4812-83a9-7f8ad3c47e66',
+          patient: patientUuid,
           cohort: patientList.uuid,
           startDate: toOmrsIsoString(new Date()),
         });
       }
     });
-  };
+  }, []);
 
   return (
     <div className={styles.modalContent}>
@@ -65,6 +59,7 @@ const AddPatient: React.FC<{ close: () => void; patientUuid: string }> = ({ clos
         <Search
           style={{ backgroundColor: 'white', borderBottom: '1px solid #e0e0e0' }}
           labelText={t('searchForList', 'Search for a list')}
+          placeholder="Filter list"
           onChange={({ target }) => {
             setSearchValue(target.value);
           }}
@@ -82,13 +77,15 @@ const AddPatient: React.FC<{ close: () => void; patientUuid: string }> = ({ clos
           {!loading && data ? (
             data.length > 0 ? (
               data.map((patientList, ind) => (
-                <CheckboxedPatientList
-                  key={ind}
-                  handleChange={handleChange}
-                  checked={selectedLists[patientList.uuid] === undefined}
-                  name={patientList.name}
-                  uuid={patientList.uuid}
-                />
+                <div key={ind} className={styles.checkbox}>
+                  <Checkbox
+                    key={ind}
+                    onChange={(e) => handleChange(patientList.uuid, e)}
+                    checked={selectedLists[patientList.uuid] === undefined}
+                    labelText={patientList.name}
+                    id={patientList.uuid}
+                  />
+                </div>
               ))
             ) : (
               <p className={styles.bodyLong01}>No patient list found</p>

packages/esm-patient-list-app/src/patient-list-action.tsx

@@ -3,9 +3,11 @@ import { useTranslation } from 'react-i18next';
 import Modal from './Modal';
 import AddPatientToList from './AddPatientToList';
 
-interface AddPastVisitOverflowMenuItemProps {}
+interface AddPastVisitOverflowMenuItemProps {
+  patientUuid: string;
+}
 
-const AddPastVisitOverflowMenuItem: React.FC<AddPastVisitOverflowMenuItemProps> = () => {
+const AddPastVisitOverflowMenuItem: React.FC<AddPastVisitOverflowMenuItemProps> = ({ patientUuid }) => {
   const { t } = useTranslation();
   const [modalOpen, setModalOpen] = React.useState(false);
   const handleClick = React.useCallback(() => {
@@ -30,7 +32,7 @@ const AddPastVisitOverflowMenuItem: React.FC<AddPastVisitOverflowMenuItemProps>
       </li>
       {modalOpen && (
         <Modal close={closeModal}>
-          <AddPatientToList close={closeModal} patientUuid="" />
+          <AddPatientToList close={closeModal} patientUuid={patientUuid} />
         </Modal>
       )}
     </>

packages/esm-patient-list-app/src/patientListData/api.ts

@@ -1,8 +1,8 @@
-import { Location, OpenmrsResource } from '@openmrs/esm-api';
+import { Location, OpenmrsResource, openmrsFetch } from '@openmrs/esm-framework';
 import { PATIENT_LIST_TYPE } from './types';
 
 async function postData(url = '', data = {}) {
-  const response = await fetch(url, {
+  const response = await openmrsFetch(url, {
     method: 'POST',
     mode: 'cors',
     cache: 'no-cache',
@@ -14,7 +14,7 @@ async function postData(url = '', data = {}) {
     referrerPolicy: 'no-referrer',
     body: JSON.stringify(data),
   });
-  return response.json();
+  return response.data;
 }
 
 export interface OpenmrsCohort {
@@ -50,26 +50,33 @@ export async function getAllPatientLists(filter?: PATIENT_LIST_TYPE, stared?: bo
   }: {
     results: Array<OpenmrsCohort>;
     error: Error;
-  } = await (await fetch('/openmrs/ws/rest/v1/cohortm/cohort?v=default')).json();
+  } = await (
+    await openmrsFetch<{ results: Array<OpenmrsCohort>; error: Error }>('/openmrs/ws/rest/v1/cohortm/cohort?v=default')
+  ).data;
 
   if (error) throw error;
 
   return results;
 }
 
-async function getPatientListMembers(cohortUuid: string) {
+export async function getPatientListMembers(cohortUuid: string) {
   const {
     results,
     error,
   }: {
     results: Array<OpenmrsCohortMember>;
     error: Error;
-  } = await (await fetch(`/openmrs/ws/rest/v1/cohortm/cohortmember?cohort=${cohortUuid}&v=default`)).json();
+  } = await (
+    await openmrsFetch<{
+      results: Array<OpenmrsCohortMember>;
+      error: Error;
+    }>(`/openmrs/ws/rest/v1/cohortm/cohortmember?cohort=${cohortUuid}&v=default`)
+  ).data;
 
   if (error) throw error;
 
   const patients: Array<OpenmrsResource> = (
-    await fetch('/openmrs/ws/fhir2/R4/Patient/_search?_id=' + results.map((p) => p.patient.uuid).join(','), {
+    await openmrsFetch('/openmrs/ws/fhir2/R4/Patient/_search?_id=' + results.map((p) => p.patient.uuid).join(','), {
       method: 'POST',
     }).then((res) => res.json())
   ).entry.map((e) => e.resource);
@@ -84,7 +91,11 @@ export async function getPatientListsForPatient(patientUuid: string) {
   }: {
     results: Array<OpenmrsCohortMember>;
     error: Error;
-  } = await (await fetch(`/openmrs/ws/rest/v1/cohortm/cohortmember?patient=${patientUuid}&v=default`)).json();
+  } = await (
+    await openmrsFetch<{ results: Array<OpenmrsCohortMember>; error: Error }>(
+      `/ws/rest/v1/cohortm/cohortmember?patient=${patientUuid}&v=default`,
+    )
+  ).data;
 
   if (error) throw error;
 
@@ -104,13 +115,3 @@ export async function createPatientList(cohort: { name: string }) {
     groupCohort: true,
   });
 }
-
-globalThis.api = {
-  createPatientList,
-  addPatientToList,
-  getPatientListMembers,
-  getAllPatientLists,
-  getPatientListsForPatient,
-};
-
-export default globalThis.api;