d3b22bc879
* Adding an index.js file for user-messages. Importing from the module, not its contents. * Allowing customProps to be passed though AlertList to Alerts. * UserMessagesProvider can create flash messages. A flash message is one that will be displayed on the next reload of the page. UserMessagesProvider now provides a “addFlash” function. These messages are stored in localStorage and displayed the next time UserMessagesProvider is mounted, which is generally going to be on the next page refresh. Once displayed, flash messages are cleared out of localStorage. * Hooking up Enroll Now button and adding “success” alert. Success alert is shown as a flash message on next page reload. * Using ALERT_TYPES constants.
98 lines
2.9 KiB
JavaScript
98 lines
2.9 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
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';
|
|
import { useModel } from '../model-store';
|
|
|
|
// Note that we import from the component files themselves in the enrollment-alert package.
|
|
// This is because Reacy.lazy() requires that we import() from a file with a Component as it's
|
|
// default export.
|
|
// See React.lazy docs here: https://reactjs.org/docs/code-splitting.html#reactlazy
|
|
const { EnrollmentAlert, StaffEnrollmentAlert } = React.lazy(() => import('../enrollment-alert'));
|
|
const LogistrationAlert = React.lazy(() => import('../logistration-alert'));
|
|
|
|
export default function CourseHome({
|
|
courseId,
|
|
}) {
|
|
useLogistrationAlert();
|
|
useEnrollmentAlert(courseId);
|
|
|
|
const {
|
|
org,
|
|
number,
|
|
title,
|
|
start,
|
|
end,
|
|
enrollmentStart,
|
|
enrollmentEnd,
|
|
enrollmentMode,
|
|
isEnrolled,
|
|
tabs,
|
|
sectionIds,
|
|
} = useModel('courses', courseId);
|
|
|
|
return (
|
|
<>
|
|
<Header
|
|
courseOrg={org}
|
|
courseNumber={number}
|
|
courseTitle={title}
|
|
/>
|
|
<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>
|
|
<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>
|
|
</main>
|
|
</>
|
|
);
|
|
}
|
|
|
|
CourseHome.propTypes = {
|
|
courseId: PropTypes.string.isRequired,
|
|
};
|