World class error handling and closing editor on save

frontend/generate/templates/actions.tpl

@@ -70,10 +70,11 @@ function _ElSaveData(data, api_end_point, _ElIsSaving, _ElFetchDataSuccess, _ElI
             method = "PUT";
             pk = data.id + '/';
         }
+        let errorStatusText = '';
 
         dispatch(_ElIsSaving(true));
         let token = Cookies.get('csrftoken');
-        fetch(api_end_point+pk, {
+        let f = fetch(api_end_point+pk, {
             method: method,
             credentials: 'same-origin',
             headers: {
@@ -85,21 +86,29 @@ function _ElSaveData(data, api_end_point, _ElIsSaving, _ElFetchDataSuccess, _ElI
         })
         .then((response) => {
             if (!response.ok) {
-                throw Error(response.statusText);
+                errorStatusText = response.statusText;
+                throw response;
             }
-
-            return response;
+            return response.json();
         })
-        .then((response) => response.json())
         .then((_El) => {
             dispatch(_ElInvalidated(false));
             dispatch(_ElFetchDataSuccess(_El)); // we use the same here
             dispatch(_ElIsSaving(false));
         })
         .catch((e) => {
-            dispatch(_ElHasError(true, e))
+            if (typeof e.json == 'function'){
+                return e.json()
+            } else {
+                return new Promise(function(resolve, reject) {resolve(e)});
+            }
+        })
+        .then( (errorContent) => {
+            if (typeof errorContent != 'undefined'){
+                dispatch(_ElHasError(true, {message: errorStatusText, content: errorContent}));
                 dispatch(_ElIsSaving(false));
-        });
+            }
+        })
     };
 }
 

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

@@ -10,21 +10,20 @@ import DialogTitle from '@material-ui/core/DialogTitle';
 class Alert extends React.Component {
 
   render() {
-    console.log("alert props", this.props)
     return (
       <Dialog
         open={this.props.open}
       >
         <DialogTitle>{this.props.title}</DialogTitle>
         <DialogContent>
-          <DialogContentText>
+          <DialogContentText style={{whiteSpace: 'pre-wrap'}}>
             {this.props.description}
           </DialogContentText>
         </DialogContent>
         <DialogActions>
           {
             this.props.info ?
-              <Button onClick={() => { console.log("click"); this.props.handleClose(); this.props.handleResponse() }} color="primary">
+              <Button onClick={() => { this.props.handleClose(); this.props.handleResponse() }} color="primary">
                 {this.props.infoText}
               </Button>
               :

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

@@ -26,7 +26,8 @@ class Editor extends MyComponent {
   state = {
     alert: {
       open: false,
-    }
+    },
+    lastSave: this.props.lastSave,
   }
 
   myComponentDidUpdate() {
@@ -38,25 +39,29 @@ class Editor extends MyComponent {
             open: true,
             info: true,
             title: "L'enregistrement sur le serveur a échoué.",
-            description: savingHasError.error + "\n \n Vous pourrez réessayer après avoir fermer cette alerte. Si l'erreur persiste, vérifier votre connexion internet ou contacter les administrateurs du site.",
+            description: JSON.stringify(savingHasError.error, null, 2) + "\n \nVous pourrez réessayer après avoir fermer cette alerte. Si l'erreur persiste, vérifier votre connexion internet ou contacter les administrateurs du site.",
             infoText: "J'ai compris",
             handleResponse: () => this.props.clearSaveError()
           }
         })
       }
     }
+
+    if (this.state.lastSave < this.props.lastSave) {
+      //saving data was successfull
+      this.setState({ lastSave: this.props.lastSave });
+      this.props.handleClose();
+    }
   };
 
 
   handleCloseAlert() {
-    console.log("closing")
     this.setState({
       alert: { open: false }
     })
   }
 
   setFormDataAndError(field, data, type = null) {
-    console.log(data, type)
     let correctData = data.data;
     if (type == 'date') {
       correctData = dateToDateStr(correctData);

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

@@ -75,6 +75,7 @@ UniversitySemestersDatesEditor.propTypes = {
 const mapStateToProps = (state) => {
   return {
     savingHasError: state.universitiesSemestersDatesEl.savingHasError,
+    lastSave: state.universitiesSemestersDatesEl.fetched.fetchedAt,
   };
 };