feat: availability tab with calendar

src/features/Instructors/InstructorsDetailPage/_test_/index.test.jsx → src/features/Instructors/InstructorsDetailPage/__test__/index.test.jsx

@@ -1,15 +1,20 @@
 import React from 'react';
-import { waitFor } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-import { renderWithProviders } from 'test-utils';
+import { fireEvent, waitFor } from '@testing-library/react';
 import { MemoryRouter, Route } from 'react-router-dom';
+import { getConfig } from '@edx/frontend-platform';
+import '@testing-library/jest-dom/extend-expect';
 
+import { renderWithProviders } from 'test-utils';
 import InstructorsDetailPage from 'features/Instructors/InstructorsDetailPage';
 
 jest.mock('@edx/frontend-platform/logging', () => ({
   logError: jest.fn(),
 }));
 
+jest.mock('@edx/frontend-platform', () => ({
+  getConfig: jest.fn(),
+}));
+
 const mockStore = {
   main: {
     selectedInstitution: {
@@ -69,6 +74,20 @@ const mockStore = {
       num_pages: 1,
       current_page: 1,
     },
+    events: {
+      data: [
+        {
+          id: 1,
+          title: 'Not available',
+          start: '2024-09-04T00:00:00Z',
+          end: '2024-09-13T00:00:00Z',
+          type: 'virtual',
+        },
+      ],
+      count: 1,
+      num_pages: 1,
+      current_page: 1,
+    },
   },
 };
 
@@ -98,4 +117,47 @@ describe('InstructorsDetailPage', () => {
       expect(component.container).toHaveTextContent('in progress');
     });
   });
+
+  test('Should render the calendar if the flag is provided', async () => {
+    getConfig.mockImplementation(() => ({ enable_instructor_calendar: true }));
+
+    const { getByText } = renderWithProviders(
+      <MemoryRouter initialEntries={['/instructors/instructor']}>
+        <Route path="/instructors/:instructorUsername">
+          <InstructorsDetailPage />
+        </Route>
+      </MemoryRouter>,
+      { preloadedState: mockStore },
+    );
+
+    fireEvent.click(getByText('Availability'));
+
+    await waitFor(() => {
+      expect(getByText('Today')).toBeInTheDocument();
+      expect(getByText('Sunday')).toBeInTheDocument();
+      expect(getByText('Monday')).toBeInTheDocument();
+      expect(getByText('Tuesday')).toBeInTheDocument();
+      expect(getByText('Wednesday')).toBeInTheDocument();
+      expect(getByText('Thursday')).toBeInTheDocument();
+      expect(getByText('Friday')).toBeInTheDocument();
+      expect(getByText('Saturday')).toBeInTheDocument();
+    });
+  });
+
+  test('Should not render the calendar if the flag is false or is not provided', async () => {
+    getConfig.mockImplementation(() => ({ enable_instructor_calendar: false }));
+
+    const { queryByText } = renderWithProviders(
+      <MemoryRouter initialEntries={['/instructors/instructor']}>
+        <Route path="/instructors/:instructorUsername">
+          <InstructorsDetailPage />
+        </Route>
+      </MemoryRouter>,
+      { preloadedState: mockStore },
+    );
+
+    const calendarTab = queryByText('Availability');
+
+    expect(calendarTab).not.toBeInTheDocument();
+  });
 });

src/features/Instructors/InstructorsDetailPage/index.jsx

