#152 handle api errors

app/package.json

@@ -8,6 +8,8 @@
     "@svgr/cli": "^4.3.2",
     "axios": "^0.19.0",
     "react": "^16.8.6",
+    "react-alert": "^7.0.2",
+    "react-alert-template-basic": "^1.0.0",
     "react-beautiful-dnd": "^11.0.5",
     "react-dom": "^16.8.6",
     "react-redux": "^7.1.0",

app/src/components/ToolbarName.js

@@ -11,6 +11,7 @@ import MoreVertIcon from '@material-ui/icons/MoreVert';
 import InfoIcon from '@material-ui/icons/InfoOutlined';
 import Tooltip from '@material-ui/core/Tooltip';
 
+
 const style = {
     toolbar: {
         background: "#f6f9f9",
@@ -68,8 +69,51 @@ export default class ToolbarName extends Component {
         }
     }
 
+    sendAlert() {
+        alert("Balões vazios foram removidos!");
+    }
+
     handleClick() {
-        this.props.saveData(this.props.item);
+        let realContent = [];
+        let newIntent = this.props.item;
+
+        this.sendAlert();
+
+
+
+        if (this.props.item.samples !== undefined) {
+            this.props.item.samples.forEach(content => {
+                if (content.trim().length !== 0) { 
+                  realContent.push(content);
+                }
+            });
+            newIntent.samples = realContent;
+            this.props.saveData(newIntent);
+        } 
+        //code above reffers to intents, so we need to treat utters also
+        else if (this.props.item.alternatives !== undefined) {
+                if (this.props.item.alternatives.length === 1) {
+                    this.props.item.alternatives[0].forEach(content => {
+                        if (content.trim().length !== 0) { 
+                          realContent.push(content);
+                        }
+                    });
+                    newIntent.alternatives[0] = realContent;
+                    this.props.saveData(newIntent);
+                } else {
+                    this.props.item.alternatives.forEach(content => {
+                        if (content[0].trim().length !== 0) { 
+                          realContent.push(content);
+                        }
+                    });
+                    newIntent.alternatives = realContent;
+                    this.props.saveData(newIntent);
+                }
+        }
+         else {
+            this.props.saveData(this.props.item);
+        }
+        //console.log("Formatado:", newIntent);
     }
 
     handleDelete() {

app/src/ducks/intents.js

@@ -15,6 +15,18 @@ const INITIAL_STATE = {
     old_content: [''],
 };
 
+
+function sendAlert(response) {
+    if (response.status === 404) {
+        alert("Desculpe, não foi possível encontrar o objeto de pesquisa!");
+    } else if (response.status === 400) {
+        alert("Desculpe, algum caracter inválido foi inserido ou falta alguma informação\nFavor revisar.")
+    }
+    else if (response.status === undefined) {
+        alert("Desculpe, houve um erro de rede.\nFavor verificar a conexão!");
+    }
+}
+
 export const addIntent = (state = INITIAL_STATE) => {
     let new_intent = [...state.content];
     new_intent.push('')
@@ -59,6 +71,7 @@ export const undoDeleteIntentContent = (state = INITIAL_STATE) => {
 export const selectIntent = (state = INITIAL_STATE, action) => {
     let selected_item = action.item;
     let selected_item_position = action.item_position;
+    let nonEmptySamples=[];
 
     if (selected_item_position < 0) {
         state.intents.find((item, index) => {
@@ -67,6 +80,14 @@ export const selectIntent = (state = INITIAL_STATE, action) => {
         });
     }
 
+    selected_item.samples.forEach(sample => {
+        if (sample.trim().length !== 0) { 
+          nonEmptySamples.push(sample);
+        } 
+    });
+
+    selected_item.samples=nonEmptySamples;
+
     return {
         ...state,
         id: selected_item.id,
@@ -123,13 +144,14 @@ export const createOrUpdateItem = (mode = 'post', new_item, message = '') => {
             await axios[mode](mode_url, new_item)
                 .then((resp) => {
                     intent = resp.data;
-                })
+                });
 
             await dispatch(Creators.getIntents());
             await dispatch(Creators.selectIntent(intent.id, -1));
 
             dispatch(Creators.notifyAction(message));
         } catch (error) {
+            sendAlert(error.response);
             throw (error);
         }
     }
@@ -149,6 +171,7 @@ export const { Types, Creators } = createActions({
                 const response = await axios.get(INTENT_URL + id);
                 await dispatch({ type: Types.SELECT_INTENT, item: response.data, item_position: item_position });
             } catch (error) {
+                sendAlert(error.response);
                 throw (error);
             }
         }
@@ -159,6 +182,7 @@ export const { Types, Creators } = createActions({
                 const response = await axios.get(INTENT_URL);
                 await dispatch({ type: Types.GET_INTENTS, intents: response.data });
             } catch (error) {
+                sendAlert(error.response);
                 throw (error);
             }
         }
@@ -176,11 +200,14 @@ export const { Types, Creators } = createActions({
         return async (dispatch) => {
             try {
                 await axios.delete(INTENT_URL + delete_intent_id);
+
                 await dispatch(Creators.getIntents());
                 await dispatch(Creators.notifyAction(message.intent.deleted));
                 await dispatch(Creators.createNewIntent())
+
 
             } catch (error) {
+                sendAlert(error.response);
                 throw (error);
             }
         }

app/src/ducks/stories.js

@@ -18,6 +18,22 @@ const INITIAL_STATE = {
     content_text_validation: ""
 };
 
+function sendAlert(response) {
+    if (response === undefined ) {
+        alert('Desculpe! Não conseguimos conectar. Verifique sua conexão com a internet ou nossas redes sociais para checar se estamos online!');
+        return;
+    }
+
+    if (response.status === 404) {
+        alert("Desculpe, não foi possível encontrar o objeto de pesquisa!");
+    } else if (response.status === 400) {
+        alert("Desculpe, algum caracter inválido foi inserido ou falta alguma informação\nFavor revisar.")
+    }
+    else if (response.status === undefined) {
+        alert("Desculpe, houve um erro de rede.\nFavor verificar a conexão!");
+    }
+}
+
 function createArrayObjCopyOf(samples = []) {
     return samples.map(text => { return { ...text } });
 }
@@ -161,6 +177,7 @@ export const createOrUpdateItem = (mode = 'post', new_item, message = "") => {
             await dispatch(Creators.getStory(response.data.id));
             await dispatch(Creators.notifyAction(message));
         } catch (error) {
+            sendAlert(error.response);
             throw (error);
         }
     }
@@ -180,6 +197,7 @@ export const { Types, Creators } = createActions({
                 const response = await axios.get(INTENT_URL + intent.id + '/example');
                 await dispatch({ type: Types.ADD_TO_STORY, item: response.data, mode: "intent" });
             } catch (error) {
+                sendAlert(error.response);
                 throw (error);
             }
         }
@@ -190,6 +208,7 @@ export const { Types, Creators } = createActions({
                 const response = await axios.get(UTTER_URL + utter.id + '/example');
                 await dispatch({ type: Types.ADD_TO_STORY, item: response.data, mode: "utter" });
             } catch (error) {
+                sendAlert(error.response);
                 throw (error);
             }
         }
@@ -200,6 +219,7 @@ export const { Types, Creators } = createActions({
                 const response = await axios.get(INTENT_URL);
                 await dispatch({ type: Types.GET_INTENTS, intents: response.data });
             } catch (error) {
+                sendAlert(error.response);
                 throw (error);
             }
         }
@@ -210,6 +230,7 @@ export const { Types, Creators } = createActions({
                 const response = await axios.get(UTTER_URL);
                 await dispatch({ type: Types.GET_UTTERS, utters: response.data });
             } catch (error) {
+                sendAlert(error.response);
                 throw (error);
             }
         }
@@ -229,6 +250,7 @@ export const { Types, Creators } = createActions({
                 const response = await axios.get(STORY_URL + '?filter=' + value);
                 await dispatch({ type: Types.GET_STORIES, stories: response.data });
             } catch (error) {
+                sendAlert(error.response);
                 throw (error);
             }
         }
@@ -241,6 +263,7 @@ export const { Types, Creators } = createActions({
                     await dispatch({ type: Types.GET_STORY, story: response.data });
                 }
             } catch (error) {
+                sendAlert(error.response);
                 throw (error);
             }
         }
@@ -253,6 +276,7 @@ export const { Types, Creators } = createActions({
                     await dispatch(Creators.notifyAction(message.story.deleted));
                 }
             } catch (error) {
+                sendAlert(error.response);
                 throw (error);
             }
         }

app/src/ducks/utters.js

@@ -15,6 +15,17 @@ const INITIAL_STATE = {
     multiple_alternatives: false,
 };
 
+function sendAlert(response) {
+    if (response.status === 404) {
+        alert("Desculpe, não foi possível encontrar o objeto de pesquisa!");
+    } else if (response.status === 400) {
+        alert("Desculpe, algum caracter inválido foi inserido ou falta alguma informação\nFavor revisar.")
+    }
+    else if (response.status === undefined) {
+        alert("Desculpe, houve um erro de rede.\nFavor verificar a conexão!");
+    }
+}
+
 function createArrayCopyOf(items) {
     if (items !== undefined) {
         return items.map(utter => utter.map(text => text));
@@ -82,6 +93,16 @@ export const selectUtter = (state = INITIAL_STATE, action) => {
         });
     }
 
+
+    for (let i=0; i< selected_item.alternatives[0].length; i++) {
+        if (selected_item.alternatives[0][i].trim().length === 0){
+            selected_item.alternatives[0].splice(i, 1);
+            console.log("ACERTOU!: ", selected_item.alternatives[0]);
+        };
+    }
+
+
+
     return {
         ...state,
         helper_text: "",
@@ -168,6 +189,7 @@ export const createOrUpdateItem = (mode = 'post', new_item, message = "") => {
 
             await dispatch(Creators.notifyAction(message));
         } catch (error) {
+            sendAlert(error.response);
             throw (error);
         }
     }
@@ -188,6 +210,7 @@ export const { Types, Creators } = createActions({
                 const response = await axios.get(UTTER_URL + id);
                 await dispatch({ type: Types.SELECT_UTTER, item: response.data, item_position: item_position });
             } catch (error) {
+                sendAlert(error.response);
                 throw (error);
             }
         }
@@ -198,6 +221,7 @@ export const { Types, Creators } = createActions({
                 const response = await axios.get(UTTER_URL);
                 await dispatch({ type: Types.GET_UTTERS, utters: response.data });
             } catch (error) {
+                sendAlert(error.response);
                 throw (error);
             }
         }
@@ -220,6 +244,7 @@ export const { Types, Creators } = createActions({
                 await dispatch(Creators.createNewUtter())
 
             } catch (error) {
+                sendAlert(error.response);
                 throw (error);
             }
         }

app/src/pages/IntentPage.js

@@ -46,15 +46,25 @@ class IntentPage extends Component {
   }
 
   checkEmptyFieldsIntent(samples) {
-    let changed = true;
+    let status = true;
+    let emptyField = false;
+    let fullfilledIntents = 0;
     if (samples !== undefined) {
       samples.forEach(sample => {
-        if (sample.trim().length === 0) {
-          changed = false;
+        if (sample.trim().length === 0) { 
+          emptyField = true;
+        } else {
+          fullfilledIntents++;
         }
       });
+
+      if (fullfilledIntents === 0 && emptyField) {
+        status = false;
+      } else {
+        status = true;
+      }
     }
-    return changed;
+    return status;
   }
 
   isButtonEnabled() {

app/src/pages/UtterPage.js

@@ -58,16 +58,27 @@ class UtterPage extends Component {
 
   checkEmptyFieldsUtter(alternatives) {
     let changed = true;
+    let emptyField = false;
+    let fullfilledUtters = 0;
+
     if (alternatives !== undefined) {
-      alternatives.forEach(alternative => {
-        alternative.forEach(text => {
-          if (text.trim().length === 0) {
-            changed = false;
-          }
-        })
-      });
-    }
-    return changed;
+        alternatives.forEach(alternative => {
+          alternative.forEach(content => {
+            if (content.trim().length === 0) {
+              emptyField = true;
+            } else {
+              fullfilledUtters++;
+            }
+          })
+        });
+
+        if (fullfilledUtters === 0 && emptyField) {
+          changed = false;
+        } else {
+          changed = true;
+        }
+      }
+      return changed;
   }
 
   isButtonEnabled() {

app/src/utils/url_routes.js

@@ -1,4 +1,4 @@
-export const BASE = process.env.REACT_APP_URL_API + 'api/v1/';
+export const BASE = 'http://localhost:8000/api/v1/'; 
 export const ITEMS_BASE = BASE + 'projects/1/';
 
 export const UTTER_URL = ITEMS_BASE + "utters/";

docker-compose.yml

@@ -7,7 +7,7 @@ services:
     ports:
       - 3000:3000
     environment:
-       REACT_APP_URL_API: http://localhost:8000/ # API 
+       REACT_APP_URL_API: http://localhost:8000/ #API
     stdin_open: true
     volumes:
       - ./app:/botflow/