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-02-26 16:14:43 +01:00
|
|
|
import {Alert, AlertTitle} from "@mui/material";
|
|
|
|
import Button from "@mui/material/Button";
|
|
|
|
import Typography from "@mui/material/Typography";
|
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-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-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);
|
|
|
|
}
|
|
|
|
const handleSubscribeSubmit = (subscription, user) => {
|
|
|
|
handleSubscribeReset();
|
|
|
|
props.onSubscribeSubmit(subscription, user);
|
2022-02-25 18:46:22 +01:00
|
|
|
}
|
2022-02-26 16:14:43 +01:00
|
|
|
const showSubscriptionsList = props.subscriptions.size() > 0;
|
|
|
|
const showGrantPermissionsBox = props.subscriptions.size() > 0 && !props.notificationsGranted;
|
2022-02-25 18:46:22 +01:00
|
|
|
return (
|
|
|
|
<>
|
2022-02-26 16:14:43 +01:00
|
|
|
<Toolbar/>
|
|
|
|
<List component="nav" sx={{paddingTop: 0}}>
|
|
|
|
{showGrantPermissionsBox &&
|
|
|
|
<>
|
|
|
|
<Divider/>
|
|
|
|
<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>
|
|
|
|
</>}
|
|
|
|
{showSubscriptionsList &&
|
|
|
|
<>
|
|
|
|
<Divider/>
|
|
|
|
<SubscriptionList
|
|
|
|
subscriptions={props.subscriptions}
|
|
|
|
selectedSubscription={props.selectedSubscription}
|
|
|
|
onSubscriptionClick={props.onSubscriptionClick}
|
|
|
|
/>
|
|
|
|
</>}
|
|
|
|
<Divider sx={{my: 1}}/>
|
2022-02-25 18:46:22 +01:00
|
|
|
<ListItemButton>
|
|
|
|
<ListItemIcon>
|
2022-02-26 16:14:43 +01:00
|
|
|
<SettingsIcon/>
|
2022-02-25 18:46:22 +01:00
|
|
|
</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)}>
|
|
|
|
<ListItemIcon>
|
2022-02-26 16:14:43 +01:00
|
|
|
<AddIcon/>
|
2022-02-25 18:46:22 +01:00
|
|
|
</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-26 05:25:04 +01:00
|
|
|
key={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-02-25 18:46:22 +01:00
|
|
|
return (
|
|
|
|
<>
|
2022-02-26 16:14:43 +01:00
|
|
|
{props.subscriptions.map((id, subscription) =>
|
|
|
|
<ListItemButton
|
2022-02-25 18:46:22 +01:00
|
|
|
key={id}
|
|
|
|
onClick={() => props.onSubscriptionClick(id)}
|
2022-02-26 16:14:43 +01:00
|
|
|
selected={props.selectedSubscription && props.selectedSubscription.id === id}
|
|
|
|
>
|
|
|
|
<ListItemIcon><ChatBubbleOutlineIcon /></ListItemIcon>
|
|
|
|
<ListItemText primary={subscription.shortUrl()}/>
|
|
|
|
</ListItemButton>
|
|
|
|
)}
|
2022-02-25 18:46:22 +01:00
|
|
|
</>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export default Navigation;
|