Finalized Chat migration to Material Ui

backend/controllers/session.json

@@ -1 +1 @@
-{"WABrowserId":"\"E9dnt9Mm/JiFDCMJQHkXBw==\"","WASecretBundle":"{\"key\":\"fHTKtoDcxidboASIs5WV5JKyRrF+SfMktqHXmq/KBJU=\",\"encKey\":\"FrM3OnnEbuEr1JrtKypw5CPSc6rSD5bjbOGstv8ijk4=\",\"macKey\":\"fHTKtoDcxidboASIs5WV5JKyRrF+SfMktqHXmq/KBJU=\"}","WAToken1":"\"9leF1nILpG4UaO0PWCoKA48h8dSn8UdIPNYZg3bpZv4=\"","WAToken2":"\"1@6OzeSH6s5Y8ozcOu4+l2N7wfaSk6C5Aop8h2BN08xAvvuGCfcuMzctLlOMNDaSw1j2qfFNM4CGjKdA==\""}
+{"WABrowserId":"\"E9dnt9Mm/JiFDCMJQHkXBw==\"","WASecretBundle":"{\"key\":\"fHTKtoDcxidboASIs5WV5JKyRrF+SfMktqHXmq/KBJU=\",\"encKey\":\"FrM3OnnEbuEr1JrtKypw5CPSc6rSD5bjbOGstv8ijk4=\",\"macKey\":\"fHTKtoDcxidboASIs5WV5JKyRrF+SfMktqHXmq/KBJU=\"}","WAToken1":"\"6UDP2DUC5ZZ99Iqy9CHRg53e2ZyeiVXEbcSnnxzuGWo=\"","WAToken2":"\"1@RByirgRpxu+HWxlX4oTADTz2yDLH4v2KNmYVektVG8dS9vCyaAukGYQG5/7Nvl82IuLiCrKtTffJLw==\""}

frontend/src/App.js

@@ -2,9 +2,8 @@ import React from "react";
 import { BrowserRouter, Route, Switch } from "react-router-dom";
 import { toast, ToastContainer } from "react-toastify";
 
-import Home from "./pages/Home/Home";
+import Dashboard from "./pages/Home/Dashboard";
 import Chat from "./pages/Chat/Chat";
-import Chat2 from "./pages/Chat-Material/Chat2";
 import Profile from "./pages/Profile/Profile";
 import Signup from "./pages/Signup/Signup";
 import Login from "./pages/Login/Login";
@@ -32,7 +31,7 @@ const App = () => {
 				position={toast.POSITION.TOP_CENTER}
 			/>
 			<Switch>
-				<Route exact path="/" render={props => <Home />} />
+				<Route exact path="/" render={props => <Dashboard />} />
 				<Route
 					exact
 					path="/login"
@@ -53,11 +52,6 @@ const App = () => {
 					path="/chat"
 					render={props => <Chat showToast={showToast} />}
 				/>
-				<Route
-					exact
-					path="/chat2"
-					render={props => <Chat2 showToast={showToast} />}
-				/>
 			</Switch>
 		</BrowserRouter>
 	);

frontend/src/components/Layout/MainDrawer.js

@@ -0,0 +1,173 @@
+import React, { useState } from "react";
+import clsx from "clsx";
+import { makeStyles } from "@material-ui/core/styles";
+
+import Drawer from "@material-ui/core/Drawer";
+
+import AppBar from "@material-ui/core/AppBar";
+import Toolbar from "@material-ui/core/Toolbar";
+import List from "@material-ui/core/List";
+import Typography from "@material-ui/core/Typography";
+import Divider from "@material-ui/core/Divider";
+import IconButton from "@material-ui/core/IconButton";
+import Badge from "@material-ui/core/Badge";
+
+import MenuIcon from "@material-ui/icons/Menu";
+import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
+import NotificationsIcon from "@material-ui/icons/Notifications";
+import MainListItems from "./MainListItems";
+
+const drawerWidth = 240;
+
+const useStyles = makeStyles(theme => ({
+	root: {
+		display: "flex",
+		height: "100vh",
+	},
+
+	toolbar: {
+		paddingRight: 24, // keep right padding when drawer closed
+	},
+	toolbarIcon: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "flex-end",
+		padding: "0 8px",
+		...theme.mixins.toolbar,
+	},
+	appBar: {
+		zIndex: theme.zIndex.drawer + 1,
+		transition: theme.transitions.create(["width", "margin"], {
+			easing: theme.transitions.easing.sharp,
+			duration: theme.transitions.duration.leavingScreen,
+		}),
+	},
+	appBarShift: {
+		marginLeft: drawerWidth,
+		width: `calc(100% - ${drawerWidth}px)`,
+		transition: theme.transitions.create(["width", "margin"], {
+			easing: theme.transitions.easing.sharp,
+			duration: theme.transitions.duration.enteringScreen,
+		}),
+	},
+	menuButton: {
+		marginRight: 36,
+	},
+	menuButtonHidden: {
+		display: "none",
+	},
+	title: {
+		flexGrow: 1,
+	},
+	drawerPaper: {
+		position: "relative",
+		whiteSpace: "nowrap",
+		width: drawerWidth,
+		transition: theme.transitions.create("width", {
+			easing: theme.transitions.easing.sharp,
+			duration: theme.transitions.duration.enteringScreen,
+		}),
+	},
+	drawerPaperClose: {
+		overflowX: "hidden",
+		transition: theme.transitions.create("width", {
+			easing: theme.transitions.easing.sharp,
+			duration: theme.transitions.duration.leavingScreen,
+		}),
+		width: theme.spacing(7),
+		[theme.breakpoints.up("sm")]: {
+			width: theme.spacing(9),
+		},
+	},
+	appBarSpacer: theme.mixins.toolbar,
+	content: {
+		flex: 1,
+		// height: "100%",
+		overflow: "auto",
+	},
+	container: {
+		paddingTop: theme.spacing(4),
+		paddingBottom: theme.spacing(4),
+	},
+	paper: {
+		padding: theme.spacing(2),
+		display: "flex",
+		overflow: "auto",
+		flexDirection: "column",
+	},
+}));
+
+const MainDrawer = ({ appTitle, children }) => {
+	const classes = useStyles();
+	const [open, setOpen] = useState(true);
+
+	const handleDrawerOpen = () => {
+		setOpen(true);
+	};
+	const handleDrawerClose = () => {
+		setOpen(false);
+	};
+
+	return (
+		<div className={classes.root}>
+			<Drawer
+				variant="permanent"
+				classes={{
+					paper: clsx(classes.drawerPaper, !open && classes.drawerPaperClose),
+				}}
+				open={open}
+			>
+				<div className={classes.toolbarIcon}>
+					<IconButton onClick={handleDrawerClose}>
+						<ChevronLeftIcon />
+					</IconButton>
+				</div>
+				<Divider />
+				<List>
+					<MainListItems />
+				</List>
+				<Divider />
+			</Drawer>
+			<AppBar
+				position="absolute"
+				className={clsx(classes.appBar, open && classes.appBarShift)}
+			>
+				<Toolbar className={classes.toolbar}>
+					<IconButton
+						edge="start"
+						color="inherit"
+						aria-label="open drawer"
+						onClick={handleDrawerOpen}
+						className={clsx(
+							classes.menuButton,
+							open && classes.menuButtonHidden
+						)}
+					>
+						<MenuIcon />
+					</IconButton>
+					<Typography
+						component="h1"
+						variant="h6"
+						color="inherit"
+						noWrap
+						className={classes.title}
+					>
+						{appTitle}
+					</Typography>
+					<IconButton color="inherit">
+						<Badge badgeContent={4} color="secondary">
+							<NotificationsIcon />
+						</Badge>
+					</IconButton>
+				</Toolbar>
+			</AppBar>
+			<main className={classes.content}>
+				<div className={classes.appBarSpacer} />
+
+				{children ? children : <h1>Dashboard</h1>}
+			</main>
+		</div>
+	);
+};
+
+export default MainDrawer;

