mirror of
https://github.com/cheveguerra/whaticket-community.git
synced 2026-04-18 03:39:29 +00:00
Finalized Chat migration to Material Ui
This commit is contained in:
Cassio Santos
@@ -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==\""}
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
173
frontend/src/components/Layout/MainDrawer.js
Normal file
173
frontend/src/components/Layout/MainDrawer.js
Normal file
@@ -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;
|
||||
118
frontend/src/components/Layout/MainListItems.js
Normal file
118
frontend/src/components/Layout/MainListItems.js
Normal file
@@ -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;
|
||||
@@ -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(
|
||||
<React.StrictMode>
|
||||
<ScopedCssBaseline>
|
||||
<CssBaseline>
|
||||
<App />
|
||||
</ScopedCssBaseline>
|
||||
</CssBaseline>
|
||||
</React.StrictMode>,
|
||||
document.getElementById("root")
|
||||
);
|
||||
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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 (
|
||||
<div>
|
||||
{!localStorage.getItem("token") ? (
|
||||
<div>
|
||||
<DefaultNavbar />
|
||||
<h1> Você não está logado </h1>
|
||||
<MainDrawer appTitle="Chat">
|
||||
<div className={classes.chatContainer}>
|
||||
<Paper square className={classes.chatPapper}>
|
||||
<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>
|
||||
) : (
|
||||
<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>
|
||||
)}
|
||||
</MainDrawer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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}
|
||||
@@ -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 (
|
||||
<>
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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 (
|
||||
<Paper variant="outlined" className={classes.viewMediaInputWrapper}>
|
||||
<CancelIcon
|
||||
className={classes.sendMessageIcons}
|
||||
<Paper
|
||||
variant="outlined"
|
||||
square
|
||||
className={classes.viewMediaInputWrapper}
|
||||
>
|
||||
<IconButton
|
||||
aria-label="cancel-upload"
|
||||
component="span"
|
||||
onClick={e => setMedia(mediaInitialState)}
|
||||
/>
|
||||
<span>
|
||||
{media.name}
|
||||
{/* <img src={media.preview} alt=""></img> */}
|
||||
</span>
|
||||
>
|
||||
<CancelIcon className={classes.sendMessageIcons} />
|
||||
</IconButton>
|
||||
|
||||
{loading ? (
|
||||
<div>
|
||||
<CircularProgress className={classes.circleLoading} />
|
||||
</div>
|
||||
) : null}
|
||||
<SendIcon
|
||||
className={classes.sendMessageIcons}
|
||||
) : (
|
||||
<span>
|
||||
{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}>
|
||||
<MoodIcon
|
||||
className={classes.sendMessageIcons}
|
||||
<Paper variant="outlined" square className={classes.newMessageBox}>
|
||||
<IconButton
|
||||
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
|
||||
className={classes.sendMessageIcons}
|
||||
<IconButton
|
||||
aria-label="emojiPicker"
|
||||
component="span"
|
||||
onClick={handleSendMessage}
|
||||
/>
|
||||
>
|
||||
<SendIcon className={classes.sendMessageIcons} />
|
||||
</IconButton>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
@@ -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 (
|
||||
<>
|
||||
<Card variant="outlined" className={classes.messagesHeader}>
|
||||
<div className={classes.mainWrapper}>
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
12
frontend/src/pages/Home/Dashboard.js
Normal file
12
frontend/src/pages/Home/Dashboard.js
Normal file
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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 (
|
||||
<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 [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 (
|
||||
<div>
|
||||
{localStorage.getItem("token") ? <LogedinNavbar /> : <DefaultNavbar />}
|
||||
<div>
|
||||
<br></br>
|
||||
<Container>
|
||||
<Form onSubmit={e => handleLogin(e, user)}>
|
||||
<Form.Group>
|
||||
{/* <Form.Label>Email address</Form.Label> */}
|
||||
<Form.Control
|
||||
name="email"
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
value={user.email}
|
||||
onChange={handleChangeInput}
|
||||
/>
|
||||
</Form.Group>
|
||||
|
||||
<Form.Group>
|
||||
{/* <Form.Label>Password</Form.Label> */}
|
||||
<Form.Control
|
||||
name="password"
|
||||
type="password"
|
||||
placeholder="Senha"
|
||||
value={user.password}
|
||||
onChange={handleChangeInput}
|
||||
/>
|
||||
</Form.Group>
|
||||
|
||||
<Button variant="primary" type="submit">
|
||||
Entrar
|
||||
</Button>
|
||||
</Form>
|
||||
</Container>
|
||||
<Container component="main" maxWidth="xs">
|
||||
<CssBaseline />
|
||||
<div className={classes.paper}>
|
||||
<Avatar className={classes.avatar}>
|
||||
<LockOutlinedIcon />
|
||||
</Avatar>
|
||||
<Typography component="h1" variant="h5">
|
||||
Login
|
||||
</Typography>
|
||||
<form
|
||||
className={classes.form}
|
||||
noValidate
|
||||
onSubmit={e => handleLogin(e, user)}
|
||||
>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
required
|
||||
fullWidth
|
||||
id="email"
|
||||
label="Email"
|
||||
name="email"
|
||||
value={user.email}
|
||||
onChange={handleChangeInput}
|
||||
autoComplete="email"
|
||||
autoFocus
|
||||
/>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
required
|
||||
fullWidth
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -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 (
|
||||
<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(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 (
|
||||
<div>
|
||||
{localStorage.getItem("token") ? (
|
||||
<div>
|
||||
<LogedinNavbar />
|
||||
<h1> Você está logado </h1>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<DefaultNavbar />
|
||||
<br></br>
|
||||
<Container>
|
||||
<Form onSubmit={handleSignUp}>
|
||||
<Form.Group>
|
||||
{/* <Form.Label>Nome</Form.Label> */}
|
||||
<Form.Control
|
||||
name="name"
|
||||
type="text"
|
||||
placeholder="Nome"
|
||||
value={user.name}
|
||||
onChange={handleChangeInput}
|
||||
/>
|
||||
</Form.Group>
|
||||
<Form.Group>
|
||||
{/* <Form.Label>Email address</Form.Label> */}
|
||||
<Form.Control
|
||||
name="email"
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
value={user.email}
|
||||
onChange={handleChangeInput}
|
||||
/>
|
||||
</Form.Group>
|
||||
<Container component="main" maxWidth="xs">
|
||||
<CssBaseline />
|
||||
<div className={classes.paper}>
|
||||
<Avatar className={classes.avatar}>
|
||||
<LockOutlinedIcon />
|
||||
</Avatar>
|
||||
<Typography component="h1" variant="h5">
|
||||
Cadastre-se
|
||||
</Typography>
|
||||
<form className={classes.form} noValidate onSubmit={handleSignUp}>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12}>
|
||||
<TextField
|
||||
autoComplete="name"
|
||||
name="name"
|
||||
variant="outlined"
|
||||
required
|
||||
fullWidth
|
||||
id="name"
|
||||
label="Nome"
|
||||
value={user.name}
|
||||
onChange={handleChangeInput}
|
||||
autoFocus
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Form.Group>
|
||||
{/* <Form.Label>Password</Form.Label> */}
|
||||
<Form.Control
|
||||
name="password"
|
||||
type="password"
|
||||
placeholder="Senha"
|
||||
value={user.password}
|
||||
onChange={handleChangeInput}
|
||||
/>
|
||||
<Form.Text className="text-muted">
|
||||
Mínimo de 5 caracteres.
|
||||
</Form.Text>
|
||||
</Form.Group>
|
||||
|
||||
<Button variant="primary" type="submit">
|
||||
Submit
|
||||
</Button>
|
||||
</Form>
|
||||
</Container>
|
||||
</div>
|
||||
)}
|
||||
<br></br>
|
||||
</div>
|
||||
<Grid item xs={12}>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
required
|
||||
fullWidth
|
||||
id="email"
|
||||
label="Email"
|
||||
name="email"
|
||||
autoComplete="email"
|
||||
value={user.email}
|
||||
onChange={handleChangeInput}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
required
|
||||
fullWidth
|
||||
name="password"
|
||||
label="Senha"
|
||||
type="password"
|
||||
id="password"
|
||||
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;
|
||||
|
||||
Reference in New Issue
Block a user