feat: add auto scroll to subsection and improve scroll behaviour

open-craft · Dec 11, 2023 · 4e30ebf · 4e30ebf
1 parent 8dbc4fe
commit 4e30ebf
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 10 deletions.
diff --git a/src/course-outline/CourseOutline.jsx b/src/course-outline/CourseOutline.jsx
@@ -177,6 +177,7 @@ const CourseOutline = ({ courseId }) => {
                                   onOpenDeleteModal={openDeleteModal}
                                   onEditSubmit={handleEditSubmit}
                                   onDuplicateSubmit={handleDuplicateSubsectionSubmit}
+                                  ref={listRef}
                                 />
                               ))}
                             </SectionCard>

diff --git a/src/course-outline/constants.js b/src/course-outline/constants.js
@@ -16,10 +16,10 @@ export const CHECKLIST_FILTERS = /** @type {const} */ ({
 });
 
 export const COURSE_BLOCK_NAMES = /** @type {const} */ ({
-  chapter: { 'id': 'chapter', 'name': 'Section' },
-  sequential: { 'id': 'sequential', 'name': 'Subsection' },
-  vertical: { 'id': 'vertical', 'name': 'Unit' },
-})
+  chapter: { id: 'chapter', name: 'Section' },
+  sequential: { id: 'sequential', name: 'Subsection' },
+  vertical: { id: 'vertical', name: 'Unit' },
+});
 
 export const LAUNCH_CHECKLIST = /** @type {const} */ ({
   data: [

diff --git a/src/course-outline/subsection-card/SubsectionCard.jsx b/src/course-outline/subsection-card/SubsectionCard.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { forwardRef, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch } from 'react-redux';
 import { useIntl } from '@edx/frontend-platform/i18n';
@@ -11,7 +11,7 @@ import CardHeader from '../card-header/CardHeader';
 import { getItemStatus } from '../utils';
 import messages from './messages';
 
-const SubsectionCard = ({
+const SubsectionCard = forwardRef(({
   section,
   subsection,
   children,
@@ -20,7 +20,7 @@ const SubsectionCard = ({
   savingStatus,
   onOpenDeleteModal,
   onDuplicateSubmit,
-}) => {
+}, lastItemRef) => {
   const intl = useIntl();
   const dispatch = useDispatch();
   const [isExpanded, setIsExpanded] = useState(false);
@@ -71,7 +71,7 @@ const SubsectionCard = ({
   }, [savingStatus]);
 
   return (
-    <div className="subsection-card" data-testid="subsection-card">
+    <div className="subsection-card" data-testid="subsection-card" ref={lastItemRef}>
       <CardHeader
         title={displayName}
         status={subsectionStatus}
@@ -107,7 +107,7 @@ const SubsectionCard = ({
       )}
     </div>
   );
-};
+});
 
 SubsectionCard.defaultProps = {
   children: null,

diff --git a/src/course-outline/utils.jsx b/src/course-outline/utils.jsx
@@ -110,7 +110,11 @@ const getHighlightsFormValues = (currentHighlights) => {
 };
 
 const scrollToElement = (ref) => {
-  ref.current?.scrollIntoView({ behavior: 'smooth' });
+  ref.current?.scrollIntoView({
+    block: 'end',
+    inline: 'nearest',
+    behavior: 'smooth',
+  });
 };
 
 export {