Extensive refactor of application data management. (#32)

* Extensive refactor of application data management.

- “course-blocks” and “course-meta” are replaced with “courseware” module.  This obscures the difference between the two from the application itself.
- a generic “model-store” module is used to store all course, section, sequence, and unit data in a normalized way, agnostic to the metadata vs. blocks APIs.
- SequenceContainer has been removed, and it’s work is just done in CourseContainer instead.
- UI components are - in general - more responsible for deciding their own behavior during data loading.  If they want to show a spinner or nothing, it’s up to their discretion.
- The API layer is responsible for normalizing data into a form the app will want to use, prior to putting it into the model store.

* Organizing into some more sub-modules.

- Bookmarks becomes it’s own module.
- SequenceNavigation becomes another one.

* More modularization of data directories.

- Moving model-store up to the top.
- Moving fetchCourse and fetchSequence up to the top-level data directory, since they’re used by both courseware and outline.
- Moving getBlockCompletion and updateSequencePosition into the courseware/data directory, since they pertain to that page.

* Normalizing on using the word “title”

* Using history.replace instead of history.push

This fixes TNL-7125

* Allowing sub-components to use hooks and redux

This reduces the amount of data we need to pass around, and lets us move some complexity to more natural modules.

* Fixing bug where enrollment alert is shown for undefined isEnrolled

The enrollment alert would inadvertently be shown if a user navigated from the outline to the course.  This was because it interpreted an undefined “isEnrolled” flag as false.  Instead, we should wait for the isEnrolled flag to be explicitly true or false.

* Organizing modules.

- Renaming “outline” to “course-home”.
- Moving sequence and sequence-navigation modules under the course module.

* Some final application organization and ADR write-ups.

* Final refactoring

- Favoring passing data by ID and looking it up in the store with useModel.
- Moving headers into course-header directory.

* Updating ADRs.  Splitting model-store information out into its own ADR.

src/courseware/course/sequence/sequence-navigation/CompleteIcon.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCheck } from '@fortawesome/free-solid-svg-icons';
+
+export default function CompleteIcon(props) {
+  return <FontAwesomeIcon icon={faCheck} {...props} />;
+}

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

@@ -0,0 +1,69 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from '@edx/paragon';
+import classNames from 'classnames';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+
+import UnitButton from './UnitButton';
+import SequenceNavigationTabs from './SequenceNavigationTabs';
+import { useSequenceNavigationMetadata } from './hooks';
+import { useModel } from '../../../../model-store';
+
+export default function SequenceNavigation({
+  unitId,
+  sequenceId,
+  className,
+  onNavigate,
+  nextSequenceHandler,
+  previousSequenceHandler,
+}) {
+  const sequence = useModel('sequences', sequenceId);
+  const { isFirstUnit, isLastUnit } = useSequenceNavigationMetadata(sequenceId, unitId);
+  const isLocked = sequence.gatedContent !== undefined && sequence.gatedContent.gated;
+
+  return (
+    <nav className={classNames('sequence-navigation', className)}>
+      <Button className="previous-btn" onClick={previousSequenceHandler} disabled={isFirstUnit}>
+        <FontAwesomeIcon icon={faChevronLeft} className="mr-2" size="sm" />
+        <FormattedMessage
+          defaultMessage="Previous"
+          id="learn.sequence.navigation.previous.button"
+          description="The Previous button in the sequence nav"
+        />
+      </Button>
+
+      {isLocked ? <UnitButton unitId={unitId} title="" contentType="lock" isActive onClick={() => {}} /> : (
+        <SequenceNavigationTabs
+          unitIds={sequence.unitIds}
+          unitId={unitId}
+          showCompletion={sequence.showCompletion}
+          onNavigate={onNavigate}
+        />
+      )}
+
+      <Button className="next-btn" onClick={nextSequenceHandler} disabled={isLastUnit}>
+        <FormattedMessage
+          defaultMessage="Next"
+          id="learn.sequence.navigation.next.button"
+          description="The Next button in the sequence nav"
+        />
+        <FontAwesomeIcon icon={faChevronRight} className="ml-2" size="sm" />
+      </Button>
+    </nav>
+  );
+}
+
+SequenceNavigation.propTypes = {
+  unitId: PropTypes.string.isRequired,
+  sequenceId: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  onNavigate: PropTypes.func.isRequired,
+  nextSequenceHandler: PropTypes.func.isRequired,
+  previousSequenceHandler: PropTypes.func.isRequired,
+};
+
+SequenceNavigation.defaultProps = {
+  className: null,
+};

