diff --git a/frontend/src/components/MainDrawer/MainListItems.js b/frontend/src/components/MainDrawer/MainListItems.js deleted file mode 100644 index 41dd8c7..0000000 --- a/frontend/src/components/MainDrawer/MainListItems.js +++ /dev/null @@ -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) => ( - - )), - [to] - ); - - return ( -
  • - - {icon ? {icon} : null} - - -
    • - ); -} - -const MainListItems = () => { - return ( -
    - } /> - } - /> - } - /> - - } - /> -
    - ); -}; - -export default MainListItems; diff --git a/frontend/src/components/MainDrawer/index.js b/frontend/src/components/MainDrawer/index.js deleted file mode 100644 index ba7dd4c..0000000 --- a/frontend/src/components/MainDrawer/index.js +++ /dev/null @@ -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 ( -
    - -
    - - - -
    - - - - - -     - - - - - - - {appTitle} - - - - - - - -
    - - - - - Profile - Logout - -
    -     -     -
    -
    - - {children ? children : null} -
    -
    - ); -}; - -export default MainDrawer; diff --git a/frontend/src/components/Tickets/index.js b/frontend/src/components/Tickets/index.js index 11f136b..f9c8d0c 100644 --- a/frontend/src/components/Tickets/index.js +++ b/frontend/src/components/Tickets/index.js @@ -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 = () => { - ); }; diff --git a/frontend/src/components/_layout/index.js b/frontend/src/components/_layout/index.js index abbd9ae..66d2e4a 100644 --- a/frontend/src/components/_layout/index.js +++ b/frontend/src/components/_layout/index.js @@ -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} - ); }; diff --git a/frontend/src/routes/index.js b/frontend/src/routes/index.js index e4e00cd..bd55707 100644 --- a/frontend/src/routes/index.js +++ b/frontend/src/routes/index.js @@ -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/";