diff --git a/src/editors/containers/EditorContainer/hooks.ts b/src/editors/containers/EditorContainer/hooks.ts index 626f6e284d..0d12eca94d 100644 --- a/src/editors/containers/EditorContainer/hooks.ts +++ b/src/editors/containers/EditorContainer/hooks.ts @@ -9,6 +9,7 @@ import * as appHooks from '../../hooks'; export const { clearSaveError, + clearCreateError, navigateCallback, nullMethod, saveBlock, @@ -90,3 +91,14 @@ export const isInitialized = () => useSelector(selectors.app.isInitialized); export const saveFailed = () => useSelector((rootState) => ( selectors.requests.isFailed(rootState, { requestKey: RequestKeys.saveBlock }) )); + +export const createFailed = () => ({ + // eslint-disable-next-line react-hooks/rules-of-hooks + createFailed: useSelector((rootState) => ( + selectors.requests.isFailed(rootState, { requestKey: RequestKeys.createBlock }) + )), + // eslint-disable-next-line react-hooks/rules-of-hooks + createFailedError: useSelector((rootState) => ( + selectors.requests.error(rootState, { requestKey: RequestKeys.createBlock }) + )), +}); diff --git a/src/editors/containers/EditorContainer/index.tsx b/src/editors/containers/EditorContainer/index.tsx index eb9e08ab2c..c8ef15e52c 100644 --- a/src/editors/containers/EditorContainer/index.tsx +++ b/src/editors/containers/EditorContainer/index.tsx @@ -19,6 +19,9 @@ import BaseModal from '../../sharedComponents/BaseModal'; import TitleHeader from './components/TitleHeader'; import * as hooks from './hooks'; import messages from './messages'; +import { parseErrorMsg } from '../../../library-authoring/add-content/AddContentContainer'; +import libraryMessages from '../../../library-authoring/add-content/messages'; + import './index.scss'; import usePromptIfDirty from '../../../generic/promptIfDirty/usePromptIfDirty'; @@ -81,9 +84,12 @@ const EditorContainer: React.FC = ({ const isInitialized = hooks.isInitialized(); const { isCancelConfirmOpen, openCancelConfirmModal, closeCancelConfirmModal } = hooks.cancelConfirmModalToggle(); const handleCancel = hooks.handleCancel({ onClose, returnFunction }); + const { createFailed, createFailedError } = hooks.createFailed(); const disableSave = !isInitialized; const saveFailed = hooks.saveFailed(); const clearSaveFailed = hooks.clearSaveError({ dispatch }); + const clearCreateFailed = hooks.clearCreateError({ dispatch }); + const handleSave = hooks.handleSaveClicked({ dispatch, getContent, @@ -113,6 +119,16 @@ const EditorContainer: React.FC = ({ }; return ( + {createFailed && ( + + {parseErrorMsg( + intl, + createFailedError, + libraryMessages.errorCreateMessageWithDetail, + libraryMessages.errorCreateMessage, + )} + + )} {saveFailed && ( diff --git a/src/editors/hooks.ts b/src/editors/hooks.ts index 05d471198f..8874675348 100644 --- a/src/editors/hooks.ts +++ b/src/editors/hooks.ts @@ -88,3 +88,7 @@ export const createBlock = ({ export const clearSaveError = ({ dispatch, }) => () => dispatch(actions.requests.clearRequest({ requestKey: RequestKeys.saveBlock })); + +export const clearCreateError = ({ + dispatch, +}) => () => dispatch(actions.requests.clearRequest({ requestKey: RequestKeys.createBlock })); diff --git a/src/library-authoring/add-content/AddContentContainer.tsx b/src/library-authoring/add-content/AddContentContainer.tsx index 9145cb66c0..466fa7428b 100644 --- a/src/library-authoring/add-content/AddContentContainer.tsx +++ b/src/library-authoring/add-content/AddContentContainer.tsx @@ -62,7 +62,24 @@ const AddContentButton = ({ contentType, onCreateContent } : AddContentButtonPro ); }; - +export const parseErrorMsg = ( + intl, + error: any, + detailedMessage: MessageDescriptor, + defaultMessage: MessageDescriptor, +) => { + try { + console.debug('error in create content', error); + const { response: { data } } = error; + const detail = data && (Array.isArray(data) ? data.join() : String(data)); + if (detail) { + return intl.formatMessage(detailedMessage, { detail }); + } + } catch (_err) { + // ignore + } + return intl.formatMessage(defaultMessage); +}; const AddContentContainer = () => { const intl = useIntl(); const { @@ -81,23 +98,6 @@ const AddContentContainer = () => { const [isAddLibraryContentModalOpen, showAddLibraryContentModal, closeAddLibraryContentModal] = useToggle(); - const parseErrorMsg = ( - error: any, - detailedMessage: MessageDescriptor, - defaultMessage: MessageDescriptor, - ) => { - try { - const { response: { data } } = error; - const detail = data && (Array.isArray(data) ? data.join() : String(data)); - if (detail) { - return intl.formatMessage(detailedMessage, { detail }); - } - } catch (_err) { - // ignore - } - return intl.formatMessage(defaultMessage); - }; - const isBlockTypeEnabled = (blockType: string) => getConfig().LIBRARY_SUPPORTED_BLOCKS.includes(blockType); const collectionButtonData = { @@ -184,13 +184,13 @@ const AddContentContainer = () => { showToast(intl.formatMessage(messages.successPasteClipboardMessage)); }).catch((error) => { showToast(parseErrorMsg( + intl, error, messages.errorPasteClipboardMessageWithDetail, messages.errorPasteClipboardMessage, )); }); }; - const onCreateBlock = (blockType: string) => { const suportedEditorTypes = Object.values(blockTypes); if (suportedEditorTypes.includes(blockType)) { @@ -207,6 +207,7 @@ const AddContentContainer = () => { linkComponent(data.id); }).catch((error) => { showToast(parseErrorMsg( + intl, error, messages.errorCreateMessageWithDetail, messages.errorCreateMessage,