Display server errors

packages/strapi-plugin-content-manager/admin/src/components/Wysiwyg/index.js

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

packages/strapi-plugin-content-manager/admin/src/containers/EditView/index.js

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