refactor: refactoring after review

src/course-unit/constants.js

@@ -8,7 +8,7 @@ import {
 
 export const UNIT_ICON_TYPES = ['video', 'other', 'vertical', 'problem', 'lock'];
 
-export const typeToIconMapping = {
+export const TYPE_ICONS_MAP = {
   video: VideoCameraIcon,
   other: BookOpenIcon,
   vertical: FormatListBulletedIcon,

src/course-unit/course-sequence/CourseSequence.scss

@@ -3,6 +3,10 @@
   width: 100%;
 }
 
+.sequence-load-failure-msg {
+  max-width: 30em;
+}
+
 .sequence-navigation {
   .btn {
     flex-grow: 1;

src/course-unit/course-sequence/Sequence.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 import classNames from 'classnames';
 import { breakpoints, useWindowSize } from '@edx/paragon';
-import { injectIntl, useIntl } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import Loading from '../../generic/Loading';
 import { RequestStatus } from '../../data/constants';
@@ -48,7 +48,7 @@ const Sequence = ({
 
   // sequence status 'failed' and any other unexpected sequence status.
   return (
-    <p className="text-center py-5 mx-auto" style={{ maxWidth: '30em' }}>
+    <p className="sequence-load-failure-msg text-center py-5 mx-auto">
       {intl.formatMessage(messages.sequenceLoadFailure)}
     </p>
   );

src/course-unit/course-sequence/sequence-navigation/SequenceNavigation.jsx

@@ -47,6 +47,7 @@ const SequenceNavigation = ({
   };
 
   const renderPreviousButton = () => {
+    const buttonText = intl.formatMessage(messages.prevBtnText);
     const disabled = isFirstUnit;
     const prevArrow = isRtl(getLocale()) ? ChevronRightIcon : ChevronLeftIcon;
 
@@ -59,7 +60,7 @@ const SequenceNavigation = ({
         as={disabled ? undefined : Link}
         to={disabled ? undefined : previousLink}
       >
-        {shouldDisplayNotificationTriggerInSequence ? null : intl.formatMessage(messages.prevBtnText)}
+        {shouldDisplayNotificationTriggerInSequence ? null : buttonText}
       </Button>
     );
   };

src/course-unit/course-sequence/sequence-navigation/UnitButton.jsx

@@ -8,7 +8,8 @@ import UnitIcon from './UnitIcon';
 const UnitButton = ({
   title, contentType, isActive, unitId, className, showTitle,
 }) => {
-  const { courseId, sequenceId } = useSelector(state => state.courseUnit);
+  const courseId = useSelector(state => state.courseUnit.courseId);
+  const sequenceId = useSelector(state => state.courseUnit.sequenceId);
 
   return (
     <Button

src/course-unit/course-sequence/sequence-navigation/UnitIcon.jsx

@@ -2,10 +2,10 @@ import PropTypes from 'prop-types';
 import { Icon } from '@edx/paragon';
 import { BookOpen as BookOpenIcon } from '@edx/paragon/icons';
 
-import { typeToIconMapping, UNIT_ICON_TYPES } from '../../constants';
+import { TYPE_ICONS_MAP, UNIT_ICON_TYPES } from '../../constants';
 
 const UnitIcon = ({ type }) => {
-  const icon = typeToIconMapping[type] || BookOpenIcon;
+  const icon = TYPE_ICONS_MAP[type] || BookOpenIcon;
 
   return <Icon src={icon} screenReaderText={type} />;
 };

src/course-unit/data/api.js

@@ -80,8 +80,8 @@ export async function getCourseSectionVerticalData(unitId) {
  * @returns {Promise<Object>} A Promise that resolves to the normalized learning sequences outline data.
  */
 export async function getLearningSequencesOutline(courseId) {
-  const outlineUrl = new URL(getLearningSequencesOutlineApiUrl(courseId));
-  const { data } = await getAuthenticatedHttpClient().get(outlineUrl.href, {});
+  const { href } = new URL(getLearningSequencesOutlineApiUrl(courseId));
+  const { data } = await getAuthenticatedHttpClient().get(href, {});
 
   return normalizeLearningSequencesData(data);
 }

src/course-unit/data/selectors.js

@@ -1,3 +1,5 @@
+import { createSelector } from '@reduxjs/toolkit';
+
 import { RequestStatus } from '../../data/constants';
 
 export const getCourseUnitData = (state) => state.courseUnit.unit;
@@ -10,12 +12,19 @@ export const getSequenceStatus = (state) => state.courseUnit.sequenceStatus;
 
 export const getCourseSectionVertical = (state) => state.courseUnit.courseSectionVertical;
 
-export function sequenceIdsSelector(state) {
-  if (state.courseUnit.courseStatus !== RequestStatus.SUCCESSFUL) {
-    return [];
-  }
-  const { sectionIds = [] } = state.models.coursewareMeta[state.courseDetail.courseId];
+export const getCourseStatus = state => state.courseUnit.courseStatus;
+export const getCoursewareMeta = state => state.models.coursewareMeta;
+export const getSections = state => state.models.sections;
+export const getCourseId = state => state.courseDetail.courseId;
+
+export const sequenceIdsSelector = createSelector(
+  [getCourseStatus, getCoursewareMeta, getSections, getCourseId],
+  (courseStatus, coursewareMeta, sections, courseId) => {
+    if (courseStatus !== RequestStatus.SUCCESSFUL) {
+      return [];
+    }
 
-  return sectionIds
-    .flatMap(sectionId => state.models.sections[sectionId].sequenceIds);
-}
+    const sectionIds = coursewareMeta[courseId].sectionIds || [];
+    return sectionIds.flatMap(sectionId => sections[sectionId].sequenceIds);
+  },
+);