Smarter error notifications

frontend/src/components/university/modules/editors/Editor.js

@@ -42,19 +42,18 @@ class Editor extends MyComponent {
     lastUpdateTime: this.props.lastUpdateTime,
   }
 
-  formIsValid() {
+  formHasError() {
     // to override if you need to perform some checks at the form level
-    return true;
+    return { status: false, messages: Array() };
   }
 
   formFieldsHaveError() {
+    let messages = Array();
     for (let fieldKey in this.fields) {
       const field = this.fields[fieldKey];
-      if (field.getError().status) {
-        return true;
-      }
+      messages = messages.concat(field.getError().messages);
     }
-    return false;
+    return { status: messages.length > 0, messages };
   }
 
   getDataFromFields() {
@@ -86,7 +85,9 @@ class Editor extends MyComponent {
   }
 
   handleSaveEditor() {
-    if (this.formIsValid() && !this.formFieldsHaveError()) {
+    const formHasError = this.formHasError();
+    const formFieldsHaveError = this.formFieldsHaveError();
+    if ((!formHasError.status) && (!formFieldsHaveError.status)) {
       const formData = this.getDataFromFields();
       const { modelData } = this.props;
       if (this.hasChangesToSave(formData, modelData)) {
@@ -113,12 +114,15 @@ class Editor extends MyComponent {
       }
 
     } else {
+      const errors = formHasError.messages.concat(formFieldsHaveError.messages);
+      console.log(errors);
       this.setState({
         notification: {
           open: true,
           message: "Le formulaire semble incohérent, merci de vérifier son contenu.",
           duration: 5000,
           error: true,
+          errors,
           handleClose: this.handleCloseNotification()
         }
       })

frontend/src/components/university/modules/editors/Notification.js

@@ -12,6 +12,10 @@ const styles = theme => ({
     width: theme.spacing.unit * 4,
     height: theme.spacing.unit * 4,
   },
+  error: {
+    color: 'red',
+    display: 'block'
+  }
 });
 
 class Notification extends React.Component {
@@ -23,6 +27,17 @@ class Notification extends React.Component {
     this.props.handleClose();
   };
 
+  renderMessage() {
+    const { classes } = this.props;
+    return (
+      <div>
+        <span id="message-id">{this.props.message}</span>
+        {this.props.errors.map((error, idx) => (<span key={idx} className={classes.error}>{error}</span>))}
+      </div>
+
+    )
+  }
+
   render() {
     const { classes } = this.props;
     let actions = Array();
@@ -61,7 +76,7 @@ class Notification extends React.Component {
           ContentProps={{
             'aria-describedby': 'message-id',
           }}
-          message={<span id="message-id">{this.props.message}</span>}
+          message={this.renderMessage()}
           action={actions}
         />
       </div>
@@ -76,6 +91,7 @@ Notification.defaultProps = {
   preventClickAway: true,
   success: false,
   error: false,
+  errors: [],
   isLoading: false,
   handleClose: () => console.log("cloossee notif")
 }
@@ -88,6 +104,7 @@ Notification.propTypes = {
   preventClickAway: PropTypes.bool.isRequired,
   success: PropTypes.bool.isRequired,
   error: PropTypes.bool.isRequired,
+  errors: PropTypes.arrayOf(PropTypes.string),
   isLoading: PropTypes.bool.isRequired,
   handleClose: PropTypes.func.isRequired,
 };