From 0b75b4aa523744819fbea68ac429af50531e6de1 Mon Sep 17 00:00:00 2001 From: Cassio Santos Date: Sat, 13 Jun 2020 14:11:57 -0300 Subject: [PATCH] Finalized Chat migration to Material Ui --- backend/controllers/session.json | 2 +- frontend/src/App.js | 10 +- frontend/src/components/Layout/MainDrawer.js | 173 +++++++++++++ .../src/components/Layout/MainListItems.js | 118 +++++++++ frontend/src/index.js | 8 +- frontend/src/pages/Chat-Material/Chat2.js | 57 ----- frontend/src/pages/Chat/Chat.css | 226 ---------------- frontend/src/pages/Chat/Chat.js | 241 ++++++------------ .../ContactsHeader/ContactsHeader.js | 7 +- .../components/ContactsList/ContactsList.js | 72 ++++-- .../components/MessagesInput/MessagesInput.js | 106 ++++---- .../components/MessagesList/MessagesList.js | 57 +++-- frontend/src/pages/Home/Dashboard.js | 12 + frontend/src/pages/Home/Home.css | 0 frontend/src/pages/Home/Home.js | 20 -- frontend/src/pages/Login/Login.css | 0 frontend/src/pages/Login/Login.js | 174 +++++++++---- frontend/src/pages/Signup/SignUp.css | 0 frontend/src/pages/Signup/Signup.js | 189 +++++++++----- 19 files changed, 792 insertions(+), 680 deletions(-) create mode 100644 frontend/src/components/Layout/MainDrawer.js create mode 100644 frontend/src/components/Layout/MainListItems.js delete mode 100644 frontend/src/pages/Chat-Material/Chat2.js delete mode 100644 frontend/src/pages/Chat/Chat.css rename frontend/src/pages/{Chat-Material => Chat}/components/ContactsHeader/ContactsHeader.js (91%) rename frontend/src/pages/{Chat-Material => Chat}/components/ContactsList/ContactsList.js (80%) rename frontend/src/pages/{Chat-Material => Chat}/components/MessagesInput/MessagesInput.js (74%) rename frontend/src/pages/{Chat-Material => Chat}/components/MessagesList/MessagesList.js (92%) create mode 100644 frontend/src/pages/Home/Dashboard.js delete mode 100644 frontend/src/pages/Home/Home.css delete mode 100644 frontend/src/pages/Home/Home.js delete mode 100644 frontend/src/pages/Login/Login.css delete mode 100644 frontend/src/pages/Signup/SignUp.css diff --git a/backend/controllers/session.json b/backend/controllers/session.json index 33e96ac..eb89948 100644 --- a/backend/controllers/session.json +++ b/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==\""} \ No newline at end of file +{"WABrowserId":"\"E9dnt9Mm/JiFDCMJQHkXBw==\"","WASecretBundle":"{\"key\":\"fHTKtoDcxidboASIs5WV5JKyRrF+SfMktqHXmq/KBJU=\",\"encKey\":\"FrM3OnnEbuEr1JrtKypw5CPSc6rSD5bjbOGstv8ijk4=\",\"macKey\":\"fHTKtoDcxidboASIs5WV5JKyRrF+SfMktqHXmq/KBJU=\"}","WAToken1":"\"6UDP2DUC5ZZ99Iqy9CHRg53e2ZyeiVXEbcSnnxzuGWo=\"","WAToken2":"\"1@RByirgRpxu+HWxlX4oTADTz2yDLH4v2KNmYVektVG8dS9vCyaAukGYQG5/7Nvl82IuLiCrKtTffJLw==\""} \ No newline at end of file diff --git a/frontend/src/App.js b/frontend/src/App.js index daa1ee6..849229e 100644 --- a/frontend/src/App.js +++ b/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} /> - } /> + } /> { path="/chat" render={props => } /> - } - /> ); diff --git a/frontend/src/components/Layout/MainDrawer.js b/frontend/src/components/Layout/MainDrawer.js new file mode 100644 index 0000000..1351841 --- /dev/null +++ b/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 ( +
+ +
+ + + +
+ + + + + + + + + + + + + {appTitle} + + + + + + + + +
+
+ + {children ? children :

Dashboard

} +
+
+ ); +}; + +export default MainDrawer; diff --git a/frontend/src/components/Layout/MainListItems.js b/frontend/src/components/Layout/MainListItems.js new file mode 100644 index 0000000..03db7f9 --- /dev/null +++ b/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) => ( + + )), + [to] + ); + + return ( +
  • + + {icon ? {icon} : null} + + +
    • + ); +} + +const MainListItems = () => { + const classes = useStyles(); + const [open, setOpen] = React.useState(false); + + const handleClick = () => { + setOpen(!open); + }; + + return ( +
    + } /> + } /> + + + + + + + {open ? : } + + + + + + + + + + + + + + + + + + + + + + + + +
    + ); +}; +// export const secondaryListItems = ( +//
    +// Saved reports +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +//
    +// ); + +export default MainListItems; diff --git a/frontend/src/index.js b/frontend/src/index.js index 6191d3a..e993252 100644 --- a/frontend/src/index.js +++ b/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 ScopedCssBaseline from "@material-ui/core/ScopedCssBaseline"; +// import "bootstrap/dist/css/bootstrap.min.css"; +import CssBaseline from "@material-ui/core/CssBaseline"; import App from "./App"; ReactDOM.render( - + - + , document.getElementById("root") ); diff --git a/frontend/src/pages/Chat-Material/Chat2.js b/frontend/src/pages/Chat-Material/Chat2.js deleted file mode 100644 index 2c89d4d..0000000 --- a/frontend/src/pages/Chat-Material/Chat2.js +++ /dev/null @@ -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 ( -
    - -

    - - - - - - - {selectedContact ? ( - <> - - - - ) : ( - - Selecione um contato para começar a conversar - - )} - - -     -
    - ); -}; - -export default Chat2; diff --git a/frontend/src/pages/Chat/Chat.css b/frontend/src/pages/Chat/Chat.css deleted file mode 100644 index c47c09d..0000000 --- a/frontend/src/pages/Chat/Chat.css +++ /dev/null @@ -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; -} diff --git a/frontend/src/pages/Chat/Chat.js b/frontend/src/pages/Chat/Chat.js index 0f71c8f..b2b6fc1 100644 --- a/frontend/src/pages/Chat/Chat.js +++ b/frontend/src/pages/Chat/Chat.js @@ -1,180 +1,85 @@ -import React, { useState, useEffect } from "react"; -import { useHistory } from "react-router-dom"; -import api from "../../util/api"; -import profilePic from "../../Images/canove.png"; -import profileDefaultPic from "../../Images/profile_default.png"; -import openSocket from "socket.io-client"; -import { FiSearch } from "react-icons/fi"; +import React, { useState } from "react"; +import Grid from "@material-ui/core/Grid"; +import Paper from "@material-ui/core/Paper"; +import { makeStyles } from "@material-ui/core/styles"; -import LogedinNavbar from "../../components/Navbar/LogedinNavbar"; -import DefaultNavbar from "../../components/Navbar/DefaultNavbar"; +import ContactsList from "./components/ContactsList/ContactsList"; +import MessagesList from "./components/MessagesList/MessagesList"; +import MainDrawer from "../../components/Layout/MainDrawer"; -import ChatBox from "../ChatBox/ChatBox"; -import "./Chat.css"; -// let socket; +const useStyles = makeStyles(theme => ({ + chatContainer: { + flex: 1, + backgroundColor: "#eee", + // padding: 20, + height: `calc(100% - 64px)`, + overflowY: "hidden", + }, -const Chat = ({ showToast }) => { - const token = localStorage.getItem("token"); - const username = localStorage.getItem("username"); + chatPapper: { + backgroundColor: "#eee", + 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 [contacts, setContacts] = useState([]); - const [displayedContacts, setDisplayedContacts] = useState([]); - 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); - }; +const Chat = () => { + const classes = useStyles(); + const [selectedContact, setSelectedContact] = useState(null); return (
    - {!localStorage.getItem("token") ? ( -
    - -

    Você não está logado

    + +
    + + + + + + + {selectedContact ? ( + <> + + + ) : ( + + Selecione um contato para começar a conversar + + )} + + +
    - ) : ( -
    - -
    -
    -
    -
    - - {username} -
    -
    -
    - - - - -
    -
    - {displayedContacts && - displayedContacts.length > 0 && - displayedContacts.map((contact, index) => ( - - ))} -
    -
    - {currentPeerContact ? ( - - ) : null} -
    -
    -
    -
    - )} +
    ); }; diff --git a/frontend/src/pages/Chat-Material/components/ContactsHeader/ContactsHeader.js b/frontend/src/pages/Chat/components/ContactsHeader/ContactsHeader.js similarity index 91% rename from frontend/src/pages/Chat-Material/components/ContactsHeader/ContactsHeader.js rename to frontend/src/pages/Chat/components/ContactsHeader/ContactsHeader.js index 9caec03..cb85a9f 100644 --- a/frontend/src/pages/Chat-Material/components/ContactsHeader/ContactsHeader.js +++ b/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 ( - + } title={username} diff --git a/frontend/src/pages/Chat-Material/components/ContactsList/ContactsList.js b/frontend/src/pages/Chat/components/ContactsList/ContactsList.js similarity index 80% rename from frontend/src/pages/Chat-Material/components/ContactsList/ContactsList.js rename to frontend/src/pages/Chat/components/ContactsList/ContactsList.js index 4cc9ba0..3760c12 100644 --- a/frontend/src/pages/Chat-Material/components/ContactsList/ContactsList.js +++ b/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, - marginRight: 7, - verticalAlign: "middle", + marginLeft: 6, + marginRight: 6, + 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 ( - <> +
    +
    @@ -172,19 +193,28 @@ const ContactsList = ({ selectedContact, setSelectedContact }) => { {displayedContacts.map((contact, index) => ( - handleSelectContact(e, contact)}> + handleSelectContact(e, contact)} + selected={selectedContact && selectedContact.id === contact.id} + > - > - + > {contact.unreadMessages > 0 && ( @@ -202,7 +232,7 @@ const ContactsList = ({ selectedContact, setSelectedContact }) => { ))}     - +
    ); }; diff --git a/frontend/src/pages/Chat-Material/components/MessagesInput/MessagesInput.js b/frontend/src/pages/Chat/components/MessagesInput/MessagesInput.js similarity index 74% rename from frontend/src/pages/Chat-Material/components/MessagesInput/MessagesInput.js rename to frontend/src/pages/Chat/components/MessagesInput/MessagesInput.js index 679292f..ba24d4c 100644 --- a/frontend/src/pages/Chat-Material/components/MessagesInput/MessagesInput.js +++ b/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 13px", - borderTopLeftRadius: 0, - borderTopRightRadius: 0, - borderBottomLeftRadius: 0, + padding: "10px", + alignItems: "center", }, 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": { - opacity: "70%", - }, + }, + + uploadInput: { + 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, - marginBottom: 6, + // marginTop: 8, + // 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 ( - - + setMedia(mediaInitialState)} - /> - - {media.name} - {/* */} - + > + + + {loading ? (
    - ) : null} - + {media.name} + {/* */} + + )} + + > + +     ); else { return ( - - + setShowEmoji(prevState => !prevState)} - /> + > + + {showEmoji ? (
    { />
    ) : null} - + +
    input && !searchParam && input.focus()} className={classes.messageInput} placeholder="Escreva uma mensagem" value={inputMessage} @@ -225,10 +242,13 @@ const MessagesInput = ({ selectedContact }) => { }} />
    - + > + +     ); } diff --git a/frontend/src/pages/Chat-Material/components/MessagesList/MessagesList.js b/frontend/src/pages/Chat/components/MessagesList/MessagesList.js similarity index 92% rename from frontend/src/pages/Chat-Material/components/MessagesList/MessagesList.js rename to frontend/src/pages/Chat/components/MessagesList/MessagesList.js index 9d5119d..15ac1f6 100644 --- a/frontend/src/pages/Chat-Material/components/MessagesList/MessagesList.js +++ b/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, - borderBottomLeftRadius: 0, - borderBottomRightRadius: 0, + flex: "none", }, 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, - marginRight: 7, - verticalAlign: "middle", + marginLeft: 6, + marginRight: 6, + 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 ( - <> - +
    + } title={selectedContact.name} subheader="Contacts Status" @@ -438,6 +452,7 @@ const MessagesList = ({ selectedContact }) => {
    {
    -
    +
    { > {messagesList.length > 0 ? renderMessages() : []} + {loading ? (
    ) : null}
    - +
    ); }; diff --git a/frontend/src/pages/Home/Dashboard.js b/frontend/src/pages/Home/Dashboard.js new file mode 100644 index 0000000..e03fe5c --- /dev/null +++ b/frontend/src/pages/Home/Dashboard.js @@ -0,0 +1,12 @@ +import React from "react"; +import MainDrawer from "../../components/Layout/MainDrawer"; + +const Dashboard = () => { + return ( +
    + +
    + ); +}; + +export default Dashboard; diff --git a/frontend/src/pages/Home/Home.css b/frontend/src/pages/Home/Home.css deleted file mode 100644 index e69de29..0000000 diff --git a/frontend/src/pages/Home/Home.js b/frontend/src/pages/Home/Home.js deleted file mode 100644 index c9e68fd..0000000 --- a/frontend/src/pages/Home/Home.js +++ /dev/null @@ -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 ( -
    - {localStorage.getItem("token") ? : } - -

    Home

    -     -
    - ); -}; - -export default Home; diff --git a/frontend/src/pages/Login/Login.css b/frontend/src/pages/Login/Login.css deleted file mode 100644 index e69de29..0000000 diff --git a/frontend/src/pages/Login/Login.js b/frontend/src/pages/Login/Login.js index b0c18ae..b457cc6 100644 --- a/frontend/src/pages/Login/Login.js +++ b/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 DefaultNavbar from "../../components/Navbar/DefaultNavbar"; +import { Link as RouterLink } from "react-router-dom"; -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 ( + + {"Copyright © "} + + Canove + {" "} + {new Date().getFullYear()} + {"."} + + ); +}; + +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 [userId, setUserId] = useState(null); + const classes = useStyles(); 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 expiryDate = new Date(new Date().getTime() + remainingMilliseconds); - localStorage.setItem("expiryDate", expiryDate.toISOString()); + // const remainingMilliseconds = 60 * 60 * 1000; + // const expiryDate = new Date(new Date().getTime() + remainingMilliseconds); + // 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 ( -
    - {localStorage.getItem("token") ? : } -
    -

    - -
    handleLogin(e, user)}> - - {/* Email address */} - - - - - {/* Password */} - - - - -
    -     + + +
    + + + + + Login + +
    handleLogin(e, user)} + > + + + {/* } + label="Lembrar" + /> */} + + + {/* + + Forgot password? + + */} + + + {"Não tem uma conta? Cadastre-se!"} + + + +
    -
    + + + + ); }; diff --git a/frontend/src/pages/Signup/SignUp.css b/frontend/src/pages/Signup/SignUp.css deleted file mode 100644 index e69de29..0000000 diff --git a/frontend/src/pages/Signup/Signup.js b/frontend/src/pages/Signup/Signup.js index d203149..6bbe458 100644 --- a/frontend/src/pages/Signup/Signup.js +++ b/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 DefaultNavbar from "../../components/Navbar/DefaultNavbar"; +import { Link as RouterLink } from "react-router-dom"; -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 ( + + {"Copyright © "} + + Canove + {" "} + {new Date().getFullYear()} + {"."} + + ); +} + +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(initialState); + const [user, setUser] = useState({ name: "", email: "", password: "" }); const handleChangeInput = e => { setUser({ ...user, [e.target.name]: e.target.value }); @@ -26,63 +71,83 @@ const Signup = () => { }; return ( -
    - {localStorage.getItem("token") ? ( -
    - -

    Você está logado

    -
    - ) : ( -
    - -

    - -
    - - {/* Nome */} - - - - {/* Email address */} - - + + +
    + + + + + Cadastre-se + + + + + + - - {/* Password */} - - - Mínimo de 5 caracteres. - - - - - - -
    - )} -

    -
    + + + + + + + + + + + + Já tem uma conta? Entre! + + + + +
    + + + + ); }; -export default Signup; +export default SignUp;