refactor: fixed scroll behavior to xblock element

openedx · Jan 13, 2025 · 2b254df · 2b254df
1 parent de5d7db
commit 2b254df
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 14 deletions.
diff --git a/src/course-unit/add-component/AddComponent.jsx b/src/course-unit/add-component/AddComponent.jsx
@@ -61,6 +61,7 @@ const AddComponent = ({ blockId, handleCreateNewCourseXBlock }) => {
       case COMPONENT_TYPES.problem:
       case COMPONENT_TYPES.video:
         handleCreateNewCourseXBlock({ type, parentLocator: blockId }, ({ courseKey, locator }) => {
+          localStorage.setItem('modalEditLastYPosition', window.scrollY);
           navigate(`/course/${courseKey}/editor/${type}/${locator}`);
         });
         break;

diff --git a/src/course-unit/xblock-container-iframe/hooks/useMessageHandlers.tsx b/src/course-unit/xblock-container-iframe/hooks/useMessageHandlers.tsx
@@ -1,4 +1,5 @@
 import { useMemo } from 'react';
+import { debounce } from 'lodash';
 
 import { copyToClipboard } from '../../../generic/data/thunks';
 import { messageTypes } from '../../constants';
@@ -19,17 +20,33 @@ export const useMessageHandlers = ({
   handleDuplicateXBlock,
   handleScrollToXBlock,
   handleManageXBlockAccess,
-}: UseMessageHandlersTypes): MessageHandlersTypes => useMemo(() => ({
-  [messageTypes.copyXBlock]: ({ usageId }) => dispatch(copyToClipboard(usageId)),
-  [messageTypes.deleteXBlock]: ({ usageId }) => handleDeleteXBlock(usageId),
-  [messageTypes.newXBlockEditor]: ({ blockType, usageId }) => navigate(`/course/${courseId}/editor/${blockType}/${usageId}`),
-  [messageTypes.duplicateXBlock]: ({ blockType, usageId }) => handleDuplicateXBlock(blockType, usageId),
-  [messageTypes.manageXBlockAccess]: ({ usageId }) => handleManageXBlockAccess(usageId),
-  [messageTypes.scrollToXBlock]: ({ scrollOffset }) => handleScrollToXBlock(scrollOffset),
-  [messageTypes.toggleCourseXBlockDropdown]: ({
-    courseXBlockDropdownHeight,
-  }: { courseXBlockDropdownHeight: number }) => setIframeOffset(courseXBlockDropdownHeight),
-}), [
+}: UseMessageHandlersTypes): MessageHandlersTypes => useMemo(() => {
+  const handleResizeDebounced = debounce(() => {
+    const scrollOffsetString = localStorage.getItem('modalEditLastYPosition');
+    const scrollOffset = scrollOffsetString ? parseInt(scrollOffsetString, 10) : 0;
+
+    if (scrollOffset) {
+      window.scrollBy({
+        top: scrollOffset,
+        behavior: 'smooth',
+      });
+      localStorage.removeItem('modalEditLastYPosition');
+    }
+  }, 2000);
+
+  return {
+    [messageTypes.copyXBlock]: ({ usageId }) => dispatch(copyToClipboard(usageId)),
+    [messageTypes.deleteXBlock]: ({ usageId }) => handleDeleteXBlock(usageId),
+    [messageTypes.newXBlockEditor]: ({ blockType, usageId }) => navigate(`/course/${courseId}/editor/${blockType}/${usageId}`),
+    [messageTypes.duplicateXBlock]: ({ blockType, usageId }) => handleDuplicateXBlock(blockType, usageId),
+    [messageTypes.manageXBlockAccess]: ({ usageId }) => handleManageXBlockAccess(usageId),
+    [messageTypes.scrollToXBlock]: debounce(({ scrollOffset }) => handleScrollToXBlock(scrollOffset), 3000),
+    [messageTypes.resize]: handleResizeDebounced,
+    [messageTypes.toggleCourseXBlockDropdown]: ({
+      courseXBlockDropdownHeight,
+    }: { courseXBlockDropdownHeight: number }) => setIframeOffset(courseXBlockDropdownHeight),
+  };
+}, [
   courseId,
   handleDeleteXBlock,
   handleDuplicateXBlock,

diff --git a/src/generic/configure-modal/ConfigureModal.jsx b/src/generic/configure-modal/ConfigureModal.jsx
@@ -365,7 +365,7 @@ ConfigureModal.propTypes = {
     supportsOnboarding: PropTypes.bool,
     showReviewRules: PropTypes.bool,
     onlineProctoringRules: PropTypes.string,
-    discussionEnabled: PropTypes.bool.isRequired,
+    discussionEnabled: PropTypes.bool,
   }).isRequired,
   isXBlockComponent: PropTypes.bool,
   isSelfPaced: PropTypes.bool.isRequired,

diff --git a/src/generic/configure-modal/UnitTab.jsx b/src/generic/configure-modal/UnitTab.jsx
@@ -152,13 +152,14 @@ UnitTab.propTypes = {
   isXBlockComponent: PropTypes.bool,
   values: PropTypes.shape({
     isVisibleToStaffOnly: PropTypes.bool.isRequired,
-    discussionEnabled: PropTypes.bool.isRequired,
+    discussionEnabled: PropTypes.bool,
     selectedPartitionIndex: PropTypes.oneOfType([
       PropTypes.string,
       PropTypes.number,
     ]).isRequired,
     selectedGroups: PropTypes.oneOfType([
-      PropTypes.string,
+      PropTypes.arrayOf(PropTypes.string),
+      PropTypes.array,
     ]),
   }).isRequired,
   setFieldValue: PropTypes.func.isRequired,