feat: add event delete service

src/assets/colors.scss

@@ -29,3 +29,4 @@ $blue-50: #a6dff7;
 // Black
 $black: #000;
 $black-80: #333;
+$black-30: #212529;

src/features/Instructors/InstructorsDetailPage/index.jsx

@@ -15,13 +15,16 @@ import {
 import { getConfig } from '@edx/frontend-platform';
 import { CalendarExpanded } from 'react-paragon-topaz';
 import { startOfMonth, endOfMonth } from 'date-fns';
+import { logError } from '@edx/frontend-platform/logging';
 
 import Table from 'features/Main/Table';
 import { fetchClassesData } from 'features/Classes/data/thunks';
 import { resetClassesTable, updateCurrentPage } from 'features/Classes/data/slice';
 import { fetchInstructorsData, fetchEventsData, resetEvents } from 'features/Instructors/data';
 import { columns } from 'features/Instructors/InstructorDetailTable/columns';
 import { initialPage, RequestStatus } from 'features/constants';
+import { deleteEvent } from 'features/Instructors/data/api';
+import { updateEvents } from 'features/Instructors/data/slice';
 
 import { useInstitutionIdQueryParam } from 'hooks';
 
@@ -72,6 +75,32 @@ const InstructorsDetailPage = () => {
     dispatch(updateCurrentPage(targetPage));
   };
 
+  const handleDeleteEvent = async (event) => {
+    try {
+      const params = event?.recurrence ? {
+        delete_occurrence: true,
+        start_occurrence: event?.start,
+      } : {};
+
+      await deleteEvent(event.id, params);
+
+      const newEventsState = events.filter(currentEvent => currentEvent.elementId !== event.elementId);
+      dispatch(updateEvents(newEventsState));
+    } catch (error) {
+      logError(error);
+    }
+  };
+
+  const handleDeleteMultipleEvents = async (event) => {
+    try {
+      await deleteEvent(event.id);
+      const newEventsState = events.filter(currentEvent => currentEvent.id !== event.id);
+      dispatch(updateEvents(newEventsState));
+    } catch (error) {
+      logError(error);
+    }
+  };
+
   useEffect(() => {
     if (institution.id) {
       dispatch(fetchInstructorsData(institution.id, initialPage, { instructor: instructorUsername }));
@@ -163,8 +192,8 @@ const InstructorsDetailPage = () => {
                 eventsList={eventsList}
                 onRangeChange={getRangeDate}
                 onEdit={() => {}}
-                onDelete={() => {}}
-                onDeleteMultiple={() => {}}
+                onDelete={handleDeleteEvent}
+                onDeleteMultiple={handleDeleteMultipleEvents}
                 onEditSinglRec={() => {}}
               />
             </div>

src/features/Instructors/InstructorsDetailPage/index.scss

@@ -2,4 +2,9 @@
 
 .container-calendar {
   box-shadow: 0px 3px 12px 0px $gray-30;
+
+  .pgn__dropdown-item {
+    text-decoration: none;
+    color: $black-30;
+  }
 }

src/features/Instructors/data/__test__/api.test.js

@@ -3,6 +3,7 @@ import {
   handleInstructorsEnrollment,
   handleNewInstructor,
   getEventsByInstructor,
+  deleteEvent,
 } from 'features/Instructors/data/api';
 
 jest.mock('@edx/frontend-platform/auth', () => ({
@@ -100,4 +101,25 @@ describe('should call getAuthenticatedHttpClient with the correct parameters', (
       },
     );
   });
+
+  test('delete event', () => {
+    const httpClientMock = {
+      delete: jest.fn(),
+    };
+
+    const eventId = 1;
+
+    getAuthenticatedHttpClient.mockReturnValue(httpClientMock);
+
+    deleteEvent(eventId);
+
+    expect(getAuthenticatedHttpClient).toHaveBeenCalledTimes(1);
+    expect(getAuthenticatedHttpClient).toHaveBeenCalledWith();
+
+    expect(httpClientMock.delete).toHaveBeenCalledTimes(1);
+    expect(httpClientMock.delete).toHaveBeenCalledWith(
+      'http://localhost:18000/pearson_course_operation/api/v2/events/',
+      { params: { event_id: eventId } },
+    );
+  });
 });

src/features/Instructors/data/api.js

@@ -31,8 +31,26 @@ function getEventsByInstructor(params) {
   );
 }
 
+/**
+ * Delete event.
+ *
+ * @param {number} - Event id to be deleted
+ * @returns {Promise} - A promise that resolves with the response of the DELETE request.
+ */
+function deleteEvent(eventId, options = {}) {
+  const params = {
+    event_id: eventId,
+    ...options,
+  };
+  return getAuthenticatedHttpClient().delete(
+    `${getConfig().COURSE_OPERATIONS_API_V2_BASE_URL}/events/`,
+    { params },
+  );
+}
+
 export {
   handleInstructorsEnrollment,
   handleNewInstructor,
   getEventsByInstructor,
+  deleteEvent,
 };