cheveguerra/whaticket-community
1
0
Fork 0
mirror of https://github.com/cheveguerra/whaticket-community.git synced 2026-04-17 19:37:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

improvement: started moving notifications to appbar

Browse Source
This commit is contained in:
canove
2020-08-21 14:11:24 -03:00
parent b12deadc5f
commit 3fe436fd34
5 changed files with 8 additions and 350 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
frontend/src/components/MainDrawer/MainListItems.js
View File

@@ -1,60 +0,0 @@
import React from "react";
import { Link as RouterLink } from "react-router-dom";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import DashboardIcon from "@material-ui/icons/Dashboard";
import WhatsAppIcon from "@material-ui/icons/WhatsApp";
import SyncAltIcon from "@material-ui/icons/SyncAlt";
import ContactPhoneIcon from "@material-ui/icons/ContactPhone";
import { i18n } from "../../translate/i18n";
function ListItemLink(props) {
const { icon, primary, to, className } = props;
const renderLink = React.useMemo(
() =>
React.forwardRef((itemProps, ref) => (
<RouterLink to={to} ref={ref} {...itemProps} />
)),
[to]
);
return (
<li>
<ListItem button component={renderLink} className={className}>
{icon ? <ListItemIcon>{icon}</ListItemIcon> : null}
<ListItemText primary={primary} />
</ListItem>
</li>
);
}
const MainListItems = () => {
return (
<div>
<ListItemLink to="/" primary="Dashboard" icon={<DashboardIcon />} />
<ListItemLink
to="/whats-auth"
primary={i18n.t("mainDrawer.listItems.connection")}
icon={<SyncAltIcon />}
/>
<ListItemLink
to="/chat"
primary={i18n.t("mainDrawer.listItems.tickets")}
icon={<WhatsAppIcon />}
/>
<ListItemLink
to="/contacts"
primary={i18n.t("mainDrawer.listItems.contacts")}
icon={<ContactPhoneIcon />}
/>
</div>
);
};
export default MainListItems;

231
frontend/src/components/MainDrawer/index.js
View File

