feat: display erros messages on login errors

frontend/src/App.js

@@ -1,6 +1,6 @@
 import React from "react";
 import Routes from "./routes";
-import "dotenv/config";
+import "react-toastify/dist/ReactToastify.css";
 
 import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
 import { ptBR } from "@material-ui/core/locale";

frontend/src/components/TicketsList/index.js

@@ -339,8 +339,6 @@ const TicketsList = () => {
 		document.getElementById("sound").play();
 	};
 
-	console.log(process.env.NODE_ENV);
-
 	const resetUnreadMessages = ticketId => {
 		setTickets(prevState => {
 			const ticketIndex = prevState.findIndex(

frontend/src/context/Auth/useAuth.js

@@ -1,6 +1,8 @@
 import { useState, useEffect } from "react";
 import { useHistory } from "react-router-dom";
 
+import { toast } from "react-toastify";
+
 import api from "../../services/api";
 
 const useAuth = () => {
@@ -33,7 +35,7 @@ const useAuth = () => {
 			} catch (err) {
 				setLoading(false);
 				setIsAuth(false);
-				alert("Erro de autenticação. Por favor, faça login novamente");
+				toast.error("Erro de autenticação. Por favor, faça login novamente");
 			}
 		};
 		checkAuth();
@@ -50,7 +52,7 @@ const useAuth = () => {
 			setIsAuth(true);
 			history.push("/chat");
 		} catch (err) {
-			alert(err);
+			toast.error("Erro de autenticação. Verifique os dados de login");
 		}
 	};
 

frontend/src/routes/Route.js

@@ -1,11 +1,11 @@
-import React from "react";
+import React, { useContext } from "react";
-import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";
+import { Route, Redirect } from "react-router-dom";
 
 import Backdrop from "@material-ui/core/Backdrop";
 import CircularProgress from "@material-ui/core/CircularProgress";
 import { makeStyles } from "@material-ui/core/styles";
 
-import { AuthContext, AuthProvider } from "../context/Auth/AuthContext";
+import { AuthContext } from "../context/Auth/AuthContext";
 
 const useStyles = makeStyles(theme => ({
 	backdrop: {

frontend/src/routes/index.js

@@ -1,9 +1,6 @@
-import React, { useContext } from "react";
+import React from "react";
-import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";
+import { BrowserRouter, Switch } from "react-router-dom";
-
+import { ToastContainer } from "react-toastify";
-import Backdrop from "@material-ui/core/Backdrop";
-import CircularProgress from "@material-ui/core/CircularProgress";
-import { makeStyles } from "@material-ui/core/styles";
 
 import MainDrawer from "../components/MainDrawer";
 import Dashboard from "../pages/Dashboard/";
@@ -12,81 +9,24 @@ import Signup from "../pages/Signup/";
 import Login from "../pages/Login/";
 import WhatsAuth from "../pages/WhatsAuth/WhatsAuth";
 import Contacts from "../pages/Contacts/";
-import { AuthContext, AuthProvider } from "../context/Auth/AuthContext";
+import { AuthProvider } from "../context/Auth/AuthContext";
-
+import Route from "./Route";
-const useStyles = makeStyles(theme => ({
-	backdrop: {
-		zIndex: theme.zIndex.drawer + 1,
-		color: "#fff",
-	},
-}));
-
-const PrivateRoute = ({ component: Component, ...rest }) => {
-	const classes = useStyles();
-	const { isAuth, loading } = useContext(AuthContext);
-
-	if (loading)
-		return (
-			<Backdrop className={classes.backdrop} open={loading}>
-				<CircularProgress color="inherit" />
-			</Backdrop>
-		);
-
-	return (
-		<Route
-			{...rest}
-			render={props =>
-				isAuth ? (
-					<Component {...props} />
-				) : (
-					<Redirect
-						to={{ pathname: "/login", state: { from: props.location } }}
-					/>
-				)
-			}
-		/>
-	);
-};
-
-const PublicRoute = ({ component: Component, ...rest }) => {
-	const classes = useStyles();
-	const { isAuth, loading } = useContext(AuthContext);
-
-	if (loading)
-		return (
-			<Backdrop className={classes.backdrop} open={loading}>
-				<CircularProgress color="inherit" />
-			</Backdrop>
-		);
-
-	return (
-		<Route
-			{...rest}
-			render={props =>
-				!isAuth ? (
-					<Component {...props} />
-				) : (
-					<Redirect to={{ pathname: "/", state: { from: props.location } }} />
-				)
-			}
-		/>
-	);
-};
 
 const Routes = () => {
 	return (
 		<BrowserRouter>
 			<AuthProvider>
 				<Switch>
-					<PublicRoute exact path="/login" component={Login} />
+					<Route exact path="/login" component={Login} />
-					<PublicRoute exact path="/signup" component={Signup} />
+					<Route exact path="/signup" component={Signup} />
 					<MainDrawer>
-						<PrivateRoute exact path="/" component={Dashboard} />
+						<Route exact path="/" component={Dashboard} isPrivate />
-						<PrivateRoute exact path="/chat/:ticketId?" component={Chat} />
+						<Route exact path="/chat/:ticketId?" component={Chat} isPrivate />
-						<PrivateRoute exact path="/whats-auth" component={WhatsAuth} />
+						<Route exact path="/whats-auth" component={WhatsAuth} isPrivate />
-						<PrivateRoute exact path="/contacts" component={Contacts} />
+						<Route exact path="/contacts" component={Contacts} isPrivate />
 					</MainDrawer>
 				</Switch>
+				<ToastContainer autoClose={3000} />
 			</AuthProvider>
 		</BrowserRouter>
 	);