new: usr: Added logout

new: usr: Added notification prompt
deku-messaging · Aug 28, 2023 · 9408661 · 9408661
1 parent aaa0d30
commit 9408661
Show file tree

Hide file tree

Showing 4 changed files with 155 additions and 24 deletions.
diff --git 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 (
 		<AppBar component="nav" position="sticky" sx={{ height: 50 }}>
-			<Toolbar>
+			<Toolbar
+				sx={{
+					display: "flex",
+					justifyContent: "space-between",
+					alignItems: "center",
+				}}
+			>
 				<Typography variant="h6">{title}</Typography>
+				{menuItems && menuItems.length > 0 && (
+					<div>
+						<Menu
+							id="menu"
+							anchorEl={anchorEl}
+							open={Boolean(anchorEl)}
+							onClose={handleMenuClose}
+						>
+							{menuItems &&
+								menuItems.map((item, index) => (
+									<MenuItem
+										key={index}
+										onClick={() => {
+											item.onClick();
+											handleMenuClose();
+										}}
+									>
+										{item.icon}
+										{item.label}
+									</MenuItem>
+								))}
+						</Menu>
+						<IconButton
+							color="inherit"
+							aria-controls="menu"
+							aria-haspopup="true"
+							onClick={handleMenuClick}
+						>
+							<MoreVert />
+						</IconButton>
+					</div>
+				)}
 			</Toolbar>
 		</AppBar>
 	);

diff --git 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 = () => {
 		</Fragment>
 	);
 
+	const handleLogout = () => {
+		storage.removeFromStorage("from_session_id");
+		storage.removeFromStorage("data");
+		window.location.reload();
+	};
+
+	const menuItems = [
+		{ label: "Logout", icon: <Logout />, onClick: handleLogout },
+	];
+
 	return (
 		<Fragment>
-			<ThreadAppBar title={"Messages"} />
+			<ThreadAppBar title={"Messages"} menuItems={menuItems} />
 			<List sx={{ height: "90vh", overflow: "auto" }}>
 				{threads.length === 0
 					? Array.from({ length: 5 }).map((_, index) => (

diff --git 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 (
 		<MainContext.Provider
 			value={{
@@ -24,6 +60,48 @@ const MainProvider = ({ children }) => {
 			}}
 		>
 			{children}
+			<Dialog
+				open={notificationDialogOpen}
+				onClose={closeNotificationDialog}
+				maxWidth={"md"}
+				TransitionComponent={Slide}
+				TransitionProps={{ direction: "up" }}
+			>
+				<DialogTitle>Turn on Notifications</DialogTitle>
+				<DialogContent dividers>
+					<Grid container spacing={2} alignItems="center">
+						<Grid item>
+							{showNotificationMessage ? (
+								<DoneIcon color="primary" fontSize="large" />
+							) : (
+								<NotificationsActiveIcon color="primary" fontSize="large" />
+							)}
+						</Grid>
+						<Grid item>
+							{showNotificationMessage ? (
+								<Typography>
+									You've enabled notifications. You'll now receive updates.
+								</Typography>
+							) : (
+								<Typography>
+									Get notified of new messages on your computer.
+								</Typography>
+							)}
+						</Grid>
+					</Grid>
+				</DialogContent>
+				<DialogActions>
+					{showNotificationMessage ? (
+						<Button onClick={closeNotificationDialog} color="primary">
+							Got it!
+						</Button>
+					) : (
+						<Button onClick={requestNotificationPermission} color="primary">
+							Enable Notifications
+						</Button>
+					)}
+				</DialogActions>
+			</Dialog>
 		</MainContext.Provider>
 	);
 };

diff --git 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) {