generated from openedx/frontend-template-application
-
Notifications
You must be signed in to change notification settings - Fork 38
/
PageContainer.jsx
96 lines (83 loc) · 2.45 KB
/
PageContainer.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
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { useParams } from 'react-router-dom';
import { LearningHeader as Header } from '@edx/frontend-component-header';
import FooterSlot from '@openedx/frontend-slot-footer';
import { Spinner } from '@openedx/paragon';
import { getCohorts, getCourseHomeCourseMetadata } from './data/api';
import './PageContainer.scss';
export const CourseMetadataContext = React.createContext();
export default function PageContainer(props) {
const { children } = props;
const { courseId } = useParams();
const [courseMetadata, setCourseMetadata] = useState();
useEffect(() => {
async function fetchCourseMetadata() {
let metadataResponse;
let cohortsResponse;
try {
metadataResponse = await getCourseHomeCourseMetadata(courseId);
cohortsResponse = await getCohorts(courseId);
} catch (e) {
setCourseMetadata({
org: '',
number: '',
title: '',
originalUserIsStaff: false,
tabs: [],
cohorts: [],
});
return;
}
const {
org, number, title, tabs, originalUserIsStaff, courseModes,
} = metadataResponse;
const { cohorts } = cohortsResponse;
setCourseMetadata({
org,
number,
title,
originalUserIsStaff,
courseModes,
tabs: [...tabs],
cohorts: cohorts.map(({ name }) => name),
});
}
fetchCourseMetadata();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
if (courseMetadata) {
return (
<CourseMetadataContext.Provider value={courseMetadata}>
<>
<Header
className="learning-header"
courseOrg={courseMetadata.org}
courseNumber={courseMetadata.number}
courseTitle={courseMetadata.title}
/>
<div className="pb-3 container">
<main id="main-content">
{children}
</main>
</div>
<FooterSlot />
</>
</CourseMetadataContext.Provider>
);
}
return (
<div className="d-flex justify-content-center">
<Spinner
animation="border"
variant="primary"
role="status"
screenreadertext="loading"
className="spinner-border spinner-border-lg text-primary p-5 m-5"
/>
</div>
);
}
PageContainer.propTypes = {
children: PropTypes.node.isRequired,
};