refactor: refactoring after review

raccoongang · Mar 18, 2024 · 6ebd1ad · 6ebd1ad
1 parent 227a19b
commit 6ebd1ad
Show file tree

Hide file tree

Showing 35 changed files with 213 additions and 213 deletions.
diff --git a/src/course-outline/CourseOutline.test.jsx b/src/course-outline/CourseOutline.test.jsx
@@ -17,7 +17,6 @@ import {
   getCourseBlockApiUrl,
   getCourseItemApiUrl,
   getXBlockBaseApiUrl,
-  getClipboardUrl,
 } from './data/api';
 import { RequestStatus } from '../data/constants';
 import {
@@ -40,12 +39,13 @@ import { executeThunk } from '../utils';
 import { COURSE_BLOCK_NAMES, VIDEO_SHARING_OPTIONS } from './constants';
 import CourseOutline from './CourseOutline';
 
+import pasteButtonMessages from '../generic/clipboard/paste-component/messages';
 import configureModalMessages from '../generic/configure-modal/messages';
+import { getClipboardUrl } from '../generic/data/api';
 import headerMessages from './header-navigations/messages';
 import cardHeaderMessages from './card-header/messages';
 import enableHighlightsModalMessages from './enable-highlights-modal/messages';
 import statusBarMessages from './status-bar/messages';
-import pasteButtonMessages from '../generic/clipboard/paste-button/messages';
 import subsectionMessages from './subsection-card/messages';
 import pageAlertMessages from './page-alerts/messages';
 import messages from './messages';
@@ -1840,7 +1840,7 @@ describe('<CourseOutline />', () => {
     await act(async () => fireEvent.click(copyButton));
 
     // check that initialUserClipboard state is updated
-    expect(store.getState().courseOutline.initialUserClipboard).toEqual(clipboardUnit);
+    expect(store.getState().generic.clipboardData).toEqual(clipboardUnit);
 
     [subsectionElement] = await within(sectionElement).findAllByTestId('subsection-card');
     // find clipboard content label
@@ -1851,9 +1851,8 @@ describe('<CourseOutline />', () => {
 
     // find clipboard content popover link
     const popoverContent = queryByTestId('popover-content');
-    const apiBaseUrl = getConfig().STUDIO_BASE_URL;
     expect(popoverContent.tagName).toBe('A');
-    expect(popoverContent).toHaveAttribute('href', apiBaseUrl + unit.studioUrl);
+    expect(popoverContent).toHaveAttribute('href', `${getConfig().STUDIO_BASE_URL}${unit.studioUrl}`);
 
     // check paste button functionality
     // mock api call

diff --git a/src/course-outline/data/api.js b/src/course-outline/data/api.js
@@ -28,7 +28,6 @@ export const getCourseReindexApiUrl = (reindexLink) => `${getApiBaseUrl()}${rein
 export const getXBlockBaseApiUrl = () => `${getApiBaseUrl()}/xblock/`;
 export const getCourseItemApiUrl = (itemId) => `${getXBlockBaseApiUrl()}${itemId}`;
 export const getXBlockApiUrl = (blockId) => `${getXBlockBaseApiUrl()}outline/${blockId}`;
-export const getClipboardUrl = () => `${getApiBaseUrl()}/api/content-staging/v1/clipboard/`;
 
 /**
  * @typedef {Object} courseOutline
@@ -434,20 +433,6 @@ export async function setVideoSharingOption(courseId, videoSharingOption) {
   return data;
 }
 
-/**
- * Copy block to clipboard
- * @param {string} usageKey
- * @returns {Promise<Object>}
-*/
-export async function copyBlockToClipboard(usageKey) {
-  const { data } = await getAuthenticatedHttpClient()
-    .post(getClipboardUrl(), {
-      usage_key: usageKey,
-    });
-
-  return camelCaseObject(data);
-}
-
 /**
  * Paste block to clipboard
  * @param {string} parentLocator

diff --git a/src/course-outline/data/selectors.js b/src/course-outline/data/selectors.js
@@ -8,5 +8,4 @@ export const getCurrentSection = (state) => state.courseOutline.currentSection;
 export const getCurrentSubsection = (state) => state.courseOutline.currentSubsection;
 export const getCourseActions = (state) => state.courseOutline.actions;
 export const getCustomRelativeDatesActiveFlag = (state) => state.courseOutline.isCustomRelativeDatesActive;
-export const getInitialUserClipboard = (state) => state.courseOutline.initialUserClipboard;
 export const getProctoredExamsFlag = (state) => state.courseOutline.enableProctoredExams;
diff --git a/src/course-outline/data/slice.js b/src/course-outline/data/slice.js
@@ -38,20 +38,13 @@ const slice = createSlice({
       childAddable: true,
       duplicable: true,
     },
-    initialUserClipboard: {
-      content: {},
-      sourceUsageKey: null,
-      sourceContexttitle: null,
-      sourceEditUrl: null,
-    },
     enableProctoredExams: false,
   },
   reducers: {
     fetchOutlineIndexSuccess: (state, { payload }) => {
       state.outlineIndexData = payload;
       state.sectionsList = payload.courseStructure?.childInfo?.children || [];
       state.isCustomRelativeDatesActive = payload.isCustomRelativeDatesActive;
-      state.initialUserClipboard = payload.initialUserClipboard;
       state.enableProctoredExams = payload.courseStructure?.enableProctoredExams;
     },
     updateOutlineIndexLoadingStatus: (state, { payload }) => {
@@ -78,9 +71,6 @@ const slice = createSlice({
         ...payload,
       };
     },
-    updateClipboardContent: (state, { payload }) => {
-      state.initialUserClipboard = payload;
-    },
     updateCourseActions: (state, { payload }) => {
       state.actions = {
         ...state.actions,
@@ -217,7 +207,6 @@ export const {
   reorderSectionList,
   reorderSubsectionList,
   reorderUnitList,
-  updateClipboardContent,
 } = slice.actions;
 
 export const {

diff --git a/src/course-outline/data/thunk.js b/src/course-outline/data/thunk.js
@@ -1,5 +1,6 @@
 import { RequestStatus } from '../../data/constants';
-import { CLIPBOARD_STATUS, NOTIFICATION_MESSAGES } from '../../constants';
+import { updateClipboardData } from '../../generic/data/slice';
+import { NOTIFICATION_MESSAGES } from '../../constants';
 import { COURSE_BLOCK_NAMES } from '../constants';
 import {
   hideProcessingNotification,
@@ -28,7 +29,6 @@ import {
   setSectionOrderList,
   setVideoSharingOption,
   setCourseItemOrderList,
-  copyBlockToClipboard,
   pasteBlock,
   dismissNotification,
 } from './api';
@@ -52,7 +52,6 @@ import {
   reorderSectionList,
   reorderSubsectionList,
   reorderUnitList,
-  updateClipboardContent,
 } from './slice';
 
 export function fetchCourseOutlineIndexQuery(courseId) {
@@ -71,6 +70,7 @@ export function fetchCourseOutlineIndexQuery(courseId) {
         },
       } = outlineIndex;
       dispatch(fetchOutlineIndexSuccess(outlineIndex));
+      dispatch(updateClipboardData(outlineIndex.initialUserClipboard));
       dispatch(updateStatusBar({
         courseReleaseDate,
         highlightsEnabledForMessaging,
@@ -581,29 +581,6 @@ export function setUnitOrderListQuery(sectionId, subsectionId, unitListIds, rest
   };
 }
 
-export function setClipboardContent(usageKey) {
-  return async (dispatch) => {
-    dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
-    dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.copying));
-
-    try {
-      await copyBlockToClipboard(usageKey).then(async (result) => {
-        const status = result?.content?.status;
-        if (status === CLIPBOARD_STATUS.ready) {
-          dispatch(updateClipboardContent(result));
-          dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
-          dispatch(hideProcessingNotification());
-        } else {
-          throw new Error(`Unexpected clipboard status "${status}" in successful API response.`);
-        }
-      });
-    } catch (error) {
-      dispatch(hideProcessingNotification());
-      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
-    }
-  };
-}
-
 export function pasteClipboardContent(parentLocator, sectionId) {
   return async (dispatch) => {
     dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));

diff --git a/src/course-outline/hooks.jsx b/src/course-outline/hooks.jsx
@@ -4,6 +4,8 @@ import { useNavigate } from 'react-router-dom';
 import { useToggle } from '@openedx/paragon';
 import { getConfig } from '@edx/frontend-platform';
 
+import { copyToClipboard } from '../generic/data/thunks';
+import { getSavingStatus as getGenericSavingStatus } from '../generic/data/selectors';
 import { RequestStatus } from '../data/constants';
 import { COURSE_BLOCK_NAMES } from './constants';
 import {
@@ -48,7 +50,6 @@ import {
   setVideoSharingOptionQuery,
   setSubsectionOrderListQuery,
   setUnitOrderListQuery,
-  setClipboardContent,
   pasteClipboardContent,
   dismissNotificationQuery,
 } from './data/thunk';
@@ -79,6 +80,7 @@ const useCourseOutline = ({ courseId }) => {
   const currentSection = useSelector(getCurrentSection);
   const currentSubsection = useSelector(getCurrentSubsection);
   const isCustomRelativeDatesActive = useSelector(getCustomRelativeDatesActiveFlag);
+  const genericSavingStatus = useSelector(getGenericSavingStatus);
 
   const [isEnableHighlightsModalOpen, openEnableHighlightsModal, closeEnableHighlightsModal] = useToggle(false);
   const [isSectionsExpanded, setSectionsExpanded] = useState(true);
@@ -90,8 +92,10 @@ const useCourseOutline = ({ courseId }) => {
   const [isConfigureModalOpen, openConfigureModal, closeConfigureModal] = useToggle(false);
   const [isDeleteModalOpen, openDeleteModal, closeDeleteModal] = useToggle(false);
 
+  const isSavingStatusFailed = savingStatus === RequestStatus.FAILED || genericSavingStatus === RequestStatus.FAILED;
+
   const handleCopyToClipboardClick = (usageKey) => {
-    dispatch(setClipboardContent(usageKey));
+    dispatch(copyToClipboard(usageKey));
   };
 
   const handlePasteClipboardClick = (parentLocator, sectionId) => {
@@ -294,7 +298,7 @@ const useCourseOutline = ({ courseId }) => {
     isEnableHighlightsModalOpen,
     openEnableHighlightsModal,
     closeEnableHighlightsModal,
-    isInternetConnectionAlertFailed: savingStatus === RequestStatus.FAILED,
+    isInternetConnectionAlertFailed: isSavingStatusFailed,
     handleInternetConnectionFailed,
     handleOpenHighlightsModal,
     isHighlightsModalOpen,
@@ -327,6 +331,7 @@ const useCourseOutline = ({ courseId }) => {
     mfeProctoredExamSettingsUrl,
     handleDismissNotification,
     advanceSettingsUrl,
+    genericSavingStatus,
   };
 };
 

diff --git a/src/course-outline/subsection-card/SubsectionCard.jsx b/src/course-outline/subsection-card/SubsectionCard.jsx
@@ -1,18 +1,17 @@
 import { useEffect, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { useSearchParams } from 'react-router-dom';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Button, useToggle } from '@openedx/paragon';
 import { Add as IconAdd } from '@openedx/paragon/icons';
 import classNames from 'classnames';
 
-import { getInitialUserClipboard } from '../data/selectors';
 import { setCurrentItem, setCurrentSection, setCurrentSubsection } from '../data/slice';
 import { RequestStatus } from '../../data/constants';
 import CardHeader from '../card-header/CardHeader';
 import ConditionalSortableElement from '../../generic/drag-helper/ConditionalSortableElement';
-import { useCopyToClipboard, PasteButton } from '../../generic/clipboard';
+import { useCopyToClipboard, PasteComponent } from '../../generic/clipboard';
 import TitleButton from '../card-header/TitleButton';
 import XBlockStatus from '../xblock-status/XBlockStatus';
 import { getItemStatus, getItemStatusBorder, scrollToElement } from '../utils';
@@ -44,8 +43,7 @@ const SubsectionCard = ({
   const isScrolledToElement = locatorId === subsection.id;
   const [isFormOpen, openForm, closeForm] = useToggle(false);
   const namePrefix = 'subsection';
-  const initialUserClipboard = useSelector(getInitialUserClipboard);
-  const { sharedClipboardData, showPasteUnit } = useCopyToClipboard(initialUserClipboard);
+  const { sharedClipboardData, showPasteUnit } = useCopyToClipboard();
 
   const {
     id,
@@ -196,7 +194,7 @@ const SubsectionCard = ({
                   {intl.formatMessage(messages.newUnitButton)}
                 </Button>
                 {enableCopyPasteUnits && showPasteUnit && (
-                  <PasteButton
+                  <PasteComponent
                     className="mt-4"
                     text={intl.formatMessage(messages.pasteButton)}
                     clipboardData={sharedClipboardData}

diff --git a/src/course-unit/CourseUnit.jsx b/src/course-unit/CourseUnit.jsx
@@ -12,7 +12,7 @@ import SubHeader from '../generic/sub-header/SubHeader';
 import { RequestStatus } from '../data/constants';
 import getPageHeadTitle from '../generic/utils';
 import AlertMessage from '../generic/alert-message';
-import { PasteButton } from '../generic/clipboard';
+import { PasteComponent } from '../generic/clipboard';
 import ProcessingNotification from '../generic/processing-notification';
 import { SavingErrorAlert } from '../generic/saving-error-alert';
 import ConnectionErrorAlert from '../generic/ConnectionErrorAlert';
@@ -171,10 +171,10 @@ const CourseUnit = ({ courseId }) => {
                 handleCreateNewCourseXBlock={handleCreateNewCourseXBlock}
               />
               {showPasteXBlock && canPasteComponent && (
-                <PasteButton
+                <PasteComponent
                   clipboardData={sharedClipboardData}
                   onClick={handleCreateNewCourseXBlock}
-                  text={intl.formatMessage(messages.pasteComponentButtonText)}
+                  text={intl.formatMessage(messages.pasteButtonText)}
                 />
               )}
             </Layout.Element>

diff --git a/src/course-unit/CourseUnit.test.jsx b/src/course-unit/CourseUnit.test.jsx
@@ -17,7 +17,6 @@ import {
   postXBlockBaseApiUrl,
 } from './data/api';
 import {
-  copyToClipboard,
   createNewCourseXBlock,
   deleteUnitItemQuery,
   editCourseUnitVisibilityAndData,
@@ -40,7 +39,7 @@ import {
 } from '../__mocks__';
 import { executeThunk } from '../utils';
 import deleteModalMessages from '../generic/delete-modal/messages';
-import pasteButtonMessages from '../generic/clipboard/paste-button/messages';
+import pasteComponentMessages from '../generic/clipboard/paste-component/messages';
 import pasteNotificationsMessages from './clipboard/paste-notification/messages';
 import headerNavigationsMessages from './header-navigations/messages';
 import headerTitleMessages from './header-title/messages';
@@ -54,6 +53,7 @@ import CourseUnit from './CourseUnit';
 import messages from './messages';
 import configureModalMessages from '../generic/configure-modal/messages';
 import { RequestStatus } from '../data/constants';
+import { copyToClipboard } from '../generic/data/thunks';
 
 let axiosMock;
 let store;
@@ -930,7 +930,7 @@ describe('<CourseUnit />', () => {
 
       await waitFor(() => {
         expect(queryByText(sidebarMessages.actionButtonCopyUnitTitle.defaultMessage)).toBeNull();
-        expect(queryByRole('button', { name: messages.pasteComponentButtonText.defaultMessage })).toBeNull();
+        expect(queryByRole('button', { name: messages.pasteButtonText.defaultMessage })).toBeNull();
       });
 
       axiosMock
@@ -963,10 +963,10 @@ describe('<CourseUnit />', () => {
         });
 
       await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
-      expect(getByRole('button', { name: messages.pasteComponentButtonText.defaultMessage })).toBeInTheDocument();
+      expect(getByRole('button', { name: messages.pasteButtonText.defaultMessage })).toBeInTheDocument();
 
       const whatsInClipboardText = getByText(
-        pasteButtonMessages.pasteButtonWhatsInClipboardText.defaultMessage,
+        pasteComponentMessages.pasteButtonWhatsInClipboardText.defaultMessage,
       );
 
       userEvent.hover(whatsInClipboardText);
@@ -1012,7 +1012,7 @@ describe('<CourseUnit />', () => {
       await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
       await executeThunk(copyToClipboard(blockId), store.dispatch);
 
-      userEvent.click(getByRole('button', { name: messages.pasteComponentButtonText.defaultMessage }));
+      userEvent.click(getByRole('button', { name: messages.pasteButtonText.defaultMessage }));
 
       await waitFor(() => {
         expect(getAllByTestId('course-xblock')).toHaveLength(2);
@@ -1055,7 +1055,7 @@ describe('<CourseUnit />', () => {
 
       await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
       await executeThunk(copyToClipboard(blockId), store.dispatch);
-      expect(getByRole('button', { name: messages.pasteComponentButtonText.defaultMessage })).toBeInTheDocument();
+      expect(getByRole('button', { name: messages.pasteButtonText.defaultMessage })).toBeInTheDocument();
     });
 
     it('should copy a unit, paste it as a new unit, and update the course section vertical data', async () => {
@@ -1321,10 +1321,10 @@ describe('<CourseUnit />', () => {
       await executeThunk(fetchCourseVerticalChildrenData(blockId), store.dispatch);
 
       expect(queryByRole('button', {
-        name: messages.pasteComponentButtonText.defaultMessage,
+        name: messages.pasteButtonText.defaultMessage,
       })).not.toBeInTheDocument();
       expect(queryByText(
-        pasteButtonMessages.pasteButtonWhatsInClipboardText.defaultMessage,
+        pasteComponentMessages.pasteButtonWhatsInClipboardText.defaultMessage,
       )).not.toBeInTheDocument();
     });
   });

diff --git a/src/course-unit/course-xblock/CourseXBlock.jsx b/src/course-unit/course-xblock/CourseXBlock.jsx
@@ -14,7 +14,7 @@ import ConditionalSortableElement from '../../generic/drag-helper/ConditionalSor
 import { scrollToElement } from '../../course-outline/utils';
 import { COURSE_BLOCK_NAMES } from '../../constants';
 import { getCanEdit, getCourseId } from '../data/selectors';
-import { copyToClipboard } from '../data/thunk';
+import { copyToClipboard } from '../../generic/data/thunks';
 import { COMPONENT_TYPES } from '../constants';
 import XBlockContent from './xblock-content/XBlockContent';
 import XBlockMessages from './xblock-messages/XBlockMessages';