fix: lint issues

openedx · Mar 2, 2024 · a6e2771 · a6e2771
1 parent de0f784
commit a6e2771
Show file tree

Hide file tree

Showing 14 changed files with 224 additions and 307 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -36,8 +36,10 @@
     "url": "https://github.com/openedx/frontend-app-course-authoring/issues"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
     "@edx/frontend-component-ai-translations": "^2.0.0",
     "@edx/frontend-component-footer": "^13.0.2",
@@ -53,14 +55,15 @@
     "@fortawesome/react-fontawesome": "0.2.0",
     "@openedx-plugins/course-app-calculator": "file:plugins/course-apps/calculator",
     "@openedx-plugins/course-app-edxnotes": "file:plugins/course-apps/edxnotes",
+    "@openedx-plugins/course-app-learning_assistant": "file:plugins/course-apps/learning_assistant",
     "@openedx-plugins/course-app-live": "file:plugins/course-apps/live",
     "@openedx-plugins/course-app-ora_settings": "file:plugins/course-apps/ora_settings",
     "@openedx-plugins/course-app-proctoring": "file:plugins/course-apps/proctoring",
     "@openedx-plugins/course-app-progress": "file:plugins/course-apps/progress",
     "@openedx-plugins/course-app-teams": "file:plugins/course-apps/teams",
     "@openedx-plugins/course-app-wiki": "file:plugins/course-apps/wiki",
-    "@openedx-plugins/course-app-learning_assistant": "file:plugins/course-apps/learning_assistant",
     "@openedx-plugins/course-app-xpert_unit_summary": "file:plugins/course-apps/xpert_unit_summary",
+    "@openedx/paragon": "^21.5.7",
     "@reduxjs/toolkit": "1.9.7",
     "@tanstack/react-query": "4.36.1",
     "broadcast-channel": "^7.0.0",

