Display server errors

This commit is contained in:
soupette 2019-08-14 10:30:58 +02:00
parent 02522c14b6
commit 7b3269c2c9
2 changed files with 59 additions and 50 deletions

View File

@ -116,6 +116,10 @@ class Wysiwyg extends React.Component {
return true; return true;
} }
if (nextProps.error !== this.props.error) {
return true;
}
return false; return false;
} }
@ -161,7 +165,7 @@ class Wysiwyg extends React.Component {
defaultContent, defaultContent,
startReplacer, startReplacer,
endReplacer, endReplacer,
cursorPosition, cursorPosition
); );
// Merge the current selection with the new one // Merge the current selection with the new one
const updatedSelection = this.getSelection().merge({ const updatedSelection = this.getSelection().merge({
@ -171,7 +175,7 @@ class Wysiwyg extends React.Component {
const newEditorState = EditorState.push( const newEditorState = EditorState.push(
this.getEditorState(), this.getEditorState(),
textWithEntity, textWithEntity,
'insert-character', 'insert-character'
); );
// Update the parent reducer // Update the parent reducer
this.sendData(newEditorState); this.sendData(newEditorState);
@ -183,7 +187,7 @@ class Wysiwyg extends React.Component {
}, },
() => { () => {
this.focus(); this.focus();
}, }
); );
} }
@ -208,7 +212,7 @@ class Wysiwyg extends React.Component {
// Retrieve all the blocks after the current position // Retrieve all the blocks after the current position
const nextBlocks = getNextBlocksList( const nextBlocks = getNextBlocksList(
newEditorState, newEditorState,
this.getSelection().getStartKey(), this.getSelection().getStartKey()
); );
let liNumber = 1; let liNumber = 1;
@ -217,8 +221,8 @@ class Wysiwyg extends React.Component {
const previousContent = const previousContent =
index === 0 index === 0
? this.getEditorState() ? this.getEditorState()
.getCurrentContent() .getCurrentContent()
.getBlockForKey(this.getCurrentAnchorKey()) .getBlockForKey(this.getCurrentAnchorKey())
: newEditorState.getCurrentContent().getBlockBefore(block.getKey()); : newEditorState.getCurrentContent().getBlockBefore(block.getKey());
// Check if there was an li before the position so we update the entire list bullets // Check if there was an li before the position so we update the entire list bullets
const number = previousContent const number = previousContent
@ -231,12 +235,12 @@ class Wysiwyg extends React.Component {
const newBlock = createNewBlock( const newBlock = createNewBlock(
nextBlockText, nextBlockText,
'block-list', 'block-list',
block.getKey(), block.getKey()
); );
// Update the contentState // Update the contentState
const newContentState = this.createNewContentStateFromBlock( const newContentState = this.createNewContentStateFromBlock(
newBlock, newBlock,
newEditorState.getCurrentContent(), newEditorState.getCurrentContent()
); );
newEditorState = EditorState.push(newEditorState, newContentState); newEditorState = EditorState.push(newEditorState, newContentState);
}); });
@ -247,13 +251,13 @@ class Wysiwyg extends React.Component {
const updatedSelection = updateSelection( const updatedSelection = updateSelection(
this.getSelection(), this.getSelection(),
nextBlocks, nextBlocks,
offset, offset
); );
return this.setState({ return this.setState({
editorState: EditorState.acceptSelection( editorState: EditorState.acceptSelection(
newEditorState, newEditorState,
updatedSelection, updatedSelection
), ),
}); });
} }
@ -266,7 +270,7 @@ class Wysiwyg extends React.Component {
const newBlock = createNewBlock(li, 'block-list', block.getKey()); const newBlock = createNewBlock(li, 'block-list', block.getKey());
const newContentState = this.createNewContentStateFromBlock( const newContentState = this.createNewContentStateFromBlock(
newBlock, newBlock,
newEditorState.getCurrentContent(), newEditorState.getCurrentContent()
); );
newEditorState = EditorState.push(newEditorState, newContentState); newEditorState = EditorState.push(newEditorState, newContentState);
}); });
@ -293,7 +297,7 @@ class Wysiwyg extends React.Component {
if (getOffSets(this.getSelection()).start !== 0) { if (getOffSets(this.getSelection()).start !== 0) {
const nextBlocks = getNextBlocksList( const nextBlocks = getNextBlocksList(
newEditorState, newEditorState,
this.getSelection().getStartKey(), this.getSelection().getStartKey()
); );
nextBlocks.map((block, index) => { nextBlocks.map((block, index) => {
@ -302,24 +306,24 @@ class Wysiwyg extends React.Component {
const newBlock = createNewBlock( const newBlock = createNewBlock(
nextBlockText, nextBlockText,
'block-list', 'block-list',
block.getKey(), block.getKey()
); );
const newContentState = this.createNewContentStateFromBlock( const newContentState = this.createNewContentStateFromBlock(
newBlock, newBlock,
newEditorState.getCurrentContent(), newEditorState.getCurrentContent()
); );
newEditorState = EditorState.push(newEditorState, newContentState); newEditorState = EditorState.push(newEditorState, newContentState);
}); });
const updatedSelection = updateSelection( const updatedSelection = updateSelection(
this.getSelection(), this.getSelection(),
nextBlocks, nextBlocks,
2, 2
); );
return this.setState({ return this.setState({
editorState: EditorState.acceptSelection( editorState: EditorState.acceptSelection(
newEditorState, newEditorState,
updatedSelection, updatedSelection
), ),
}); });
} }
@ -330,7 +334,7 @@ class Wysiwyg extends React.Component {
const newBlock = createNewBlock(li, 'block-list', block.getKey()); const newBlock = createNewBlock(li, 'block-list', block.getKey());
const newContentState = this.createNewContentStateFromBlock( const newContentState = this.createNewContentStateFromBlock(
newBlock, newBlock,
newEditorState.getCurrentContent(), newEditorState.getCurrentContent()
); );
newEditorState = EditorState.push(newEditorState, newContentState); newEditorState = EditorState.push(newEditorState, newContentState);
}); });
@ -357,7 +361,7 @@ class Wysiwyg extends React.Component {
}, },
() => { () => {
this.focus(); this.focus();
}, }
); );
}; };
@ -378,32 +382,32 @@ class Wysiwyg extends React.Component {
const { anchorOffset, focusOffset } = getDefaultSelectionOffsets( const { anchorOffset, focusOffset } = getDefaultSelectionOffsets(
defaultContent, defaultContent,
startReplacer, startReplacer,
endReplacer, endReplacer
); );
let newEditorState = this.createNewEditorState( let newEditorState = this.createNewEditorState(
newContentState, newContentState,
defaultContent, defaultContent
); );
const updatedSelection = const updatedSelection =
getOffSets(this.getSelection()).start === 0 getOffSets(this.getSelection()).start === 0
? this.getSelection().merge({ anchorOffset, focusOffset }) ? this.getSelection().merge({ anchorOffset, focusOffset })
: new SelectionState({ : new SelectionState({
anchorKey: newBlock.getKey(), anchorKey: newBlock.getKey(),
anchorOffset, anchorOffset,
focusOffset, focusOffset,
focusKey: newBlock.getKey(), focusKey: newBlock.getKey(),
isBackward: false, isBackward: false,
}); });
newEditorState = EditorState.acceptSelection( newEditorState = EditorState.acceptSelection(
newEditorState, newEditorState,
updatedSelection, updatedSelection
); );
return this.setState({ return this.setState({
editorState: EditorState.forceSelection( editorState: EditorState.forceSelection(
newEditorState, newEditorState,
newEditorState.getSelection(), newEditorState.getSelection()
), ),
}); });
}; };
@ -424,7 +428,7 @@ class Wysiwyg extends React.Component {
newEditorState = EditorState.push( newEditorState = EditorState.push(
this.getEditorState(), this.getEditorState(),
textWithEntity, textWithEntity,
'insert-characters', 'insert-characters'
); );
} }
return newEditorState; return newEditorState;
@ -441,10 +445,10 @@ class Wysiwyg extends React.Component {
createNewContentStateFromBlock = ( createNewContentStateFromBlock = (
newBlock, newBlock,
contentState = this.getEditorState().getCurrentContent(), contentState = this.getEditorState().getCurrentContent()
) => ) =>
ContentState.createFromBlockArray( ContentState.createFromBlockArray(
this.createNewBlockMap(newBlock, contentState).toArray(), this.createNewBlockMap(newBlock, contentState).toArray()
) )
.set('selectionBefore', contentState.getSelectionBefore()) .set('selectionBefore', contentState.getSelectionBefore())
.set('selectionAfter', contentState.getSelectionAfter()); .set('selectionAfter', contentState.getSelectionAfter());
@ -604,7 +608,7 @@ class Wysiwyg extends React.Component {
const newEditorState = RichUtils.onTab( const newEditorState = RichUtils.onTab(
e, e,
this.state.editorState, this.state.editorState,
4 /* maxDepth */, 4 /* maxDepth */
); );
if (newEditorState !== this.state.editorState) { if (newEditorState !== this.state.editorState) {
this.onChange(newEditorState); this.onChange(newEditorState);
@ -623,7 +627,7 @@ class Wysiwyg extends React.Component {
*/ */
modifyBlockContent = ( modifyBlockContent = (
text, text,
contentState = this.getEditorState().getCurrentContent(), contentState = this.getEditorState().getCurrentContent()
) => Modifier.replaceText(contentState, this.getSelection(), text); ) => Modifier.replaceText(contentState, this.getSelection(), text);
onChange = editorState => { onChange = editorState => {
@ -677,7 +681,7 @@ class Wysiwyg extends React.Component {
const nextBlocks = getNextBlocksList( const nextBlocks = getNextBlocksList(
newEditorState, newEditorState,
this.getSelection().getStartKey(), this.getSelection().getStartKey()
); );
// Loop to update each block after the inserted li // Loop to update each block after the inserted li
nextBlocks.map((block, index) => { nextBlocks.map((block, index) => {
@ -689,12 +693,12 @@ class Wysiwyg extends React.Component {
const newBlock = createNewBlock( const newBlock = createNewBlock(
nextBlockText, nextBlockText,
'unstyled', 'unstyled',
block.getKey(), block.getKey()
); );
// Update the contentState // Update the contentState
const newContentState = this.createNewContentStateFromBlock( const newContentState = this.createNewContentStateFromBlock(
newBlock, newBlock,
newEditorState.getCurrentContent(), newEditorState.getCurrentContent()
); );
newEditorState = EditorState.push(newEditorState, newContentState); newEditorState = EditorState.push(newEditorState, newContentState);
}); });
@ -703,12 +707,12 @@ class Wysiwyg extends React.Component {
const updatedSelection = updateSelection( const updatedSelection = updateSelection(
this.getSelection(), this.getSelection(),
nextBlocks, nextBlocks,
offset, offset
); );
this.setState({ this.setState({
editorState: EditorState.acceptSelection( editorState: EditorState.acceptSelection(
newEditorState, newEditorState,
updatedSelection, updatedSelection
), ),
}); });
@ -716,7 +720,7 @@ class Wysiwyg extends React.Component {
'/upload', '/upload',
{ method: 'POST', headers, body: formData }, { method: 'POST', headers, body: formData },
false, false,
false, false
) )
.then(response => { .then(response => {
const nextBlockKey = newEditorState const nextBlockKey = newEditorState
@ -724,21 +728,21 @@ class Wysiwyg extends React.Component {
.getKeyAfter(newEditorState.getSelection().getStartKey()); .getKeyAfter(newEditorState.getSelection().getStartKey());
const content = `![text](${response[0].url})`; const content = `![text](${response[0].url})`;
const newContentState = this.createNewContentStateFromBlock( const newContentState = this.createNewContentStateFromBlock(
createNewBlock(content, 'unstyled', nextBlockKey), createNewBlock(content, 'unstyled', nextBlockKey)
); );
newEditorState = EditorState.push(newEditorState, newContentState); newEditorState = EditorState.push(newEditorState, newContentState);
const updatedSelection = updateSelection( const updatedSelection = updateSelection(
this.getSelection(), this.getSelection(),
nextBlocks, nextBlocks,
2, 2
); );
this.sendData(newEditorState); this.sendData(newEditorState);
this.setState({ this.setState({
editorState: EditorState.acceptSelection( editorState: EditorState.acceptSelection(
newEditorState, newEditorState,
updatedSelection, updatedSelection
), ),
}); });
}) })
@ -771,7 +775,7 @@ class Wysiwyg extends React.Component {
!this.props.deactivateErrorHighlight && !this.props.deactivateErrorHighlight &&
this.props.error && this.props.error &&
styles.editorError, styles.editorError,
!isEmpty(this.props.className) && this.props.className, !isEmpty(this.props.className) && this.props.className
)} )}
onClick={e => { onClick={e => {
if (isFullscreen) { if (isFullscreen) {
@ -818,7 +822,7 @@ class Wysiwyg extends React.Component {
<div <div
className={cn( className={cn(
styles.editor, styles.editor,
isFullscreen && styles.editorFullScreen, isFullscreen && styles.editorFullScreen
)} )}
onClick={this.focus} onClick={this.focus}
> >

View File

@ -332,16 +332,21 @@ function EditView({
emitEvent('didSaveEntry'); emitEvent('didSaveEntry');
redirectToPreviousPage(); redirectToPreviousPage();
} catch (err) { } catch (err) {
console.log('send data error', err); const error = get(
emitEvent('didNotSaveEntry', { error: err }); err,
// TODO handle errors from the API ['response', 'payload', 'message', '0', 'messages', '0', 'id'],
strapi.notification.error( 'SERVER ERROR'
`${pluginId}.containers.EditView.notification.errors`
); );
console.log('Server error please check the following log');
console.log(error);
setIsSubmitting(false);
emitEvent('didNotSaveEntry', { error: err });
strapi.notification.error(error);
} }
} catch (err) { } catch (err) {
setIsSubmitting(false); setIsSubmitting(false);
console.log({ err });
const errors = get(err, 'inner', []).reduce((acc, curr) => { const errors = get(err, 'inner', []).reduce((acc, curr) => {
acc[ acc[
curr.path curr.path