From e66da19f62b2dd3f1dc596cf7e99cabc261cadfc Mon Sep 17 00:00:00 2001
From: Aura Milena Alba <36944773+AuraAlba@users.noreply.github.com>
Date: Mon, 23 Dec 2024 10:19:24 -0500
Subject: [PATCH] PADV-1762 add delete service (#141)

feat: add event delete service
---
 src/assets/colors.scss                        |  1 +
 .../InstructorsDetailPage/index.jsx           | 38 +++++++++++++++++--
 .../InstructorsDetailPage/index.scss          |  5 +++
 .../Instructors/data/__test__/api.test.js     | 22 +++++++++++
 src/features/Instructors/data/api.js          | 18 +++++++++
 5 files changed, 81 insertions(+), 3 deletions(-)

diff --git a/src/assets/colors.scss b/src/assets/colors.scss
index 3d2ad7ba..146fac7a 100644
--- a/src/assets/colors.scss
+++ b/src/assets/colors.scss
@@ -29,3 +29,4 @@ $blue-50: #a6dff7;
 // Black
 $black: #000;
 $black-80: #333;
+$black-30: #212529;
diff --git a/src/features/Instructors/InstructorsDetailPage/index.jsx b/src/features/Instructors/InstructorsDetailPage/index.jsx
index dc911aa4..0520dbd7 100644
--- a/src/features/Instructors/InstructorsDetailPage/index.jsx
+++ b/src/features/Instructors/InstructorsDetailPage/index.jsx
@@ -15,6 +15,7 @@ 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';
@@ -22,6 +23,8 @@ import { resetClassesTable, updateCurrentPage } from 'features/Classes/data/slic
 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 }));
@@ -90,7 +119,10 @@ const InstructorsDetailPage = () => {
 
   useEffect(() => {
     if (instructorInfo.instructorId && showInstructorCalendar) {
-      dispatch(fetchEventsData({ ...rangeDates, instructor_id: instructorInfo.instructorId }));
+      dispatch(fetchEventsData({
+        ...rangeDates,
+        instructor_id: instructorInfo.instructorId,
+      }));
     }
 
     return () => {
@@ -160,8 +192,8 @@ const InstructorsDetailPage = () => {
                 eventsList={eventsList}
                 onRangeChange={getRangeDate}
                 onEdit={() => {}}
-                onDelete={() => {}}
-                onDeleteMultiple={() => {}}
+                onDelete={handleDeleteEvent}
+                onDeleteMultiple={handleDeleteMultipleEvents}
                 onEditSinglRec={() => {}}
               />
             </div>
diff --git a/src/features/Instructors/InstructorsDetailPage/index.scss b/src/features/Instructors/InstructorsDetailPage/index.scss
index 1fdab58a..af78412a 100644
--- a/src/features/Instructors/InstructorsDetailPage/index.scss
+++ b/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;
+  }
 }
diff --git a/src/features/Instructors/data/__test__/api.test.js b/src/features/Instructors/data/__test__/api.test.js
index 364aeb6e..fd994432 100644
--- a/src/features/Instructors/data/__test__/api.test.js
+++ b/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 } },
+    );
+  });
 });
diff --git a/src/features/Instructors/data/api.js b/src/features/Instructors/data/api.js
index f00b3097..95335f49 100644
--- a/src/features/Instructors/data/api.js
+++ b/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,
 };