55 lines
1.4 KiB
JavaScript
55 lines
1.4 KiB
JavaScript
import React, { useEffect } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
|
|
|
import messages from './messages';
|
|
import PageLoading from '../PageLoading';
|
|
import CourseHome from './CourseHome';
|
|
import { fetchCourse } from '../data';
|
|
|
|
function CourseHomeContainer(props) {
|
|
const {
|
|
intl,
|
|
match,
|
|
} = props;
|
|
|
|
const dispatch = useDispatch();
|
|
useEffect(() => {
|
|
// The courseId from the URL is the course we WANT to load.
|
|
dispatch(fetchCourse(match.params.courseId));
|
|
}, [match.params.courseId]);
|
|
|
|
// The courseId from the store is the course we HAVE loaded. If the URL changes,
|
|
// we don't want the application to adjust to it until it has actually loaded the new data.
|
|
const {
|
|
courseId,
|
|
courseStatus,
|
|
} = useSelector(state => state.courseware);
|
|
|
|
return (
|
|
<>
|
|
{courseStatus === 'loaded' ? (
|
|
<CourseHome
|
|
courseId={courseId}
|
|
/>
|
|
) : (
|
|
<PageLoading
|
|
srMessage={intl.formatMessage(messages['learn.loading.outline'])}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
CourseHomeContainer.propTypes = {
|
|
intl: intlShape.isRequired,
|
|
match: PropTypes.shape({
|
|
params: PropTypes.shape({
|
|
courseId: PropTypes.string.isRequired,
|
|
}).isRequired,
|
|
}).isRequired,
|
|
};
|
|
|
|
export default injectIntl(CourseHomeContainer);
|