cheveguerra/whaticket-community
1
0
Fork 0
mirror of https://github.com/cheveguerra/whaticket-community.git synced 2026-04-20 12:49:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

New tickets logic on frontend

Browse Source
This commit is contained in:
canove
2020-07-17 17:58:34 -03:00
parent 9da6c3ceb2
commit 940285f63e
11 changed files with 638 additions and 508 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
backend/src/controllers/TicketController.js
View File

@@ -3,11 +3,13 @@ const Sequelize = require("sequelize");
const Ticket = require("../models/Ticket"); const Ticket = require("../models/Ticket");
const Contact = require("../models/Contact"); const Contact = require("../models/Contact");
const { getIO } = require("../libs/socket");
exports.index = async (req, res) => { exports.index = async (req, res) => {
const { status = "" } = req.query; const { status = "" } = req.query;
let whereCondition; let whereCondition;
if (!status) { if (!status || status === "open") {
whereCondition = ["pending", "open"]; whereCondition = ["pending", "open"];
} else { } else {
whereCondition = [status]; whereCondition = [status];
@@ -51,6 +53,7 @@ exports.store = async (req, res) => {
}; };
exports.update = async (req, res) => { exports.update = async (req, res) => {
const io = getIO();
const { ticketId } = req.params; const { ticketId } = req.params;
const ticket = await Ticket.findByPk(ticketId, { const ticket = await Ticket.findByPk(ticketId, {
@@ -84,5 +87,10 @@ exports.update = async (req, res) => {
await ticket.update(req.body); await ticket.update(req.body);
io.to("notification").emit("ticket", {
action: "updateStatus",
ticket: ticket,
});
res.status(200).json(ticket); res.status(200).json(ticket);
}; };

1
backend/src/services/wbotMessageListener.js
View File

@@ -133,6 +133,7 @@ const wbotMessageListener = () => {
action: "create", action: "create",
message: serializedMessage, message: serializedMessage,
ticket: serializaedTicket, ticket: serializaedTicket,
contact: contact,
}); });
let chat = await msg.getChat(); let chat = await msg.getChat();

2
frontend/src/components/Layout/MainDrawer.js
View File

@@ -220,7 +220,7 @@ const MainDrawer = ({ appTitle, children }) => {
<main className={classes.content}> <main className={classes.content}>
<div className={classes.appBarSpacer} /> <div className={classes.appBarSpacer} />
{children ? children : <h1>Dashboard</h1>} {children ? children : null}
</main> </main>
</div> </div>
); );

55
frontend/src/pages/Chat/Chat.js
View File

@@ -4,15 +4,14 @@ import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper"; import Paper from "@material-ui/core/Paper";
import { makeStyles } from "@material-ui/core/styles"; import { makeStyles } from "@material-ui/core/styles";
import ContactsList from "./components/ContactsList/ContactsList"; import TicketsList from "./components/TicketsList/TicketsList";
import MessagesList from "./components/MessagesList/MessagesList"; import MessagesList from "./components/MessagesList/MessagesList";
import MainDrawer from "../../components/Layout/MainDrawer";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(theme => ({
chatContainer: { chatContainer: {
flex: 1, flex: 1,
backgroundColor: "#eee", // backgroundColor: "#eee",
// padding: 20, padding: theme.spacing(4),
height: `calc(100% - 64px)`, height: `calc(100% - 64px)`,
overflowY: "hidden", overflowY: "hidden",
}, },
@@ -48,36 +47,28 @@ const useStyles = makeStyles(theme => ({
const Chat = () => { const Chat = () => {
const classes = useStyles(); const classes = useStyles();
const { contactId } = useParams(); const { ticketId } = useParams();
return ( return (
<div> <div className={classes.chatContainer}>
<MainDrawer appTitle="Chat"> <Paper square className={classes.chatPapper}>
<div className={classes.chatContainer}> <Grid container spacing={0}>
<Paper square className={classes.chatPapper}> <Grid item xs={4} className={classes.contactsWrapper}>
<Grid container spacing={0}> <TicketsList />
<Grid item xs={4} className={classes.contactsWrapper}> </Grid>
<ContactsList /> <Grid item xs={8} className={classes.messagessWrapper}>
</Grid> {ticketId ? (
<Grid item xs={8} className={classes.messagessWrapper}> <>
{contactId ? ( <MessagesList />
<> </>
<MessagesList /> ) : (
</> <Paper square variant="outlined" className={classes.welcomeMsg}>
) : ( <span>Selecione um contato para começar a conversar</span>
<Paper </Paper>
square )}
variant="outlined" </Grid>
className={classes.welcomeMsg} </Grid>
> </Paper>
<span>Selecione um contato para começar a conversar</span>
</Paper>
)}
</Grid>
</Grid>
</Paper>
</div>
</MainDrawer>
</div> </div>
); );
}; };

378
frontend/src/pages/Chat/components/ContactsList/ContactsList.js
View File

@@ -1,378 +0,0 @@
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 { parseISO, format } from "date-fns";
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("This browser doesn't support notifications");
} 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} - ${format(new Date(), "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"
>
{format(parseISO(contact.updatedAt), "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;

16
frontend/src/pages/Chat/components/MessagesInput/MessagesInput.js
View File

@@ -102,7 +102,7 @@ const useStyles = makeStyles(theme => ({
const MessagesInput = ({ searchParam }) => { const MessagesInput = ({ searchParam }) => {
const classes = useStyles(); const classes = useStyles();
const { contactId } = useParams(); const { ticketId } = useParams();
const userId = localStorage.getItem("userId"); const userId = localStorage.getItem("userId");
const username = localStorage.getItem("username"); const username = localStorage.getItem("username");
@@ -120,7 +120,7 @@ const MessagesInput = ({ searchParam }) => {
setShowEmoji(false); setShowEmoji(false);
setMedia({}); setMedia({});
}; };
}, [contactId]); }, [ticketId]);
const handleChangeInput = e => { const handleChangeInput = e => {
setInputMessage(e.target.value); setInputMessage(e.target.value);
@@ -157,10 +157,10 @@ const MessagesInput = ({ searchParam }) => {
const formData = new FormData(); const formData = new FormData();
formData.append("media", media.raw); formData.append("media", media.raw);
formData.append("userId", userId); formData.append("userId", userId);
formData.append("messageBody", media.name); formData.append("body", media.name);
try { try {
await api.post(`/messages/${contactId}`, formData); await api.post(`/messages/${ticketId}`, formData);
} catch (err) { } catch (err) {
console.log(err); console.log(err);
alert(err); alert(err);
@@ -176,10 +176,10 @@ const MessagesInput = ({ searchParam }) => {
read: 1, read: 1,
userId: userId, userId: userId,
mediaUrl: "", mediaUrl: "",
messageBody: `${username}: ${inputMessage.trim()}`, body: `${username}: ${inputMessage.trim()}`,
}; };
try { try {
await api.post(`/messages/${contactId}`, message); await api.post(`/messages/${ticketId}`, message);
} catch (err) { } catch (err) {
alert(err); alert(err);
} }
@@ -218,10 +218,10 @@ const MessagesInput = ({ searchParam }) => {
const filename = `${new Date().getTime()}.mp3`; const filename = `${new Date().getTime()}.mp3`;
console.log(blob); console.log(blob);
formData.append("media", blob, filename); formData.append("media", blob, filename);
formData.append("messageBody", filename); formData.append("body", filename);
formData.append("userId", userId); formData.append("userId", userId);
try { try {
await api.post(`/messages/${contactId}`, formData); await api.post(`/messages/${ticketId}`, formData);
} catch (err) { } catch (err) {
console.log(err); console.log(err);
alert(err); alert(err);

103
frontend/src/pages/Chat/components/MessagesList/MessagesList.js
View File

@@ -1,5 +1,5 @@
import React, { useState, useEffect, useRef } from "react"; import React, { useState, useEffect, useRef } from "react";
import { useParams } from "react-router-dom"; import { useParams, useHistory } from "react-router-dom";
import { isSameDay, parseISO, format } from "date-fns"; import { isSameDay, parseISO, format } from "date-fns";
import openSocket from "socket.io-client"; import openSocket from "socket.io-client";
@@ -11,13 +11,11 @@ import AccessTimeIcon from "@material-ui/icons/AccessTime";
import CircularProgress from "@material-ui/core/CircularProgress"; import CircularProgress from "@material-ui/core/CircularProgress";
import DoneIcon from "@material-ui/icons/Done"; import DoneIcon from "@material-ui/icons/Done";
import DoneAllIcon from "@material-ui/icons/DoneAll"; import DoneAllIcon from "@material-ui/icons/DoneAll";
import SearchIcon from "@material-ui/icons/Search";
import InputBase from "@material-ui/core/InputBase";
import Card from "@material-ui/core/Card"; import Card from "@material-ui/core/Card";
import CardHeader from "@material-ui/core/CardHeader"; import CardHeader from "@material-ui/core/CardHeader";
import IconButton from "@material-ui/core/IconButton"; import ReplayIcon from "@material-ui/icons/Replay";
import MoreVertIcon from "@material-ui/icons/MoreVert";
import Avatar from "@material-ui/core/Avatar"; import Avatar from "@material-ui/core/Avatar";
import Button from "@material-ui/core/Button";
import { green } from "@material-ui/core/colors"; import { green } from "@material-ui/core/colors";
import whatsBackground from "../../../../Images/wa-background.png"; import whatsBackground from "../../../../Images/wa-background.png";
@@ -40,32 +38,13 @@ const useStyles = makeStyles(theme => ({
flex: "none", flex: "none",
}, },
messagesSearchInputWrapper: { actionButtons: {
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: 6,
marginRight: 6, marginRight: 6,
alignSelf: "center", alignSelf: "center",
}, marginLeft: "auto",
"& > *": {
settingsIcon: { margin: theme.spacing(1),
alignSelf: "center", },
padding: 8,
}, },
messagesListWrapper: { messagesListWrapper: {
@@ -201,13 +180,16 @@ const useStyles = makeStyles(theme => ({
})); }));
const MessagesList = () => { const MessagesList = () => {
const { contactId } = useParams(); const { ticketId } = useParams();
const history = useHistory();
const classes = useStyles(); const classes = useStyles();
const token = localStorage.getItem("token"); const token = localStorage.getItem("token");
const userId = localStorage.getItem("userId");
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [contact, setContact] = useState({}); const [contact, setContact] = useState({});
const [ticket, setTicket] = useState({});
const [messagesList, setMessagesList] = useState([]); const [messagesList, setMessagesList] = useState([]);
const [hasMore, setHasMore] = useState(false); const [hasMore, setHasMore] = useState(false);
const [searchParam, setSearchParam] = useState(""); const [searchParam, setSearchParam] = useState("");
@@ -223,10 +205,11 @@ const MessagesList = () => {
const delayDebounceFn = setTimeout(() => { const delayDebounceFn = setTimeout(() => {
const fetchMessages = async () => { const fetchMessages = async () => {
try { try {
const res = await api.get("/messages/" + contactId, { const res = await api.get("/messages/" + ticketId, {
params: { searchParam, pageNumber }, params: { searchParam, pageNumber },
}); });
setContact(res.data.contact); setContact(res.data.contact);
setTicket(res.data.ticket);
setMessagesList(prevMessages => { setMessagesList(prevMessages => {
return [...res.data.messages, ...prevMessages]; return [...res.data.messages, ...prevMessages];
}); });
@@ -243,12 +226,12 @@ const MessagesList = () => {
fetchMessages(); fetchMessages();
}, 1000); }, 1000);
return () => clearTimeout(delayDebounceFn); return () => clearTimeout(delayDebounceFn);
}, [searchParam, pageNumber, contactId, token]); }, [searchParam, pageNumber, ticketId, token]);
useEffect(() => { useEffect(() => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL); const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
socket.emit("joinChatBox", contactId, () => {}); socket.emit("joinChatBox", ticketId, () => {});
socket.on("appMessage", data => { socket.on("appMessage", data => {
if (data.action === "create") { if (data.action === "create") {
@@ -265,7 +248,7 @@ const MessagesList = () => {
setPageNumber(1); setPageNumber(1);
setMessagesList([]); setMessagesList([]);
}; };
}, [contactId]); }, [ticketId]);
const handleSearch = e => { const handleSearch = e => {
setSearchParam(e.target.value); setSearchParam(e.target.value);
@@ -340,6 +323,18 @@ const MessagesList = () => {
} }
}; };
const handleUpdateTicketStatus = async (status, userId) => {
try {
await api.put(`/tickets/${ticketId}`, {
status: status,
userId: userId || null,
});
} catch (err) {
console.log(err);
}
history.push("/chat");
};
const renderMessageAck = message => { const renderMessageAck = message => {
if (message.ack === 0) { if (message.ack === 0) {
return <AccessTimeIcon fontSize="small" className={classes.ackIcons} />; return <AccessTimeIcon fontSize="small" className={classes.ackIcons} />;
@@ -401,13 +396,13 @@ const MessagesList = () => {
const renderMessages = () => { const renderMessages = () => {
if (messagesList.length > 0) { if (messagesList.length > 0) {
const viewMessagesList = messagesList.map((message, index) => { const viewMessagesList = messagesList.map((message, index) => {
if (message.userId === 0) { if (!message.userId) {
return [ return [
renderDailyTimestamps(message, index), renderDailyTimestamps(message, index),
<div className={classes.messageLeft} key={message.id}> <div className={classes.messageLeft} key={message.id}>
{message.mediaUrl && checkMessaageMedia(message)} {message.mediaUrl && checkMessaageMedia(message)}
<div className={classes.textContentItem}> <div className={classes.textContentItem}>
{message.messageBody} {message.body}
<span className={classes.timestamp}> <span className={classes.timestamp}>
{format(parseISO(message.createdAt), "HH:mm")} {format(parseISO(message.createdAt), "HH:mm")}
</span> </span>
@@ -420,7 +415,7 @@ const MessagesList = () => {
<div className={classes.messageRight} key={message.id}> <div className={classes.messageRight} key={message.id}>
{message.mediaUrl && checkMessaageMedia(message)} {message.mediaUrl && checkMessaageMedia(message)}
<div className={classes.textContentItem}> <div className={classes.textContentItem}>
{message.messageBody} {message.body}
<span className={classes.timestamp}> <span className={classes.timestamp}>
{format(parseISO(message.createdAt), "HH:mm")} {format(parseISO(message.createdAt), "HH:mm")}
{renderMessageAck(message)} {renderMessageAck(message)}
@@ -444,8 +439,8 @@ const MessagesList = () => {
titleTypographyProps={{ noWrap: true }} titleTypographyProps={{ noWrap: true }}
subheaderTypographyProps={{ noWrap: true }} subheaderTypographyProps={{ noWrap: true }}
avatar={<Avatar alt="contact_image" src={contact.profilePicUrl} />} avatar={<Avatar alt="contact_image" src={contact.profilePicUrl} />}
title={contact.name} title={`${contact.name} #${ticket.id}`}
subheader="Contact Status" subheader={`Atribuído á ${ticket.userId}`}
/> />
) : ( ) : (
<CardHeader <CardHeader
@@ -457,20 +452,22 @@ const MessagesList = () => {
/> />
)} )}
<div className={classes.messagesSearchInputWrapper}> <div className={classes.actionButtons}>
<SearchIcon className={classes.searchIcon} /> <Button
<InputBase startIcon={<ReplayIcon />}
type="search" size="small"
className={classes.messagesSearchInput} onClick={e => handleUpdateTicketStatus("pending")}
placeholder="Pesquisar mensagens" >
onChange={handleSearch} Retornar
value={searchParam} </Button>
/> <Button
</div> size="small"
<div className={classes.settingsIcon}> variant="contained"
<IconButton aria-label="settings"> color="primary"
<MoreVertIcon /> onClick={e => handleUpdateTicketStatus("closed", userId)}
</IconButton> >
Resolver
</Button>
</div> </div>
</Card> </Card>
<div className={classes.messagesListWrapper}> <div className={classes.messagesListWrapper}>

515
frontend/src/pages/Chat/components/TicketsList/TicketsList.js Normal file
View File

@@ -0,0 +1,515 @@
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 { parseISO, format } from "date-fns";
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 Button from "@material-ui/core/Button";
// import Fab from "@material-ui/core/Fab";
// import AddContactModal from "../AddContact/AddContactModal";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import MoveToInboxIcon from "@material-ui/icons/MoveToInbox";
import CheckCircleOutlineIcon from "@material-ui/icons/CheckCircleOutline";
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,
},
openTicketsList: {
position: "relative",
borderTopLeftRadius: 0,
borderTopRightRadius: 0,
borderBottomRightRadius: 0,
height: "50%",
overflowY: "scroll",
"&::-webkit-scrollbar": {
width: "8px",
},
"&::-webkit-scrollbar-thumb": {
boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)",
backgroundColor: "#e8e8e8",
},
},
closedTicketsList: {
position: "relative",
borderTopLeftRadius: 0,
borderTopRightRadius: 0,
borderBottomRightRadius: 0,
flex: 1,
overflowY: "scroll",
"&::-webkit-scrollbar": {
width: "8px",
},
"&::-webkit-scrollbar-thumb": {
boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)",
backgroundColor: "#e8e8e8",
},
},
ticketsListHeader: {
display: "flex",
// flexShrink: 0,
// -webkitBoxAlign: "center",
alignItems: "center",
fontWeight: 600,
fontSize: "16px",
height: "56px",
// backgroundColor: "#eee",
color: "rgb(67, 83, 105)",
padding: "0px 24px",
borderBottom: "1px solid rgba(0, 0, 0, 0.12)",
},
ticketsCount: {
fontWeight: "normal",
color: "rgb(104, 121, 146)",
marginLeft: "8px",
fontSize: "14px",
},
ticket: {
position: "relative",
"& .hidden-button": {
display: "none",
},
"&:hover .hidden-button": {
display: "flex",
position: "absolute",
left: "50%",
},
},
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 TicketsList = () => {
const classes = useStyles();
const token = localStorage.getItem("token");
const userId = +localStorage.getItem("userId");
const { ticketId } = useParams();
const [tickets, setTickets] = useState([]);
const [loading, setLoading] = useState();
const [searchParam, setSearchParam] = useState("");
const [tab, setTab] = useState("open");
// const [modalOpen, setModalOpen] = useState(false);
const history = useHistory();
useEffect(() => {
if (!("Notification" in window)) {
console.log("This browser doesn't support notifications");
} else {
Notification.requestPermission();
}
}, []);
useEffect(() => {
setLoading(true);
const delayDebounceFn = setTimeout(() => {
const fetchContacts = async () => {
try {
const res = await api.get("/tickets", {
params: { searchParam, status: tab },
});
setTickets(res.data);
setLoading(false);
} catch (err) {
console.log(err);
}
};
fetchContacts();
}, 1000);
return () => clearTimeout(delayDebounceFn);
}, [searchParam, token, tab]);
useEffect(() => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
socket.emit("joinNotification");
socket.on("ticket", data => {
if (data.action === "updateUnread") {
resetUnreadMessages(data.ticketId);
}
if (data.action === "updateStatus") {
updateTicketStatus(data);
}
});
socket.on("appMessage", data => {
if (data.action === "create") {
updateUnreadMessagesCount(data);
if (
ticketId &&
data.message.ticketId === +ticketId &&
document.visibilityState === "visible"
)
return;
showDesktopNotification(data);
}
});
return () => {
socket.disconnect();
};
}, [ticketId]);
const updateUnreadMessagesCount = data => {
setTickets(prevState => {
const ticketIndex = prevState.findIndex(
ticket => ticket.id === data.message.ticketId
);
if (ticketIndex !== -1) {
let aux = [...prevState];
aux[ticketIndex].unreadMessages++;
aux[ticketIndex].lastMessage = data.message.body;
aux.unshift(aux.splice(ticketIndex, 1)[0]);
return aux;
} else {
return [data.ticket, ...prevState];
}
});
};
const updateTicketStatus = data => {
setTickets(prevState => {
const ticketIndex = prevState.findIndex(
ticket => ticket.id === data.ticket.id
);
if (ticketIndex !== -1) {
let aux = [...prevState];
aux[ticketIndex] = data.ticket;
return aux;
} else {
return [data.ticket, ...prevState];
}
});
};
const showDesktopNotification = data => {
console.log("data", data);
const options = {
body: `${data.message.body} - ${format(new Date(), "HH:mm")}`,
icon: data.contact.profilePicUrl,
};
new Notification(`Mensagem de ${data.contact.name}`, options);
document.getElementById("sound").play();
};
const resetUnreadMessages = ticketId => {
setTickets(prevState => {
let aux = [...prevState];
let ticketIndex = aux.findIndex(ticket => ticket.id === +ticketId);
aux[ticketIndex].unreadMessages = 0;
return aux;
});
};
const handleSelectTicket = (e, ticket) => {
history.push(`/chat/${ticket.id}`);
};
const handleSearchContact = e => {
// let searchTerm = e.target.value.toLowerCase();
setSearchParam(e.target.value.toLowerCase());
};
const handleChangeTab = (event, newValue) => {
setTab(newValue);
};
const handleAcepptTicket = async ticketId => {
try {
await api.put(`/tickets/${ticketId}`, {
status: "open",
userId: userId,
});
} catch (err) {
alert(err);
}
};
const countTickets = status => {
const ticketsFound = tickets.filter(ticket => ticket.status === status)
.length;
if (ticketsFound === 0) return "";
return ticketsFound;
};
const renderTickets = (status, userId) => {
const viewTickets = tickets.map(
(ticket, index) =>
ticket.status === status && (
<React.Fragment key={ticket.id}>
<ListItem
dense
button
onClick={e => {
if (ticket.status === "pending") return;
handleSelectTicket(e, ticket);
}}
selected={ticketId && +ticketId === ticket.id}
className={classes.ticket}
>
<ListItemAvatar>
<Avatar
src={
ticket.Contact.profilePicUrl
? ticket.Contact.profilePicUrl
: profileDefaultPic
}
></Avatar>
</ListItemAvatar>
<ListItemText
primary={
<span className={classes.contactNameWrapper}>
<Typography
noWrap
component="span"
variant="body2"
color="textPrimary"
>
{ticket.Contact.name}
</Typography>
{ticket.lastMessage && (
<Typography
className={classes.lastMessageTime}
component="span"
variant="body2"
color="textSecondary"
>
{format(parseISO(ticket.updatedAt), "HH:mm")}
</Typography>
)}
</span>
}
secondary={
<span className={classes.contactNameWrapper}>
<Typography
className={classes.contactLastMessage}
noWrap
component="span"
variant="body2"
color="textSecondary"
>
{ticket.lastMessage || <br />}
</Typography>
<Badge
className={classes.newMessagesCount}
badgeContent={ticket.unreadMessages}
classes={{
badge: classes.badgeStyle,
}}
/>
</span>
}
/>
{ticket.status === "pending" ? (
<Button
variant="contained"
size="small"
color="primary"
className="hidden-button"
onClick={e => handleAcepptTicket(ticket.id)}
>
Aceitar
</Button>
) : null}
</ListItem>
<Divider variant="inset" component="li" />
</React.Fragment>
)
);
return viewTickets;
};
return (
<div className={classes.contactsWrapper}>
<Paper square variant="outlined" className={classes.root}>
<Tabs
value={tab}
onChange={handleChangeTab}
variant="fullWidth"
indicatorColor="primary"
textColor="primary"
aria-label="icon label tabs example"
>
<Tab
value="open"
icon={<MoveToInboxIcon />}
label="Caixa de Entrada"
/>
<Tab
value="closed"
icon={<CheckCircleOutlineIcon />}
label="Resolvidos"
/>
</Tabs>
</Paper>
<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>
{loading ? (
<div>
<CircularProgress className={classes.circleLoading} />
</div>
) : null}
</Paper>
{tab === "open" ? (
<>
<Paper variant="outlined" className={classes.openTicketsList}>
<List style={{ paddingTop: 0 }}>
<div className={classes.ticketsListHeader}>
Meus tickets
<span className={classes.ticketsCount}>
{countTickets("open")}
</span>
</div>
{renderTickets("open")}
</List>
</Paper>
<Paper variant="outlined" className={classes.openTicketsList}>
<List style={{ paddingTop: 0 }}>
<div className={classes.ticketsListHeader}>
Aguardando
<span className={classes.ticketsCount}>
{countTickets("pending")}
</span>
</div>
{renderTickets("pending")}
</List>
</Paper>
</>
) : (
<Paper variant="outlined" className={classes.closedTicketsList}>
<List>{renderTickets("closed")}</List>
</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 TicketsList;

5
frontend/src/pages/Home/Dashboard.js
View File

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

49
frontend/src/pages/WhatsAuth/WhatsAuth.js
View File

@@ -1,7 +1,6 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { useHistory } from "react-router-dom"; import { useHistory } from "react-router-dom";
import api from "../../util/api"; import api from "../../util/api";
import MainDrawer from "../../components/Layout/MainDrawer";
import openSocket from "socket.io-client"; import openSocket from "socket.io-client";
import { makeStyles } from "@material-ui/core/styles"; import { makeStyles } from "@material-ui/core/styles";
@@ -89,36 +88,34 @@ const WhatsAuth = () => {
return ( return (
<div> <div>
<MainDrawer appTitle="QR Code"> <div className={classes.root}>
<div className={classes.root}> <main className={classes.content}>
<main className={classes.content}> <div className={classes.appBarSpacer} />
<div className={classes.appBarSpacer} /> <Container maxWidth="lg" className={classes.container}>
<Container maxWidth="lg" className={classes.container}> <Grid container spacing={3}>
<Grid container spacing={3}> {session.status === "pending" ? (
{session.status === "pending" ? ( <Grid item xs={6}>
<Grid item xs={6}> <Paper className={classes.paper}>
<Paper className={classes.paper}> <Qrcode qrCode={qrCode} />
<Qrcode qrCode={qrCode} /> </Paper>
</Paper> </Grid>
</Grid> ) : (
) : ( <Grid item xs={6}>
<Grid item xs={6}> <Paper className={classes.paper}>
<Paper className={classes.paper}> <Bateryinfo sessio={session} />
<Bateryinfo sessio={session} /> </Paper>
</Paper> </Grid>
</Grid> )}
)}
{/* <Grid item xs={12} md={4} lg={3}> {/* <Grid item xs={12} md={4} lg={3}>
<Paper className={fixedHeightPaper}> <Paper className={fixedHeightPaper}>
<h1>paper2</h1> <h1>paper2</h1>
</Paper> </Paper>
</Grid> */} </Grid> */}
</Grid> </Grid>
</Container> </Container>
</main> </main>
</div> </div>
</MainDrawer>
</div> </div>
); );
}; };

12
frontend/src/routes.js
View File

@@ -3,6 +3,7 @@ import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";
import { AuthContext, AuthProvider } from "./Context/Auth/AuthContext"; import { AuthContext, AuthProvider } from "./Context/Auth/AuthContext";
import MainDrawer from "./components/Layout/MainDrawer";
import Dashboard from "./pages/Home/Dashboard"; import Dashboard from "./pages/Home/Dashboard";
import Chat from "./pages/Chat/Chat"; import Chat from "./pages/Chat/Chat";
import Profile from "./pages/Profile/Profile"; import Profile from "./pages/Profile/Profile";
@@ -77,13 +78,14 @@ const Routes = () => {
<BrowserRouter> <BrowserRouter>
<AuthProvider> <AuthProvider>
<Switch> <Switch>
<PrivateRoute exact path="/" component={Dashboard} />
<PrivateRoute exact path="/chat" component={Chat} />
<PrivateRoute exact path="/chat/:contactId" component={Chat} />
<PrivateRoute exact path="/profile" component={Profile} />
<PrivateRoute exact path="/whats-auth" component={WhatsAuth} />
<PublicRoute exact path="/login" component={Login} /> <PublicRoute exact path="/login" component={Login} />
<PublicRoute exact path="/signup" component={Signup} /> <PublicRoute exact path="/signup" component={Signup} />
<MainDrawer>
<PrivateRoute exact path="/" component={Dashboard} />
<PrivateRoute exact path="/chat/:ticketId?" component={Chat} />
<PrivateRoute exact path="/profile" component={Profile} />
<PrivateRoute exact path="/whats-auth" component={WhatsAuth} />
</MainDrawer>
</Switch> </Switch>
</AuthProvider> </AuthProvider>
</BrowserRouter> </BrowserRouter>