src/courseware/course/sequence/sequence-navigation/SequenceNavigationDropdown.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Dropdown } from '@edx/paragon';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+
+import UnitButton from './UnitButton';
+
+export default function SequenceNavigationDropdown({
+  unitId,
+  onNavigate,
+  showCompletion,
+  unitIds,
+}) {
+  return (
+    <Dropdown className="sequence-navigation-dropdown">
+      <Dropdown.Button className="dropdown-button font-weight-normal w-100 border-right-0">
+        <FormattedMessage
+          defaultMessage="{current} of {total}"
+          description="The title of the mobile menu for sequence navigation of units"
+          id="learn.course.sequence.navigation.mobile.menu"
+          values={{
+            current: unitIds.indexOf(unitId) + 1,
+            total: unitIds.length,
+          }}
+        />
+      </Dropdown.Button>
+      <Dropdown.Menu className="w-100">
+        {unitIds.map(buttonUnitId => (
+          <UnitButton
+            className="w-100"
+            isActive={unitId === buttonUnitId}
+            key={buttonUnitId}
+            onClick={onNavigate}
+            showCompletion={showCompletion}
+            showTitle
+            unitId={buttonUnitId}
+          />
+        ))}
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+}
+
+SequenceNavigationDropdown.propTypes = {
+  unitId: PropTypes.string.isRequired,
+  onNavigate: PropTypes.func.isRequired,
+  showCompletion: PropTypes.bool.isRequired,
+  unitIds: PropTypes.arrayOf(PropTypes.string).isRequired,
+};

src/courseware/course/sequence/sequence-navigation/SequenceNavigationTabs.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import UnitButton from './UnitButton';
+import SequenceNavigationDropdown from './SequenceNavigationDropdown';
+import useIndexOfLastVisibleChild from '../../../../tabs/useIndexOfLastVisibleChild';
+
+export default function SequenceNavigationTabs({
+  unitIds, unitId, showCompletion, onNavigate,
+}) {
+  const [
+    indexOfLastVisibleChild,
+    containerRef,
+    invisibleStyle,
+  ] = useIndexOfLastVisibleChild();
+  const shouldDisplayDropdown = indexOfLastVisibleChild === -1;
+
+  return (
+    <div style={{ flexBasis: '100%', minWidth: 0 }}>
+      <div className="sequence-navigation-tabs-container" ref={containerRef}>
+        <div
+          className="sequence-navigation-tabs d-flex flex-grow-1"
+          style={shouldDisplayDropdown ? invisibleStyle : null}
+        >
+          {unitIds.map(buttonUnitId => (
+            <UnitButton
+              key={buttonUnitId}
+              unitId={buttonUnitId}
+              isActive={unitId === buttonUnitId}
+              showCompletion={showCompletion}
+              onClick={onNavigate}
+            />
+          ))}
+        </div>
+      </div>
+      {shouldDisplayDropdown && (
+        <SequenceNavigationDropdown
+          unitId={unitId}
+          onNavigate={onNavigate}
+          showCompletion={showCompletion}
+          unitIds={unitIds}
+        />
+      )}
+    </div>
+  );
+}
+
+SequenceNavigationTabs.propTypes = {
+  unitId: PropTypes.string.isRequired,
+  onNavigate: PropTypes.func.isRequired,
+  showCompletion: PropTypes.bool.isRequired,
+  unitIds: PropTypes.arrayOf(PropTypes.string).isRequired,
+};

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

@@ -0,0 +1,75 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import classNames from 'classnames';
+import { Button } from '@edx/paragon';
+
+import UnitIcon from './UnitIcon';
+import CompleteIcon from './CompleteIcon';
+import BookmarkFilledIcon from '../../bookmark/BookmarkFilledIcon';
+
+function UnitButton({
+  onClick,
+  title,
+  contentType,
+  isActive,
+  bookmarked,
+  complete,
+  showCompletion,
+  unitId,
+  className,
+  showTitle,
+}) {
+  const handleClick = useCallback(() => {
+    onClick(unitId);
+  });
+
+  return (
+    <Button
+      className={classNames({
+        active: isActive,
+        complete: showCompletion && complete,
+      }, className)}
+      onClick={handleClick}
+      title={title}
+    >
+      <UnitIcon type={contentType} />
+      {showTitle && <span className="unit-title">{title}</span>}
+      {showCompletion && complete ? <CompleteIcon size="sm" className="text-success ml-2" /> : null}
+      {bookmarked ? (
+        <BookmarkFilledIcon
+          className="text-primary small position-absolute"
+          style={{ top: '-3px', right: '5px' }}
+        />
+      ) : null}
+    </Button>
+  );
+}
+
+UnitButton.propTypes = {
+  bookmarked: PropTypes.bool,
+  className: PropTypes.string,
+  complete: PropTypes.bool,
+  contentType: PropTypes.string.isRequired,
+  isActive: PropTypes.bool,
+  onClick: PropTypes.func.isRequired,
+  showCompletion: PropTypes.bool,
+  showTitle: PropTypes.bool,
+  title: PropTypes.string.isRequired,
+  unitId: PropTypes.string.isRequired,
+};
+
+UnitButton.defaultProps = {
+  className: undefined,
+  isActive: false,
+  bookmarked: false,
+  complete: false,
+  showTitle: false,
+  showCompletion: true,
+};
+
+const mapStateToProps = (state, props) => ({
+  ...state.models.units[props.unitId],
+});
+
+export default connect(mapStateToProps)(UnitButton);

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faFilm, faBook, faEdit, faTasks, faLock,
+} from '@fortawesome/free-solid-svg-icons';
+
+export default function UnitIcon({ type }) {
+  let icon = null;
+  switch (type) {
+    case 'video':
+      icon = faFilm;
+      break;
+    case 'other':
+      icon = faBook;
+      break;
+    case 'vertical':
+      icon = faTasks;
+      break;
+    case 'problem':
+      icon = faEdit;
+      break;
+    case 'lock':
+      icon = faLock;
+      break;
+    default:
+      icon = faBook;
+  }
+
+  return (
+    <FontAwesomeIcon icon={icon} />
+  );
+}
+
+UnitIcon.propTypes = {
+  type: PropTypes.oneOf(['video', 'other', 'vertical', 'problem', 'lock']).isRequired,
+};

