fix endpoint

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

@@ -136,8 +136,14 @@ export async function addPatientToList(data: AddPatientData, ac = new AbortContr
   return postData(`${cohortUrl}/cohortmember`, data, ac);
 }
 
-export async function deletePatientFromList(patientUuid: string, ac = new AbortController()) {
-  return deleteData(`${cohortUrl}/cohortmember`, patientUuid, ac);
+export async function removePatientFromList(cohortMembershipUuid: string, ac = new AbortController()) {
+  return deleteData(
+    `${cohortUrl}/cohortmember/${cohortMembershipUuid}`,
+    {
+      voidReason: '',
+    },
+    ac,
+  );
 }
 
 export async function createPatientList(cohort: NewCohortDataPayload, ac = new AbortController()) {

packages/esm-patient-list-app/src/patient-list-list/patient-list-table.component.tsx

@@ -26,11 +26,12 @@ import {
   ErrorState,
   usePagination,
   useConfig,
+  OpenmrsResource,
 } from '@openmrs/esm-framework';
 import { ConfigSchema } from '../config-schema';
 import styles from './patient-list-list.scss';
 import { PatientList } from '../api/types';
-import { updatePatientList, deletePatientFromList } from '../api/api-remote';
+import { updatePatientList, removePatientFromList } from '../api/api-remote';
 import { PatientListEmptyState } from './empty-state/empty-state.component';
 import { useTranslation } from 'react-i18next';
 import PatientListOverflowMenuComponent from '../patient-table/overflow-menu.component';

packages/esm-patient-list-app/src/patient-table/overflow-menu.component.tsx

@@ -1,24 +1,59 @@
-import React from 'react';
-import { OverflowMenu, OverflowMenuItem } from '@carbon/react';
+import { isDesktop, showToast, useLayoutType } from '@openmrs/esm-framework';
+import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { deletePatientFromList } from '../api/api-remote';
+import { removePatientFromList } from '../api/api-remote';
+import { OverflowMenu, TableCell, Layer, OverflowMenuItem } from '@carbon/react';
+import styles from './patient-table.scss';
 
-interface PatientListOverflowMenuComponentProps {
-  patientUuid: string;
+interface OverflowMenuComponentProps {
+  cohortMembershipUuid: string;
 }
 
-const PatientListOverflowMenuComponent: React.FC<PatientListOverflowMenuComponentProps> = ({ patientUuid }) => {
+const OverflowMenuComponent: React.FC<OverflowMenuComponentProps> = ({ cohortMembershipUuid }) => {
   const { t } = useTranslation();
+  const layoutType = useLayoutType();
+  const desktopLayout = isDesktop(layoutType);
 
-  const handleDeletePatient = async () => {
-    alert('deleteCalled');
-  };
+  // eslint-disable-next-line no-console
+  console.log(cohortMembershipUuid);
+
+  const handleRemovePatientFromList = useCallback(() => {
+    removePatientFromList(cohortMembershipUuid)
+      .then(() =>
+        showToast({
+          title: t('removed', 'Removed'),
+          description: t('deletedPatientFromList', 'Successfully removed patient from list'),
+          kind: 'success',
+        }),
+      )
+      .catch(() =>
+        showToast({
+          title: t('error', 'Error'),
+          description: t('errorRemovePatientFromList', "Couldn't remove patient from this list"),
+          kind: 'error',
+        }),
+      );
+  }, [cohortMembershipUuid, t]);
 
   return (
-    <OverflowMenu ariaLabel="Actions" size="sm" flipped>
-      <OverflowMenuItem itemText={t('deletePatient', 'Delete Patient')} onClick={handleDeletePatient} isDelete />
-    </OverflowMenu>
+    <TableCell className="cds--table-column-menu">
+      <Layer className={styles.layer}>
+        <OverflowMenu
+          data-floating-menu-container
+          ariaLabel="Remove patient form list"
+          size={desktopLayout ? 'sm' : 'lg'}
+          flipped>
+          <OverflowMenuItem
+            size={desktopLayout ? 'sm' : 'lg'}
+            className={styles.menuItem}
+            onClick={handleRemovePatientFromList}
+            itemText={t('removePatientFromList', 'Remove patient from list')}
+            delete
+          />
+        </OverflowMenu>
+      </Layer>
+    </TableCell>
   );
 };
 
-export default PatientListOverflowMenuComponent;
+export default OverflowMenuComponent;

packages/esm-patient-list-app/src/patient-table/patient-table.component.tsx

@@ -17,12 +17,12 @@ import {
   TableRow,
 } from '@carbon/react';
 import debounce from 'lodash-es/debounce';
-import { ConfigurableLink, useLayoutType, isDesktop } from '@openmrs/esm-framework';
+import { ConfigurableLink, useLayoutType, isDesktop, OpenmrsResource } from '@openmrs/esm-framework';
 import styles from './patient-table.scss';
 import PatientListOverflowMenuComponent from './overflow-menu.component';
 
 interface PatientTableProps {
-  patients: Array<Object>;
+  patients: Array<OpenmrsResource>;
   columns: Array<PatientTableColumn>;
   style?: CSSProperties;
   autoFocus?: boolean;
@@ -69,6 +69,7 @@ const PatientTable: React.FC<PatientTableProps> = ({
       patients.map((patient, index) => {
         const row = {
           id: index,
+          uuid: patient?.uuid,
         };
         columns.forEach((column) => {
           const value = column.getValue?.(patient) || patient[column.key];
@@ -85,6 +86,8 @@ const PatientTable: React.FC<PatientTableProps> = ({
     [patients, columns],
   );
 
+  console.log(patients, rows);
+
   const handleSearch = useMemo(() => debounce((searchTerm) => search.onSearch(searchTerm), 300), []);
   const otherSearchProps = useMemo(() => search.otherSearchProps || {}, [search]);
 
@@ -140,7 +143,7 @@ const PatientTable: React.FC<PatientTableProps> = ({
                       <TableCell key={cell.id}>{cell.value?.content ?? cell.value}</TableCell>
                     ))}
                     <TableCell className="cds--table-column-menu">
-                      <PatientListOverflowMenuComponent patientUuid={row.id} />
+                      <PatientListOverflowMenuComponent cohortMembershipUuid={row.uuid} />
                     </TableCell>
                   </TableRow>
                 ))}