diff --git a/src/editors/containers/ProblemEditor/__snapshots__/index.test.jsx.snap b/src/editors/containers/ProblemEditor/__snapshots__/index.test.jsx.snap index f1383f015..e0418abca 100644 --- a/src/editors/containers/ProblemEditor/__snapshots__/index.test.jsx.snap +++ b/src/editors/containers/ProblemEditor/__snapshots__/index.test.jsx.snap @@ -12,6 +12,18 @@ exports[`ProblemEditor snapshots assets loaded, block and studio view not yet lo `; +exports[`ProblemEditor snapshots block failed, message appears 1`] = ` +
+ +
+`; + exports[`ProblemEditor snapshots block loaded, studio view and assets not yet loaded, Spinner appears 1`] = `
+
+ +
`; exports[`ProblemEditor snapshots renders SelectTypeModal 1`] = ` diff --git a/src/editors/containers/ProblemEditor/index.jsx b/src/editors/containers/ProblemEditor/index.jsx index 22f16e90b..7327f07c5 100644 --- a/src/editors/containers/ProblemEditor/index.jsx +++ b/src/editors/containers/ProblemEditor/index.jsx @@ -2,22 +2,30 @@ import React from 'react'; import { connect } from 'react-redux'; import PropTypes from 'prop-types'; import { Spinner } from '@edx/paragon'; -import { injectIntl } from '@edx/frontend-platform/i18n'; +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, }) => { + React.useEffect(() => { + if (blockFinished && studioViewFinished && assetsFinished && !blockFailed) { + initializeProblemEditor(blockValue); + } + }, [blockFinished, studioViewFinished, assetsFinished, blockFailed]); + if (!blockFinished || !studioViewFinished || !assetsFinished) { return (
@@ -29,9 +37,14 @@ export const ProblemEditor = ({
); } - // once data is loaded, init store - React.useEffect(() => initializeProblemEditor(blockValue), []); - // TODO: INTL MSG, Add LOAD FAILED ERROR using BLOCKFAILED + + if (blockFailed) { + return ( +
+ +
+ ); + } if (problemType === null) { return (); @@ -47,6 +60,7 @@ ProblemEditor.propTypes = { // redux assetsFinished: PropTypes.bool, blockFinished: PropTypes.bool.isRequired, + blockFailed: PropTypes.bool.isRequired, studioViewFinished: PropTypes.bool.isRequired, problemType: PropTypes.string.isRequired, initializeProblemEditor: PropTypes.func.isRequired, @@ -55,6 +69,7 @@ ProblemEditor.propTypes = { 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), diff --git a/src/editors/containers/ProblemEditor/index.test.jsx b/src/editors/containers/ProblemEditor/index.test.jsx index 70603a3ed..1563f2245 100644 --- a/src/editors/containers/ProblemEditor/index.test.jsx +++ b/src/editors/containers/ProblemEditor/index.test.jsx @@ -31,7 +31,8 @@ jest.mock('../../data/redux', () => ({ problemType: jest.fn(state => ({ problemType: state })), }, requests: { - isFinished: jest.fn((state, params) => ({ isFailed: { state, params } })), + isFinished: jest.fn((state, params) => ({ isFinished: { state, params } })), + isFailed: jest.fn((state, params) => ({ isFailed: { state, params } })), }, }, })); @@ -43,6 +44,7 @@ describe('ProblemEditor', () => { problemType: null, blockValue: { data: { data: 'eDiTablE Text' } }, blockFinished: false, + blockFailed: false, studioViewFinished: false, initializeProblemEditor: jest.fn().mockName('args.intializeProblemEditor'), assetsFinished: false, @@ -60,6 +62,15 @@ describe('ProblemEditor', () => { test('assets loaded, block and studio view not yet loaded, Spinner appears', () => { expect(shallow()).toMatchSnapshot(); }); + test('block failed, message appears', () => { + expect(shallow()).toMatchSnapshot(); + }); test('renders SelectTypeModal', () => { expect(shallow()).toMatchSnapshot(); }); @@ -68,6 +79,7 @@ describe('ProblemEditor', () => { {...props} problemType="multiplechoiceresponse" blockFinished + blockFailed studioViewFinished assetsFinished />)).toMatchSnapshot(); diff --git a/src/editors/containers/ProblemEditor/messages.js b/src/editors/containers/ProblemEditor/messages.js new file mode 100644 index 000000000..ed4cdfd5a --- /dev/null +++ b/src/editors/containers/ProblemEditor/messages.js @@ -0,0 +1,9 @@ +export const messages = { + blockFailed: { + id: 'authoring.problemEditor.blockFailed', + defaultMessage: 'Problem failed to load', + description: 'Error message for problem block failing to load', + }, +}; + +export default messages;