src/courseware/course/sequence/sequence-navigation/UnitNavigation.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from '@edx/paragon';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { useSequenceNavigationMetadata } from './hooks';
+
+export default function UnitNavigation(props) {
+  const {
+    sequenceId,
+    unitId,
+    onClickPrevious,
+    onClickNext,
+  } = props;
+
+  const { isFirstUnit, isLastUnit } = useSequenceNavigationMetadata(sequenceId, unitId);
+
+  return (
+    <div className="unit-navigation d-flex">
+      <Button
+        className="btn-outline-secondary previous-button mr-2"
+        disabled={isFirstUnit}
+        onClick={onClickPrevious}
+      >
+        <FontAwesomeIcon icon={faChevronLeft} className="mr-2" size="sm" />
+        <FormattedMessage
+          id="learn.sequence.navigation.after.unit.previous"
+          description="The button to go to the previous unit"
+          defaultMessage="Previous"
+        />
+      </Button>
+      {isLastUnit ? (
+        <div className="m-2">
+          <span role="img" aria-hidden="true">&#129303;</span> {/* This is a hugging face emoji */}
+          {' '}
+          <FormattedMessage
+            id="learn.end.of.course"
+            description="Message shown to students in place of a 'Next' button when they're at the end of a course."
+            defaultMessage="You've reached the end of this course!"
+          />
+        </div>
+      ) : (
+        <Button
+          className="btn-outline-primary next-button"
+          onClick={onClickNext}
+          disabled={isLastUnit}
+        >
+          <FormattedMessage
+            id="learn.sequence.navigation.after.unit.next"
+            description="The button to go to the next unit"
+            defaultMessage="Next"
+          />
+          <FontAwesomeIcon icon={faChevronRight} className="ml-2" size="sm" />
+        </Button>
+      )}
+    </div>
+  );
+}
+
+UnitNavigation.propTypes = {
+  sequenceId: PropTypes.string.isRequired,
+  unitId: PropTypes.string.isRequired,
+  onClickPrevious: PropTypes.func.isRequired,
+  onClickNext: PropTypes.func.isRequired,
+};

src/courseware/course/sequence/sequence-navigation/hooks.js

@@ -0,0 +1,24 @@
+/* eslint-disable import/prefer-default-export */
+
+import { useSelector } from 'react-redux';
+import { useModel } from '../../../../model-store';
+import { sequenceIdsSelector } from '../../../data/selectors';
+
+export function useSequenceNavigationMetadata(currentSequenceId, currentUnitId) {
+  const sequenceIds = useSelector(sequenceIdsSelector);
+  const sequence = useModel('sequences', currentSequenceId);
+  const courseStatus = useSelector(state => state.courseware.courseStatus);
+
+  // If we don't know the sequence and unit yet, then assume no.
+  if (courseStatus !== 'loaded' || !currentSequenceId || !currentUnitId) {
+    return { isFirstUnit: false, isLastUnit: false };
+  }
+  const isFirstSequence = sequenceIds.indexOf(currentSequenceId) === 0;
+  const isFirstUnitInSequence = sequence.unitIds.indexOf(currentUnitId) === 0;
+  const isFirstUnit = isFirstSequence && isFirstUnitInSequence;
+  const isLastSequence = sequenceIds.indexOf(currentSequenceId) === sequenceIds.length - 1;
+  const isLastUnitInSequence = sequence.unitIds.indexOf(currentUnitId) === sequence.unitIds.length - 1;
+  const isLastUnit = isLastSequence && isLastUnitInSequence;
+
+  return { isFirstUnit, isLastUnit };
+}

src/courseware/course/sequence/sequence-navigation/index.js

@@ -0,0 +1,2 @@
+export { default as SequenceNavigation } from './SequenceNavigation';
+export { default as UnitNavigation } from './UnitNavigation';