Merge pull request #14 from Pearson-Advance/vue/PADV-726

PADV-726 call service for add instructor
Pearson-Advance · Oct 27, 2023 · cedb8e0 · cedb8e0
2 parents f105cbe + dd8ac99
commit cedb8e0
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 44 deletions.
diff --git a/src/features/Instructors/AddInstructors/_test_/index.test.jsx b/src/features/Instructors/AddInstructors/_test_/index.test.jsx
@@ -41,5 +41,11 @@ describe('Add instructor component', () => {
     const ccxSelect = getByText('Select Class Name');
     expect(instructorInfoInput).toBeInTheDocument();
     expect(ccxSelect).toBeInTheDocument();
+
+    fireEvent.change(instructorInfoInput, { target: { value: 'Name' } });
+    const submitButton = getByText('Add');
+    await act(async () => {
+      fireEvent.click(submitButton);
+    });
   });
 });
diff --git a/src/features/Instructors/AddInstructors/index.jsx b/src/features/Instructors/AddInstructors/index.jsx
@@ -2,7 +2,7 @@ import React, { useState, useReducer, useEffect } from 'react';
 import {
   Button, FormGroup, ModalDialog, useToggle, Form,
 } from '@edx/paragon';
-import { getCCXList } from 'features/Instructors/data/api';
+import { getCCXList, handleInstructorsEnrollment } from 'features/Instructors/data/api';
 import reducer from 'features/Instructors/AddInstructors/reducer';
 import { logError } from '@edx/frontend-platform/logging';
 import { camelCaseObject } from '@edx/frontend-platform';
@@ -16,16 +16,11 @@ const initialState = {
   error: null,
 };
 
