improvement: better error handling

This commit is contained in:
canove
2020-09-04 17:09:39 -03:00
parent 3cb3fc1a20
commit f7fe3286b8
23 changed files with 166 additions and 532 deletions

View File

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
import * as Yup from "yup";
import { Formik, FieldArray, Form, Field } from "formik";
import { toast } from "react-toastify";
import { makeStyles } from "@material-ui/core/styles";
import { green } from "@material-ui/core/colors";
@@ -76,8 +77,15 @@ const ContactModal = ({ open, onClose, contactId }) => {
useEffect(() => {
const fetchContact = async () => {
if (!contactId) return;
const res = await api.get(`/contacts/${contactId}`);
setContact(res.data);
try {
const { data } = await api.get(`/contacts/${contactId}`);
setContact(data);
} catch (err) {
console.log(err);
if (err.response && err.response.data && err.response.data.error) {
toast.error(err.response.data.error);
}
}
};
fetchContact();
@@ -95,9 +103,12 @@ const ContactModal = ({ open, onClose, contactId }) => {
} else {
await api.post("/contacts", values);
}
toast.success("Contact saved sucessfully!");
} catch (err) {
alert(JSON.stringify(err.response.data, null, 2));
console.log(err);
if (err.response && err.response.data && err.response.data.error) {
toast.error(err.response.data.error);
}
}
handleClose();
};
@@ -131,6 +142,7 @@ const ContactModal = ({ open, onClose, contactId }) => {
as={TextField}
label={i18n.t("contactModal.form.name")}
name="name"
autoFocus
error={touched.name && Boolean(errors.name)}
helperText={touched.name && errors.name}
variant="outlined"

View File

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
import "emoji-mart/css/emoji-mart.css";
import { useParams } from "react-router-dom";
import { Picker } from "emoji-mart";
import { toast } from "react-toastify";
import MicRecorder from "mic-recorder-to-mp3";
import { makeStyles } from "@material-ui/core/styles";
@@ -163,8 +164,10 @@ const MessageInput = () => {
try {
await api.post(`/messages/${ticketId}`, formData);
} catch (err) {
alert(err.response.data.error);
console.log(err);
if (err.response && err.response.data && err.response.data.error) {
toast.error(err.response.data.error);
}
}
setLoading(false);
setMedia(mediaInitialState);
@@ -182,8 +185,10 @@ const MessageInput = () => {
try {
await api.post(`/messages/${ticketId}`, message);
} catch (err) {
alert(err.response.data.error);
console.log(err);
if (err.response && err.response.data && err.response.data.error) {
toast.error(err.response.data.error);
}
}
setInputMessage("");
setShowEmoji(false);
@@ -224,8 +229,10 @@ const MessageInput = () => {
try {
await api.post(`/messages/${ticketId}`, formData);
} catch (err) {
alert(err.response.data.error);
console.log(err);
if (err.response && err.response.data && err.response.data.error) {
toast.error(err.response.data.error);
}
}
setRecording(false);
setLoading(false);

View File

@@ -303,8 +303,12 @@ const MessagesList = () => {
}
} catch (err) {
console.log(err);
toast.error("Ticket não encontrado");
history.push("/tickets");
if (err.response && err.response.data && err.response.data.error) {
toast.error(err.response.data.error);
if (err.response.status === 404) {
history.push("/tickets");
}
}
}
};
fetchMessages();
@@ -417,6 +421,9 @@ const MessagesList = () => {
});
} catch (err) {
console.log(err);
if (err.response && err.response.data && err.response.data.error) {
toast.error(err.response.data.error);
}
}
history.push("/tickets");
};

View File

