forked from mirrors/ntfy
Move things around
This commit is contained in:
parent
f9e22dcaa9
commit
42016f48ff
4 changed files with 163 additions and 150 deletions
|
@ -1,6 +1,6 @@
|
|||
import {shortTopicUrl, topicUrlWs, topicUrlWsWithSince} from "./utils";
|
||||
|
||||
const retryBackoffSeconds = [5, 10, 15, 20, 30, 45, 60, 120];
|
||||
const retryBackoffSeconds = [5, 10, 15, 20, 30, 45];
|
||||
|
||||
class Connection {
|
||||
constructor(subscriptionId, baseUrl, topic, since, onNotification) {
|
||||
|
|
36
web/src/components/ActionBar.js
Normal file
36
web/src/components/ActionBar.js
Normal file
|
@ -0,0 +1,36 @@
|
|||
import AppBar from "@mui/material/AppBar";
|
||||
import Navigation from "./Navigation";
|
||||
import Toolbar from "@mui/material/Toolbar";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import MenuIcon from "@mui/icons-material/Menu";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import IconSubscribeSettings from "./IconSubscribeSettings";
|
||||
import * as React from "react";
|
||||
|
||||
const ActionBar = (props) => {
|
||||
const title = (props.selectedSubscription !== null)
|
||||
? props.selectedSubscription.shortUrl()
|
||||
: "ntfy";
|
||||
return (
|
||||
<AppBar position="fixed" sx={{ width: { sm: `calc(100% - ${Navigation.width}px)` }, ml: { sm: `${Navigation.width}px` } }}>
|
||||
<Toolbar sx={{pr: '24px'}}>
|
||||
<IconButton
|
||||
color="inherit"
|
||||
edge="start"
|
||||
onClick={props.onMobileDrawerToggle}
|
||||
sx={{ mr: 2, display: { sm: 'none' } }}
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<Typography variant="h6" noWrap component="div" sx={{ flexGrow: 1 }}>{title}</Typography>
|
||||
{props.selectedSubscription !== null && <IconSubscribeSettings
|
||||
subscription={props.selectedSubscription}
|
||||
onClearAll={props.onClearAll}
|
||||
onUnsubscribe={props.onUnsubscribe}
|
||||
/>}
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
);
|
||||
};
|
||||
|
||||
export default ActionBar;
|
|
@ -1,161 +1,17 @@
|
|||
import * as React from 'react';
|
||||
import {useEffect, useState} from 'react';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Box from '@mui/material/Box';
|
||||
import {ThemeProvider} from '@mui/material/styles';
|
||||
import CssBaseline from '@mui/material/CssBaseline';
|
||||
import Drawer from '@mui/material/Drawer';
|
||||
import AppBar from '@mui/material/AppBar';
|
||||
import Toolbar from '@mui/material/Toolbar';
|
||||
import ChatBubbleOutlineIcon from '@mui/icons-material/ChatBubbleOutline';
|
||||
import List from '@mui/material/List';
|
||||
import Divider from '@mui/material/Divider';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import MenuIcon from '@mui/icons-material/Menu';
|
||||
import ListItemIcon from "@mui/material/ListItemIcon";
|
||||
import ListItemText from "@mui/material/ListItemText";
|
||||
import ListItemButton from "@mui/material/ListItemButton";
|
||||
import SettingsIcon from "@mui/icons-material/Settings";
|
||||
import AddIcon from "@mui/icons-material/Add";
|
||||
import SubscribeDialog from "./SubscribeDialog";
|
||||
import NotificationList from "./NotificationList";
|
||||
import IconSubscribeSettings from "./IconSubscribeSettings";
|
||||
import theme from "./theme";
|
||||
import api from "../app/Api";
|
||||
import repository from "../app/Repository";
|
||||
import connectionManager from "../app/ConnectionManager";
|
||||
import Subscriptions from "../app/Subscriptions";
|
||||
|
||||
const drawerWidth = 240;
|
||||
|
||||
const NavSubscriptionList = (props) => {
|
||||
const subscriptions = props.subscriptions;
|
||||
return (
|
||||
<>
|
||||
{subscriptions.map((id, subscription) =>
|
||||
<NavSubscriptionItem
|
||||
key={id}
|
||||
subscription={subscription}
|
||||
selected={props.selectedSubscription && props.selectedSubscription.id === id}
|
||||
onClick={() => props.onSubscriptionClick(id)}
|
||||
/>)
|
||||
}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const NavSubscriptionItem = (props) => {
|
||||
const subscription = props.subscription;
|
||||
return (
|
||||
<ListItemButton onClick={props.onClick} selected={props.selected}>
|
||||
<ListItemIcon><ChatBubbleOutlineIcon /></ListItemIcon>
|
||||
<ListItemText primary={subscription.shortUrl()}/>
|
||||
</ListItemButton>
|
||||
);
|
||||
}
|
||||
|
||||
const NavList = (props) => {
|
||||
const [subscribeDialogOpen, setSubscribeDialogOpen] = useState(false);
|
||||
const handleSubscribeSubmit = (subscription) => {
|
||||
setSubscribeDialogOpen(false);
|
||||
props.onSubscribeSubmit(subscription);
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<Toolbar />
|
||||
<Divider />
|
||||
<List component="nav">
|
||||
<NavSubscriptionList
|
||||
subscriptions={props.subscriptions}
|
||||
selectedSubscription={props.selectedSubscription}
|
||||
onSubscriptionClick={props.onSubscriptionClick}
|
||||
/>
|
||||
<Divider sx={{ my: 1 }} />
|
||||
<ListItemButton>
|
||||
<ListItemIcon>
|
||||
<SettingsIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Settings" />
|
||||
</ListItemButton>
|
||||
<ListItemButton onClick={() => setSubscribeDialogOpen(true)}>
|
||||
<ListItemIcon>
|
||||
<AddIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Add subscription" />
|
||||
</ListItemButton>
|
||||
</List>
|
||||
<SubscribeDialog
|
||||
open={subscribeDialogOpen}
|
||||
onCancel={() => setSubscribeDialogOpen(false)}
|
||||
onSubmit={handleSubscribeSubmit}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const ActionBar = (props) => {
|
||||
const title = (props.selectedSubscription !== null)
|
||||
? props.selectedSubscription.shortUrl()
|
||||
: "ntfy";
|
||||
return (
|
||||
<AppBar position="fixed" sx={{ width: { sm: `calc(100% - ${drawerWidth}px)` }, ml: { sm: `${drawerWidth}px` } }}>
|
||||
<Toolbar sx={{pr: '24px'}}>
|
||||
<IconButton
|
||||
color="inherit"
|
||||
edge="start"
|
||||
onClick={props.onMobileDrawerToggle}
|
||||
sx={{ mr: 2, display: { sm: 'none' } }}
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<Typography variant="h6" noWrap component="div" sx={{ flexGrow: 1 }}>{title}</Typography>
|
||||
{props.selectedSubscription !== null && <IconSubscribeSettings
|
||||
subscription={props.selectedSubscription}
|
||||
onClearAll={props.onClearAll}
|
||||
onUnsubscribe={props.onUnsubscribe}
|
||||
/>}
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
);
|
||||
};
|
||||
|
||||
const Sidebar = (props) => {
|
||||
const navigationList =
|
||||
<NavList
|
||||
subscriptions={props.subscriptions}
|
||||
selectedSubscription={props.selectedSubscription}
|
||||
onSubscriptionClick={props.onSubscriptionClick}
|
||||
onSubscribeSubmit={props.onSubscribeSubmit}
|
||||
/>;
|
||||
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: drawerWidth },
|
||||
}}
|
||||
>
|
||||
{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: drawerWidth },
|
||||
}}
|
||||
>
|
||||
{navigationList}
|
||||
</Drawer>
|
||||
</>
|
||||
);
|
||||
};
|
||||
import Navigation from "./Navigation";
|
||||
import ActionBar from "./ActionBar";
|
||||
|
||||
const App = () => {
|
||||
console.log(`[App] Rendering main view`);
|
||||
|
@ -222,8 +78,8 @@ const App = () => {
|
|||
onUnsubscribe={handleUnsubscribe}
|
||||
onMobileDrawerToggle={() => setMobileDrawerOpen(!mobileDrawerOpen)}
|
||||
/>
|
||||
<Box component="nav" sx={{width: {sm: drawerWidth}, flexShrink: {sm: 0}}}>
|
||||
<Sidebar
|
||||
<Box component="nav" sx={{width: {sm: Navigation.width}, flexShrink: {sm: 0}}}>
|
||||
<Navigation
|
||||
subscriptions={subscriptions}
|
||||
selectedSubscription={selectedSubscription}
|
||||
mobileDrawerOpen={mobileDrawerOpen}
|
||||
|
@ -237,7 +93,7 @@ const App = () => {
|
|||
sx={{
|
||||
flexGrow: 1,
|
||||
p: 3,
|
||||
width: {sm: `calc(100% - ${drawerWidth}px)`},
|
||||
width: {sm: `calc(100% - ${Navigation.width}px)`},
|
||||
height: '100vh',
|
||||
overflow: 'auto',
|
||||
backgroundColor: (theme) => theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900]
|
||||
|
|
121
web/src/components/Navigation.js
Normal file
121
web/src/components/Navigation.js
Normal file
|
@ -0,0 +1,121 @@
|
|||
import Drawer from "@mui/material/Drawer";
|
||||
import * as React 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 {useState} from "react";
|
||||
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";
|
||||
|
||||
const navWidth = 240;
|
||||
|
||||
const Navigation = (props) => {
|
||||
const navigationList =
|
||||
<NavList
|
||||
subscriptions={props.subscriptions}
|
||||
selectedSubscription={props.selectedSubscription}
|
||||
onSubscriptionClick={props.onSubscriptionClick}
|
||||
onSubscribeSubmit={props.onSubscribeSubmit}
|
||||
/>;
|
||||
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) => {
|
||||
const [subscribeDialogOpen, setSubscribeDialogOpen] = useState(false);
|
||||
const handleSubscribeSubmit = (subscription) => {
|
||||
setSubscribeDialogOpen(false);
|
||||
props.onSubscribeSubmit(subscription);
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<Toolbar />
|
||||
{props.subscriptions.size() > 0 &&
|
||||
<Divider />}
|
||||
<List component="nav">
|
||||
<NavSubscriptionList
|
||||
subscriptions={props.subscriptions}
|
||||
selectedSubscription={props.selectedSubscription}
|
||||
onSubscriptionClick={props.onSubscriptionClick}
|
||||
/>
|
||||
<Divider sx={{ my: 1 }} />
|
||||
<ListItemButton>
|
||||
<ListItemIcon>
|
||||
<SettingsIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Settings" />
|
||||
</ListItemButton>
|
||||
<ListItemButton onClick={() => setSubscribeDialogOpen(true)}>
|
||||
<ListItemIcon>
|
||||
<AddIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Add subscription" />
|
||||
</ListItemButton>
|
||||
</List>
|
||||
<SubscribeDialog
|
||||
open={subscribeDialogOpen}
|
||||
onCancel={() => setSubscribeDialogOpen(false)}
|
||||
onSubmit={handleSubscribeSubmit}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
const NavSubscriptionList = (props) => {
|
||||
const subscriptions = props.subscriptions;
|
||||
return (
|
||||
<>
|
||||
{subscriptions.map((id, subscription) =>
|
||||
<NavSubscriptionItem
|
||||
key={id}
|
||||
subscription={subscription}
|
||||
selected={props.selectedSubscription && props.selectedSubscription.id === id}
|
||||
onClick={() => props.onSubscriptionClick(id)}
|
||||
/>)
|
||||
}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const NavSubscriptionItem = (props) => {
|
||||
const subscription = props.subscription;
|
||||
return (
|
||||
<ListItemButton onClick={props.onClick} selected={props.selected}>
|
||||
<ListItemIcon><ChatBubbleOutlineIcon /></ListItemIcon>
|
||||
<ListItemText primary={subscription.shortUrl()}/>
|
||||
</ListItemButton>
|
||||
);
|
||||
}
|
||||
|
||||
export default Navigation;
|
Loading…
Reference in a new issue