mirror of
https://github.com/cheveguerra/whaticket-community.git
synced 2026-04-19 20:29:17 +00:00
migration to WSL
This commit is contained in:
canove
@@ -1,85 +1,85 @@
|
||||
import React from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import Grid from "@material-ui/core/Grid";
|
||||
import Paper from "@material-ui/core/Paper";
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
|
||||
import ContactsList from "./components/ContactsList/ContactsList";
|
||||
import MessagesList from "./components/MessagesList/MessagesList";
|
||||
import MainDrawer from "../../components/Layout/MainDrawer";
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
chatContainer: {
|
||||
flex: 1,
|
||||
backgroundColor: "#eee",
|
||||
// padding: 20,
|
||||
height: `calc(100% - 64px)`,
|
||||
overflowY: "hidden",
|
||||
},
|
||||
|
||||
chatPapper: {
|
||||
backgroundColor: "#eee",
|
||||
display: "flex",
|
||||
height: "100%",
|
||||
overflowY: "hidden",
|
||||
},
|
||||
|
||||
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 Chat = () => {
|
||||
const classes = useStyles();
|
||||
const { contactId } = useParams();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<MainDrawer appTitle="Chat">
|
||||
<div className={classes.chatContainer}>
|
||||
<Paper square className={classes.chatPapper}>
|
||||
<Grid container spacing={0}>
|
||||
<Grid item xs={4} className={classes.contactsWrapper}>
|
||||
<ContactsList />
|
||||
</Grid>
|
||||
<Grid item xs={8} className={classes.messagessWrapper}>
|
||||
{contactId ? (
|
||||
<>
|
||||
<MessagesList />
|
||||
</>
|
||||
) : (
|
||||
<Paper
|
||||
square
|
||||
variant="outlined"
|
||||
className={classes.welcomeMsg}
|
||||
>
|
||||
<span>Selecione um contato para começar a conversar</span>
|
||||
</Paper>
|
||||
)}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Paper>
|
||||
</div>
|
||||
</MainDrawer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Chat;
|
||||
import React from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import Grid from "@material-ui/core/Grid";
|
||||
import Paper from "@material-ui/core/Paper";
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
|
||||
import ContactsList from "./components/ContactsList/ContactsList";
|
||||
import MessagesList from "./components/MessagesList/MessagesList";
|
||||
import MainDrawer from "../../components/Layout/MainDrawer";
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
chatContainer: {
|
||||
flex: 1,
|
||||
backgroundColor: "#eee",
|
||||
// padding: 20,
|
||||
height: `calc(100% - 64px)`,
|
||||
overflowY: "hidden",
|
||||
},
|
||||
|
||||
chatPapper: {
|
||||
backgroundColor: "#eee",
|
||||
display: "flex",
|
||||
height: "100%",
|
||||
overflowY: "hidden",
|
||||
},
|
||||
|
||||
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 Chat = () => {
|
||||
const classes = useStyles();
|
||||
const { contactId } = useParams();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<MainDrawer appTitle="Chat">
|
||||
<div className={classes.chatContainer}>
|
||||
<Paper square className={classes.chatPapper}>
|
||||
<Grid container spacing={0}>
|
||||
<Grid item xs={4} className={classes.contactsWrapper}>
|
||||
<ContactsList />
|
||||
</Grid>
|
||||
<Grid item xs={8} className={classes.messagessWrapper}>
|
||||
{contactId ? (
|
||||
<>
|
||||
<MessagesList />
|
||||
</>
|
||||
) : (
|
||||
<Paper
|
||||
square
|
||||
variant="outlined"
|
||||
className={classes.welcomeMsg}
|
||||
>
|
||||
<span>Selecione um contato para começar a conversar</span>
|
||||
</Paper>
|
||||
)}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Paper>
|
||||
</div>
|
||||
</MainDrawer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Chat;
|
||||
|
||||
@@ -0,0 +1,72 @@
|
||||
import React, { useState } from "react";
|
||||
import Button from "@material-ui/core/Button";
|
||||
import TextField from "@material-ui/core/TextField";
|
||||
import Dialog from "@material-ui/core/Dialog";
|
||||
import DialogActions from "@material-ui/core/DialogActions";
|
||||
import DialogContent from "@material-ui/core/DialogContent";
|
||||
import DialogTitle from "@material-ui/core/DialogTitle";
|
||||
|
||||
const AddContactModal = ({ modalOpen, setModalOpen, handleAddContact }) => {
|
||||
const initialState = { name: "", number: "" };
|
||||
const [contact, setContact] = useState(initialState);
|
||||
|
||||
const handleClose = () => {
|
||||
setModalOpen(false);
|
||||
};
|
||||
|
||||
const handleChangeInput = e => {
|
||||
setContact({ ...contact, [e.target.name]: e.target.value });
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Dialog
|
||||
open={modalOpen}
|
||||
onClose={handleClose}
|
||||
aria-labelledby="form-dialog-title"
|
||||
>
|
||||
<DialogTitle id="form-dialog-title">Adicionar contato</DialogTitle>
|
||||
<DialogContent>
|
||||
<TextField
|
||||
autoComplete="false"
|
||||
autoFocus
|
||||
margin="dense"
|
||||
name="number"
|
||||
id="contactNumber"
|
||||
label="Número"
|
||||
type="text"
|
||||
value={contact.number}
|
||||
onChange={handleChangeInput}
|
||||
fullWidth
|
||||
/>
|
||||
<TextField
|
||||
margin="dense"
|
||||
name="name"
|
||||
id="contactName"
|
||||
label="Nome do contato"
|
||||
type="text"
|
||||
value={contact.name}
|
||||
onChange={handleChangeInput}
|
||||
fullWidth
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={handleClose} color="primary">
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button
|
||||
onClick={e => {
|
||||
handleAddContact(contact);
|
||||
setContact(initialState);
|
||||
}}
|
||||
color="primary"
|
||||
>
|
||||
Adicionar
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddContactModal;
|
||||
@@ -1,47 +1,47 @@
|
||||
import React from "react";
|
||||
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
import Card from "@material-ui/core/Card";
|
||||
import CardHeader from "@material-ui/core/CardHeader";
|
||||
import IconButton from "@material-ui/core/IconButton";
|
||||
import MoreVertIcon from "@material-ui/icons/MoreVert";
|
||||
import Avatar from "@material-ui/core/Avatar";
|
||||
|
||||
import profileDefaultPic from "../../../../Images/profile_default.png";
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
contactsHeader: {
|
||||
display: "flex",
|
||||
flex: "none",
|
||||
// height: 80,
|
||||
backgroundColor: "#eee",
|
||||
borderBottomLeftRadius: 0,
|
||||
borderBottomRightRadius: 0,
|
||||
borderTopRightRadius: 0,
|
||||
},
|
||||
settingsIcon: {
|
||||
alignSelf: "center",
|
||||
marginLeft: "auto",
|
||||
padding: 8,
|
||||
},
|
||||
}));
|
||||
|
||||
const ContactsHeader = () => {
|
||||
const classes = useStyles();
|
||||
|
||||
const username = localStorage.getItem("username");
|
||||
|
||||
return (
|
||||
<Card variant="outlined" square className={classes.contactsHeader}>
|
||||
<CardHeader
|
||||
avatar={<Avatar alt="logged_user" src={profileDefaultPic} />}
|
||||
title={username}
|
||||
/>
|
||||
<IconButton className={classes.settingsIcon} aria-label="settings">
|
||||
<MoreVertIcon />
|
||||
</IconButton>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContactsHeader;
|
||||
import React from "react";
|
||||
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
import Card from "@material-ui/core/Card";
|
||||
import CardHeader from "@material-ui/core/CardHeader";
|
||||
import IconButton from "@material-ui/core/IconButton";
|
||||
import MoreVertIcon from "@material-ui/icons/MoreVert";
|
||||
import Avatar from "@material-ui/core/Avatar";
|
||||
|
||||
import profileDefaultPic from "../../../../Images/profile_default.png";
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
contactsHeader: {
|
||||
display: "flex",
|
||||
flex: "none",
|
||||
// height: 80,
|
||||
backgroundColor: "#eee",
|
||||
borderBottomLeftRadius: 0,
|
||||
borderBottomRightRadius: 0,
|
||||
borderTopRightRadius: 0,
|
||||
},
|
||||
settingsIcon: {
|
||||
alignSelf: "center",
|
||||
marginLeft: "auto",
|
||||
padding: 8,
|
||||
},
|
||||
}));
|
||||
|
||||
const ContactsHeader = () => {
|
||||
const classes = useStyles();
|
||||
|
||||
const username = localStorage.getItem("username");
|
||||
|
||||
return (
|
||||
<Card variant="outlined" square className={classes.contactsHeader}>
|
||||
<CardHeader
|
||||
avatar={<Avatar alt="logged_user" src={profileDefaultPic} />}
|
||||
title={username}
|
||||
/>
|
||||
<IconButton className={classes.settingsIcon} aria-label="settings">
|
||||
<MoreVertIcon />
|
||||
</IconButton>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContactsHeader;
|
||||
|
||||
@@ -1,333 +1,381 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useHistory, useParams } from "react-router-dom";
|
||||
import api from "../../../../util/api";
|
||||
import openSocket from "socket.io-client";
|
||||
import moment from "moment-timezone";
|
||||
|
||||
import profileDefaultPic from "../../../../Images/profile_default.png";
|
||||
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
import { green } from "@material-ui/core/colors";
|
||||
import CircularProgress from "@material-ui/core/CircularProgress";
|
||||
import Paper from "@material-ui/core/Paper";
|
||||
import List from "@material-ui/core/List";
|
||||
import ListItem from "@material-ui/core/ListItem";
|
||||
import ListItemText from "@material-ui/core/ListItemText";
|
||||
import ListItemAvatar from "@material-ui/core/ListItemAvatar";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
import Avatar from "@material-ui/core/Avatar";
|
||||
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 ContactsHeader from "../ContactsHeader/ContactsHeader";
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
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: {
|
||||
position: "relative",
|
||||
borderTopLeftRadius: 0,
|
||||
borderTopRightRadius: 0,
|
||||
borderBottomRightRadius: 0,
|
||||
flexGrow: 1,
|
||||
overflowY: "scroll",
|
||||
"&::-webkit-scrollbar": {
|
||||
width: "8px",
|
||||
},
|
||||
"&::-webkit-scrollbar-thumb": {
|
||||
boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)",
|
||||
backgroundColor: "#e8e8e8",
|
||||
},
|
||||
},
|
||||
contactsSearchBox: {
|
||||
position: "relative",
|
||||
background: "#fafafa",
|
||||
padding: "10px 13px",
|
||||
},
|
||||
|
||||
serachInputWrapper: {
|
||||
background: "#fff",
|
||||
display: "flex",
|
||||
borderRadius: 40,
|
||||
padding: 4,
|
||||
},
|
||||
|
||||
searchIcon: {
|
||||
color: "grey",
|
||||
marginLeft: 6,
|
||||
marginRight: 6,
|
||||
alignSelf: "center",
|
||||
},
|
||||
|
||||
contactsSearchInput: {
|
||||
flex: 1,
|
||||
border: "none",
|
||||
borderRadius: 30,
|
||||
},
|
||||
|
||||
contactNameWrapper: {
|
||||
display: "flex",
|
||||
// display: "inline",
|
||||
},
|
||||
|
||||
lastMessageTime: {
|
||||
marginLeft: "auto",
|
||||
},
|
||||
|
||||
contactLastMessage: {
|
||||
paddingRight: 20,
|
||||
},
|
||||
|
||||
newMessagesCount: {
|
||||
alignSelf: "center",
|
||||
marginRight: 8,
|
||||
marginLeft: "auto",
|
||||
},
|
||||
|
||||
badgeStyle: {
|
||||
color: "white",
|
||||
backgroundColor: green[500],
|
||||
},
|
||||
circleLoading: {
|
||||
color: green[500],
|
||||
opacity: "70%",
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: "50%",
|
||||
marginTop: 12,
|
||||
// marginLeft: -12,
|
||||
},
|
||||
}));
|
||||
|
||||
const ContactsList = () => {
|
||||
const classes = useStyles();
|
||||
const token = localStorage.getItem("token");
|
||||
const { contactId } = useParams();
|
||||
const [contacts, setContacts] = useState([]);
|
||||
const [loading, setLoading] = useState();
|
||||
const [searchParam, setSearchParam] = useState("");
|
||||
|
||||
const history = useHistory();
|
||||
|
||||
useEffect(() => {
|
||||
if (!("Notification" in window)) {
|
||||
console.log("Esse navegador não suporte notificações");
|
||||
} else {
|
||||
Notification.requestPermission();
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
const delayDebounceFn = setTimeout(() => {
|
||||
const fetchContacts = async () => {
|
||||
try {
|
||||
const res = await api.get("/contacts", {
|
||||
params: { searchParam },
|
||||
});
|
||||
setContacts(res.data);
|
||||
setLoading(false);
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
};
|
||||
fetchContacts();
|
||||
}, 1000);
|
||||
return () => clearTimeout(delayDebounceFn);
|
||||
}, [searchParam, token]);
|
||||
|
||||
useEffect(() => {
|
||||
const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
|
||||
|
||||
socket.emit("joinNotification");
|
||||
|
||||
socket.on("contact", data => {
|
||||
if (data.action === "updateUnread") {
|
||||
resetUnreadMessages(data.contactId);
|
||||
}
|
||||
});
|
||||
|
||||
socket.on("appMessage", data => {
|
||||
if (data.action === "create") {
|
||||
updateUnreadMessagesCount(data);
|
||||
if (
|
||||
contactId &&
|
||||
data.message.contactId === +contactId &&
|
||||
document.visibilityState === "visible"
|
||||
)
|
||||
return;
|
||||
showDesktopNotification(data);
|
||||
}
|
||||
});
|
||||
|
||||
return () => {
|
||||
socket.disconnect();
|
||||
};
|
||||
}, [contactId]);
|
||||
|
||||
const updateUnreadMessagesCount = data => {
|
||||
setContacts(prevState => {
|
||||
const contactIndex = prevState.findIndex(
|
||||
contact => contact.id === data.message.contactId
|
||||
);
|
||||
|
||||
if (contactIndex !== -1) {
|
||||
let aux = [...prevState];
|
||||
aux[contactIndex].unreadMessages++;
|
||||
aux[contactIndex].lastMessage = data.message.messageBody;
|
||||
aux.unshift(aux.splice(contactIndex, 1)[0]);
|
||||
return aux;
|
||||
} else {
|
||||
return [data.contact, ...prevState];
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const showDesktopNotification = data => {
|
||||
const options = {
|
||||
body: `${data.message.messageBody} - ${moment(new Date())
|
||||
.tz("America/Sao_Paulo")
|
||||
.format("DD/MM/YY - HH:mm")}`,
|
||||
icon: data.contact.imageURL,
|
||||
};
|
||||
new Notification(`Mensagem de ${data.contact.name}`, options);
|
||||
document.getElementById("sound").play();
|
||||
};
|
||||
|
||||
const resetUnreadMessages = contactId => {
|
||||
setContacts(prevState => {
|
||||
let aux = [...prevState];
|
||||
let contactIndex = aux.findIndex(contact => contact.id === +contactId);
|
||||
aux[contactIndex].unreadMessages = 0;
|
||||
|
||||
return aux;
|
||||
});
|
||||
};
|
||||
|
||||
const handleSelectContact = (e, contact) => {
|
||||
history.push(`/chat/${contact.id}`);
|
||||
};
|
||||
|
||||
const handleSearchContact = e => {
|
||||
// let searchTerm = e.target.value.toLowerCase();
|
||||
setSearchParam(e.target.value.toLowerCase());
|
||||
};
|
||||
|
||||
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="search"
|
||||
onChange={handleSearchContact}
|
||||
/>
|
||||
</div>
|
||||
</Paper>
|
||||
<Paper variant="outlined" className={classes.contactsList}>
|
||||
<List>
|
||||
{contacts.map((contact, index) => (
|
||||
<React.Fragment key={contact.id}>
|
||||
<ListItem
|
||||
button
|
||||
onClick={e => handleSelectContact(e, contact)}
|
||||
selected={contactId && +contactId === contact.id}
|
||||
>
|
||||
<ListItemAvatar>
|
||||
<Avatar
|
||||
src={
|
||||
contact.imageURL ? contact.imageURL : profileDefaultPic
|
||||
}
|
||||
></Avatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText
|
||||
primary={
|
||||
<span className={classes.contactNameWrapper}>
|
||||
<Typography
|
||||
noWrap
|
||||
component="span"
|
||||
variant="body2"
|
||||
color="textPrimary"
|
||||
>
|
||||
{contact.name}
|
||||
</Typography>
|
||||
{contact.lastMessage && (
|
||||
<Typography
|
||||
className={classes.lastMessageTime}
|
||||
component="span"
|
||||
variant="body2"
|
||||
color="textSecondary"
|
||||
>
|
||||
{moment(contact.updatedAt)
|
||||
.tz("America/Sao_Paulo")
|
||||
.format("HH:mm")}
|
||||
</Typography>
|
||||
)}
|
||||
</span>
|
||||
}
|
||||
secondary={
|
||||
<span className={classes.contactNameWrapper}>
|
||||
<Typography
|
||||
className={classes.contactLastMessage}
|
||||
noWrap
|
||||
component="span"
|
||||
variant="body2"
|
||||
color="textSecondary"
|
||||
>
|
||||
{contact.lastMessage || <br />}
|
||||
</Typography>
|
||||
<Badge
|
||||
className={classes.newMessagesCount}
|
||||
badgeContent={contact.unreadMessages}
|
||||
classes={{
|
||||
badge: classes.badgeStyle,
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
}
|
||||
/>
|
||||
</ListItem>
|
||||
<Divider variant="inset" component="li" />
|
||||
</React.Fragment>
|
||||
))}
|
||||
</List>
|
||||
{loading ? (
|
||||
<div>
|
||||
<CircularProgress className={classes.circleLoading} />
|
||||
</div>
|
||||
) : null}
|
||||
</Paper>
|
||||
<audio id="sound" preload="auto">
|
||||
<source src={require("../../../../util/sound.mp3")} type="audio/mpeg" />
|
||||
<source src={require("../../../../util/sound.ogg")} type="audio/ogg" />
|
||||
<embed hidden={true} autostart="false" loop={false} src="./sound.mp3" />
|
||||
</audio>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContactsList;
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useHistory, useParams } from "react-router-dom";
|
||||
import api from "../../../../util/api";
|
||||
import openSocket from "socket.io-client";
|
||||
import moment from "moment-timezone";
|
||||
|
||||
import profileDefaultPic from "../../../../Images/profile_default.png";
|
||||
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
import { green } from "@material-ui/core/colors";
|
||||
import CircularProgress from "@material-ui/core/CircularProgress";
|
||||
import Paper from "@material-ui/core/Paper";
|
||||
import List from "@material-ui/core/List";
|
||||
import ListItem from "@material-ui/core/ListItem";
|
||||
import ListItemText from "@material-ui/core/ListItemText";
|
||||
import ListItemAvatar from "@material-ui/core/ListItemAvatar";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
import Avatar from "@material-ui/core/Avatar";
|
||||
import AddIcon from "@material-ui/icons/Add";
|
||||
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 Fab from "@material-ui/core/Fab";
|
||||
import AddContactModal from "../AddContact/AddContactModal";
|
||||
|
||||
import ContactsHeader from "../ContactsHeader/ContactsHeader";
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
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: {
|
||||
position: "relative",
|
||||
borderTopLeftRadius: 0,
|
||||
borderTopRightRadius: 0,
|
||||
borderBottomRightRadius: 0,
|
||||
flexGrow: 1,
|
||||
overflowY: "scroll",
|
||||
"&::-webkit-scrollbar": {
|
||||
width: "8px",
|
||||
},
|
||||
"&::-webkit-scrollbar-thumb": {
|
||||
boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)",
|
||||
backgroundColor: "#e8e8e8",
|
||||
},
|
||||
},
|
||||
contactsSearchBox: {
|
||||
position: "relative",
|
||||
background: "#fafafa",
|
||||
padding: "10px 13px",
|
||||
},
|
||||
|
||||
serachInputWrapper: {
|
||||
background: "#fff",
|
||||
display: "flex",
|
||||
borderRadius: 40,
|
||||
padding: 4,
|
||||
},
|
||||
|
||||
searchIcon: {
|
||||
color: "grey",
|
||||
marginLeft: 6,
|
||||
marginRight: 6,
|
||||
alignSelf: "center",
|
||||
},
|
||||
|
||||
contactsSearchInput: {
|
||||
flex: 1,
|
||||
border: "none",
|
||||
borderRadius: 30,
|
||||
},
|
||||
|
||||
contactNameWrapper: {
|
||||
display: "flex",
|
||||
// display: "inline",
|
||||
},
|
||||
|
||||
lastMessageTime: {
|
||||
marginLeft: "auto",
|
||||
},
|
||||
|
||||
contactLastMessage: {
|
||||
paddingRight: 20,
|
||||
},
|
||||
|
||||
newMessagesCount: {
|
||||
alignSelf: "center",
|
||||
marginRight: 8,
|
||||
marginLeft: "auto",
|
||||
},
|
||||
|
||||
badgeStyle: {
|
||||
color: "white",
|
||||
backgroundColor: green[500],
|
||||
},
|
||||
circleLoading: {
|
||||
color: green[500],
|
||||
opacity: "70%",
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: "50%",
|
||||
marginTop: 12,
|
||||
// marginLeft: -12,
|
||||
},
|
||||
fabButton: {
|
||||
position: "absolute",
|
||||
zIndex: 1,
|
||||
bottom: 20,
|
||||
left: 0,
|
||||
right: 0,
|
||||
margin: "0 auto",
|
||||
},
|
||||
}));
|
||||
|
||||
const ContactsList = () => {
|
||||
const classes = useStyles();
|
||||
const token = localStorage.getItem("token");
|
||||
const { contactId } = useParams();
|
||||
const [contacts, setContacts] = useState([]);
|
||||
const [loading, setLoading] = useState();
|
||||
const [searchParam, setSearchParam] = useState("");
|
||||
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
|
||||
const history = useHistory();
|
||||
|
||||
useEffect(() => {
|
||||
if (!("Notification" in window)) {
|
||||
console.log("Esse navegador não suporte notificações");
|
||||
} else {
|
||||
Notification.requestPermission();
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
const delayDebounceFn = setTimeout(() => {
|
||||
const fetchContacts = async () => {
|
||||
try {
|
||||
const res = await api.get("/contacts", {
|
||||
params: { searchParam },
|
||||
});
|
||||
setContacts(res.data);
|
||||
setLoading(false);
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
};
|
||||
fetchContacts();
|
||||
}, 1000);
|
||||
return () => clearTimeout(delayDebounceFn);
|
||||
}, [searchParam, token]);
|
||||
|
||||
useEffect(() => {
|
||||
const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
|
||||
|
||||
socket.emit("joinNotification");
|
||||
|
||||
socket.on("contact", data => {
|
||||
if (data.action === "updateUnread") {
|
||||
resetUnreadMessages(data.contactId);
|
||||
}
|
||||
});
|
||||
|
||||
socket.on("appMessage", data => {
|
||||
if (data.action === "create") {
|
||||
updateUnreadMessagesCount(data);
|
||||
if (
|
||||
contactId &&
|
||||
data.message.contactId === +contactId &&
|
||||
document.visibilityState === "visible"
|
||||
)
|
||||
return;
|
||||
showDesktopNotification(data);
|
||||
}
|
||||
});
|
||||
|
||||
return () => {
|
||||
socket.disconnect();
|
||||
};
|
||||
}, [contactId]);
|
||||
|
||||
const updateUnreadMessagesCount = data => {
|
||||
setContacts(prevState => {
|
||||
const contactIndex = prevState.findIndex(
|
||||
contact => contact.id === data.message.contactId
|
||||
);
|
||||
|
||||
if (contactIndex !== -1) {
|
||||
let aux = [...prevState];
|
||||
aux[contactIndex].unreadMessages++;
|
||||
aux[contactIndex].lastMessage = data.message.messageBody;
|
||||
aux.unshift(aux.splice(contactIndex, 1)[0]);
|
||||
return aux;
|
||||
} else {
|
||||
return [data.contact, ...prevState];
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const showDesktopNotification = data => {
|
||||
const options = {
|
||||
body: `${data.message.messageBody} - ${moment(new Date())
|
||||
.tz("America/Sao_Paulo")
|
||||
.format("DD/MM/YY - HH:mm")}`,
|
||||
icon: data.contact.profilePicUrl,
|
||||
};
|
||||
new Notification(`Mensagem de ${data.contact.name}`, options);
|
||||
document.getElementById("sound").play();
|
||||
};
|
||||
|
||||
const resetUnreadMessages = contactId => {
|
||||
setContacts(prevState => {
|
||||
let aux = [...prevState];
|
||||
let contactIndex = aux.findIndex(contact => contact.id === +contactId);
|
||||
aux[contactIndex].unreadMessages = 0;
|
||||
|
||||
return aux;
|
||||
});
|
||||
};
|
||||
|
||||
const handleSelectContact = (e, contact) => {
|
||||
history.push(`/chat/${contact.id}`);
|
||||
};
|
||||
|
||||
const handleSearchContact = e => {
|
||||
// let searchTerm = e.target.value.toLowerCase();
|
||||
setSearchParam(e.target.value.toLowerCase());
|
||||
};
|
||||
|
||||
const handleShowContactModal = e => {
|
||||
setModalOpen(true);
|
||||
};
|
||||
|
||||
const handleAddContact = async contact => {
|
||||
try {
|
||||
const res = await api.post("/contacts", contact);
|
||||
setContacts(prevState => [res.data, ...prevState]);
|
||||
setModalOpen(false);
|
||||
console.log(res.data);
|
||||
} catch (err) {
|
||||
if (err.response.status === 422) {
|
||||
console.log("deu erro", err.response);
|
||||
alert(err.response.data.message);
|
||||
} else {
|
||||
alert(err);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={classes.contactsWrapper}>
|
||||
<ContactsHeader />
|
||||
<AddContactModal
|
||||
setModalOpen={setModalOpen}
|
||||
modalOpen={modalOpen}
|
||||
handleAddContact={handleAddContact}
|
||||
/>
|
||||
<Paper variant="outlined" square className={classes.contactsSearchBox}>
|
||||
<div className={classes.serachInputWrapper}>
|
||||
<SearchIcon className={classes.searchIcon} />
|
||||
<InputBase
|
||||
className={classes.contactsSearchInput}
|
||||
placeholder="Buscar contatos"
|
||||
type="search"
|
||||
onChange={handleSearchContact}
|
||||
/>
|
||||
</div>
|
||||
</Paper>
|
||||
<Paper variant="outlined" className={classes.contactsList}>
|
||||
<List>
|
||||
{contacts.map((contact, index) => (
|
||||
<React.Fragment key={contact.id}>
|
||||
<ListItem
|
||||
button
|
||||
onClick={e => handleSelectContact(e, contact)}
|
||||
selected={contactId && +contactId === contact.id}
|
||||
>
|
||||
<ListItemAvatar>
|
||||
<Avatar
|
||||
src={
|
||||
contact.profilePicUrl
|
||||
? contact.profilePicUrl
|
||||
: profileDefaultPic
|
||||
}
|
||||
></Avatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText
|
||||
primary={
|
||||
<span className={classes.contactNameWrapper}>
|
||||
<Typography
|
||||
noWrap
|
||||
component="span"
|
||||
variant="body2"
|
||||
color="textPrimary"
|
||||
>
|
||||
{contact.name}
|
||||
</Typography>
|
||||
{contact.lastMessage && (
|
||||
<Typography
|
||||
className={classes.lastMessageTime}
|
||||
component="span"
|
||||
variant="body2"
|
||||
color="textSecondary"
|
||||
>
|
||||
{moment(contact.updatedAt)
|
||||
.tz("America/Sao_Paulo")
|
||||
.format("HH:mm")}
|
||||
</Typography>
|
||||
)}
|
||||
</span>
|
||||
}
|
||||
secondary={
|
||||
<span className={classes.contactNameWrapper}>
|
||||
<Typography
|
||||
className={classes.contactLastMessage}
|
||||
noWrap
|
||||
component="span"
|
||||
variant="body2"
|
||||
color="textSecondary"
|
||||
>
|
||||
{contact.lastMessage || <br />}
|
||||
</Typography>
|
||||
<Badge
|
||||
className={classes.newMessagesCount}
|
||||
badgeContent={contact.unreadMessages}
|
||||
classes={{
|
||||
badge: classes.badgeStyle,
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
}
|
||||
/>
|
||||
</ListItem>
|
||||
<Divider variant="inset" component="li" />
|
||||
</React.Fragment>
|
||||
))}
|
||||
</List>
|
||||
{loading ? (
|
||||
<div>
|
||||
<CircularProgress className={classes.circleLoading} />
|
||||
</div>
|
||||
) : null}
|
||||
<Fab
|
||||
color="secondary"
|
||||
aria-label="add"
|
||||
className={classes.fabButton}
|
||||
onClick={handleShowContactModal}
|
||||
>
|
||||
<AddIcon />
|
||||
</Fab>
|
||||
</Paper>
|
||||
<audio id="sound" preload="auto">
|
||||
<source src={require("../../../../util/sound.mp3")} type="audio/mpeg" />
|
||||
<source src={require("../../../../util/sound.ogg")} type="audio/ogg" />
|
||||
<embed hidden={true} autostart="false" loop={false} src="./sound.mp3" />
|
||||
</audio>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContactsList;
|
||||
|
||||
@@ -1,254 +1,254 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import api from "../../../../util/api";
|
||||
import "emoji-mart/css/emoji-mart.css";
|
||||
import { Picker } from "emoji-mart";
|
||||
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
import Paper from "@material-ui/core/Paper";
|
||||
import InputBase from "@material-ui/core/InputBase";
|
||||
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";
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
newMessageBox: {
|
||||
background: "#eee",
|
||||
display: "flex",
|
||||
padding: "10px",
|
||||
alignItems: "center",
|
||||
},
|
||||
|
||||
messageInputWrapper: {
|
||||
padding: 6,
|
||||
background: "#fff",
|
||||
display: "flex",
|
||||
borderRadius: 40,
|
||||
flex: 1,
|
||||
},
|
||||
|
||||
messageInput: {
|
||||
paddingLeft: 10,
|
||||
flex: 1,
|
||||
border: "none",
|
||||
},
|
||||
|
||||
sendMessageIcons: {
|
||||
color: "grey",
|
||||
},
|
||||
|
||||
uploadInput: {
|
||||
display: "none",
|
||||
},
|
||||
|
||||
viewMediaInputWrapper: {
|
||||
display: "flex",
|
||||
padding: "10px 13px",
|
||||
position: "relative",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#eee",
|
||||
},
|
||||
|
||||
emojiBox: {
|
||||
position: "absolute",
|
||||
bottom: 63,
|
||||
width: 40,
|
||||
borderTop: "1px solid #e8e8e8",
|
||||
},
|
||||
|
||||
circleLoading: {
|
||||
color: green[500],
|
||||
opacity: "70%",
|
||||
position: "absolute",
|
||||
top: "20%",
|
||||
left: "50%",
|
||||
// marginTop: 8,
|
||||
// marginBottom: 6,
|
||||
marginLeft: -12,
|
||||
},
|
||||
}));
|
||||
|
||||
const MessagesInput = ({ searchParam }) => {
|
||||
const classes = useStyles();
|
||||
const { contactId } = useParams();
|
||||
const userId = localStorage.getItem("userId");
|
||||
const username = localStorage.getItem("username");
|
||||
|
||||
const mediaInitialState = { preview: "", raw: "", name: "" };
|
||||
const [media, setMedia] = useState(mediaInitialState);
|
||||
const [inputMessage, setInputMessage] = useState("");
|
||||
const [showEmoji, setShowEmoji] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
setInputMessage("");
|
||||
setShowEmoji(false);
|
||||
setMedia({});
|
||||
};
|
||||
}, [contactId]);
|
||||
|
||||
const handleChangeInput = e => {
|
||||
setInputMessage(e.target.value);
|
||||
};
|
||||
|
||||
const handleAddEmoji = e => {
|
||||
let emoji = e.native;
|
||||
setInputMessage(prevState => prevState + emoji);
|
||||
};
|
||||
|
||||
const handleChangeMedia = e => {
|
||||
if (e.target.files.length) {
|
||||
setMedia({
|
||||
preview: URL.createObjectURL(e.target.files[0]),
|
||||
raw: e.target.files[0],
|
||||
name: e.target.files[0].name,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleInputPaste = e => {
|
||||
if (e.clipboardData.files[0]) {
|
||||
setMedia({
|
||||
preview: URL.createObjectURL(e.clipboardData.files[0]),
|
||||
raw: e.clipboardData.files[0],
|
||||
name: e.clipboardData.files[0].name,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleUploadMedia = async e => {
|
||||
setLoading(true);
|
||||
e.preventDefault();
|
||||
const formData = new FormData();
|
||||
formData.append("media", media.raw);
|
||||
formData.append("userId", userId);
|
||||
formData.append("messageBody", media.name);
|
||||
|
||||
try {
|
||||
await api.post(`/messages/${contactId}`, formData);
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
alert(err);
|
||||
}
|
||||
setLoading(false);
|
||||
setMedia(mediaInitialState);
|
||||
};
|
||||
|
||||
const handleSendMessage = async () => {
|
||||
if (inputMessage.trim() === "") return;
|
||||
const message = {
|
||||
read: 1,
|
||||
userId: userId,
|
||||
mediaUrl: "",
|
||||
messageBody: `${username}: ${inputMessage.trim()}`,
|
||||
};
|
||||
try {
|
||||
await api.post(`/messages/${contactId}`, message);
|
||||
} catch (err) {
|
||||
alert(err);
|
||||
}
|
||||
setInputMessage("");
|
||||
setShowEmoji(false);
|
||||
};
|
||||
|
||||
if (media.preview)
|
||||
return (
|
||||
<Paper
|
||||
variant="outlined"
|
||||
square
|
||||
className={classes.viewMediaInputWrapper}
|
||||
>
|
||||
<IconButton
|
||||
aria-label="cancel-upload"
|
||||
component="span"
|
||||
onClick={e => setMedia(mediaInitialState)}
|
||||
>
|
||||
<CancelIcon className={classes.sendMessageIcons} />
|
||||
</IconButton>
|
||||
|
||||
{loading ? (
|
||||
<div>
|
||||
<CircularProgress className={classes.circleLoading} />
|
||||
</div>
|
||||
) : (
|
||||
<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" 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
|
||||
perLine={16}
|
||||
showPreview={false}
|
||||
showSkinTones={false}
|
||||
onSelect={handleAddEmoji}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<input
|
||||
type="file"
|
||||
id="upload-button"
|
||||
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}
|
||||
onChange={handleChangeInput}
|
||||
onPaste={handleInputPaste}
|
||||
onKeyPress={e => {
|
||||
if (e.key === "Enter") {
|
||||
handleSendMessage();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<IconButton
|
||||
aria-label="emojiPicker"
|
||||
component="span"
|
||||
onClick={handleSendMessage}
|
||||
>
|
||||
<SendIcon className={classes.sendMessageIcons} />
|
||||
</IconButton>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default MessagesInput;
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import api from "../../../../util/api";
|
||||
import "emoji-mart/css/emoji-mart.css";
|
||||
import { Picker } from "emoji-mart";
|
||||
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
import Paper from "@material-ui/core/Paper";
|
||||
import InputBase from "@material-ui/core/InputBase";
|
||||
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";
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
newMessageBox: {
|
||||
background: "#eee",
|
||||
display: "flex",
|
||||
padding: "10px",
|
||||
alignItems: "center",
|
||||
},
|
||||
|
||||
messageInputWrapper: {
|
||||
padding: 6,
|
||||
background: "#fff",
|
||||
display: "flex",
|
||||
borderRadius: 40,
|
||||
flex: 1,
|
||||
},
|
||||
|
||||
messageInput: {
|
||||
paddingLeft: 10,
|
||||
flex: 1,
|
||||
border: "none",
|
||||
},
|
||||
|
||||
sendMessageIcons: {
|
||||
color: "grey",
|
||||
},
|
||||
|
||||
uploadInput: {
|
||||
display: "none",
|
||||
},
|
||||
|
||||
viewMediaInputWrapper: {
|
||||
display: "flex",
|
||||
padding: "10px 13px",
|
||||
position: "relative",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#eee",
|
||||
},
|
||||
|
||||
emojiBox: {
|
||||
position: "absolute",
|
||||
bottom: 63,
|
||||
width: 40,
|
||||
borderTop: "1px solid #e8e8e8",
|
||||
},
|
||||
|
||||
circleLoading: {
|
||||
color: green[500],
|
||||
opacity: "70%",
|
||||
position: "absolute",
|
||||
top: "20%",
|
||||
left: "50%",
|
||||
// marginTop: 8,
|
||||
// marginBottom: 6,
|
||||
marginLeft: -12,
|
||||
},
|
||||
}));
|
||||
|
||||
const MessagesInput = ({ searchParam }) => {
|
||||
const classes = useStyles();
|
||||
const { contactId } = useParams();
|
||||
const userId = localStorage.getItem("userId");
|
||||
const username = localStorage.getItem("username");
|
||||
|
||||
const mediaInitialState = { preview: "", raw: "", name: "" };
|
||||
const [media, setMedia] = useState(mediaInitialState);
|
||||
const [inputMessage, setInputMessage] = useState("");
|
||||
const [showEmoji, setShowEmoji] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
setInputMessage("");
|
||||
setShowEmoji(false);
|
||||
setMedia({});
|
||||
};
|
||||
}, [contactId]);
|
||||
|
||||
const handleChangeInput = e => {
|
||||
setInputMessage(e.target.value);
|
||||
};
|
||||
|
||||
const handleAddEmoji = e => {
|
||||
let emoji = e.native;
|
||||
setInputMessage(prevState => prevState + emoji);
|
||||
};
|
||||
|
||||
const handleChangeMedia = e => {
|
||||
if (e.target.files.length) {
|
||||
setMedia({
|
||||
preview: URL.createObjectURL(e.target.files[0]),
|
||||
raw: e.target.files[0],
|
||||
name: e.target.files[0].name,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleInputPaste = e => {
|
||||
if (e.clipboardData.files[0]) {
|
||||
setMedia({
|
||||
preview: URL.createObjectURL(e.clipboardData.files[0]),
|
||||
raw: e.clipboardData.files[0],
|
||||
name: e.clipboardData.files[0].name,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleUploadMedia = async e => {
|
||||
setLoading(true);
|
||||
e.preventDefault();
|
||||
const formData = new FormData();
|
||||
formData.append("media", media.raw);
|
||||
formData.append("userId", userId);
|
||||
formData.append("messageBody", media.name);
|
||||
|
||||
try {
|
||||
await api.post(`/messages/${contactId}`, formData);
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
alert(err);
|
||||
}
|
||||
setLoading(false);
|
||||
setMedia(mediaInitialState);
|
||||
};
|
||||
|
||||
const handleSendMessage = async () => {
|
||||
if (inputMessage.trim() === "") return;
|
||||
const message = {
|
||||
read: 1,
|
||||
userId: userId,
|
||||
mediaUrl: "",
|
||||
messageBody: `${username}: ${inputMessage.trim()}`,
|
||||
};
|
||||
try {
|
||||
await api.post(`/messages/${contactId}`, message);
|
||||
} catch (err) {
|
||||
alert(err);
|
||||
}
|
||||
setInputMessage("");
|
||||
setShowEmoji(false);
|
||||
};
|
||||
|
||||
if (media.preview)
|
||||
return (
|
||||
<Paper
|
||||
variant="outlined"
|
||||
square
|
||||
className={classes.viewMediaInputWrapper}
|
||||
>
|
||||
<IconButton
|
||||
aria-label="cancel-upload"
|
||||
component="span"
|
||||
onClick={e => setMedia(mediaInitialState)}
|
||||
>
|
||||
<CancelIcon className={classes.sendMessageIcons} />
|
||||
</IconButton>
|
||||
|
||||
{loading ? (
|
||||
<div>
|
||||
<CircularProgress className={classes.circleLoading} />
|
||||
</div>
|
||||
) : (
|
||||
<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" 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
|
||||
perLine={16}
|
||||
showPreview={false}
|
||||
showSkinTones={false}
|
||||
onSelect={handleAddEmoji}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<input
|
||||
type="file"
|
||||
id="upload-button"
|
||||
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}
|
||||
onChange={handleChangeInput}
|
||||
onPaste={handleInputPaste}
|
||||
onKeyPress={e => {
|
||||
if (e.key === "Enter") {
|
||||
handleSendMessage();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<IconButton
|
||||
aria-label="emojiPicker"
|
||||
component="span"
|
||||
onClick={handleSendMessage}
|
||||
>
|
||||
<SendIcon className={classes.sendMessageIcons} />
|
||||
</IconButton>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default MessagesInput;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,14 +1,14 @@
|
||||
import React from "react";
|
||||
import MainDrawer from "../../components/Layout/MainDrawer";
|
||||
|
||||
const Dashboard = () => {
|
||||
return (
|
||||
<div>
|
||||
<MainDrawer appTitle="Dashboard">
|
||||
<h1>Todo Dashboard</h1>
|
||||
</MainDrawer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Dashboard;
|
||||
import React from "react";
|
||||
import MainDrawer from "../../components/Layout/MainDrawer";
|
||||
|
||||
const Dashboard = () => {
|
||||
return (
|
||||
<div>
|
||||
<MainDrawer appTitle="Dashboard">
|
||||
<h1>Todo Dashboard</h1>
|
||||
</MainDrawer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Dashboard;
|
||||
|
||||
@@ -1,144 +1,144 @@
|
||||
import React, { useState, useContext } from "react";
|
||||
import { Link as RouterLink } from "react-router-dom";
|
||||
|
||||
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";
|
||||
|
||||
import { AuthContext } from "../../Context/Auth/AuthContext";
|
||||
|
||||
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 classes = useStyles();
|
||||
|
||||
const [user, setUser] = useState({ email: "", password: "" });
|
||||
|
||||
const { handleLogin } = useContext(AuthContext);
|
||||
|
||||
const handleChangeInput = e => {
|
||||
setUser({ ...user, [e.target.name]: e.target.value });
|
||||
};
|
||||
|
||||
return (
|
||||
<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>
|
||||
<Box mt={8}>
|
||||
<Copyright />
|
||||
</Box>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export default Login;
|
||||
import React, { useState, useContext } from "react";
|
||||
import { Link as RouterLink } from "react-router-dom";
|
||||
|
||||
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";
|
||||
|
||||
import { AuthContext } from "../../Context/Auth/AuthContext";
|
||||
|
||||
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 classes = useStyles();
|
||||
|
||||
const [user, setUser] = useState({ email: "", password: "" });
|
||||
|
||||
const { handleLogin } = useContext(AuthContext);
|
||||
|
||||
const handleChangeInput = e => {
|
||||
setUser({ ...user, [e.target.name]: e.target.value });
|
||||
};
|
||||
|
||||
return (
|
||||
<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>
|
||||
<Box mt={8}>
|
||||
<Copyright />
|
||||
</Box>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export default Login;
|
||||
|
||||
@@ -1,154 +1,154 @@
|
||||
import React, { useState } from "react";
|
||||
|
||||
import { useHistory } from "react-router-dom";
|
||||
import api from "../../util/api";
|
||||
import { Link as RouterLink } from "react-router-dom";
|
||||
|
||||
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";
|
||||
|
||||
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 [user, setUser] = useState({ name: "", email: "", password: "" });
|
||||
|
||||
const handleChangeInput = e => {
|
||||
setUser({ ...user, [e.target.name]: e.target.value });
|
||||
};
|
||||
|
||||
const handleSignUp = async e => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
await api.put("/auth/signup", user);
|
||||
} catch (err) {
|
||||
alert(err);
|
||||
}
|
||||
history.push("/login");
|
||||
};
|
||||
|
||||
return (
|
||||
<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>
|
||||
|
||||
<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;
|
||||
import React, { useState } from "react";
|
||||
|
||||
import { useHistory } from "react-router-dom";
|
||||
import api from "../../util/api";
|
||||
import { Link as RouterLink } from "react-router-dom";
|
||||
|
||||
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";
|
||||
|
||||
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 [user, setUser] = useState({ name: "", email: "", password: "" });
|
||||
|
||||
const handleChangeInput = e => {
|
||||
setUser({ ...user, [e.target.name]: e.target.value });
|
||||
};
|
||||
|
||||
const handleSignUp = async e => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
await api.put("/auth/signup", user);
|
||||
} catch (err) {
|
||||
alert(err);
|
||||
}
|
||||
history.push("/login");
|
||||
};
|
||||
|
||||
return (
|
||||
<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>
|
||||
|
||||
<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;
|
||||
|
||||
@@ -1,126 +1,126 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useHistory } from "react-router-dom";
|
||||
import api from "../../util/api";
|
||||
import MainDrawer from "../../components/Layout/MainDrawer";
|
||||
import openSocket from "socket.io-client";
|
||||
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
|
||||
import Container from "@material-ui/core/Container";
|
||||
import Grid from "@material-ui/core/Grid";
|
||||
import Paper from "@material-ui/core/Paper";
|
||||
import Bateryinfo from "./components/Bateryinfo";
|
||||
import Qrcode from "./components/Qrcode";
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
root: {
|
||||
display: "flex",
|
||||
},
|
||||
|
||||
title: {
|
||||
flexGrow: 1,
|
||||
},
|
||||
|
||||
appBarSpacer: theme.mixins.toolbar,
|
||||
content: {
|
||||
flexGrow: 1,
|
||||
|
||||
overflow: "auto",
|
||||
},
|
||||
container: {
|
||||
// paddingTop: theme.spacing(4),
|
||||
// paddingBottom: theme.spacing(4),
|
||||
height: `calc(100% - 64px)`,
|
||||
},
|
||||
paper: {
|
||||
padding: theme.spacing(2),
|
||||
display: "flex",
|
||||
overflow: "auto",
|
||||
flexDirection: "column",
|
||||
},
|
||||
fixedHeight: {
|
||||
height: 640,
|
||||
},
|
||||
}));
|
||||
|
||||
const WhatsAuth = () => {
|
||||
const classes = useStyles();
|
||||
const history = useHistory();
|
||||
|
||||
const [qrCode, setQrCode] = useState("");
|
||||
const [session, setSession] = useState({});
|
||||
|
||||
useEffect(() => {
|
||||
const fetchSession = async () => {
|
||||
try {
|
||||
const res = await api.get("/whatsapp/session");
|
||||
setQrCode(res.data.qrcode);
|
||||
setSession(res.data);
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
};
|
||||
fetchSession();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
|
||||
|
||||
socket.on("qrcode", data => {
|
||||
if (data.action === "update") {
|
||||
setQrCode(data.qr);
|
||||
}
|
||||
});
|
||||
|
||||
socket.on("whats_auth", data => {
|
||||
if (data.action === "authentication") {
|
||||
history.push("/chat");
|
||||
setQrCode("");
|
||||
setSession(data.session);
|
||||
}
|
||||
});
|
||||
|
||||
return () => {
|
||||
socket.disconnect();
|
||||
};
|
||||
}, [history]);
|
||||
|
||||
console.log(session);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<MainDrawer appTitle="QR Code">
|
||||
<div className={classes.root}>
|
||||
<main className={classes.content}>
|
||||
<div className={classes.appBarSpacer} />
|
||||
<Container maxWidth="lg" className={classes.container}>
|
||||
<Grid container spacing={3}>
|
||||
{session.status === "pending" ? (
|
||||
<Grid item xs={6}>
|
||||
<Paper className={classes.paper}>
|
||||
<Qrcode qrCode={qrCode} />
|
||||
</Paper>
|
||||
</Grid>
|
||||
) : (
|
||||
<Grid item xs={6}>
|
||||
<Paper className={classes.paper}>
|
||||
<Bateryinfo sessio={session} />
|
||||
</Paper>
|
||||
</Grid>
|
||||
)}
|
||||
|
||||
{/* <Grid item xs={12} md={4} lg={3}>
|
||||
<Paper className={fixedHeightPaper}>
|
||||
<h1>paper2</h1>
|
||||
</Paper>
|
||||
</Grid> */}
|
||||
</Grid>
|
||||
</Container>
|
||||
</main>
|
||||
</div>
|
||||
</MainDrawer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default WhatsAuth;
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useHistory } from "react-router-dom";
|
||||
import api from "../../util/api";
|
||||
import MainDrawer from "../../components/Layout/MainDrawer";
|
||||
import openSocket from "socket.io-client";
|
||||
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
|
||||
import Container from "@material-ui/core/Container";
|
||||
import Grid from "@material-ui/core/Grid";
|
||||
import Paper from "@material-ui/core/Paper";
|
||||
import Bateryinfo from "./components/Bateryinfo";
|
||||
import Qrcode from "./components/Qrcode";
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
root: {
|
||||
display: "flex",
|
||||
},
|
||||
|
||||
title: {
|
||||
flexGrow: 1,
|
||||
},
|
||||
|
||||
appBarSpacer: theme.mixins.toolbar,
|
||||
content: {
|
||||
flexGrow: 1,
|
||||
|
||||
overflow: "auto",
|
||||
},
|
||||
container: {
|
||||
// paddingTop: theme.spacing(4),
|
||||
// paddingBottom: theme.spacing(4),
|
||||
height: `calc(100% - 64px)`,
|
||||
},
|
||||
paper: {
|
||||
padding: theme.spacing(2),
|
||||
display: "flex",
|
||||
overflow: "auto",
|
||||
flexDirection: "column",
|
||||
},
|
||||
fixedHeight: {
|
||||
height: 640,
|
||||
},
|
||||
}));
|
||||
|
||||
const WhatsAuth = () => {
|
||||
const classes = useStyles();
|
||||
const history = useHistory();
|
||||
|
||||
const [qrCode, setQrCode] = useState("");
|
||||
const [session, setSession] = useState({});
|
||||
|
||||
useEffect(() => {
|
||||
const fetchSession = async () => {
|
||||
try {
|
||||
const res = await api.get("/whatsapp/session");
|
||||
setQrCode(res.data.qrcode);
|
||||
setSession(res.data);
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
};
|
||||
fetchSession();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
|
||||
|
||||
socket.on("qrcode", data => {
|
||||
if (data.action === "update") {
|
||||
setQrCode(data.qr);
|
||||
}
|
||||
});
|
||||
|
||||
socket.on("whats_auth", data => {
|
||||
if (data.action === "authentication") {
|
||||
history.push("/chat");
|
||||
setQrCode("");
|
||||
setSession(data.session);
|
||||
}
|
||||
});
|
||||
|
||||
return () => {
|
||||
socket.disconnect();
|
||||
};
|
||||
}, [history]);
|
||||
|
||||
console.log(session);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<MainDrawer appTitle="QR Code">
|
||||
<div className={classes.root}>
|
||||
<main className={classes.content}>
|
||||
<div className={classes.appBarSpacer} />
|
||||
<Container maxWidth="lg" className={classes.container}>
|
||||
<Grid container spacing={3}>
|
||||
{session.status === "pending" ? (
|
||||
<Grid item xs={6}>
|
||||
<Paper className={classes.paper}>
|
||||
<Qrcode qrCode={qrCode} />
|
||||
</Paper>
|
||||
</Grid>
|
||||
) : (
|
||||
<Grid item xs={6}>
|
||||
<Paper className={classes.paper}>
|
||||
<Bateryinfo sessio={session} />
|
||||
</Paper>
|
||||
</Grid>
|
||||
)}
|
||||
|
||||
{/* <Grid item xs={12} md={4} lg={3}>
|
||||
<Paper className={fixedHeightPaper}>
|
||||
<h1>paper2</h1>
|
||||
</Paper>
|
||||
</Grid> */}
|
||||
</Grid>
|
||||
</Container>
|
||||
</main>
|
||||
</div>
|
||||
</MainDrawer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default WhatsAuth;
|
||||
|
||||
@@ -1,34 +1,34 @@
|
||||
import React from "react";
|
||||
import Link from "@material-ui/core/Link";
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
|
||||
const useStyles = makeStyles({
|
||||
main: {
|
||||
flex: 1,
|
||||
},
|
||||
});
|
||||
|
||||
const Bateryinfo = ({ session }) => {
|
||||
const classes = useStyles();
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Typography component="h2" variant="h6" color="primary" gutterBottom>
|
||||
Bateria
|
||||
</Typography>
|
||||
<Typography component="p" variant="h6">
|
||||
{(session && session.baterry) || "Não disponível"}
|
||||
</Typography>
|
||||
<Typography color="textSecondary" className={classes.main}>
|
||||
Carregando: {(session && session.plugged) || "Não disponível"}
|
||||
</Typography>
|
||||
<div>
|
||||
<Link color="primary" href="#">
|
||||
Verificar bateria
|
||||
</Link>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
export default Bateryinfo;
|
||||
import React from "react";
|
||||
import Link from "@material-ui/core/Link";
|
||||
import { makeStyles } from "@material-ui/core/styles";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
|
||||
const useStyles = makeStyles({
|
||||
main: {
|
||||
flex: 1,
|
||||
},
|
||||
});
|
||||
|
||||
const Bateryinfo = ({ session }) => {
|
||||
const classes = useStyles();
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Typography component="h2" variant="h6" color="primary" gutterBottom>
|
||||
Bateria
|
||||
</Typography>
|
||||
<Typography component="p" variant="h6">
|
||||
{(session && session.baterry) || "Não disponível"}
|
||||
</Typography>
|
||||
<Typography color="textSecondary" className={classes.main}>
|
||||
Carregando: {(session && session.plugged) || "Não disponível"}
|
||||
</Typography>
|
||||
<div>
|
||||
<Link color="primary" href="#">
|
||||
Verificar bateria
|
||||
</Link>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
export default Bateryinfo;
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
import React from "react";
|
||||
import QRCode from "qrcode.react";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
|
||||
const Qrcode = ({ qrCode }) => {
|
||||
return (
|
||||
<div>
|
||||
<Typography component="h2" variant="h6" color="primary" gutterBottom>
|
||||
Leia o QrCode para iniciar a sessão
|
||||
</Typography>
|
||||
<QRCode value={qrCode} size={256} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Qrcode;
|
||||
import React from "react";
|
||||
import QRCode from "qrcode.react";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
|
||||
const Qrcode = ({ qrCode }) => {
|
||||
return (
|
||||
<div>
|
||||
<Typography component="h2" variant="h6" color="primary" gutterBottom>
|
||||
Leia o QrCode para iniciar a sessão
|
||||
</Typography>
|
||||
<QRCode value={qrCode} size={256} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Qrcode;
|
||||
|
||||
Reference in New Issue
Block a user