Merge pull request #268 from openedx/kenclary/TNL-10507-1

fix: ProblemEditor useEffect at beginning of component; message for block failed to load. TNL-10507

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
 </div>
 `;
 
+exports[`ProblemEditor snapshots block failed, message appears 1`] = `
+<div
+  className="text-center p-6"
+>
+  <FormattedMessage
+    defaultMessage="Problem failed to load"
+    description="Error message for problem block failing to load"
+    id="authoring.problemEditor.blockFailed"
+  />
+</div>
+`;
+
 exports[`ProblemEditor snapshots block loaded, studio view and assets not yet loaded, Spinner appears 1`] = `
 <div
   className="text-center p-6"
@@ -25,9 +37,15 @@ exports[`ProblemEditor snapshots block loaded, studio view and assets not yet lo
 `;
 
 exports[`ProblemEditor snapshots renders EditProblemView 1`] = `
-<EditProblemView
-  onClose={[MockFunction props.onClose]}
-/>
+<div
+  className="text-center p-6"
+>
+  <FormattedMessage
+    defaultMessage="Problem failed to load"
+    description="Error message for problem block failing to load"
+    id="authoring.problemEditor.blockFailed"
+  />
+</div>
 `;
 
 exports[`ProblemEditor snapshots renders SelectTypeModal 1`] = `

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 (
       <div className="text-center p-6">
@@ -29,9 +37,14 @@ export const ProblemEditor = ({
       </div>
     );
   }
-  // once data is loaded, init store
-  React.useEffect(() => initializeProblemEditor(blockValue), []);
-  // TODO: INTL MSG, Add LOAD FAILED ERROR using BLOCKFAILED
+
+  if (blockFailed) {
+    return (
+      <div className="text-center p-6">
+        <FormattedMessage {...messages.blockFailed} />
+      </div>
+    );
+  }
 
   if (problemType === null) {
     return (<SelectTypeModal onClose={onClose} />);
@@ -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),

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(<ProblemEditor {...props} assetsFinished />)).toMatchSnapshot();
     });
+    test('block failed, message appears', () => {
+      expect(shallow(<ProblemEditor
+        {...props}
+        blockFinished
+        studioViewFinished
+        assetsFinished
+        blockFailed
+      />)).toMatchSnapshot();
+    });
     test('renders SelectTypeModal', () => {
       expect(shallow(<ProblemEditor {...props} blockFinished studioViewFinished assetsFinished />)).toMatchSnapshot();
     });
@@ -68,6 +79,7 @@ describe('ProblemEditor', () => {
         {...props}
         problemType="multiplechoiceresponse"
         blockFinished
+        blockFailed
         studioViewFinished
         assetsFinished
       />)).toMatchSnapshot();

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;