1
0
Fork 0
forked from mirrors/ntfy

Move things around

This commit is contained in:
Philipp Heckel 2022-02-25 12:46:22 -05:00
parent f9e22dcaa9
commit 42016f48ff
4 changed files with 163 additions and 150 deletions

View file

@ -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) {

View 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;

View file

@ -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]

View 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;