import Drawer from "@mui/material/Drawer"; import * as React from "react"; import {useState} from "react"; import ListItemButton from "@mui/material/ListItemButton"; import ListItemIcon from "@mui/material/ListItemIcon"; import ChatBubbleOutlineIcon from "@mui/icons-material/ChatBubbleOutline"; import ListItemText from "@mui/material/ListItemText"; import Toolbar from "@mui/material/Toolbar"; import Divider from "@mui/material/Divider"; import List from "@mui/material/List"; import SettingsIcon from "@mui/icons-material/Settings"; import AddIcon from "@mui/icons-material/Add"; import SubscribeDialog from "./SubscribeDialog"; import {Alert, AlertTitle, Badge, CircularProgress, ListSubheader} from "@mui/material"; import Button from "@mui/material/Button"; import Typography from "@mui/material/Typography"; import {subscriptionRoute, topicShortUrl, topicUrl} from "../app/utils"; import {ConnectionState} from "../app/Connection"; import {useLocation, useNavigate} from "react-router-dom"; import subscriptionManager from "../app/SubscriptionManager"; import {ChatBubble, NotificationsOffOutlined} from "@mui/icons-material"; import Box from "@mui/material/Box"; import notifier from "../app/Notifier"; const navWidth = 280; const Navigation = (props) => { const navigationList = ; return ( {/* Mobile drawer; only shown if menu icon clicked (mobile open) and display is small */} {navigationList} {/* Big screen drawer; persistent, shown if screen is big */} {navigationList} ); }; Navigation.width = navWidth; const NavList = (props) => { const navigate = useNavigate(); const location = useLocation(); const [subscribeDialogKey, setSubscribeDialogKey] = useState(0); const [subscribeDialogOpen, setSubscribeDialogOpen] = useState(false); const handleSubscribeReset = () => { setSubscribeDialogOpen(false); setSubscribeDialogKey(prev => prev+1); } const handleSubscribeSubmit = (subscription) => { console.log(`[Navigation] New subscription: ${subscription.id}`, subscription); handleSubscribeReset(); navigate(subscriptionRoute(subscription)); handleRequestNotificationPermission(); } const handleRequestNotificationPermission = () => { notifier.maybeRequestPermission(granted => props.onNotificationGranted(granted)) }; const showSubscriptionsList = props.subscriptions?.length > 0; const showGrantPermissionsBox = props.subscriptions?.length > 0 && !props.notificationsGranted; return ( <> {showGrantPermissionsBox && } {!showSubscriptionsList && navigate("/")} selected={location.pathname === "/"}> } {showSubscriptionsList && <> Subscribed topics navigate("/")} selected={location.pathname === "/"}> } navigate("/settings")} selected={location.pathname === "/settings"}> setSubscribeDialogOpen(true)}> ); }; const SubscriptionList = (props) => { const sortedSubscriptions = props.subscriptions.sort( (a, b) => { return (topicUrl(a.baseUrl, a.topic) < topicUrl(b.baseUrl, b.topic)) ? -1 : 1; }); return ( <> {sortedSubscriptions.map(subscription => )} ); } const SubscriptionItem = (props) => { const navigate = useNavigate(); const subscription = props.subscription; const iconBadge = (subscription.new <= 99) ? subscription.new : "99+"; const icon = (subscription.state === ConnectionState.Connecting) ? : ; const label = (subscription.baseUrl === window.location.origin) ? subscription.topic : topicShortUrl(subscription.baseUrl, subscription.topic); const handleClick = async () => { navigate(subscriptionRoute(subscription)); await subscriptionManager.markNotificationsRead(subscription.id); }; return ( {icon} {subscription.mutedUntil > 0 && } ); }; const PermissionAlert = (props) => { return ( <> Notifications are disabled Grant your browser permission to display desktop notifications. ); }; export default Navigation;