@@ -1,231 +0,0 @@
import React, { useState, useContext, useEffect } from "react";
import clsx from "clsx";
import { makeStyles } from "@material-ui/core/styles";
import Drawer from "@material-ui/core/Drawer";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import List from "@material-ui/core/List";
import Typography from "@material-ui/core/Typography";
import Divider from "@material-ui/core/Divider";
import IconButton from "@material-ui/core/IconButton";
import Badge from "@material-ui/core/Badge";
import MenuIcon from "@material-ui/icons/Menu";
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
import NotificationsIcon from "@material-ui/icons/Notifications";
import MainListItems from "./MainListItems";
import AccountCircle from "@material-ui/icons/AccountCircle";
import MenuItem from "@material-ui/core/MenuItem";
import Menu from "@material-ui/core/Menu";
import { AuthContext } from "../../context/Auth/AuthContext";
const drawerWidth = 240;
const useStyles = makeStyles(theme => ({
root: {
display: "flex",
height: "100vh",
},
toolbar: {
paddingRight: 24, // keep right padding when drawer closed
},
toolbarIcon: {
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
padding: "0 8px",
minHeight: "48px",
},
appBar: {
zIndex: theme.zIndex.drawer + 1,
transition: theme.transitions.create(["width", "margin"], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
},
appBarShift: {
marginLeft: drawerWidth,
width: `calc(100% - ${drawerWidth}px)`,
transition: theme.transitions.create(["width", "margin"], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
},
menuButton: {
marginRight: 36,
},
menuButtonHidden: {
display: "none",
},
title: {
flexGrow: 1,
},
drawerPaper: {
position: "relative",
whiteSpace: "nowrap",
width: drawerWidth,
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
},
drawerPaperClose: {
overflowX: "hidden",
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
width: theme.spacing(7),
[theme.breakpoints.up("sm")]: {
width: theme.spacing(9),
},
},
appBarSpacer: {
minHeight: "48px",
},
content: {
flex: 1,
overflow: "auto",
},
container: {
paddingTop: theme.spacing(4),
paddingBottom: theme.spacing(4),
},
paper: {
padding: theme.spacing(2),
display: "flex",
overflow: "auto",
flexDirection: "column",
},
}));
const MainDrawer = ({ appTitle, children }) => {
const { handleLogout } = useContext(AuthContext);
const classes = useStyles();
const [open, setOpen] = useState(true);
const [anchorEl, setAnchorEl] = React.useState(null);
const menuOpen = Boolean(anchorEl);
const drawerState = localStorage.getItem("drawerOpen");
useEffect(() => {
if (drawerState === "0") {
setOpen(false);
}
}, [drawerState]);
const handleDrawerOpen = () => {
setOpen(true);
localStorage.setItem("drawerOpen", 1);
};
const handleDrawerClose = () => {
setOpen(false);
localStorage.setItem("drawerOpen", 0);
};
const handleMenu = event => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
return (
<div className={classes.root}>
<Drawer
variant="permanent"
classes={{
paper: clsx(classes.drawerPaper, !open && classes.drawerPaperClose),
}}
open={open}
>
<div className={classes.toolbarIcon}>
<IconButton onClick={handleDrawerClose}>
<ChevronLeftIcon />
</IconButton>
</div>
<Divider />
<List>
<MainListItems />
</List>
<Divider />
</Drawer>
<AppBar
position="absolute"
className={clsx(classes.appBar, open && classes.appBarShift)}
color={process.env.NODE_ENV === "development" ? "secondary" : "primary"}
>
<Toolbar variant="dense" className={classes.toolbar}>
<IconButton
edge="start"
color="inherit"
aria-label="open drawer"
onClick={handleDrawerOpen}
className={clsx(
classes.menuButton,
open && classes.menuButtonHidden
)}
>
<MenuIcon />
</IconButton>
<Typography
component="h1"
variant="h6"
color="inherit"
noWrap
className={classes.title}
>
{appTitle}
</Typography>
<IconButton color="inherit">
<Badge badgeContent={0} color="secondary">
<NotificationsIcon />
</Badge>
</IconButton>
<div>
<IconButton
aria-label="account of current user"
aria-controls="menu-appbar"
aria-haspopup="true"
onClick={handleMenu}
color="inherit"
>
<AccountCircle />
</IconButton>
<Menu
id="menu-appbar"
anchorEl={anchorEl}
anchorOrigin={{
vertical: "top",
horizontal: "right",
}}
keepMounted
transformOrigin={{
vertical: "top",
horizontal: "right",
}}
open={menuOpen}
onClose={handleClose}
>
<MenuItem onClick={handleClose}>Profile</MenuItem>
<MenuItem onClick={handleLogout}>Logout</MenuItem>
</Menu>
</div>
</Toolbar>
</AppBar>
<main className={classes.content}>
<div className={classes.appBarSpacer} />
{children ? children : null}
</main>
</div>
);
};
export default MainDrawer;

47
frontend/src/components/Tickets/index.js
View File

@@ -1,7 +1,6 @@
import React, { useState, useEffect, useReducer } from "react";
import { useHistory, useParams } from "react-router-dom";
import openSocket from "socket.io-client";
import { format } from "date-fns";
import { toast } from "react-toastify";
import { makeStyles } from "@material-ui/core/styles";
@@ -229,14 +228,6 @@ const Tickets = () => {
const [hasMore, setHasMore] = useState(false);
const [tickets, dispatch] = useReducer(reducer, []);
useEffect(() => {
if (!("Notification" in window)) {
console.log("This browser doesn't support notifications");
} else {
Notification.requestPermission();
}
}, []);
useEffect(() => {
dispatch({ type: "RESET" });
setPageNumber(1);
@@ -290,14 +281,6 @@ const Tickets = () => {
socket.on("appMessage", data => {
if (data.action === "create") {
dispatch({ type: "UPDATE_TICKETS", payload: data.ticket });
if (
(ticketId &&
data.message.ticketId === +ticketId &&
document.visibilityState === "visible") ||
(data.ticket.userId !== userId && data.ticket.userId)
)
return;
showDesktopNotification(data);
}
});
@@ -310,31 +293,6 @@ const Tickets = () => {
setPageNumber(prevState => prevState + 1);
};
const showDesktopNotification = ({ message, contact, ticket }) => {
const options = {
body: `${message.body} - ${format(new Date(), "HH:mm")}`,
icon: contact.profilePicUrl,
tag: ticket.id,
};
let notification = new Notification(
`${i18n.t("tickets.notification.message")} ${contact.name}`,
options
);
notification.onclick = function (event) {
event.preventDefault(); //
window.open(`/chat/${ticket.id}`, "_self");
};
document.addEventListener("visibilitychange", () => {
if (document.visibilityState === "visible") {
notification.close();
}
});
document.getElementById("sound").play();
};
const handleSelectTicket = (e, ticket) => {
history.push(`/chat/${ticket.id}`);
};
@@ -559,11 +517,6 @@ const Tickets = () => {
</List>
</Paper>
</TabPanel>
<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>
);
};

18
frontend/src/components/_layout/index.js
View File

@@ -1,4 +1,4 @@
import React, { useState, useContext, useEffect } from "react";
import React, { useState, useContext, useEffect, useRef } from "react";
import clsx from "clsx";
import { makeStyles } from "@material-ui/core/styles";
@@ -23,8 +23,8 @@ import Menu from "@material-ui/core/Menu";
import openSocket from "socket.io-client";
import { format } from "date-fns";
import { toast } from "react-toastify";
import { useHistory, useParams } from "react-router-dom";
// import { toast } from "react-toastify";
import { useHistory } from "react-router-dom";
import { i18n } from "../../translate/i18n";
import { AuthContext } from "../../context/Auth/AuthContext";
@@ -119,9 +119,10 @@ const MainDrawer = ({ appTitle, children }) => {
const drawerState = localStorage.getItem("drawerOpen");
const history = useHistory();
const ticketId = +history.location.pathname.split("/")[2];
const soundAlert = useRef(new Audio(require("../../assets/sound.mp3")));
const userId = +localStorage.getItem("userId");
const { ticketId } = useParams();
const [notifications, setNotifications] = useState([]);
// const [notifications, setNotifications] = useState([]);
useEffect(() => {
if (!("Notification" in window)) {
@@ -181,7 +182,7 @@ const MainDrawer = ({ appTitle, children }) => {
}
});
document.getElementById("sound").play();
soundAlert.current.play();
};
const handleDrawerOpen = () => {
@@ -290,11 +291,6 @@ const MainDrawer = ({ appTitle, children }) => {
{children ? children : null}
</main>
<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>
</div>
);
};

2
frontend/src/routes/index.js
View File

@@ -2,7 +2,7 @@ import React from "react";
import { BrowserRouter, Switch } from "react-router-dom";
import { ToastContainer } from "react-toastify";
import MainDrawer from "../components/MainDrawer";
import MainDrawer from "../components/_layout";
import Dashboard from "../pages/Dashboard/";
import Chat from "../pages/Chat/";
import Signup from "../pages/Signup/";