2022-02-25 18:46:22 +01:00
|
|
|
import Drawer from "@mui/material/Drawer";
|
|
|
|
import * as React from "react";
|
2022-02-26 16:14:43 +01:00
|
|
|
import {useState} from "react";
|
2022-02-25 18:46:22 +01:00
|
|
|
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";
|
2022-03-07 04:37:13 +01:00
|
|
|
import {Alert, AlertTitle, Badge, CircularProgress, ListSubheader} from "@mui/material";
|
2022-02-26 16:14:43 +01:00
|
|
|
import Button from "@mui/material/Button";
|
|
|
|
import Typography from "@mui/material/Typography";
|
2022-03-05 14:52:52 +01:00
|
|
|
import {subscriptionRoute, topicShortUrl, topicUrl} from "../app/utils";
|
2022-03-04 17:08:32 +01:00
|
|
|
import {ConnectionState} from "../app/Connection";
|
2022-03-04 22:10:04 +01:00
|
|
|
import {useLocation, useNavigate} from "react-router-dom";
|
2022-03-07 04:37:13 +01:00
|
|
|
import subscriptionManager from "../app/SubscriptionManager";
|
2022-03-08 02:11:58 +01:00
|
|
|
import {ChatBubble} from "@mui/icons-material";
|
2022-02-25 18:46:22 +01:00
|
|
|
|
|
|
|
const navWidth = 240;
|
|
|
|
|
|
|
|
const Navigation = (props) => {
|
2022-02-26 16:14:43 +01:00
|
|
|
const navigationList = <NavList {...props}/>;
|
2022-02-25 18:46:22 +01:00
|
|
|
return (
|
|
|
|
<>
|
|
|
|
{/* Mobile drawer; only shown if menu icon clicked (mobile open) and display is small */}
|
|
|
|
<Drawer
|
|
|
|
variant="temporary"
|
|
|
|
open={props.mobileDrawerOpen}
|
|
|
|
onClose={props.onMobileDrawerToggle}
|
|
|
|
ModalProps={{ keepMounted: true }} // Better open performance on mobile.
|
|
|
|
sx={{
|
|
|
|
display: { xs: 'block', sm: 'none' },
|
|
|
|
'& .MuiDrawer-paper': { boxSizing: 'border-box', width: navWidth },
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{navigationList}
|
|
|
|
</Drawer>
|
|
|
|
{/* Big screen drawer; persistent, shown if screen is big */}
|
|
|
|
<Drawer
|
|
|
|
open
|
|
|
|
variant="permanent"
|
|
|
|
sx={{
|
|
|
|
display: { xs: 'none', sm: 'block' },
|
|
|
|
'& .MuiDrawer-paper': { boxSizing: 'border-box', width: navWidth },
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{navigationList}
|
|
|
|
</Drawer>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
Navigation.width = navWidth;
|
|
|
|
|
|
|
|
const NavList = (props) => {
|
2022-03-04 22:10:04 +01:00
|
|
|
const navigate = useNavigate();
|
|
|
|
const location = useLocation();
|
2022-02-26 05:25:04 +01:00
|
|
|
const [subscribeDialogKey, setSubscribeDialogKey] = useState(0);
|
2022-02-25 18:46:22 +01:00
|
|
|
const [subscribeDialogOpen, setSubscribeDialogOpen] = useState(false);
|
2022-03-06 04:33:34 +01:00
|
|
|
|
2022-02-26 05:25:04 +01:00
|
|
|
const handleSubscribeReset = () => {
|
2022-02-25 18:46:22 +01:00
|
|
|
setSubscribeDialogOpen(false);
|
2022-02-26 05:25:04 +01:00
|
|
|
setSubscribeDialogKey(prev => prev+1);
|
|
|
|
}
|
2022-03-06 04:33:34 +01:00
|
|
|
|
2022-03-02 03:23:12 +01:00
|
|
|
const handleSubscribeSubmit = (subscription) => {
|
2022-03-07 03:39:20 +01:00
|
|
|
console.log(`[Navigation] New subscription: ${subscription.id}`, subscription);
|
2022-02-26 05:25:04 +01:00
|
|
|
handleSubscribeReset();
|
2022-03-07 03:39:20 +01:00
|
|
|
navigate(subscriptionRoute(subscription));
|
|
|
|
props.requestNotificationPermission();
|
2022-02-25 18:46:22 +01:00
|
|
|
}
|
2022-03-06 04:33:34 +01:00
|
|
|
|
2022-03-02 22:16:30 +01:00
|
|
|
const showSubscriptionsList = props.subscriptions?.length > 0;
|
|
|
|
const showGrantPermissionsBox = props.subscriptions?.length > 0 && !props.notificationsGranted;
|
2022-03-06 04:33:34 +01:00
|
|
|
|
2022-02-25 18:46:22 +01:00
|
|
|
return (
|
|
|
|
<>
|
2022-03-04 22:10:04 +01:00
|
|
|
<Toolbar sx={{ display: { xs: 'none', sm: 'block' } }}/>
|
|
|
|
<List component="nav" sx={{ paddingTop: (showGrantPermissionsBox) ? '0' : '' }}>
|
2022-03-07 03:39:20 +01:00
|
|
|
{showGrantPermissionsBox && <PermissionAlert onRequestPermissionClick={props.requestNotificationPermission}/>}
|
2022-03-08 02:11:58 +01:00
|
|
|
{!showSubscriptionsList &&
|
|
|
|
<ListItemButton onClick={() => navigate("/")} selected={location.pathname === "/"}>
|
|
|
|
<ListItemIcon><ChatBubble/></ListItemIcon>
|
|
|
|
<ListItemText primary="All notifications"/>
|
|
|
|
</ListItemButton>}
|
2022-02-26 16:14:43 +01:00
|
|
|
{showSubscriptionsList &&
|
|
|
|
<>
|
2022-03-04 22:10:04 +01:00
|
|
|
<ListSubheader>Subscribed topics</ListSubheader>
|
2022-03-08 02:11:58 +01:00
|
|
|
<ListItemButton onClick={() => navigate("/")} selected={location.pathname === "/"}>
|
|
|
|
<ListItemIcon><ChatBubble/></ListItemIcon>
|
|
|
|
<ListItemText primary="All notifications"/>
|
|
|
|
</ListItemButton>
|
2022-02-26 16:14:43 +01:00
|
|
|
<SubscriptionList
|
|
|
|
subscriptions={props.subscriptions}
|
|
|
|
selectedSubscription={props.selectedSubscription}
|
|
|
|
/>
|
2022-02-26 20:22:21 +01:00
|
|
|
<Divider sx={{my: 1}}/>
|
2022-02-26 16:14:43 +01:00
|
|
|
</>}
|
2022-03-04 22:10:04 +01:00
|
|
|
<ListItemButton onClick={() => navigate("/settings")} selected={location.pathname === "/settings"}>
|
|
|
|
<ListItemIcon><SettingsIcon/></ListItemIcon>
|
2022-02-26 16:14:43 +01:00
|
|
|
<ListItemText primary="Settings"/>
|
2022-02-25 18:46:22 +01:00
|
|
|
</ListItemButton>
|
|
|
|
<ListItemButton onClick={() => setSubscribeDialogOpen(true)}>
|
2022-03-04 22:10:04 +01:00
|
|
|
<ListItemIcon><AddIcon/></ListItemIcon>
|
2022-02-26 16:14:43 +01:00
|
|
|
<ListItemText primary="Add subscription"/>
|
2022-02-25 18:46:22 +01:00
|
|
|
</ListItemButton>
|
|
|
|
</List>
|
|
|
|
<SubscribeDialog
|
2022-02-28 22:56:38 +01:00
|
|
|
key={`subscribeDialog${subscribeDialogKey}`} // Resets dialog when canceled/closed
|
2022-02-25 18:46:22 +01:00
|
|
|
open={subscribeDialogOpen}
|
2022-02-26 17:45:39 +01:00
|
|
|
subscriptions={props.subscriptions}
|
2022-02-26 05:25:04 +01:00
|
|
|
onCancel={handleSubscribeReset}
|
|
|
|
onSuccess={handleSubscribeSubmit}
|
2022-02-25 18:46:22 +01:00
|
|
|
/>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
};
|
2022-02-26 05:25:04 +01:00
|
|
|
|
2022-02-26 16:14:43 +01:00
|
|
|
const SubscriptionList = (props) => {
|
2022-03-05 14:52:52 +01:00
|
|
|
const sortedSubscriptions = props.subscriptions.sort( (a, b) => {
|
|
|
|
return (topicUrl(a.baseUrl, a.topic) < topicUrl(b.baseUrl, b.topic)) ? -1 : 1;
|
|
|
|
});
|
2022-02-25 18:46:22 +01:00
|
|
|
return (
|
|
|
|
<>
|
2022-03-05 14:52:52 +01:00
|
|
|
{sortedSubscriptions.map(subscription =>
|
2022-03-04 17:08:32 +01:00
|
|
|
<SubscriptionItem
|
2022-03-02 22:16:30 +01:00
|
|
|
key={subscription.id}
|
2022-03-04 17:08:32 +01:00
|
|
|
subscription={subscription}
|
2022-03-04 22:10:04 +01:00
|
|
|
selected={props.selectedSubscription && props.selectedSubscription.id === subscription.id}
|
2022-03-04 17:08:32 +01:00
|
|
|
/>)}
|
2022-02-25 18:46:22 +01:00
|
|
|
</>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2022-03-04 17:08:32 +01:00
|
|
|
const SubscriptionItem = (props) => {
|
2022-03-04 22:10:04 +01:00
|
|
|
const navigate = useNavigate();
|
2022-03-04 17:08:32 +01:00
|
|
|
const subscription = props.subscription;
|
2022-03-07 22:36:49 +01:00
|
|
|
const iconBadge = (subscription.new <= 99) ? subscription.new : "99+";
|
2022-03-04 17:08:32 +01:00
|
|
|
const icon = (subscription.state === ConnectionState.Connecting)
|
|
|
|
? <CircularProgress size="24px"/>
|
2022-03-07 22:36:49 +01:00
|
|
|
: <Badge badgeContent={iconBadge} invisible={subscription.new === 0} color="primary"><ChatBubbleOutlineIcon/></Badge>;
|
2022-03-06 04:11:32 +01:00
|
|
|
const label = (subscription.baseUrl === window.location.origin)
|
2022-03-05 14:52:52 +01:00
|
|
|
? subscription.topic
|
|
|
|
: topicShortUrl(subscription.baseUrl, subscription.topic);
|
2022-03-07 04:37:13 +01:00
|
|
|
const handleClick = async () => {
|
|
|
|
navigate(subscriptionRoute(subscription));
|
|
|
|
await subscriptionManager.markNotificationsRead(subscription.id);
|
|
|
|
};
|
2022-03-04 17:08:32 +01:00
|
|
|
return (
|
2022-03-07 04:37:13 +01:00
|
|
|
<ListItemButton onClick={handleClick} selected={props.selected}>
|
2022-03-04 17:08:32 +01:00
|
|
|
<ListItemIcon>{icon}</ListItemIcon>
|
2022-03-05 14:52:52 +01:00
|
|
|
<ListItemText primary={label}/>
|
2022-03-04 17:08:32 +01:00
|
|
|
</ListItemButton>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2022-03-01 22:22:47 +01:00
|
|
|
const PermissionAlert = (props) => {
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<Alert severity="warning" sx={{paddingTop: 2}}>
|
|
|
|
<AlertTitle>Notifications are disabled</AlertTitle>
|
|
|
|
<Typography gutterBottom>
|
|
|
|
Grant your browser permission to display desktop notifications.
|
|
|
|
</Typography>
|
|
|
|
<Button
|
|
|
|
sx={{float: 'right'}}
|
|
|
|
color="inherit"
|
|
|
|
size="small"
|
|
|
|
onClick={props.onRequestPermissionClick}
|
|
|
|
>
|
|
|
|
Grant now
|
|
|
|
</Button>
|
|
|
|
</Alert>
|
|
|
|
<Divider/>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2022-02-25 18:46:22 +01:00
|
|
|
export default Navigation;
|