117 lines
3.2 KiB
JavaScript
117 lines
3.2 KiB
JavaScript
import React, { useState, useEffect, useCallback, useRef } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { camelCaseObject, getConfig } from '@edx/frontend-platform';
|
|
import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
|
|
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
|
|
|
import PageLoading from './PageLoading';
|
|
|
|
import messages from './messages';
|
|
|
|
function useApi(apiFunction, {
|
|
format = true, keepDataIfFailed = false, loadedIfFailed = false, refreshParams = [],
|
|
}) {
|
|
const [data, setData] = useState(null);
|
|
const [loading, setLoading] = useState(false);
|
|
const [loaded, setLoaded] = useState(false);
|
|
const [failed, setFailed] = useState(false);
|
|
const [error, setError] = useState(null);
|
|
|
|
useEffect(() => {
|
|
setLoading(true);
|
|
apiFunction().then((response) => {
|
|
const result = format ? camelCaseObject(response.data) : response.data;
|
|
setData(result);
|
|
setLoaded(true);
|
|
setLoading(false);
|
|
setError(null);
|
|
setFailed(false);
|
|
})
|
|
.catch((e) => {
|
|
if (keepDataIfFailed) {
|
|
setData(null);
|
|
}
|
|
setFailed(true);
|
|
setLoading(false);
|
|
if (loadedIfFailed) {
|
|
setLoaded(true);
|
|
}
|
|
setError(e);
|
|
});
|
|
}, refreshParams);
|
|
|
|
return {
|
|
data,
|
|
loading,
|
|
loaded,
|
|
failed,
|
|
error,
|
|
};
|
|
}
|
|
|
|
function LearningSequencePage(props) {
|
|
const iframeRef = useRef(null);
|
|
|
|
const handleResizeIframe = useCallback(() => {
|
|
// TODO: This won't work because of crossdomain issues. Leaving here for reference once we're
|
|
// able to have the iFrame content publish resize events through postMessage
|
|
console.log('**** Resizing iframe...');
|
|
const iframe = iframeRef.current;
|
|
const contentHeight = iframe.contentWindow.document.body.scrollHeight;
|
|
console.log(`**** Height is: ${contentHeight}`);
|
|
iframe.height = contentHeight + 20;
|
|
});
|
|
|
|
const {
|
|
data,
|
|
loading,
|
|
loaded,
|
|
} = useApi(
|
|
async () => getAuthenticatedHttpClient().get(`${getConfig().LMS_BASE_URL}/api/courses/v1/blocks/?course_id=${props.match.params.courseId}&username=staff&depth=all&block_types_filter=sequential&requested_fields=children`, {}),
|
|
{
|
|
keepDataIfFailed: false,
|
|
refreshParams: [
|
|
props.match.params.courseId,
|
|
props.match.params.blockIndex,
|
|
],
|
|
},
|
|
);
|
|
|
|
console.log(data);
|
|
|
|
if (loading) {
|
|
return (
|
|
<PageLoading srMessage={props.intl.formatMessage(messages['learn.loading.learning.sequence'])} />
|
|
);
|
|
}
|
|
|
|
return (
|
|
<main>
|
|
<div className="container-fluid">
|
|
<h1>Learning Sequence Page</h1>
|
|
{loaded && data.blocks ? (
|
|
<iframe
|
|
title="yus"
|
|
ref={iframeRef}
|
|
src={Object.values(data.blocks)[parseInt(props.match.params.blockIndex, 10)].studentViewUrl}
|
|
onLoad={handleResizeIframe}
|
|
height={500}
|
|
/>
|
|
) : null}
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
LearningSequencePage.propTypes = {
|
|
match: PropTypes.shape({
|
|
params: PropTypes.shape({
|
|
courseId: PropTypes.string.isRequired,
|
|
blockIndex: PropTypes.number.isRequired,
|
|
}).isRequired,
|
|
}).isRequired,
|
|
intl: intlShape.isRequired,
|
|
};
|
|
|
|
export default injectIntl(LearningSequencePage);
|