From 94086619d3b3f3b9ed374afa774fbd4e289f7cba Mon Sep 17 00:00:00 2001 From: Promise Fru Date: Mon, 28 Aug 2023 19:36:01 +0100 Subject: [PATCH] new: usr: Added logout new: usr: Added notification prompt --- src/components/ThreadAppBar.js | 64 +++++++++++++++++++++++++-- src/components/ThreadList.js | 14 +++++- src/contexts/MainContext.js | 80 +++++++++++++++++++++++++++++++++- src/contexts/SocketContext.js | 21 +-------- 4 files changed, 155 insertions(+), 24 deletions(-) diff --git a/src/components/ThreadAppBar.js b/src/components/ThreadAppBar.js index 721e093..1e86608 100644 --- a/src/components/ThreadAppBar.js +++ b/src/components/ThreadAppBar.js @@ -1,9 +1,67 @@ -import { AppBar, Typography, Toolbar } from "@mui/material"; -const ThreadAppBar = ({ title }) => { +import React, { useState } from "react"; +import { + AppBar, + Typography, + Toolbar, + IconButton, + Menu, + MenuItem, +} from "@mui/material"; +import { MoreVert } from "@mui/icons-material"; + +const ThreadAppBar = ({ title, menuItems }) => { + const [anchorEl, setAnchorEl] = useState(null); + + const handleMenuClick = (event) => { + setAnchorEl(event.currentTarget); + }; + + const handleMenuClose = () => { + setAnchorEl(null); + }; + return ( - + {title} + {menuItems && menuItems.length > 0 && ( +
+ + {menuItems && + menuItems.map((item, index) => ( + { + item.onClick(); + handleMenuClose(); + }} + > + {item.icon} + {item.label} + + ))} + + + + +
+ )} ); diff --git a/src/components/ThreadList.js b/src/components/ThreadList.js index 68475b5..ced7bba 100644 --- a/src/components/ThreadList.js +++ b/src/components/ThreadList.js @@ -12,12 +12,14 @@ import { Typography, Skeleton, } from "@mui/material"; +import { Logout } from "@mui/icons-material"; import { formatDistanceToNow } from "date-fns"; import { MainContext } from "../contexts"; import { getThreadLabel } from "../utils/threadUtils"; import ThreadAppBar from "./ThreadAppBar"; +import storage from "../utils/storage"; const colorPicker = (char = "a") => { const colors = [ @@ -76,9 +78,19 @@ const ThreadList = () => { ); + const handleLogout = () => { + storage.removeFromStorage("from_session_id"); + storage.removeFromStorage("data"); + window.location.reload(); + }; + + const menuItems = [ + { label: "Logout", icon: , onClick: handleLogout }, + ]; + return ( - + {threads.length === 0 ? Array.from({ length: 5 }).map((_, index) => ( diff --git a/src/contexts/MainContext.js b/src/contexts/MainContext.js index 6ef4515..3ee92c3 100644 --- a/src/contexts/MainContext.js +++ b/src/contexts/MainContext.js @@ -1,17 +1,53 @@ -import React, { useState, useContext, createContext } from "react"; +import React, { useState, useContext, createContext, useEffect } from "react"; +import { + Dialog, + DialogTitle, + DialogContent, + Button, + DialogActions, + Typography, + Grid, + Slide, +} from "@mui/material"; import { SocketContext } from "./SocketContext"; import { groupThreads, sortThreads } from "../utils/threadUtils"; +import NotificationsActiveIcon from "@mui/icons-material/NotificationsActive"; +import DoneIcon from "@mui/icons-material/Done"; const MainContext = createContext(); const MainProvider = ({ children }) => { const { messages, isConnected } = useContext(SocketContext); + const [notificationDialogOpen, setNotificationDialogOpen] = useState(false); + const [notificationPermission, setNotificationPermission] = useState( + Notification.permission + ); + const [showNotificationMessage, setShowNotificationMessage] = useState(false); const threads = sortThreads(groupThreads(messages)); const [selectedThread, setSelectedThread] = useState(null); const [threadId, setThreadId] = useState(""); + const requestNotificationPermission = () => { + setShowNotificationMessage(true); + + Notification.requestPermission().then((permission) => { + setNotificationPermission(permission); + setNotificationDialogOpen(false); + }); + }; + + const closeNotificationDialog = () => { + setNotificationDialogOpen(false); + }; + + useEffect(() => { + if ("Notification" in window && notificationPermission === "default") { + setNotificationDialogOpen(true); + } + }, [notificationPermission]); + return ( { }} > {children} + + Turn on Notifications + + + + {showNotificationMessage ? ( + + ) : ( + + )} + + + {showNotificationMessage ? ( + + You've enabled notifications. You'll now receive updates. + + ) : ( + + Get notified of new messages on your computer. + + )} + + + + + {showNotificationMessage ? ( + + ) : ( + + )} + + ); }; diff --git a/src/contexts/SocketContext.js b/src/contexts/SocketContext.js index 7ab679a..c656a70 100644 --- a/src/contexts/SocketContext.js +++ b/src/contexts/SocketContext.js @@ -43,20 +43,17 @@ const messageReducer = (state, action) => { }; const SocketProvider = ({ children }) => { - const [socketUrl, setSocketUrl] = useState(SOCKET_URL); const { isAuthenticated, setIsAuthenticated } = useContext(AuthContext); const [messages, dispatch] = useReducer(messageReducer, []); const [isConnected, setIsConnected] = useState(false); const [reconnectCountdown, setReconnectCountdown] = useState(null); - const [notificationPermission, setNotificationPermission] = useState( - Notification.permission - ); + const [sessionId, setSessionId] = useState(null); const reconnectInterval = 10000; const { sendJsonMessage, lastJsonMessage, readyState } = useWebSocket( - socketUrl, + SOCKET_URL, { onOpen: () => { setIsConnected(true); @@ -79,12 +76,6 @@ const SocketProvider = ({ children }) => { } ); - const requestNotificationPermission = () => { - Notification.requestPermission().then((permission) => { - setNotificationPermission(permission); - }); - }; - const SendMessage = useCallback((content) => { console.log(content); sendJsonMessage(content); @@ -94,14 +85,6 @@ const SocketProvider = ({ children }) => { window.location.reload(); }; - useEffect(() => { - if ("Notification" in window) { - if (notificationPermission === "default") { - requestNotificationPermission(); - } - } - }, [notificationPermission]); - useEffect(() => { if (lastJsonMessage !== null) { if (!isAuthenticated) {