diff --git a/src/course-outline/CourseOutline.jsx b/src/course-outline/CourseOutline.jsx
@@ -120,7 +120,7 @@ const CourseOutline = ({ courseId }) => {
 
   const restoreSectionList = () => {
     setSections(() => [...sectionsList]);
-  }
+  };
 
   const {
     isShow: isShowProcessingNotification,
@@ -150,13 +150,11 @@ const CourseOutline = ({ courseId }) => {
    * @returns {void}
    */
   const updateSubsectionOrderByIndex = (section, moveDetails) => {
-    let newSubsections;
-    let sectionsCopy;
     const { fn, args, sectionId } = moveDetails;
     if (!args) {
       return;
     }
-    [sectionsCopy, newSubsections] = fn(...args);
+    const [sectionsCopy, newSubsections] = fn(...args);
     if (newSubsections && sectionId) {
       setSections(sectionsCopy);
       handleSubsectionDragAndDrop(
@@ -175,13 +173,13 @@ const CourseOutline = ({ courseId }) => {
    * @returns {void}
    */
   const updateUnitOrderByIndex = (section, moveDetails) => {
-    let newUnits;
-    let sectionsCopy;
-    const { fn, args, sectionId, subsectionId } = moveDetails;
+    const {
+      fn, args, sectionId, subsectionId,
+    } = moveDetails;
     if (!args) {
       return;
     }
-    [sectionsCopy, newUnits] = fn(...args);
+    const [sectionsCopy, newUnits] = fn(...args);
     if (newUnits && sectionId && subsectionId) {
       setSections(sectionsCopy);
       handleUnitDragAndDrop(
@@ -327,7 +325,7 @@ const CourseOutline = ({ courseId }) => {
                                           [...sections],
                                           sectionIndex,
                                           section,
-                                          section.childInfo.children
+                                          section.childInfo.children,
                                         )}
                                         isSelfPaced={statusBarData.isSelfPaced}
                                         isCustomRelativeDatesActive={isCustomRelativeDatesActive}

diff --git a/src/course-outline/CourseOutline.test.jsx b/src/course-outline/CourseOutline.test.jsx
@@ -1,7 +1,6 @@
 import {
   act, render, waitFor, fireEvent, within,
 } from '@testing-library/react';
-import userEvent from '@testing-library/user-event'
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { AppProvider } from '@edx/frontend-platform/react';
 import { initializeMockApp } from '@edx/frontend-platform';
@@ -95,9 +94,8 @@ jest.mock('@dnd-kit/core', () => ({
   closestCorners: jest.fn(),
 }));
 
-const sleep = (ms) => {
-  return new Promise((resolve) => setTimeout(resolve, ms));
-}
+// eslint-disable-next-line no-promise-executor-return
+const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 
 const RootWrapper = () => (
   <AppProvider store={store}>
@@ -1536,7 +1534,9 @@ describe('<CourseOutline />', () => {
     axiosMock
       .onPut(getCourseItemApiUrl(store.getState().courseOutline.sectionsList[0].id))
       .reply(200, { dummy: 'value' });
-    const expectedSection = moveSubsection([...courseOutlineIndexMock.courseStructure.childInfo.children], 0, 0, 1)[0][0];
+    const expectedSection = moveSubsection([
+      ...courseOutlineIndexMock.courseStructure.childInfo.children,
+    ], 0, 0, 1)[0][0];
     axiosMock
       .onGet(getXBlockApiUrl(section.id))
       .reply(200, expectedSection);
@@ -1573,7 +1573,7 @@ describe('<CourseOutline />', () => {
       .onPut(getCourseItemApiUrl(firstSection.id))
       .reply(200, { dummy: 'value' });
     const expectedSections = moveSubsectionOver([
-      ...courseOutlineIndexMock.courseStructure.childInfo.children
+      ...courseOutlineIndexMock.courseStructure.childInfo.children,
     ], 1, 0, 0, firstSection.childInfo.children.length + 1)[0];
     axiosMock
       .onGet(getXBlockApiUrl(firstSection.id))
@@ -1610,7 +1610,7 @@ describe('<CourseOutline />', () => {
       .onPut(getCourseItemApiUrl(secondSection.id))
       .reply(200, { dummy: 'value' });
     const expectedSections = moveSubsectionOver([
-      ...courseOutlineIndexMock.courseStructure.childInfo.children
+      ...courseOutlineIndexMock.courseStructure.childInfo.children,
     ], 0, lastSubsectionIdx, 1, 0)[0];
     axiosMock
       .onGet(getXBlockApiUrl(section.id))
@@ -1742,7 +1742,7 @@ describe('<CourseOutline />', () => {
       .onPut(getCourseItemApiUrl(firstSubsection.id))
       .reply(200, { dummy: 'value' });
     const expectedSections = moveUnitOver([
-      ...courseOutlineIndexMock.courseStructure.childInfo.children
+      ...courseOutlineIndexMock.courseStructure.childInfo.children,
     ], 1, 1, 0, 1, 0, firstSubsection.childInfo.children.length)[0];
     axiosMock
       .onGet(getXBlockApiUrl(section.id))
@@ -1785,7 +1785,7 @@ describe('<CourseOutline />', () => {
       0,
       0,
       firstSection.childInfo.children.length - 1,
-      firstSectionLastSubsection.childInfo.children.length
+      firstSectionLastSubsection.childInfo.children.length,
     )[0];
     axiosMock
       .onGet(getXBlockApiUrl(firstSection.id))
@@ -1801,9 +1801,9 @@ describe('<CourseOutline />', () => {
     // move first unit to last position of prev subsection
     const moveUpButton = await within(unitElement).findByTestId('unit-card-header__menu-move-up-button');
     await act(async () => fireEvent.click(moveUpButton));
-    const firstSectionSubsectionsStore = store.getState().courseOutline.sectionsList[0].childInfo.children;
-    const firstSectionLastSubsectionUnits = firstSectionSubsectionsStore[firstSectionSubsectionsStore.length - 1].childInfo.children;
-    expect(firstSectionLastSubsectionUnits[firstSectionLastSubsectionUnits.length - 1].id).toBe(unit.id);
+    const firstSectionSubStore = store.getState().courseOutline.sectionsList[0].childInfo.children;
+    const firstSectionLastSubUnits = firstSectionSubStore[firstSectionSubStore.length - 1].childInfo.children;
+    expect(firstSectionLastSubUnits[firstSectionLastSubUnits.length - 1].id).toBe(unit.id);
     const secondSubUnits = store.getState().courseOutline.sectionsList[1].childInfo.children[0].childInfo.children;
     expect(secondSubUnits.length).toBe(subsection.childInfo.children.length - 1);
   });
@@ -1826,7 +1826,7 @@ describe('<CourseOutline />', () => {
       .onPut(getCourseItemApiUrl(subsection.id))
       .reply(200, { dummy: 'value' });
     const expectedSections = moveUnitOver([
-      ...courseOutlineIndexMock.courseStructure.childInfo.children
+      ...courseOutlineIndexMock.courseStructure.childInfo.children,
     ], 1, 0, lastUnitIdx, 1, 1, 0)[0];
     axiosMock
       .onGet(getXBlockApiUrl(section.id))
@@ -1871,7 +1871,7 @@ describe('<CourseOutline />', () => {
       lastUnitIdx,
       2,
       0,
-      0
+      0,
     )[0];
     axiosMock
       .onGet(getXBlockApiUrl(secondSection.id))
@@ -1887,9 +1887,9 @@ describe('<CourseOutline />', () => {
     // move first unit to last position of prev subsection
     const moveDownButton = await within(unitElement).findByTestId('unit-card-header__menu-move-down-button');
     await act(async () => fireEvent.click(moveDownButton));
-    const secondSectionSubsectionsStore = store.getState().courseOutline.sectionsList[1].childInfo.children;
-    const secondSectionLastSubsectionUnits = secondSectionSubsectionsStore[secondSectionSubsectionsStore.length - 1].childInfo.children;
-    expect(secondSectionLastSubsectionUnits.length).toBe(secondSectionLastSubsection.childInfo.children.length - 1);
+    const secondSectionSubStore = store.getState().courseOutline.sectionsList[1].childInfo.children;
+    const secondSectionLastSubUnits = secondSectionSubStore[secondSectionSubStore.length - 1].childInfo.children;
+    expect(secondSectionLastSubUnits.length).toBe(secondSectionLastSubsection.childInfo.children.length - 1);
     const thirdSubUnits = store.getState().courseOutline.sectionsList[2].childInfo.children[0].childInfo.children;
     expect(thirdSubUnits[0].id).toBe(unit.id);
   });
@@ -1951,7 +1951,9 @@ describe('<CourseOutline />', () => {
     axiosMock
       .onPut(getCourseItemApiUrl(section.id))
       .reply(200, { dummy: 'value' });
-    const expectedSection = moveSubsection([...courseOutlineIndexMock.courseStructure.childInfo.children], 0, 1, 0)[0][0];
+    const expectedSection = moveSubsection([
+      ...courseOutlineIndexMock.courseStructure.childInfo.children,
+    ], 0, 1, 0)[0][0];
     axiosMock
       .onGet(getXBlockApiUrl(section.id))
       .reply(200, expectedSection);

diff --git a/src/course-outline/data/slice.js b/src/course-outline/data/slice.js
@@ -101,9 +101,7 @@ const slice = createSlice({
       state.savingStatus = payload.status;
     },
     updateSectionList: (state, { payload }) => {
-      state.sectionsList = state.sectionsList.map((section) => {
-        return section.id in payload ? payload[section.id] : section
-      });
+      state.sectionsList = state.sectionsList.map((section) => (section.id in payload ? payload[section.id] : section));
     },
     setCurrentItem: (state, { payload }) => {
       state.currentItem = payload;
@@ -114,22 +112,6 @@ const slice = createSlice({
 
       state.sectionsList = [...sectionsList];
     },
-    reorderSubsectionList: (state, { payload }) => {
-      const { sectionId, subsectionListIds } = payload;
-      const sections = [...state.sectionsList];
-      const i = sections.findIndex(section => section.id === sectionId);
-      sections[i].childInfo.children.sort((a, b) => subsectionListIds.indexOf(a.id) - subsectionListIds.indexOf(b.id));
-      state.sectionsList = [...sections];
-    },
-    reorderUnitList: (state, { payload }) => {
-      const { sectionId, subsectionId, unitListIds } = payload;
-      const sections = [...state.sectionsList];
-      const i = sections.findIndex(section => section.id === sectionId);
-      const j = sections[i].childInfo.children.findIndex(subsection => subsection.id === subsectionId);
-      const subsection = sections[i].childInfo.children[j];
-      subsection.childInfo.children.sort((a, b) => unitListIds.indexOf(a.id) - unitListIds.indexOf(b.id));
-      state.sectionsList = [...sections];
-    },
     setCurrentSection: (state, { payload }) => {
       state.currentSection = payload;
     },

diff --git a/src/course-outline/data/thunk.js b/src/course-outline/data/thunk.js
@@ -50,8 +50,6 @@ import {
   deleteUnit,
   duplicateSection,
   reorderSectionList,
-  reorderSubsectionList,
-  reorderUnitList,
   updateClipboardContent,
   setPasteFiles,
 } from './slice';
@@ -178,11 +176,12 @@ export function fetchCourseSectionQuery(sectionIds, shouldScroll = false) {
     dispatch(updateFetchSectionLoadingStatus({ status: RequestStatus.IN_PROGRESS }));
     try {
       const sections = {};
-      for (let sectionId of sectionIds) {
-        const data = await getCourseItem(sectionId);
+      const results = await Promise.all(sectionIds.map((sectionId) => getCourseItem(sectionId)));
+      results.forEach((data) => {
+        // eslint-disable-next-line no-param-reassign
         data.shouldScroll = shouldScroll;
         sections[data.id] = data;
-      }
+      });
       dispatch(updateSectionList(sections));
       dispatch(updateFetchSectionLoadingStatus({ status: RequestStatus.SUCCESSFUL }));
     } catch (error) {
@@ -565,7 +564,7 @@ export function setSubsectionOrderListQuery(
   sectionId,
   prevSectionId,
   subsectionListIds,
-  restoreCallback
+  restoreCallback,
 ) {
   return async (dispatch) => {
     dispatch(setBlockOrderListQuery(
@@ -589,7 +588,7 @@ export function setUnitOrderListQuery(
   subsectionId,
   prevSectionId,
   unitListIds,
-  restoreCallback
+  restoreCallback,
 ) {
   return async (dispatch) => {
     dispatch(setBlockOrderListQuery(

diff --git a/src/course-outline/drag-helper/DragContextProvider.jsx b/src/course-outline/drag-helper/DragContextProvider.jsx
@@ -20,7 +20,7 @@ const DragContextProvider = ({ activeId, overId, children }) => {
 DragContextProvider.defaultProps = {
   activeId: '',
   overId: '',
-}
+};
 
 DragContextProvider.propTypes = {
   activeId: PropTypes.string,