frontend/src/components/Layout/MainListItems.js

@@ -0,0 +1,118 @@
+import React from "react";
+import { Link as RouterLink } from "react-router-dom";
+import { makeStyles } from "@material-ui/core/styles";
+
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import ListItemText from "@material-ui/core/ListItemText";
+// import ListSubheader from "@material-ui/core/ListSubheader";
+import Collapse from "@material-ui/core/Collapse";
+
+import DashboardIcon from "@material-ui/icons/Dashboard";
+import PeopleIcon from "@material-ui/icons/People";
+import ChatIcon from "@material-ui/icons/Chat";
+import BarChartIcon from "@material-ui/icons/BarChart";
+import LayersIcon from "@material-ui/icons/Layers";
+// import AssignmentIcon from "@material-ui/icons/Assignment";
+import ExpandLess from "@material-ui/icons/ExpandLess";
+import ExpandMore from "@material-ui/icons/ExpandMore";
+
+const useStyles = makeStyles(theme => ({
+	nested: {
+		paddingLeft: theme.spacing(4),
+	},
+}));
+
+function ListItemLink(props) {
+	const { icon, primary, to } = props;
+
+	const renderLink = React.useMemo(
+		() =>
+			React.forwardRef((itemProps, ref) => (
+				<RouterLink to={to} ref={ref} {...itemProps} />
+			)),
+		[to]
+	);
+
+	return (
+		<li>
+			<ListItem button component={renderLink}>
+				{icon ? <ListItemIcon>{icon}</ListItemIcon> : null}
+				<ListItemText primary={primary} />
+			</ListItem>
+		</li>
+	);
+}
+
+const MainListItems = () => {
+	const classes = useStyles();
+	const [open, setOpen] = React.useState(false);
+
+	const handleClick = () => {
+		setOpen(!open);
+	};
+
+	return (
+		<div>
+			<ListItemLink to="/" primary="Dashboard" icon={<DashboardIcon />} />
+			<ListItemLink to="/chat" primary="Chat" icon={<ChatIcon />} />
+
+			<ListItem button onClick={handleClick}>
+				<ListItemIcon>
+					<PeopleIcon />
+				</ListItemIcon>
+				<ListItemText primary="Clientes" />
+				{open ? <ExpandLess /> : <ExpandMore />}
+			</ListItem>
+			<Collapse in={open} timeout="auto" unmountOnExit>
+				<List component="div" disablePadding>
+					<ListItem button className={classes.nested}>
+						<ListItemIcon>
+							<LayersIcon />
+						</ListItemIcon>
+						<ListItemText primary="Starred" />
+					</ListItem>
+				</List>
+			</Collapse>
+
+			<ListItem button>
+				<ListItemIcon>
+					<BarChartIcon />
+				</ListItemIcon>
+				<ListItemText primary="Relatórios" />
+			</ListItem>
+			<ListItem button>
+				<ListItemIcon>
+					<LayersIcon />
+				</ListItemIcon>
+				<ListItemText primary="Integrações" />
+			</ListItem>
+		</div>
+	);
+};
+// export const secondaryListItems = (
+// 	<div>
+// 		<ListSubheader inset>Saved reports</ListSubheader>
+// 		<ListItem button>
+// 			<ListItemIcon>
+// 				<AssignmentIcon />
+// 			</ListItemIcon>
+// 			<ListItemText primary="Current month" />
+// 		</ListItem>
+// 		<ListItem button>
+// 			<ListItemIcon>
+// 				<AssignmentIcon />
+// 			</ListItemIcon>
+// 			<ListItemText primary="Last quarter" />
+// 		</ListItem>
+// 		<ListItem button>
+// 			<ListItemIcon>
+// 				<AssignmentIcon />
+// 			</ListItemIcon>
+// 			<ListItemText primary="Year-end sale" />
+// 		</ListItem>
+// 	</div>
+// );
+
+export default MainListItems;

frontend/src/index.js

@@ -1,15 +1,15 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import "bootstrap/dist/css/bootstrap.min.css";
+// import "bootstrap/dist/css/bootstrap.min.css";
-import ScopedCssBaseline from "@material-ui/core/ScopedCssBaseline";
+import CssBaseline from "@material-ui/core/CssBaseline";
 
 import App from "./App";
 
 ReactDOM.render(
 	<React.StrictMode>
-		<ScopedCssBaseline>
+		<CssBaseline>
 			<App />
-		</ScopedCssBaseline>
+		</CssBaseline>
 	</React.StrictMode>,
 	document.getElementById("root")
 );

frontend/src/pages/Chat-Material/Chat2.js

@@ -1,57 +0,0 @@
-import React, { useState } from "react";
-import Grid from "@material-ui/core/Grid";
-import Container from "@material-ui/core/Container";
-import Paper from "@material-ui/core/Paper";
-import { makeStyles } from "@material-ui/core/styles";
-
-import ContactsHeader from "./components/ContactsHeader/ContactsHeader";
-import ContactsList from "./components/ContactsList/ContactsList";
-import MessagesList from "./components/MessagesList/MessagesList";
-import MessagesInput from "./components/MessagesInput/MessagesInput";
-
-const useStyles = makeStyles(theme => ({
-	root: {
-		flexGrow: 1,
-	},
-	welcomeMsg: {
-		backgroundColor: "#eee",
-		// display: "flex",
-		// flex: 1,
-		// alignItems: "center",
-		height: 626,
-		textAlign: "center",
-	},
-}));
-
-const Chat2 = () => {
-	const classes = useStyles();
-	const [selectedContact, setSelectedContact] = useState(null);
-
-	return (
-		<div>
-			<Container maxWidth="lg">
-				<br></br>
-				<Grid container spacing={0}>
-					<Grid item xs={4}>
-						<ContactsHeader />
-						<ContactsList setSelectedContact={setSelectedContact} />
-					</Grid>
-					<Grid item xs={7}>
-						{selectedContact ? (
-							<>
-								<MessagesList selectedContact={selectedContact} />
-								<MessagesInput selectedContact={selectedContact} />
-							</>
-						) : (
-							<Paper square className={classes.welcomeMsg}>
-								Selecione um contato para começar a conversar
-							</Paper>
-						)}
-					</Grid>
-				</Grid>
-			</Container>
-		</div>
-	);
-};
-
-export default Chat2;

