improvement: start moving routes to custom route

frontend/package.json

@@ -23,6 +23,7 @@
     "react-modal-image": "^2.5.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
+    "react-toastify": "^6.0.8",
     "recharts": "^1.8.5",
     "socket.io-client": "^2.3.0"
   },

frontend/src/components/MainDrawer/index.js

@@ -158,6 +158,7 @@ const MainDrawer = ({ appTitle, children }) => {
 			<AppBar
 				position="absolute"
 				className={clsx(classes.appBar, open && classes.appBarShift)}
+				color={process.env.NODE_ENV === "development" ? "secondary" : "primary"}
 			>
 				<Toolbar variant="dense" className={classes.toolbar}>
 					<IconButton

frontend/src/components/TicketsList/index.js

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

frontend/src/routes/Route.js

@@ -0,0 +1,45 @@
+import React from "react";
+import { BrowserRouter, Route, Switch, 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";
+
+const useStyles = makeStyles(theme => ({
+	backdrop: {
+		zIndex: theme.zIndex.drawer + 1,
+		color: "#fff",
+	},
+}));
+
+const RouteWrapper = ({ component: Component, isPrivate = false, ...rest }) => {
+	const classes = useStyles();
+	const { isAuth, loading } = useContext(AuthContext);
+
+	if (loading)
+		return (
+			<Backdrop className={classes.backdrop} open={loading}>
+				<CircularProgress color="inherit" />
+			</Backdrop>
+		);
+
+	if (!isAuth && isPrivate) {
+		return (
+			<Redirect to={{ pathname: "/login", state: { from: rest.location } }} />
+		);
+	}
+
+	if (isAuth && !isPrivate) {
+		return (
+			<Redirect
+				to={{ pathname: "/dashboard", state: { from: rest.location } }}
+			/>
+		);
+	}
+
+	return <Route {...rest} component={Component} />;
+};
+
+export default RouteWrapper;

frontend/src/routes/index.js

@@ -5,14 +5,14 @@ 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 MainDrawer from "../components/MainDrawer";
-import Dashboard from "./pages/Dashboard/";
+import Dashboard from "../pages/Dashboard/";
-import Chat from "./pages/Chat/";
+import Chat from "../pages/Chat/";
-import Signup from "./pages/Signup/";
+import Signup from "../pages/Signup/";
-import Login from "./pages/Login/";
+import Login from "../pages/Login/";
-import WhatsAuth from "./pages/WhatsAuth/WhatsAuth";
+import WhatsAuth from "../pages/WhatsAuth/WhatsAuth";
-import Contacts from "./pages/Contacts/";
+import Contacts from "../pages/Contacts/";
-import { AuthContext, AuthProvider } from "./context/Auth/AuthContext";
+import { AuthContext, AuthProvider } from "../context/Auth/AuthContext";
 
 const useStyles = makeStyles(theme => ({
 	backdrop: {

frontend/yarn.lock

@@ -3066,7 +3066,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.2.5:
+classnames@^2.2.5, classnames@^2.2.6:
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
   integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
@@ -9381,6 +9381,15 @@ react-smooth@^1.0.5:
     raf "^3.4.0"
     react-transition-group "^2.5.0"
 
+react-toastify@^6.0.8:
+  version "6.0.8"
+  resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-6.0.8.tgz#84625d81d0fd01902a7f4c6f317eb074cb3bba67"
+  integrity sha512-NSqCNwv+C4IfR+c92PFZiNyeBwOJvigrP2bcRi2f6Hg3WqcHhEHOknbSQOs9QDFuqUjmK3SOrdvScQ3z63ifXg==
+  dependencies:
+    classnames "^2.2.6"
+    prop-types "^15.7.2"
+    react-transition-group "^4.4.1"
+
 react-transition-group@^2.5.0:
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"
@@ -9391,7 +9400,7 @@ react-transition-group@^2.5.0:
     prop-types "^15.6.2"
     react-lifecycles-compat "^3.0.4"
 
-react-transition-group@^4.4.0:
+react-transition-group@^4.4.0, react-transition-group@^4.4.1:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9"
   integrity sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==