-
Notifications
You must be signed in to change notification settings - Fork 212
/
TabPage.jsx
102 lines (90 loc) · 3.01 KB
/
TabPage.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
import React from 'react';
import PropTypes from 'prop-types';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { useDispatch, useSelector } from 'react-redux';
import { Navigate } from 'react-router-dom';
import { Toast } from '@openedx/paragon';
import { LearningHeader as Header } from '@edx/frontend-component-header';
import FooterSlot from '@openedx/frontend-slot-footer';
import PageLoading from '../generic/PageLoading';
import { getAccessDeniedRedirectUrl } from '../shared/access';
import { useModel } from '../generic/model-store';
import genericMessages from '../generic/messages';
import messages from './messages';
import LoadedTabPage from './LoadedTabPage';
import { setCallToActionToast } from '../course-home/data/slice';
import LaunchCourseHomeTourButton from '../product-tours/newUserCourseHomeTour/LaunchCourseHomeTourButton';
const TabPage = ({ intl, ...props }) => {
const {
activeTabSlug,
courseId,
courseStatus,
metadataModel,
} = props;
const {
toastBodyLink,
toastBodyText,
toastHeader,
} = useSelector(state => state.courseHome);
const dispatch = useDispatch();
const {
courseAccess,
number,
org,
start,
title,
} = useModel('courseHomeMeta', courseId);
if (courseStatus === 'denied') {
const redirectUrl = getAccessDeniedRedirectUrl(courseId, activeTabSlug, courseAccess, start);
if (redirectUrl) {
return (<Navigate to={redirectUrl} replace />);
}
}
return (
<>
{['loaded', 'denied'].includes(courseStatus) && (
<>
<Toast
action={toastBodyText ? {
label: toastBodyText,
href: toastBodyLink,
} : null}
closeLabel={intl.formatMessage(genericMessages.close)}
onClose={() => dispatch(setCallToActionToast({ header: '', link: null, link_text: null }))}
show={!!(toastHeader)}
>
{toastHeader}
</Toast>
{metadataModel === 'courseHomeMeta' && (<LaunchCourseHomeTourButton srOnly />)}
</>
)}
<Header courseOrg={org} courseNumber={number} courseTitle={title} />
{courseStatus === 'loading' && (
<PageLoading srMessage={intl.formatMessage(messages.loading)} />
)}
{['loaded', 'denied'].includes(courseStatus) && (
<LoadedTabPage {...props} />
)}
{/* courseStatus 'failed' and any other unexpected course status. */}
{(!['loading', 'loaded', 'denied'].includes(courseStatus)) && (
<p className="text-center py-5 mx-auto" style={{ maxWidth: '30em' }}>
{intl.formatMessage(messages.failure)}
</p>
)}
<FooterSlot />
</>
);
};
TabPage.defaultProps = {
courseId: null,
unitId: null,
};
TabPage.propTypes = {
activeTabSlug: PropTypes.string.isRequired,
intl: intlShape.isRequired,
courseId: PropTypes.string,
courseStatus: PropTypes.string.isRequired,
metadataModel: PropTypes.string.isRequired,
unitId: PropTypes.string,
};
export default injectIntl(TabPage);