@@ -1,5 +1,6 @@
import React, { useState, useEffect } from "react";
import { useHistory } from "react-router-dom";
import { toast } from "react-toastify";
import Button from "@material-ui/core/Button";
import TextField from "@material-ui/core/TextField";
@@ -38,7 +39,7 @@ const useStyles = makeStyles(theme => ({
},
}));
const NewTicketModal = ({ modalOpen, onClose, contactId }) => {
const NewTicketModal = ({ modalOpen, onClose }) => {
const history = useHistory();
const classes = useStyles();
const userId = +localStorage.getItem("userId");
@@ -54,18 +55,21 @@ const NewTicketModal = ({ modalOpen, onClose, contactId }) => {
const delayDebounceFn = setTimeout(() => {
const fetchContacts = async () => {
try {
const res = await api.get("contacts", {
params: { searchParam, rowsPerPage: 20 },
const { data } = await api.get("contacts", {
params: { searchParam },
});
setOptions(res.data.contacts);
setOptions(data.contacts);
setLoading(false);
} catch (err) {
alert(err);
console.log(err);
if (err.response && err.response.data && err.response.data.error) {
toast.error(err.response.data.error);
}
}
};
fetchContacts();
}, 1000);
}, 500);
return () => clearTimeout(delayDebounceFn);
}, [searchParam, modalOpen]);
@@ -87,7 +91,10 @@ const NewTicketModal = ({ modalOpen, onClose, contactId }) => {
});
history.push(`/tickets/${ticket.id}`);
} catch (err) {
alert(err);
console.log(err);
if (err.response && err.response.data && err.response.data.error) {
toast.error(err.response.data.error);
}
}
setLoading(false);
handleClose();
@@ -107,13 +114,14 @@ const NewTicketModal = ({ modalOpen, onClose, contactId }) => {
</DialogTitle>
<DialogContent dividers>
<Autocomplete
id="asynchronous-demo"
id="contacts-finder"
style={{ width: 300 }}
getOptionLabel={option => `${option.name} - ${option.number}`}
onChange={(e, newValue) => {
setSelectedContact(newValue);
}}
options={options}
noOptionsText="No contacts found. Try another term."
loading={loading}
renderInput={params => (
<TextField

View File

@@ -2,6 +2,7 @@ import React from "react";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
import { format, parseISO } from "date-fns";
import { toast } from "react-toastify";
import { i18n } from "../../translate/i18n";
import api from "../../services/api";
@@ -12,6 +13,9 @@ const SessionInfo = ({ session }) => {
await api.delete("/whatsapp/session/1");
} catch (err) {
console.log(err);
if (err.response && err.response.data && err.response.data.error) {
toast.error(err.response.data.error);
}
}
};

View File

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
import * as Yup from "yup";
import { Formik, Form, Field } from "formik";
import { toast } from "react-toastify";
import { makeStyles } from "@material-ui/core/styles";
import { green } from "@material-ui/core/colors";
@@ -76,10 +77,17 @@ const UserModal = ({ open, onClose, userId }) => {
useEffect(() => {
const fetchUser = async () => {
if (!userId) return;
const { data } = await api.get(`/users/${userId}`);
setUser(prevState => {
return { ...prevState, ...data };
});
try {
const { data } = await api.get(`/users/${userId}`);
setUser(prevState => {
return { ...prevState, ...data };
});
} catch (err) {
console.log(err);
if (err.response && err.response.data && err.response.data.error) {
toast.error(err.response.data.error);
}
}
};
fetchUser();
@@ -97,9 +105,12 @@ const UserModal = ({ open, onClose, userId }) => {
} else {
await api.post("/users", values);
}
toast.success("Success!");
} catch (err) {
alert(JSON.stringify(err.response.data, null, 2));
console.log(err);
if (err.response && err.response.data && err.response.data.error) {
toast.error(err.response.data.error);
}
}
handleClose();
};
@@ -127,6 +138,7 @@ const UserModal = ({ open, onClose, userId }) => {
<Field
as={TextField}
label="Name"
autoFocus
name="name"
error={touched.name && Boolean(errors.name)}
helperText={touched.name && errors.name}