mirror of
https://github.com/cheveguerra/whaticket-community.git
synced 2026-04-19 04:09:26 +00:00
564 lines
14 KiB
JavaScript
564 lines
14 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import { useHistory, useParams } from "react-router-dom";
|
|
import openSocket from "socket.io-client";
|
|
import { parseISO, format } from "date-fns";
|
|
|
|
import { makeStyles } from "@material-ui/core/styles";
|
|
import { green } from "@material-ui/core/colors";
|
|
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 Button from "@material-ui/core/Button";
|
|
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";
|
|
import IconButton from "@material-ui/core/IconButton";
|
|
import AddIcon from "@material-ui/icons/Add";
|
|
|
|
import TicketsSkeleton from "../TicketsSkeleton";
|
|
import NewTicketModal from "../NewTicketModal";
|
|
|
|
import api from "../../services/api";
|
|
|
|
const useStyles = makeStyles(theme => ({
|
|
contactsWrapper: {
|
|
position: "relative",
|
|
display: "flex",
|
|
height: "100%",
|
|
flexDirection: "column",
|
|
overflow: "hidden",
|
|
borderTopRightRadius: 0,
|
|
borderBottomRightRadius: 0,
|
|
},
|
|
|
|
tabsHeader: {
|
|
// display: "flex",
|
|
flex: "none",
|
|
backgroundColor: "#eee",
|
|
},
|
|
|
|
settingsIcon: {
|
|
alignSelf: "center",
|
|
marginLeft: "auto",
|
|
padding: 8,
|
|
},
|
|
|
|
openTicketsList: {
|
|
height: "50%",
|
|
overflowY: "scroll",
|
|
"&::-webkit-scrollbar": {
|
|
width: "8px",
|
|
height: "8px",
|
|
},
|
|
"&::-webkit-scrollbar-thumb": {
|
|
boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)",
|
|
backgroundColor: "#e8e8e8",
|
|
},
|
|
borderTop: "1px solid rgba(0, 0, 0, 0.12)",
|
|
},
|
|
|
|
closedTicketsList: {
|
|
flex: 1,
|
|
overflowY: "scroll",
|
|
"&::-webkit-scrollbar": {
|
|
width: "8px",
|
|
height: "8px",
|
|
},
|
|
"&::-webkit-scrollbar-thumb": {
|
|
boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)",
|
|
backgroundColor: "#e8e8e8",
|
|
},
|
|
borderTop: "2px solid rgba(0, 0, 0, 0.12)",
|
|
},
|
|
|
|
ticketsListHeader: {
|
|
display: "flex",
|
|
// flexShrink: 0,
|
|
// -webkitBoxAlign: "center",
|
|
alignItems: "center",
|
|
fontWeight: 500,
|
|
fontSize: "16px",
|
|
height: "56px",
|
|
// backgroundColor: "#eee",
|
|
color: "rgb(67, 83, 105)",
|
|
padding: "0px 12px",
|
|
borderBottom: "1px solid rgba(0, 0, 0, 0.12)",
|
|
},
|
|
|
|
ticketsCount: {
|
|
fontWeight: "normal",
|
|
color: "rgb(104, 121, 146)",
|
|
marginLeft: "8px",
|
|
fontSize: "14px",
|
|
},
|
|
|
|
newTicketBtn: {
|
|
marginLeft: "auto",
|
|
},
|
|
|
|
ticket: {
|
|
position: "relative",
|
|
"& .hidden-button": {
|
|
display: "none",
|
|
},
|
|
"&:hover .hidden-button": {
|
|
display: "flex",
|
|
position: "absolute",
|
|
left: "50%",
|
|
},
|
|
},
|
|
|
|
noTicketsDiv: {
|
|
display: "flex",
|
|
height: "100px",
|
|
margin: 40,
|
|
flexDirection: "column",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
},
|
|
|
|
noTicketsText: {
|
|
textAlign: "center",
|
|
color: "rgb(104, 121, 146)",
|
|
fontSize: "14px",
|
|
lineHeight: "1.4",
|
|
},
|
|
|
|
noTicketsTitle: {
|
|
textAlign: "center",
|
|
fontSize: "16px",
|
|
fontWeight: "600",
|
|
margin: "0px",
|
|
},
|
|
|
|
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: "50%",
|
|
left: "50%",
|
|
marginTop: 12,
|
|
// marginLeft: -12,
|
|
},
|
|
}));
|
|
|
|
const TicketsList = () => {
|
|
const classes = useStyles();
|
|
const history = useHistory();
|
|
|
|
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 [newTicketModalOpen, setNewTicketModalOpen] = useState(true);
|
|
|
|
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 => {
|
|
console.log(data);
|
|
if (data.action === "create") {
|
|
updateUnreadMessagesCount(data);
|
|
if (
|
|
(ticketId &&
|
|
data.message.ticketId === +ticketId &&
|
|
document.visibilityState === "visible") ||
|
|
(data.ticket.userId !== userId && data.ticket.userId)
|
|
)
|
|
return;
|
|
showDesktopNotification(data);
|
|
}
|
|
});
|
|
|
|
return () => {
|
|
socket.disconnect();
|
|
};
|
|
}, [ticketId, userId]);
|
|
|
|
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) {
|
|
return [data.ticket, ...prevState];
|
|
} else {
|
|
let aux = [...prevState];
|
|
aux[ticketIndex] = data.ticket;
|
|
return aux;
|
|
}
|
|
});
|
|
};
|
|
|
|
const showDesktopNotification = 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 => {
|
|
const ticketIndex = prevState.findIndex(
|
|
ticket => ticket.id === +ticketId
|
|
);
|
|
if (ticketIndex !== -1) {
|
|
let aux = [...prevState];
|
|
aux[ticketIndex].unreadMessages = 0;
|
|
return aux;
|
|
} else {
|
|
return prevState;
|
|
}
|
|
});
|
|
};
|
|
|
|
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);
|
|
}
|
|
history.push(`/chat/${ticketId}`);
|
|
};
|
|
|
|
const handleOpenNewTicketModal = () => {};
|
|
|
|
const countTickets = (status, userId) => {
|
|
const ticketsFound = tickets.filter(
|
|
t => t.status === status && t.userId === userId
|
|
).length;
|
|
|
|
if (ticketsFound === 0) return "";
|
|
return ticketsFound;
|
|
};
|
|
|
|
const renderTickets = (status, userId) => {
|
|
const viewTickets = tickets.map(ticket => {
|
|
if (
|
|
(ticket.status === status && ticket.userId === userId) ||
|
|
(ticket.status === "closed" && status === "closed")
|
|
)
|
|
return (
|
|
<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
|
|
}
|
|
></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>
|
|
);
|
|
else return null;
|
|
});
|
|
|
|
if (loading) {
|
|
return <TicketsSkeleton />;
|
|
} else if (countTickets(status, userId) === "" && status !== "closed") {
|
|
return (
|
|
<div className={classes.noTicketsDiv}>
|
|
<span className={classes.noTicketsTitle}>
|
|
{status === "pending" ? "Tudo resolvido" : "Pronto pra mais?"}
|
|
</span>
|
|
<p className={classes.noTicketsText}>
|
|
{status === "pending"
|
|
? "Nenhum ticket pendente por enquanto. Hora do café!"
|
|
: "Aceite um ticket da fila para começar."}
|
|
</p>
|
|
</div>
|
|
);
|
|
} else {
|
|
return viewTickets;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Paper elevation={0} variant="outlined" className={classes.contactsWrapper}>
|
|
<NewTicketModal
|
|
modalOpen={newTicketModalOpen}
|
|
onClose={e => setNewTicketModalOpen(false)}
|
|
/>
|
|
<Paper elevation={0} square className={classes.tabsHeader}>
|
|
<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 square elevation={0} className={classes.contactsSearchBox}>
|
|
<div className={classes.serachInputWrapper}>
|
|
<SearchIcon className={classes.searchIcon} />
|
|
<InputBase
|
|
className={classes.contactsSearchInput}
|
|
placeholder="Buscar contatos"
|
|
type="search"
|
|
onChange={handleSearchContact}
|
|
/>
|
|
</div>
|
|
</Paper>
|
|
{tab === "open" ? (
|
|
<>
|
|
<Paper square elevation={0} className={classes.openTicketsList}>
|
|
<List style={{ paddingTop: 0 }}>
|
|
<div className={classes.ticketsListHeader}>
|
|
Meus tickets
|
|
<span className={classes.ticketsCount}>
|
|
{countTickets("open", userId)}
|
|
</span>
|
|
<IconButton
|
|
aria-label="add ticket"
|
|
className={classes.newTicketBtn}
|
|
onClick={e => setNewTicketModalOpen(true)}
|
|
>
|
|
<AddIcon />
|
|
</IconButton>
|
|
</div>
|
|
{renderTickets("open", userId)}
|
|
</List>
|
|
</Paper>
|
|
<Paper square elevation={0} className={classes.openTicketsList}>
|
|
<List style={{ paddingTop: 0 }}>
|
|
<div className={classes.ticketsListHeader}>
|
|
Aguardando
|
|
<span className={classes.ticketsCount}>
|
|
{countTickets("pending", null)}
|
|
</span>
|
|
</div>
|
|
{renderTickets("pending", null)}
|
|
</List>
|
|
</Paper>
|
|
</>
|
|
) : (
|
|
<Paper square elevation={0} className={classes.closedTicketsList}>
|
|
<List>{renderTickets("closed", userId)}</List>
|
|
</Paper>
|
|
)}
|
|
<audio id="sound" preload="auto">
|
|
<source src={require("../../assets/sound.mp3")} type="audio/mpeg" />
|
|
<source src={require("../../assets/sound.ogg")} type="audio/ogg" />
|
|
<embed hidden={true} autostart="false" loop={false} src="./sound.mp3" />
|
|
</audio>
|
|
</Paper>
|
|
);
|
|
};
|
|
|
|
export default TicketsList;
|