87 lines
2.8 KiB
JavaScript
87 lines
2.8 KiB
JavaScript
import React from 'react';
|
|
import { connect } from 'react-redux';
|
|
import PropTypes from 'prop-types';
|
|
import { Spinner } from '@edx/paragon';
|
|
import { injectIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
|
|
import SelectTypeModal from './components/SelectTypeModal';
|
|
import EditProblemView from './components/EditProblemView';
|
|
import { selectors, thunkActions } from '../../data/redux';
|
|
import { RequestKeys } from '../../data/constants/requests';
|
|
import messages from './messages';
|
|
|
|
export const ProblemEditor = ({
|
|
onClose,
|
|
// Redux
|
|
problemType,
|
|
blockFinished,
|
|
blockFailed,
|
|
studioViewFinished,
|
|
blockValue,
|
|
initializeProblemEditor,
|
|
assetsFinished,
|
|
advancedSettingsFinished,
|
|
}) => {
|
|
React.useEffect(() => {
|
|
if (blockFinished && studioViewFinished && assetsFinished && !blockFailed) {
|
|
initializeProblemEditor(blockValue);
|
|
}
|
|
}, [blockFinished, studioViewFinished, assetsFinished, blockFailed]);
|
|
|
|
if (!blockFinished || !studioViewFinished || !assetsFinished || !advancedSettingsFinished) {
|
|
return (
|
|
<div className="text-center p-6">
|
|
<Spinner
|
|
animation="border"
|
|
className="m-3"
|
|
screenreadertext="Loading Problem Editor"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (blockFailed) {
|
|
return (
|
|
<div className="text-center p-6">
|
|
<FormattedMessage {...messages.blockFailed} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (problemType === null) {
|
|
return (<SelectTypeModal onClose={onClose} />);
|
|
}
|
|
return (<EditProblemView onClose={onClose} />);
|
|
};
|
|
|
|
ProblemEditor.defaultProps = {
|
|
assetsFinished: null,
|
|
};
|
|
ProblemEditor.propTypes = {
|
|
onClose: PropTypes.func.isRequired,
|
|
// redux
|
|
assetsFinished: PropTypes.bool,
|
|
advancedSettingsFinished: PropTypes.bool.isRequired,
|
|
blockFinished: PropTypes.bool.isRequired,
|
|
blockFailed: PropTypes.bool.isRequired,
|
|
studioViewFinished: PropTypes.bool.isRequired,
|
|
problemType: PropTypes.string.isRequired,
|
|
initializeProblemEditor: PropTypes.func.isRequired,
|
|
blockValue: PropTypes.objectOf(PropTypes.object).isRequired,
|
|
};
|
|
|
|
export const mapStateToProps = (state) => ({
|
|
blockFinished: selectors.requests.isFinished(state, { requestKey: RequestKeys.fetchBlock }),
|
|
blockFailed: selectors.requests.isFailed(state, { requestKey: RequestKeys.fetchBlock }),
|
|
studioViewFinished: selectors.requests.isFinished(state, { requestKey: RequestKeys.fetchStudioView }),
|
|
problemType: selectors.problem.problemType(state),
|
|
blockValue: selectors.app.blockValue(state),
|
|
assetsFinished: selectors.requests.isFinished(state, { requestKey: RequestKeys.fetchAssets }),
|
|
advancedSettingsFinished: selectors.requests.isFinished(state, { requestKey: RequestKeys.fetchAdvancedSettings }),
|
|
});
|
|
|
|
export const mapDispatchToProps = {
|
|
initializeProblemEditor: thunkActions.problem.initializeProblem,
|
|
};
|
|
|
|
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(ProblemEditor));
|