@@ -1,4 +1,9 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, {
+  useState,
+  useEffect,
+  useRef,
+  useCallback,
+} from 'react';
 import { useParams, useHistory } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import {
@@ -7,56 +12,94 @@ import {
   Tabs,
   Tab,
 } from '@edx/paragon';
+import { getConfig } from '@edx/frontend-platform';
+import { CalendarExpanded } from 'react-paragon-topaz';
+import { startOfMonth, endOfMonth } from 'date-fns';
+
 import Table from 'features/Main/Table';
 import { fetchClassesData } from 'features/Classes/data/thunks';
 import { resetClassesTable, updateCurrentPage } from 'features/Classes/data/slice';
-import { fetchInstructorsData } from 'features/Instructors/data/thunks';
+import { fetchInstructorsData, fetchEventsData, resetEvents } from 'features/Instructors/data';
 import { columns } from 'features/Instructors/InstructorDetailTable/columns';
 import { initialPage, RequestStatus } from 'features/constants';
 
 import { useInstitutionIdQueryParam } from 'hooks';
 
 import LinkWithQuery from 'features/Main/LinkWithQuery';
 
+import 'features/Instructors/InstructorsDetailPage/index.scss';
+
+const initialState = {
+  instructor_id: null,
+  start_date: startOfMonth(new Date()).toISOString(),
+  end_date: endOfMonth(new Date()).toISOString(),
+};
+
+const defaultInstructorInfo = {
+  instructorUsername: '',
+  instructorName: '',
+};
+
 const InstructorsDetailPage = () => {
   const history = useHistory();
   const dispatch = useDispatch();
   const { instructorUsername } = useParams();
   const addQueryParam = useInstitutionIdQueryParam();
+  const events = useSelector((state) => state.instructors.events.data);
 
   const institutionRef = useRef(undefined);
   const [currentPage, setCurrentPage] = useState(initialPage);
+  const [eventsList, setEventsList] = useState([]);
+  const [rangeDates, setRangeDates] = useState(initialState);
 
-  const defaultInstructorInfo = {
-    instructorUsername: '',
-    instructorName: '',
-  };
+  const getRangeDate = useCallback((range) => {
+    setRangeDates({
+      start_date: range.start.toISOString(),
+      end_date: range.end.toISOString(),
+    });
+  }, [setRangeDates]);
 
   const institution = useSelector((state) => state.main.selectedInstitution);
   const classes = useSelector((state) => state.classes.table);
   const instructorInfo = useSelector((state) => state.instructors.table.data)
-    .find((instructor) => instructor?.instructorUsername === instructorUsername) || defaultInstructorInfo;
+    ?.find((instructor) => instructor?.instructorUsername === instructorUsername) || defaultInstructorInfo;
+
   const isLoading = classes.status === RequestStatus.LOADING;
+  const showInstructorCalendar = getConfig()?.enable_instructor_calendar || false;
 
   const handlePagination = (targetPage) => {
     setCurrentPage(targetPage);
     dispatch(updateCurrentPage(targetPage));
   };
 
   useEffect(() => {
-    if (institution.id && instructorUsername) {
-      dispatch(fetchClassesData(institution.id, initialPage, '', { instructor: instructorUsername }));
+    if (institution.id) {
       dispatch(fetchInstructorsData(institution.id, initialPage, { instructor: instructorUsername }));
     }
+  }, [dispatch, institution.id, instructorUsername]);
+
+  useEffect(() => {
+    if (institution.id) {
+      dispatch(fetchClassesData(institution.id, currentPage, '', { instructor: instructorUsername }));
+    }
 
     return () => {
       dispatch(resetClassesTable());
     };
-  }, [dispatch, institution.id, instructorUsername]);
+  }, [dispatch, institution.id, currentPage, instructorUsername]);
 
   useEffect(() => {
-    dispatch(fetchClassesData(institution.id, currentPage, '', { instructor: instructorUsername }));
-  }, [currentPage]); // eslint-disable-line react-hooks/exhaustive-deps
+    if (instructorInfo.instructorId && showInstructorCalendar) {
+      dispatch(fetchEventsData({
+        ...rangeDates,
+        instructor_id: instructorInfo.instructorId,
+      }));
+    }
+
+    return () => {
+      dispatch(resetEvents());
+    };
+  }, [dispatch, instructorInfo.instructorId, rangeDates, showInstructorCalendar]);
 
   useEffect(() => {
     if (institution.id !== undefined && institutionRef.current === undefined) {
@@ -66,8 +109,19 @@ const InstructorsDetailPage = () => {
     if (institution.id !== institutionRef.current) {
       history.push(addQueryParam('/instructors'));
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [institution, history]);
+  }, [institution, history, addQueryParam]);
+
+  useEffect(() => {
+    if (events.length > 0) {
+      const list = events?.map(event => ({
+        ...event,
+        start: new Date(event.start),
+        end: new Date(event.end),
+      }));
+
+      setEventsList(list);
+    }
+  }, [events]);
 
   return (
     <Container size="xl" className="px-4 mt-3">
@@ -81,27 +135,43 @@ const InstructorsDetailPage = () => {
       </div>
 
       <Tabs variant="tabs" defaultActiveKey="classes" id="uncontrolled-tab-example" className="mb-3 tabstpz">
-        <Tab eventKey="classes" title="Classes" />
+        <Tab eventKey="classes" title="Classes" tabClassName="text-decoration-none">
+          <Table
+            isLoading={isLoading}
+            columns={columns}
+            count={classes.count}
+            data={classes.data}
+            text="No classes found."
+          />
+          {classes.numPages > initialPage && (
+          <Pagination
+            paginationLabel="paginationNavigation"
+            pageCount={classes.numPages}
+            currentPage={currentPage}
+            onPageSelect={handlePagination}
+            variant="reduced"
+            className="mx-auto pagination-table"
+            size="small"
+          />
+          )}
+        </Tab>
+        {
+        showInstructorCalendar && (
+          <Tab eventKey="availability" title="Availability" tabClassName="text-decoration-none">
+            <div className="p-3 bg-white mb-5 rounded-bottom container-calendar">
+              <CalendarExpanded
+                eventsList={eventsList}
+                onRangeChange={getRangeDate}
+                onEdit={() => {}}
+                onDelete={() => {}}
+                onDeleteMultiple={() => {}}
+                onEditSinglRec={() => {}}
+              />
+            </div>
+          </Tab>
+        )
+        }
       </Tabs>
-
-      <Table
-        isLoading={isLoading}
-        columns={columns}
-        count={classes.count}
-        data={classes.data}
-        text="No classes found."
-      />
-      {classes.numPages > initialPage && (
-      <Pagination
-        paginationLabel="paginationNavigation"
-        pageCount={classes.numPages}
-        currentPage={currentPage}
-        onPageSelect={handlePagination}
-        variant="reduced"
-        className="mx-auto pagination-table"
-        size="small"
-      />
-      )}
     </Container>
   );
 };

src/features/Instructors/InstructorsDetailPage/index.scss

@@ -0,0 +1,5 @@
+@import 'assets/colors.scss';
+
+.container-calendar {
+  box-shadow: 0px 3px 12px 0px $gray-30;
+}

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

@@ -2,6 +2,7 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import {
   handleInstructorsEnrollment,
   handleNewInstructor,
+  getEventsByInstructor,
 } from 'features/Instructors/data/api';
 
 jest.mock('@edx/frontend-platform/auth', () => ({
@@ -66,4 +67,37 @@ describe('should call getAuthenticatedHttpClient with the correct parameters', (
       + '?institution_id=1&instructor_email=instructor%40example.com&first_name=Sam&last_name=F',
     );
   });
+
+  test('getEventsByInstructor', () => {
+    const httpClientMock = {
+      get: jest.fn(),
+    };
+
+    const eventRequestInfo = {
+      instructor_id: '3',
+      start_date: '2024-12-01T05:00:00.000Z',
+      end_date: '2025-01-01T04:59:59.999Z',
+      page: '1',
+    };
+
+    getAuthenticatedHttpClient.mockReturnValue(httpClientMock);
+
+    getEventsByInstructor({ ...eventRequestInfo });
+
+    expect(getAuthenticatedHttpClient).toHaveBeenCalledTimes(1);
+    expect(getAuthenticatedHttpClient).toHaveBeenCalledWith();
+
+    expect(httpClientMock.get).toHaveBeenCalledTimes(1);
+    expect(httpClientMock.get).toHaveBeenCalledWith(
+      'http://localhost:18000/pearson_course_operation/api/v2/events/',
+      {
+        params: {
+          instructor_id: '3',
+          start_date: '2024-12-01T05:00:00.000Z',
+          end_date: '2025-01-01T04:59:59.999Z',
+          page: '1',
+        },
+      },
+    );
+  });
 });

src/features/Instructors/data/api.js

@@ -17,7 +17,22 @@ function handleNewInstructor(institutionId, instructorFormData) {
   return getAuthenticatedHttpClient().post(`${apiV2BaseUrl}&${searchParams}`);
 }
 
+/**
+ * Get events list by instructor.
+ *
+ * @param {object} - An object with the start and end date range for the calendar
+ *                   Dates in format ISO
+ * @returns {Promise} - A promise that resolves with the response of the GET request.
+ */
+function getEventsByInstructor(params) {
+  return getAuthenticatedHttpClient().get(
+    `${getConfig().COURSE_OPERATIONS_API_V2_BASE_URL}/events/`,
+    { params },
+  );
+}
+
 export {
   handleInstructorsEnrollment,
   handleNewInstructor,
+  getEventsByInstructor,
 };

src/features/Instructors/data/index.js

@@ -1,4 +1,7 @@
-export { reducer } from 'features/Instructors/data/slice';
+export { reducer, resetEvents } from 'features/Instructors/data/slice';
 export {
-  fetchInstructorsData, assignInstructors, fetchInstructorsOptionsData,
+  fetchInstructorsData,
+  assignInstructors,
+  fetchInstructorsOptionsData,
+  fetchEventsData,
 } from 'features/Instructors/data/thunks';