frontend/src/pages/Chat/Chat.css

@@ -1,226 +0,0 @@
-.root {
-	text-align: center;
-	flex-direction: column;
-	display: flex;
-}
-
-.body {
-	display: flex;
-	flex-direction: row;
-}
-
-.ProfilePicture {
-	width: 45px;
-	height: 45px;
-	left: 10px;
-	position: absolute;
-	cursor: pointer;
-	border-radius: 50px;
-}
-
-.ProfileHeaderText {
-	font-weight: bold;
-	color: #203152;
-	font-size: 20px;
-	/* padding: 60px; */
-	text-align: center;
-	align-items: center;
-	position: absolute;
-	margin-top: 5px;
-	margin-left: -10px;
-}
-
-/* .notificationpragraph {
-	right: 0;
-	bottom: 0;
-} */
-.newmessages {
-	border-radius: 20%;
-	width: 30px;
-	height: 30px;
-	padding: 8px;
-
-	background: green;
-	color: white;
-	text-align: center;
-
-	font: 14px Arial, sans-serif;
-}
-
-.viewLoading {
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	/* background-color: rgba(255, 255, 255, 0.5); */
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-/* List user */
-
-.viewListUser {
-	overflow: scroll;
-	display: inline-block;
-	/* max-height: 100%;
-	min-height: 100%; */
-	height: 80vh;
-	width: 50vh;
-	/* padding-top: 10px; */
-	/* padding-bottom: 10px; */
-}
-
-.viewListUser::-webkit-scrollbar-track {
-	padding: 2px 0;
-	background-color: #ffffff;
-}
-
-.viewListUser::-webkit-scrollbar {
-	width: 6px;
-}
-
-.viewListUser::-webkit-scrollbar-thumb {
-	border-radius: 10px;
-	box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-	background-color: #9999;
-}
-
-.viewWrapItem {
-	border: none;
-	display: flex;
-	flex-direction: row;
-	background-color: #fff;
-	max-width: 100%;
-	min-width: 100%;
-	padding: 10px;
-	align-items: center;
-	justify-content: center;
-	/* border-left: 15px solid #1ebea5; */
-	/* margin-bottom: 3px; */
-	border-bottom: 1px solid rgb(220, 220, 220);
-}
-
-.selectedviewWrapItem {
-	border: none;
-	display: flex;
-	flex-direction: row;
-	background-color: #e2e2e2;
-	max-width: 100%;
-	min-width: 100%;
-	padding: 10px;
-	align-items: center;
-	justify-content: center;
-	/* border-left: 15px solid #1ebea5; */
-	/* margin-bottom: 3px; */
-	border-bottom: 1px solid rgb(220, 220, 220);
-}
-
-.viewWrapItemNotification {
-	border: none;
-	display: flex;
-	flex-direction: row;
-	background-color: #1de9b6;
-	max-width: 44vh;
-	min-width: 44vh;
-	padding: 10px;
-	align-items: center;
-	justify-content: center;
-	/* border-left: 15px solid #1ebea5; */
-	/* margin-bottom: 3px; */
-	border-bottom: 1px solid rgb(220, 220, 220);
-}
-
-.viewAvatarItem {
-	width: 50px;
-	height: 50px;
-	border-radius: 25px;
-	object-fit: cover;
-}
-
-.viewWrapContentItem {
-	flex-direction: column;
-	display: flex;
-	flex: 1;
-	margin-left: 15px;
-	color: #203152;
-	word-wrap: break-word;
-}
-
-.textItem {
-	display: block;
-	overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	width: 240px;
-	text-align: left;
-	font-size: 14px;
-}
-
-.viewBoard {
-	display: flex;
-	flex: 1;
-	max-height: 90vh;
-}
-
-/* --------------------------------SEARCH BUTTON DESIGN-------------------------------- */
-.rootsearchbar {
-	padding: 10px;
-	width: 100%;
-	margin-bottom: 10px;
-	background-color: #f7f7f7;
-}
-
-.input-icons i {
-	position: absolute;
-}
-
-.input-icons {
-	width: 100%;
-}
-
-.profileviewleftside {
-	padding: 10px;
-	width: 100%;
-	background-color: #ededed;
-	height: 64px;
-	position: relative;
-	margin-top: 0;
-}
-
-.input-container {
-	/* IE10 */
-	display: flex;
-	width: 100%;
-	margin-bottom: 15px;
-}
-
-.icon {
-	padding: 10px;
-	background: rgb(148, 167, 185);
-	color: white;
-	min-width: 50px;
-	text-align: center;
-	border-radius: 10px;
-	opacity: 0.5;
-}
-
-.input-field {
-	width: 100%;
-
-	border-radius: 10px;
-
-	/* margin-right: 85%; */
-	border: none !important;
-	box-shadow: none !important;
-	outline: none !important;
-
-	width: 100%;
-	padding: 10px;
-	text-align: center;
-}
-
-.input-field:focus {
-	border: 2px solid dodgerblue;
-}

frontend/src/pages/Chat/Chat.js

@@ -1,180 +1,85 @@
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
-import { useHistory } from "react-router-dom";
+import Grid from "@material-ui/core/Grid";
-import api from "../../util/api";
+import Paper from "@material-ui/core/Paper";
-import profilePic from "../../Images/canove.png";
+import { makeStyles } from "@material-ui/core/styles";
-import profileDefaultPic from "../../Images/profile_default.png";
-import openSocket from "socket.io-client";
-import { FiSearch } from "react-icons/fi";
 
-import LogedinNavbar from "../../components/Navbar/LogedinNavbar";
+import ContactsList from "./components/ContactsList/ContactsList";
-import DefaultNavbar from "../../components/Navbar/DefaultNavbar";
+import MessagesList from "./components/MessagesList/MessagesList";
+import MainDrawer from "../../components/Layout/MainDrawer";
 
-import ChatBox from "../ChatBox/ChatBox";
+const useStyles = makeStyles(theme => ({
-import "./Chat.css";
+	chatContainer: {
-// let socket;
+		flex: 1,
+		backgroundColor: "#eee",
+		// padding: 20,
+		height: `calc(100% - 64px)`,
+		overflowY: "hidden",
+	},
 
-const Chat = ({ showToast }) => {
+	chatPapper: {
-	const token = localStorage.getItem("token");
+		backgroundColor: "#eee",
-	const username = localStorage.getItem("username");
+		display: "flex",
+		height: "100%",
+		overflowY: "hidden",
+	},
 
-	const history = useHistory();
+	contactsWrapper: {
+		display: "flex",
+		height: "100%",
+		flexDirection: "column",
+		overflow: "hidden",
+	},
+	messagessWrapper: {
+		display: "flex",
+		height: "100%",
+		flexDirection: "column",
+		overflow: "hidden",
+	},
+	welcomeMsg: {
+		backgroundColor: "#eee",
+		display: "flex",
+		justifyContent: "space-evenly",
+		alignItems: "center",
+		height: "100%",
+		textAlign: "center",
+	},
+}));
 
-	const [currentPeerContact, setCurrentPeerContact] = useState(null);
+const Chat = () => {
-	const [contacts, setContacts] = useState([]);
+	const classes = useStyles();
-	const [displayedContacts, setDisplayedContacts] = useState([]);
+	const [selectedContact, setSelectedContact] = useState(null);
-	const [notification, setNotification] = useState(true);
-
-	useEffect(() => {
-		const fetchContacts = async () => {
-			try {
-				const res = await api.get("/contacts", {
-					headers: { Authorization: "Bearer " + token },
-				});
-				setContacts(res.data);
-				setDisplayedContacts(res.data);
-			} catch (err) {
-				if (err.response.data.message === "invalidToken") {
-					localStorage.removeItem("token");
-					localStorage.removeItem("username");
-					localStorage.removeItem("userId");
-					history.push("/login");
-					alert("Sessão expirada, por favor, faça login novamente.");
-				}
-				console.log(err);
-			}
-		};
-		fetchContacts();
-	}, [currentPeerContact, token, notification, history]);
-
-	useEffect(() => {
-		const socket = openSocket("http://localhost:8080");
-
-		socket.emit("joinNotification");
-
-		socket.on("contact", data => {
-			if (data.action === "create") {
-				addContact(data.contact);
-				setNotification(prevState => !prevState);
-			}
-		});
-
-		socket.on("appMessage", data => {
-			setNotification(prevState => !prevState);
-			// handleUnreadMessages(data.message.contactId);
-		});
-
-		return () => {
-			socket.disconnect();
-		};
-	}, []);
-
-	// const handleUnreadMessages = contactId => {
-	// 	console.log("Atualizando mensagens n lidas");
-	// 	console.log(contacts);
-	// 	let aux = [...contacts];
-	// 	let contactIndex = aux.findIndex(contact => contact.id === contactId);
-	// 	aux[contactIndex].unreadMessages++;
-
-	// 	aux.unshift(aux.splice(contactIndex, 1)[0]);
-
-	// 	setDisplayedContacts(aux);
-	// };
-
-	const addContact = contact => {
-		setContacts(prevState => [...prevState, contact]);
-		setDisplayedContacts(prevState => [...prevState, contact]);
-	};
-
-	const handleSearchContact = e => {
-		let searchTerm = e.target.value.toLowerCase();
-
-		setDisplayedContacts(
-			contacts.filter(contact =>
-				contact.name.toLowerCase().includes(searchTerm)
-			)
-		);
-	};
-
-	const handleSelectContact = (e, contact) => {
-		setCurrentPeerContact(contact);
-	};
 
 	return (
 		<div>
-			{!localStorage.getItem("token") ? (
+			<MainDrawer appTitle="Chat">
-				<div>
+				<div className={classes.chatContainer}>
-					<DefaultNavbar />
+					<Paper square className={classes.chatPapper}>
-					<h1> Você não está logado </h1>
+						<Grid container spacing={0}>
+							<Grid item xs={4} className={classes.contactsWrapper}>
+								<ContactsList
+									selectedContact={selectedContact}
+									setSelectedContact={setSelectedContact}
+								/>
+							</Grid>
+							<Grid item xs={8} className={classes.messagessWrapper}>
+								{selectedContact ? (
+									<>
+										<MessagesList selectedContact={selectedContact} />
+									</>
+								) : (
+									<Paper
+										square
+										variant="outlined"
+										className={classes.welcomeMsg}
+									>
+										<span>Selecione um contato para começar a conversar</span>
+									</Paper>
+								)}
+							</Grid>
+						</Grid>
+					</Paper>
 				</div>
-			) : (
+			</MainDrawer>
-				<div>
-					<LogedinNavbar />
-					<div className="root">
-						<div className="body">
-							<div className="viewListUser">
-								<div className="profileviewleftside">
-									<img className="ProfilePicture" alt="" src={profilePic} />
-									<span className="ProfileHeaderText">{username}</span>
-								</div>
-								<div className="rootsearchbar">
-									<div className="input-container">
-										<i className="fa fa-search icon">
-											<FiSearch size="20px" />
-										</i>
-										<input
-											className="input-field"
-											type="text"
-											placeholder="Buscar Contato"
-											onChange={handleSearchContact}
-										/>
-									</div>
-								</div>
-								{displayedContacts &&
-									displayedContacts.length > 0 &&
-									displayedContacts.map((contact, index) => (
-										<button
-											className={
-												currentPeerContact &&
-												currentPeerContact.id === contact.id
-													? "selectedviewWrapItem"
-													: "viewWrapItem"
-											}
-											id={contact.id}
-											key={contact.id}
-											onClick={e => handleSelectContact(e, contact)}
-										>
-											<img
-												className="viewAvatarItem"
-												alt=""
-												src={
-													contact.imageURL
-														? contact.imageURL
-														: profileDefaultPic
-												}
-											/>
-											<div className="viewWrapContentItem">
-												<span className="textItem">{contact.name}</span>
-											</div>
-
-											{contact.unreadMessages > 0 && (
-												<div className="notificationpragraph">
-													<p className="newmessages">
-														{contact.unreadMessages}
-													</p>
-												</div>
-											)}
-										</button>
-									))}
-							</div>
-							<div className="viewBoard">
-								{currentPeerContact ? (
-									<ChatBox currentPeerContact={currentPeerContact} />
-								) : null}
-							</div>
-						</div>
-					</div>
-				</div>
-			)}
 		</div>
 	);
 };

frontend/src/pages/Chat/components/ContactsHeader/ContactsHeader.js

@@ -10,11 +10,10 @@ import Avatar from "@material-ui/core/Avatar";
 import profileDefaultPic from "../../../../Images/profile_default.png";
 
 const useStyles = makeStyles(theme => ({
-	root: {
-		flexGrow: 1,
-	},
 	contactsHeader: {
 		display: "flex",
+		flex: "none",
+		// height: 80,
 		backgroundColor: "#eee",
 		borderBottomLeftRadius: 0,
 		borderBottomRightRadius: 0,
@@ -33,7 +32,7 @@ const ContactsHeader = () => {
 	const username = localStorage.getItem("username");
 
 	return (
-		<Card variant="outlined" className={classes.contactsHeader}>
+		<Card variant="outlined" square className={classes.contactsHeader}>
 			<CardHeader
 				avatar={<Avatar alt="logged_user" src={profileDefaultPic} />}
 				title={username}

frontend/src/pages/Chat/components/ContactsList/ContactsList.js

@@ -18,54 +18,74 @@ import Divider from "@material-ui/core/Divider";
 import Badge from "@material-ui/core/Badge";
 import SearchIcon from "@material-ui/icons/Search";
 import InputBase from "@material-ui/core/InputBase";
+import Typography from "@material-ui/core/Typography";
+
+import ContactsHeader from "../ContactsHeader/ContactsHeader";
 
 const useStyles = makeStyles(theme => ({
-	root: {
-		flexGrow: 1,
-	},
-
 	badgeStyle: {
 		color: "white",
 		backgroundColor: green[500],
 	},
 
+	contactsWrapper: {
+		display: "flex",
+		height: "100%",
+		flexDirection: "column",
+		overflow: "hidden",
+	},
+
+	contactsHeader: {
+		display: "flex",
+		backgroundColor: "#eee",
+		borderBottomLeftRadius: 0,
+		borderBottomRightRadius: 0,
+		borderTopRightRadius: 0,
+	},
+
+	settingsIcon: {
+		alignSelf: "center",
+		marginLeft: "auto",
+		padding: 8,
+	},
+
 	contactsList: {
 		borderTopLeftRadius: 0,
 		borderTopRightRadius: 0,
 		borderBottomRightRadius: 0,
-		height: 500,
+		flexGrow: 1,
 		overflowY: "scroll",
 		"&::-webkit-scrollbar": {
 			width: "8px",
 		},
 		"&::-webkit-scrollbar-thumb": {
-			// borderRadius: "2px",
 			boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)",
 			backgroundColor: "#e8e8e8",
 		},
 	},
 	contactsSearchBox: {
 		background: "#fafafa",
-		position: "relative",
 		padding: "10px 13px",
 	},
 
 	serachInputWrapper: {
 		background: "#fff",
+		display: "flex",
 		borderRadius: 40,
+		padding: 4,
 	},
 
 	searchIcon: {
 		color: "grey",
-		marginLeft: 7,
+		marginLeft: 6,
-		marginRight: 7,
+		marginRight: 6,
-		verticalAlign: "middle",
+		alignSelf: "center",
 	},
 
 	contactsSearchInput: {
+		flex: 1,
 		border: "none",
 		borderRadius: 30,
-		width: "80%",
 	},
 }));
 
@@ -99,7 +119,7 @@ const ContactsList = ({ selectedContact, setSelectedContact }) => {
 			}
 		};
 		fetchContacts();
-	}, [selectedContact, token, notification, history]);
+	}, [token, notification, history]);
 
 	useEffect(() => {
 		const socket = openSocket("http://localhost:8080");
@@ -142,7 +162,7 @@ const ContactsList = ({ selectedContact, setSelectedContact }) => {
 
 	const handleSelectContact = (e, contact) => {
 		setSelectedContact(contact);
-		setNotification(prevState => !prevState);
+		// setNotification(prevState => !prevState);
 	};
 
 	const handleSearchContact = e => {
@@ -156,14 +176,15 @@ const ContactsList = ({ selectedContact, setSelectedContact }) => {
 	};
 
 	return (
-		<>
+		<div className={classes.contactsWrapper}>
+			<ContactsHeader />
 			<Paper variant="outlined" square className={classes.contactsSearchBox}>
 				<div className={classes.serachInputWrapper}>
 					<SearchIcon className={classes.searchIcon} />
 					<InputBase
 						className={classes.contactsSearchInput}
 						placeholder="Buscar contatos"
-						type="serach"
+						type="search"
 						onChange={handleSearchContact}
 					/>
 				</div>
@@ -172,19 +193,28 @@ const ContactsList = ({ selectedContact, setSelectedContact }) => {
 				<List>
 					{displayedContacts.map((contact, index) => (
 						<React.Fragment key={contact.id}>
-							<ListItem button onClick={e => handleSelectContact(e, contact)}>
+							<ListItem
+								button
+								onClick={e => handleSelectContact(e, contact)}
+								selected={selectedContact && selectedContact.id === contact.id}
+							>
 								<ListItemAvatar>
 									<Avatar
 										src={
 											contact.imageURL ? contact.imageURL : profileDefaultPic
 										}
-									>
+									></Avatar>
-										>
-									</Avatar>
 								</ListItemAvatar>
 								<ListItemText
+									primaryTypographyProps={{ noWrap: true }}
+									secondaryTypographyProps={{ noWrap: true }}
 									primary={contact.name}
-									secondary={contact.messages[0].messageBody || "oio"}
+									secondary={
+										(contact.messages &&
+											contact.messages[0] &&
+											contact.messages[0].messageBody) ||
+										"-"
+									}
 								/>
 								<ListItemSecondaryAction>
 									{contact.unreadMessages > 0 && (
@@ -202,7 +232,7 @@ const ContactsList = ({ selectedContact, setSelectedContact }) => {
 					))}
 				</List>
 			</Paper>
-		</>
+		</div>
 	);
 };
 

frontend/src/pages/Chat/components/MessagesInput/MessagesInput.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from "react";
 import api from "../../../../util/api";
+import "emoji-mart/css/emoji-mart.css";
 import { Picker } from "emoji-mart";
 
 import { makeStyles } from "@material-ui/core/styles";
@@ -9,6 +10,7 @@ import CircularProgress from "@material-ui/core/CircularProgress";
 import { green } from "@material-ui/core/colors";
 
 import AttachFileIcon from "@material-ui/icons/AttachFile";
+import IconButton from "@material-ui/core/IconButton";
 import MoodIcon from "@material-ui/icons/Mood";
 import SendIcon from "@material-ui/icons/Send";
 import CancelIcon from "@material-ui/icons/Cancel";
@@ -17,64 +19,60 @@ const useStyles = makeStyles(theme => ({
 	newMessageBox: {
 		background: "#eee",
 		display: "flex",
-		position: "relative",
+		padding: "10px",
-		padding: "10px 13px",
+		alignItems: "center",
-		borderTopLeftRadius: 0,
-		borderTopRightRadius: 0,
-		borderBottomLeftRadius: 0,
 	},
 
 	messageInputWrapper: {
+		padding: 6,
 		background: "#fff",
+		display: "flex",
 		borderRadius: 40,
 		flex: 1,
 	},
 
 	messageInput: {
 		paddingLeft: 10,
+		flex: 1,
 		border: "none",
-		borderRadius: 30,
-		width: "80%",
 	},
 
 	sendMessageIcons: {
 		color: "grey",
-		margin: 4,
+	},
-		cursor: "pointer",
+
-		"&:hover": {
+	uploadInput: {
-			opacity: "70%",
+		display: "none",
-		},
 	},
 
 	viewMediaInputWrapper: {
 		display: "flex",
 		padding: "10px 13px",
 		position: "relative",
-		borderTopLeftRadius: 0,
-		borderTopRightRadius: 0,
-		borderBottomLeftRadius: 0,
 		justifyContent: "space-between",
+		alignItems: "center",
 		backgroundColor: "#eee",
 	},
 
 	emojiBox: {
 		position: "absolute",
-		bottom: 50,
+		bottom: 63,
+		width: 40,
 		borderTop: "1px solid #e8e8e8",
 	},
 
 	circleLoading: {
 		color: green[500],
 		position: "absolute",
-		top: 0,
+		top: "20%",
 		left: "50%",
-		marginTop: 6,
+		// marginTop: 8,
-		marginBottom: 6,
+		// marginBottom: 6,
 		marginLeft: -12,
 	},
 }));
 
-const MessagesInput = ({ selectedContact }) => {
+const MessagesInput = ({ selectedContact, searchParam }) => {
 	const classes = useStyles();
 	const contactId = selectedContact.id;
 	const userId = localStorage.getItem("userId");
@@ -165,33 +163,48 @@ const MessagesInput = ({ selectedContact }) => {
 
 	if (media.preview)
 		return (
-			<Paper variant="outlined" className={classes.viewMediaInputWrapper}>
+			<Paper
-				<CancelIcon
+				variant="outlined"
-					className={classes.sendMessageIcons}
+				square
+				className={classes.viewMediaInputWrapper}
+			>
+				<IconButton
+					aria-label="cancel-upload"
+					component="span"
 					onClick={e => setMedia(mediaInitialState)}
-				/>
+				>
-				<span>
+					<CancelIcon className={classes.sendMessageIcons} />
-					{media.name}
+				</IconButton>
-					{/* <img src={media.preview} alt=""></img> */}
+
-				</span>
 				{loading ? (
 					<div>
 						<CircularProgress className={classes.circleLoading} />
 					</div>
-				) : null}
+				) : (
-				<SendIcon
+					<span>
-					className={classes.sendMessageIcons}
+						{media.name}
+						{/* <img src={media.preview} alt=""></img> */}
+					</span>
+				)}
+				<IconButton
+					aria-label="send-upload"
+					component="span"
 					onClick={handleUploadMedia}
-				/>
+				>
+					<SendIcon className={classes.sendMessageIcons} />
+				</IconButton>
 			</Paper>
 		);
 	else {
 		return (
-			<Paper variant="outlined" className={classes.newMessageBox}>
+			<Paper variant="outlined" square className={classes.newMessageBox}>
-				<MoodIcon
+				<IconButton
-					className={classes.sendMessageIcons}
+					aria-label="emojiPicker"
+					component="span"
 					onClick={e => setShowEmoji(prevState => !prevState)}
-				/>
+				>
+					<MoodIcon className={classes.sendMessageIcons} />
+				</IconButton>
 				{showEmoji ? (
 					<div className={classes.emojiBox}>
 						<Picker
@@ -202,17 +215,21 @@ const MessagesInput = ({ selectedContact }) => {
 						/>
 					</div>
 				) : null}
-				<label htmlFor="upload-button" className={classes.sendMessageIcons}>
+
-					<AttachFileIcon />
-				</label>
 				<input
 					type="file"
 					id="upload-button"
-					style={{ display: "none" }}
+					className={classes.uploadInput}
 					onChange={handleChangeMedia}
 				/>
+				<label htmlFor="upload-button">
+					<IconButton aria-label="upload" component="span">
+						<AttachFileIcon className={classes.sendMessageIcons} />
+					</IconButton>
+				</label>
 				<div className={classes.messageInputWrapper}>
 					<InputBase
+						inputRef={input => input && !searchParam && input.focus()}
 						className={classes.messageInput}
 						placeholder="Escreva uma mensagem"
 						value={inputMessage}
@@ -225,10 +242,13 @@ const MessagesInput = ({ selectedContact }) => {
 						}}
 					/>
 				</div>
-				<SendIcon
+				<IconButton
-					className={classes.sendMessageIcons}
+					aria-label="emojiPicker"
+					component="span"
 					onClick={handleSendMessage}
-				/>
+				>
+					<SendIcon className={classes.sendMessageIcons} />
+				</IconButton>
 			</Paper>
 		);
 	}

frontend/src/pages/Chat/components/MessagesList/MessagesList.js

@@ -21,34 +21,43 @@ import moment from "moment-timezone";
 import InfiniteScrollReverse from "react-infinite-scroll-reverse";
 import ModalImage from "react-modal-image";
 import ReactAudioPlayer from "react-audio-player";
+import MessagesInput from "../MessagesInput/MessagesInput";
 
 const useStyles = makeStyles(theme => ({
+	mainWrapper: {
+		height: "100%",
+		display: "flex",
+		flexDirection: "column",
+		overflow: "hidden",
+	},
+
 	messagesHeader: {
 		display: "flex",
 		backgroundColor: "#eee",
-		borderTopLeftRadius: 0,
+		flex: "none",
-		borderBottomLeftRadius: 0,
-		borderBottomRightRadius: 0,
 	},
 
 	messagesSearchInputWrapper: {
 		margin: 20,
+		display: "flex",
 		marginLeft: "auto",
 		background: "#fff",
 		borderRadius: 40,
+		paddingRight: 4,
 		width: 250,
 	},
 
 	messagesSearchInput: {
 		border: "none",
+		flex: 1,
 		borderRadius: 30,
 	},
 
 	searchIcon: {
 		color: "grey",
-		marginLeft: 7,
+		marginLeft: 6,
-		marginRight: 7,
+		marginRight: 6,
-		verticalAlign: "middle",
+		alignSelf: "center",
 	},
 
 	settingsIcon: {
@@ -56,13 +65,20 @@ const useStyles = makeStyles(theme => ({
 		padding: 8,
 	},
 
+	messagesListWrapper: {
+		overflow: "hidden",
+		position: "relative",
+		display: "flex",
+		flexDirection: "column",
+		flexGrow: 1,
+	},
+
 	messagesList: {
 		backgroundImage: 'url("http://localhost:8080/public/wa-background.png")',
 		display: "flex",
-		flex: 1,
 		flexDirection: "column",
+		flexGrow: 1,
 		padding: "20px 20px 20px 20px",
-		height: 500,
 		overflowY: "scroll",
 		"&::-webkit-scrollbar": {
 			width: "8px",
@@ -73,9 +89,6 @@ const useStyles = makeStyles(theme => ({
 			backgroundColor: "#e8e8e8",
 		},
 	},
-	wrapper: {
-		position: "relative",
-	},
 
 	circleLoading: {
 		color: green[500],
@@ -130,7 +143,6 @@ const useStyles = makeStyles(theme => ({
 	},
 
 	textContentItem: {
-		alignSelf: "middle",
 		overflowWrap: "break-word",
 		padding: "3px 80px 6px 6px",
 	},
@@ -172,11 +184,13 @@ const useStyles = makeStyles(theme => ({
 
 	ackIcons: {
 		fontSize: 18,
+		verticalAlign: "middle",
 	},
 
 	ackDoneAllIcon: {
 		color: green[500],
 		fontSize: 18,
+		verticalAlign: "middle",
 	},
 }));
 
@@ -274,7 +288,7 @@ const MessagesList = ({ selectedContact }) => {
 		setMessagesList(prevState => {
 			let aux = [...prevState];
 			let messageIndex = aux.findIndex(message => message.id === id);
-			if (messageIndex) {
+			if (messageIndex !== -1) {
 				aux[messageIndex].ack = message.ack;
 			}
 			return aux;
@@ -425,12 +439,12 @@ const MessagesList = ({ selectedContact }) => {
 		}
 	};
 
-	console.log(messagesList);
-
 	return (
-		<>
+		<div className={classes.mainWrapper}>
-			<Card variant="outlined" className={classes.messagesHeader}>
+			<Card variant="outlined" square className={classes.messagesHeader}>
 				<CardHeader
+					titleTypographyProps={{ noWrap: true }}
+					subheaderTypographyProps={{ noWrap: true }}
 					avatar={<Avatar alt="contact_name" src={selectedContact.imageURL} />}
 					title={selectedContact.name}
 					subheader="Contacts Status"
@@ -438,6 +452,7 @@ const MessagesList = ({ selectedContact }) => {
 				<div className={classes.messagesSearchInputWrapper}>
 					<SearchIcon className={classes.searchIcon} />
 					<InputBase
+						type="search"
 						className={classes.messagesSearchInput}
 						placeholder="Pesquisar mensagens"
 						onChange={handleSearch}
@@ -450,7 +465,7 @@ const MessagesList = ({ selectedContact }) => {
 					</IconButton>
 				</div>
 			</Card>
-			<div className={classes.wrapper}>
+			<div className={classes.messagesListWrapper}>
 				<InfiniteScrollReverse
 					className={classes.messagesList}
 					hasMore={hasMore}
@@ -460,13 +475,17 @@ const MessagesList = ({ selectedContact }) => {
 				>
 					{messagesList.length > 0 ? renderMessages() : []}
 				</InfiniteScrollReverse>
+				<MessagesInput
+					selectedContact={selectedContact}
+					searchParam={searchParam}
+				/>
 				{loading ? (
 					<div>
 						<CircularProgress className={classes.circleLoading} />
 					</div>
 				) : null}
 			</div>
-		</>
+		</div>
 	);
 };
 

frontend/src/pages/Home/Dashboard.js

@@ -0,0 +1,12 @@
+import React from "react";
+import MainDrawer from "../../components/Layout/MainDrawer";
+
+const Dashboard = () => {
+	return (
+		<div>
+			<MainDrawer appTitle="Dashboard"></MainDrawer>
+		</div>
+	);
+};
+
+export default Dashboard;

frontend/src/pages/Home/Home.js

@@ -1,20 +0,0 @@
-import React from "react";
-import LogedinNavbar from "../../components/Navbar/LogedinNavbar";
-import DefaultNavbar from "../../components/Navbar/DefaultNavbar";
-
-import { Container } from "react-bootstrap";
-
-import "./Home.css";
-
-const Home = () => {
-	return (
-		<div>
-			{localStorage.getItem("token") ? <LogedinNavbar /> : <DefaultNavbar />}
-			<Container>
-				<h1>Home</h1>
-			</Container>
-		</div>
-	);
-};
-
-export default Home;

frontend/src/pages/Login/Login.js

@@ -1,36 +1,75 @@
 import React, { useState } from "react";
 import { useHistory } from "react-router-dom";
 import api from "../../util/api";
-import LogedinNavbar from "../../components/Navbar/LogedinNavbar";
+import { Link as RouterLink } from "react-router-dom";
-import DefaultNavbar from "../../components/Navbar/DefaultNavbar";
 
-import { Container, Form, Button } from "react-bootstrap";
+import Avatar from "@material-ui/core/Avatar";
+import Button from "@material-ui/core/Button";
+import CssBaseline from "@material-ui/core/CssBaseline";
+import TextField from "@material-ui/core/TextField";
+// import FormControlLabel from "@material-ui/core/FormControlLabel";
+// import Checkbox from "@material-ui/core/Checkbox";
+import Link from "@material-ui/core/Link";
+import Grid from "@material-ui/core/Grid";
+import Box from "@material-ui/core/Box";
+import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
+import Typography from "@material-ui/core/Typography";
+import { makeStyles } from "@material-ui/core/styles";
+import Container from "@material-ui/core/Container";
+
+const Copyright = () => {
+	return (
+		<Typography variant="body2" color="textSecondary" align="center">
+			{"Copyright © "}
+			<Link color="inherit" href="https://material-ui.com/">
+				Canove
+			</Link>{" "}
+			{new Date().getFullYear()}
+			{"."}
+		</Typography>
+	);
+};
+
+const useStyles = makeStyles(theme => ({
+	paper: {
+		marginTop: theme.spacing(8),
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "center",
+	},
+	avatar: {
+		margin: theme.spacing(1),
+		backgroundColor: theme.palette.secondary.main,
+	},
+	form: {
+		width: "100%", // Fix IE 11 issue.
+		marginTop: theme.spacing(1),
+	},
+	submit: {
+		margin: theme.spacing(3, 0, 2),
+	},
+}));
 
 const Login = ({ showToast }) => {
 	const [user, setUser] = useState({ email: "", password: "" });
 	const history = useHistory();
 
-	// const [token, setToken] = useState(null);
+	const classes = useStyles();
-	// const [userId, setUserId] = useState(null);
 
 	const handleLogin = async e => {
 		e.preventDefault();
 		try {
 			const res = await api.post("/auth/login", user);
-
-			// setToken(res.data.token);
-			// setUserId(res.data.userId);
-
 			localStorage.setItem("token", res.data.token);
 			localStorage.setItem("username", res.data.username);
 			localStorage.setItem("userId", res.data.userId);
-			const remainingMilliseconds = 60 * 60 * 1000;
+			// const remainingMilliseconds = 60 * 60 * 1000;
-			const expiryDate = new Date(new Date().getTime() + remainingMilliseconds);
+			// const expiryDate = new Date(new Date().getTime() + remainingMilliseconds);
-			localStorage.setItem("expiryDate", expiryDate.toISOString());
+			// localStorage.setItem("expiryDate", expiryDate.toISOString());
 			showToast(1, "Login efetuado com sucesso");
 			history.push("/chat");
 		} catch (err) {
-			alert(err.response.data.message);
+			console.log(err);
 		}
 	};
 
@@ -39,41 +78,82 @@ const Login = ({ showToast }) => {
 	};
 
 	return (
-		<div>
+		<Container component="main" maxWidth="xs">
-			{localStorage.getItem("token") ? <LogedinNavbar /> : <DefaultNavbar />}
+			<CssBaseline />
-			<div>
+			<div className={classes.paper}>
-				<br></br>
+				<Avatar className={classes.avatar}>
-				<Container>
+					<LockOutlinedIcon />
-					<Form onSubmit={e => handleLogin(e, user)}>
+				</Avatar>
-						<Form.Group>
+				<Typography component="h1" variant="h5">
-							{/* <Form.Label>Email address</Form.Label> */}
+					Login
-							<Form.Control
+				</Typography>
-								name="email"
+				<form
-								type="email"
+					className={classes.form}
-								placeholder="Email"
+					noValidate
-								value={user.email}
+					onSubmit={e => handleLogin(e, user)}
-								onChange={handleChangeInput}
+				>
-							/>
+					<TextField
-						</Form.Group>
+						variant="outlined"
-
+						margin="normal"
-						<Form.Group>
+						required
-							{/* <Form.Label>Password</Form.Label> */}
+						fullWidth
-							<Form.Control
+						id="email"
-								name="password"
+						label="Email"
-								type="password"
+						name="email"
-								placeholder="Senha"
+						value={user.email}
-								value={user.password}
+						onChange={handleChangeInput}
-								onChange={handleChangeInput}
+						autoComplete="email"
-							/>
+						autoFocus
-						</Form.Group>
+					/>
-
+					<TextField
-						<Button variant="primary" type="submit">
+						variant="outlined"
-							Entrar
+						margin="normal"
-						</Button>
+						required
-					</Form>
+						fullWidth
-				</Container>
+						name="password"
+						label="Senha"
+						type="password"
+						id="password"
+						value={user.password}
+						onChange={handleChangeInput}
+						autoComplete="current-password"
+					/>
+					{/* <FormControlLabel
+						control={<Checkbox value="remember" color="primary" />}
+						label="Lembrar"
+					/> */}
+					<Button
+						type="submit"
+						fullWidth
+						variant="contained"
+						color="primary"
+						className={classes.submit}
+					>
+						Entrar
+					</Button>
+					<Grid container>
+						{/* <Grid item xs>
+							<Link href="#" variant="body2">
+								Forgot password?
+							</Link>
+						</Grid> */}
+						<Grid item>
+							<Link
+								href="#"
+								variant="body2"
+								component={RouterLink}
+								to="/signup"
+							>
+								{"Não tem uma conta? Cadastre-se!"}
+							</Link>
+						</Grid>
+					</Grid>
+				</form>
 			</div>
-		</div>
+			<Box mt={8}>
+				<Copyright />
+			</Box>
+		</Container>
 	);
 };
 

frontend/src/pages/Signup/Signup.js

@@ -1,15 +1,60 @@
 import React, { useState } from "react";
+
 import { useHistory } from "react-router-dom";
 import api from "../../util/api";
-import LogedinNavbar from "../../components/Navbar/LogedinNavbar";
+import { Link as RouterLink } from "react-router-dom";
-import DefaultNavbar from "../../components/Navbar/DefaultNavbar";
 
-import { Container, Form, Button } from "react-bootstrap";
+import Avatar from "@material-ui/core/Avatar";
+import Button from "@material-ui/core/Button";
+import CssBaseline from "@material-ui/core/CssBaseline";
+import TextField from "@material-ui/core/TextField";
+// import FormControlLabel from "@material-ui/core/FormControlLabel";
+// import Checkbox from "@material-ui/core/Checkbox";
+import Link from "@material-ui/core/Link";
+import Grid from "@material-ui/core/Grid";
+import Box from "@material-ui/core/Box";
+import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
+import Typography from "@material-ui/core/Typography";
+import { makeStyles } from "@material-ui/core/styles";
+import Container from "@material-ui/core/Container";
 
-const Signup = () => {
+function Copyright() {
+	return (
+		<Typography variant="body2" color="textSecondary" align="center">
+			{"Copyright © "}
+			<Link color="inherit" href="https://material-ui.com/">
+				Canove
+			</Link>{" "}
+			{new Date().getFullYear()}
+			{"."}
+		</Typography>
+	);
+}
+
+const useStyles = makeStyles(theme => ({
+	paper: {
+		marginTop: theme.spacing(8),
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "center",
+	},
+	avatar: {
+		margin: theme.spacing(1),
+		backgroundColor: theme.palette.secondary.main,
+	},
+	form: {
+		width: "100%", // Fix IE 11 issue.
+		marginTop: theme.spacing(3),
+	},
+	submit: {
+		margin: theme.spacing(3, 0, 2),
+	},
+}));
+
+const SignUp = () => {
+	const classes = useStyles();
 	const history = useHistory();
-	const initialState = { name: "", email: "", password: "" };
+	const [user, setUser] = useState({ name: "", email: "", password: "" });
-	const [user, setUser] = useState(initialState);
 
 	const handleChangeInput = e => {
 		setUser({ ...user, [e.target.name]: e.target.value });
@@ -26,63 +71,83 @@ const Signup = () => {
 	};
 
 	return (
-		<div>
+		<Container component="main" maxWidth="xs">
-			{localStorage.getItem("token") ? (
+			<CssBaseline />
-				<div>
+			<div className={classes.paper}>
-					<LogedinNavbar />
+				<Avatar className={classes.avatar}>
-					<h1> Você está logado </h1>
+					<LockOutlinedIcon />
-				</div>
+				</Avatar>
-			) : (
+				<Typography component="h1" variant="h5">
-				<div>
+					Cadastre-se
-					<DefaultNavbar />
+				</Typography>
-					<br></br>
+				<form className={classes.form} noValidate onSubmit={handleSignUp}>
-					<Container>
+					<Grid container spacing={2}>
-						<Form onSubmit={handleSignUp}>
+						<Grid item xs={12}>
-							<Form.Group>
+							<TextField
-								{/* <Form.Label>Nome</Form.Label> */}
+								autoComplete="name"
-								<Form.Control
+								name="name"
-									name="name"
+								variant="outlined"
-									type="text"
+								required
-									placeholder="Nome"
+								fullWidth
-									value={user.name}
+								id="name"
-									onChange={handleChangeInput}
+								label="Nome"
-								/>
+								value={user.name}
-							</Form.Group>
+								onChange={handleChangeInput}
-							<Form.Group>
+								autoFocus
-								{/* <Form.Label>Email address</Form.Label> */}
+							/>
-								<Form.Control
+						</Grid>
-									name="email"
-									type="email"
-									placeholder="Email"
-									value={user.email}
-									onChange={handleChangeInput}
-								/>
-							</Form.Group>
 
-							<Form.Group>
+						<Grid item xs={12}>
-								{/* <Form.Label>Password</Form.Label> */}
+							<TextField
-								<Form.Control
+								variant="outlined"
-									name="password"
+								required
-									type="password"
+								fullWidth
-									placeholder="Senha"
+								id="email"
-									value={user.password}
+								label="Email"
-									onChange={handleChangeInput}
+								name="email"
-								/>
+								autoComplete="email"
-								<Form.Text className="text-muted">
+								value={user.email}
-									Mínimo de 5 caracteres.
+								onChange={handleChangeInput}
-								</Form.Text>
+							/>
-							</Form.Group>
+						</Grid>
-
+						<Grid item xs={12}>
-							<Button variant="primary" type="submit">
+							<TextField
-								Submit
+								variant="outlined"
-							</Button>
+								required
-						</Form>
+								fullWidth
-					</Container>
+								name="password"
-				</div>
+								label="Senha"
-			)}
+								type="password"
-			<br></br>
+								id="password"
-		</div>
+								autoComplete="current-password"
+								value={user.password}
+								onChange={handleChangeInput}
+							/>
+						</Grid>
+					</Grid>
+					<Button
+						type="submit"
+						fullWidth
+						variant="contained"
+						color="primary"
+						className={classes.submit}
+					>
+						Cadastrar
+					</Button>
+					<Grid container justify="flex-end">
+						<Grid item>
+							<Link href="#" variant="body2" component={RouterLink} to="/login">
+								Já tem uma conta? Entre!
+							</Link>
+						</Grid>
+					</Grid>
+				</form>
+			</div>
+			<Box mt={5}>
+				<Copyright />
+			</Box>
+		</Container>
 	);
 };
 
-export default Signup;
+export default SignUp;