Refactor containers to share more code (#61)

Specifically, make sure that the header, footer, and tabs are all
shared code so that they look the same and don't need to be
redefined as we add more tab pages.

Author: mikix

LICENSE

@@ -1,17 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { getConfig } from '@edx/frontend-platform';
 import classNames from 'classnames';
 
 import messages from './messages';
 import Tabs from '../tabs/Tabs';
 
 function CourseTabsNavigation({
-  activeTabSlug, tabs, intl,
+  activeTabSlug, className, tabs, intl,
 }) {
   return (
-    <div className="course-tabs-navigation">
+    <div className={classNames('course-tabs-navigation', className)}>
       <div className="container-fluid">
         <Tabs
           className="nav-underline-tabs"
@@ -21,7 +20,7 @@ function CourseTabsNavigation({
             <a
               key={slug}
               className={classNames('nav-item flex-shrink-0 nav-link', { active: slug === activeTabSlug })}
-              href={`${getConfig().LMS_BASE_URL}${url}`}
+              href={url}
             >
               {title}
             </a>
@@ -34,6 +33,7 @@ function CourseTabsNavigation({
 
 CourseTabsNavigation.propTypes = {
   activeTabSlug: PropTypes.string,
+  className: PropTypes.string,
   tabs: PropTypes.arrayOf(PropTypes.shape({
     title: PropTypes.string.isRequired,
     priority: PropTypes.number.isRequired,
@@ -45,6 +45,7 @@ CourseTabsNavigation.propTypes = {
 
 CourseTabsNavigation.defaultProps = {
   activeTabSlug: undefined,
+  className: null,
 };
 
 export default injectIntl(CourseTabsNavigation);

Makefile

@@ -68,7 +68,13 @@ export default function Header({
 }
 
 Header.propTypes = {
-  courseOrg: PropTypes.string.isRequired,
-  courseNumber: PropTypes.string.isRequired,
-  courseTitle: PropTypes.string.isRequired,
+  courseOrg: PropTypes.string,
+  courseNumber: PropTypes.string,
+  courseTitle: PropTypes.string,
+};
+
+Header.defaultProps = {
+  courseOrg: null,
+  courseNumber: null,
+  courseTitle: null,
 };

src/course-header/CourseTabsNavigation.jsx

@@ -1,11 +1,8 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
 import { Button } from '@edx/paragon';
 
 import { AlertList } from '../user-messages';
-import { Header, CourseTabsNavigation } from '../course-header';
-import { useLogistrationAlert } from '../logistration-alert';
-import { useEnrollmentAlert } from '../enrollment-alert';
 
 import CourseDates from './CourseDates';
 import Section from './Section';
@@ -18,80 +15,58 @@ import { useModel } from '../model-store';
 const { EnrollmentAlert, StaffEnrollmentAlert } = React.lazy(() => import('../enrollment-alert'));
 const LogistrationAlert = React.lazy(() => import('../logistration-alert'));
 
-export default function CourseHome({
-  courseId,
-}) {
-  useLogistrationAlert();
-  useEnrollmentAlert(courseId);
+export default function CourseHome() {
+  const {
+    courseId,
+  } = useSelector(state => state.courseware);
 
   const {
-    org,
-    number,
     title,
     start,
     end,
     enrollmentStart,
     enrollmentEnd,
     enrollmentMode,
     isEnrolled,
-    tabs,
     sectionIds,
   } = useModel('courses', courseId);
 
   return (
     <>
-      <Header
-        courseOrg={org}
-        courseNumber={number}
-        courseTitle={title}
+      <AlertList
+        topic="outline"
+        className="mb-3"
+        customAlerts={{
+          clientEnrollmentAlert: EnrollmentAlert,
+          clientStaffEnrollmentAlert: StaffEnrollmentAlert,
+          clientLogistrationAlert: LogistrationAlert,
+        }}
       />
-      <main className="d-flex flex-column flex-grow-1">
-        <div className="container-fluid">
-          <CourseTabsNavigation tabs={tabs} className="mb-3" activeTabSlug="courseware" />
-          <AlertList
-            topic="outline"
-            className="mb-3"
-            customAlerts={{
-              clientEnrollmentAlert: EnrollmentAlert,
-              clientStaffEnrollmentAlert: StaffEnrollmentAlert,
-              clientLogistrationAlert: LogistrationAlert,
-            }}
-          />
+      <div className="d-flex justify-content-between mb-3">
+        <h2>{title}</h2>
+        <Button className="btn-primary" type="button">Resume Course</Button>
+      </div>
+      <div className="row">
+        <div className="col col-8">
+          {sectionIds.map((sectionId) => (
+            <Section
+              key={sectionId}
+              id={sectionId}
+              courseId={courseId}
+            />
+          ))}
         </div>
-        <div className="flex-grow-1">
-          <div className="container-fluid">
-            <div className="d-flex justify-content-between mb-3">
-              <h2>{title}</h2>
-              <Button className="btn-primary" type="button">Resume Course</Button>
-            </div>
-            <div className="row">
-              <div className="col col-8">
-                {sectionIds.map((sectionId) => (
-                  <Section
-                    key={sectionId}
-                    id={sectionId}
-                    courseId={courseId}
-                  />
-                ))}
-              </div>
-              <div className="col col-4">
-                <CourseDates
-                  start={start}
-                  end={end}
-                  enrollmentStart={enrollmentStart}
-                  enrollmentEnd={enrollmentEnd}
-                  enrollmentMode={enrollmentMode}
-                  isEnrolled={isEnrolled}
-                />
-              </div>
-            </div>
-          </div>
+        <div className="col col-4">
+          <CourseDates
+            start={start}
+            end={end}
+            enrollmentStart={enrollmentStart}
+            enrollmentEnd={enrollmentEnd}
+            enrollmentMode={enrollmentMode}
+            isEnrolled={isEnrolled}
+          />
         </div>
-      </main>
+      </div>
     </>
   );
 }
-
-CourseHome.propTypes = {
-  courseId: PropTypes.string.isRequired,
-};

src/course-header/Header.jsx

@@ -1 +1 @@
-export { default } from './CourseHomeContainer';
+export { default } from './CourseHome';

src/course-home/CourseHome.jsx

@@ -4,6 +4,7 @@ import { useSelector, useDispatch } from 'react-redux';
 import { history } from '@edx/frontend-platform';
 import { getLocale } from '@edx/frontend-platform/i18n';
 import { useRouteMatch, Redirect } from 'react-router';
+
 import {
   fetchCourse,
   fetchSequence,
@@ -14,9 +15,9 @@ import {
   saveSequencePosition,
 } from './data/thunks';
 import { useModel } from '../model-store';
+import { TabPage } from '../tab-page';
 
 import Course from './course';
-
 import { sequenceIdsSelector, firstSequenceIdSelector } from './data/selectors';
 
 function useUnitNavigationHandler(courseId, sequenceId, unitId) {
@@ -200,7 +201,10 @@ export default function CoursewareContainer() {
   }
 
   return (
-    <main className="flex-grow-1 d-flex flex-column">
+    <TabPage
+      activeTabSlug="courseware"
+      courseId={courseId}
+    >
       <Course
         courseId={courseId}
         sequenceId={sequenceId}
@@ -209,7 +213,7 @@ export default function CoursewareContainer() {
         previousSequenceHandler={previousSequenceHandler}
         unitNavigationHandler={unitNavigationHandler}
       />
-    </main>
+    </TabPage>
   );
 }