-const addInstructorState = {
-  instructorInfo: '',
-  ccxId: '',
-  ccxName: '',
-};
-
 const AddInstructors = () => {
   const [state, dispatch] = useReducer(reducer, initialState);
   const [isOpen, open, close] = useToggle(false);
-  const [addInstructorInfo, setAddInstructorInfo] = useState(addInstructorState);
+  const [isNoUser, setIsNoUser] = useState(false);
+  const enrollmentData = new FormData();
 
   const fetchData = async () => {
     dispatch({ type: FETCH_CCX_LIST_REQUEST });
@@ -39,20 +34,26 @@ const AddInstructors = () => {
     }
   };
 
-  const handleInstructorInput = (e) => {
-    setAddInstructorInfo({
-      ...addInstructorInfo,
-      instructorInfo: e.target.value.trim(),
-    });
-  };
-
-  const handleCcxSelect = (e) => {
-    const select = e.target;
-    setAddInstructorInfo({
-      ...addInstructorInfo,
-      ccxId: select.value,
-      ccxName: select.options[select.selectedIndex].text,
-    });
+  const handleAddInstructors = async (e) => {
+    e.preventDefault();
+    const form = e.target;
+    const formData = new FormData(form);
+    const formJson = Object.fromEntries(formData.entries());
+    try {
+      enrollmentData.append('unique_student_identifier', formJson.instructorInfo);
+      enrollmentData.append('rolename', 'staff');
+      enrollmentData.append('action', 'allow');
+      const response = await handleInstructorsEnrollment(enrollmentData, formJson.ccxId);
+      if (response.data?.userDoesNotExist) {
+        setIsNoUser(true);
+      } else {
+        fetchData();
+        close();
+        setIsNoUser(false);
+      }
+    } catch (error) {
+      logError(error);
+    }
   };
 
   useEffect(() => {
@@ -76,28 +77,37 @@ const AddInstructors = () => {
           </ModalDialog.Title>
         </ModalDialog.Header>
         <ModalDialog.Body>
-          <FormGroup>
-            <Form.Control
-              as="select"
-              floatingLabel="Select Class Name"
-              className="my-4 mr-0"
-              onChange={handleCcxSelect}
-              id="selectCcx"
-            >
-              {state.data.map((ccx) => <option value={ccx.classId}>{ccx.className}</option>)}
-            </Form.Control>
-            <Form.Control
-              type="text"
-              placeholder="Enter Username or Email of the instructor"
-              floatingLabel="Username or Email"
-              value={addInstructorInfo.instructorInfo}
-              onChange={handleInstructorInput}
-              className="my-4 mr-0"
-            />
+          <Form onSubmit={handleAddInstructors}>
+            <FormGroup controlId="ccxId">
+              <Form.Control
+                as="select"
+                floatingLabel="Select Class Name"
+                className="my-4 mr-0"
+                name="ccxId"
+              >
+                <option disabled value="null">Select an Option</option>
+                {state.data.map((ccx) => <option value={ccx.classId}>{ccx.className}</option>)}
+              </Form.Control>
+            </FormGroup>
+            <FormGroup controlId="instructorInfo">
+              <Form.Control
+                type="text"
+                placeholder="Enter Username or Email of the instructor"
+                floatingLabel="Username or Email"
+                className="my-4 mr-0"
+                name="instructorInfo"
+              />
+              {isNoUser && (
+                <Form.Control.Feedback type="invalid">
+                  User does not exist
+                </Form.Control.Feedback>
+              )}
+            </FormGroup>
             <div className="d-flex justify-content-end">
-              <Button>Add</Button>
+              <Button type="submit">Add</Button>
             </div>
-          </FormGroup>
+          </Form>
+
         </ModalDialog.Body>
       </ModalDialog>
     </>

diff --git a/src/features/Instructors/data/_test_/api.test.js b/src/features/Instructors/data/_test_/api.test.js
@@ -1,5 +1,5 @@
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import { getInstructorData } from 'features/Instructors/data/api';
+import { getInstructorData, handleInstructorsEnrollment } from 'features/Instructors/data/api';
 
 jest.mock('@edx/frontend-platform/auth', () => ({
   getAuthenticatedHttpClient: jest.fn(),
@@ -34,3 +34,27 @@ describe('getInstructorData', () => {
     );
   });
 });
+
+describe('handleInstructorsEnrollment', () => {
+  test('should call getAuthenticatedHttpClient with the correct parameters', () => {
+    const httpClientMock = {
+      post: jest.fn(),
+    };
+
+    const courseId = 'course123';
+    const data = new FormData();
+
+    getAuthenticatedHttpClient.mockReturnValue(httpClientMock);
+
+    handleInstructorsEnrollment(data, courseId);
+
+    expect(getAuthenticatedHttpClient).toHaveBeenCalledTimes(2);
+    expect(getAuthenticatedHttpClient).toHaveBeenCalledWith();
+
+    expect(httpClientMock.post).toHaveBeenCalledTimes(1);
+    expect(httpClientMock.post).toHaveBeenCalledWith(
+      'http://localhost:18000/courses/course123/instructor/api/modify_access',
+      data,
+    );
+  });
+});
diff --git a/src/features/Instructors/data/api.js b/src/features/Instructors/data/api.js
@@ -17,11 +17,22 @@ function getInstructorData(page, filters) {
 function getCCXList() {
   const apiV2BaseUrl = getConfig().COURSE_OPERATIONS_API_V2_BASE_URL;
   return getAuthenticatedHttpClient().get(
-    `${apiV2BaseUrl}/classes?limit=false`,
+    `${apiV2BaseUrl}/classes/?limit=false`,
+  );
+}
+
+function handleInstructorsEnrollment(data, courseId) {
+  const INSTRUCTOR_API_URL = `${getConfig().LMS_BASE_URL}/courses/course_id/instructor/api`;
+  const courseIdSearchPattern = /course_id/;
+
+  return getAuthenticatedHttpClient().post(
+    `${INSTRUCTOR_API_URL.replace(courseIdSearchPattern, courseId)}/modify_access`,
+    data,
   );
 }
 
 export {
   getInstructorData,
   getCCXList,
+  handleInstructorsEnrollment,
 };