2022-02-18 15:49:51 +01:00
|
|
|
import * as React from 'react';
|
2022-02-21 02:04:03 +01:00
|
|
|
import {useEffect, useState} from 'react';
|
2022-02-18 15:49:51 +01:00
|
|
|
import Box from '@mui/material/Box';
|
2022-02-25 02:18:46 +01:00
|
|
|
import {ThemeProvider} from '@mui/material/styles';
|
2022-02-20 01:48:33 +01:00
|
|
|
import CssBaseline from '@mui/material/CssBaseline';
|
|
|
|
import Toolbar from '@mui/material/Toolbar';
|
2022-02-28 17:52:50 +01:00
|
|
|
import Notifications from "./Notifications";
|
2022-02-20 04:26:58 +01:00
|
|
|
import theme from "./theme";
|
2022-02-25 18:46:22 +01:00
|
|
|
import Navigation from "./Navigation";
|
|
|
|
import ActionBar from "./ActionBar";
|
2022-03-06 06:02:27 +01:00
|
|
|
import notifier from "../app/Notifier";
|
2022-02-28 22:56:38 +01:00
|
|
|
import Preferences from "./Preferences";
|
2022-03-02 03:23:12 +01:00
|
|
|
import {useLiveQuery} from "dexie-react-hooks";
|
2022-03-03 22:52:07 +01:00
|
|
|
import subscriptionManager from "../app/SubscriptionManager";
|
|
|
|
import userManager from "../app/UserManager";
|
2022-03-10 05:28:55 +01:00
|
|
|
import {BrowserRouter, Outlet, Route, Routes, useOutletContext, useParams} from "react-router-dom";
|
|
|
|
import {expandUrl} from "../app/utils";
|
|
|
|
import ErrorBoundary from "./ErrorBoundary";
|
|
|
|
import routes from "./routes";
|
2022-03-11 20:43:54 +01:00
|
|
|
import {useAutoSubscribe, useConnectionListeners, useLocalStorageMigration} from "./hooks";
|
2022-03-20 18:52:07 +01:00
|
|
|
import {Backdrop, ListItemIcon, ListItemText, Menu} from "@mui/material";
|
|
|
|
import Paper from "@mui/material/Paper";
|
|
|
|
import IconButton from "@mui/material/IconButton";
|
|
|
|
import {MoreVert} from "@mui/icons-material";
|
|
|
|
import InsertEmoticonIcon from "@mui/icons-material/InsertEmoticon";
|
|
|
|
import MenuItem from "@mui/material/MenuItem";
|
|
|
|
import TextField from "@mui/material/TextField";
|
|
|
|
import SendIcon from "@mui/icons-material/Send";
|
|
|
|
import priority1 from "../img/priority-1.svg";
|
|
|
|
import priority2 from "../img/priority-2.svg";
|
|
|
|
import priority4 from "../img/priority-4.svg";
|
|
|
|
import priority5 from "../img/priority-5.svg";
|
2022-02-25 02:18:46 +01:00
|
|
|
|
2022-03-11 16:43:18 +01:00
|
|
|
// TODO add drag and drop
|
2022-03-06 06:02:27 +01:00
|
|
|
// TODO races when two tabs are open
|
2022-03-06 16:42:05 +01:00
|
|
|
// TODO investigate service workers
|
2022-02-26 17:51:45 +01:00
|
|
|
|
2022-02-18 20:41:01 +01:00
|
|
|
const App = () => {
|
2022-03-04 22:10:04 +01:00
|
|
|
return (
|
2022-03-10 21:37:50 +01:00
|
|
|
<BrowserRouter>
|
|
|
|
<ThemeProvider theme={theme}>
|
|
|
|
<CssBaseline/>
|
|
|
|
<ErrorBoundary>
|
2022-03-10 05:28:55 +01:00
|
|
|
<Routes>
|
|
|
|
<Route element={<Layout/>}>
|
2022-03-10 21:37:50 +01:00
|
|
|
<Route path={routes.root} element={<AllSubscriptions/>}/>
|
|
|
|
<Route path={routes.settings} element={<Preferences/>}/>
|
|
|
|
<Route path={routes.subscription} element={<SingleSubscription/>}/>
|
|
|
|
<Route path={routes.subscriptionExternal} element={<SingleSubscription/>}/>
|
2022-03-10 05:28:55 +01:00
|
|
|
</Route>
|
|
|
|
</Routes>
|
2022-03-10 21:37:50 +01:00
|
|
|
</ErrorBoundary>
|
|
|
|
</ThemeProvider>
|
|
|
|
</BrowserRouter>
|
2022-03-04 22:10:04 +01:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2022-03-08 20:29:03 +01:00
|
|
|
const AllSubscriptions = () => {
|
|
|
|
const { subscriptions } = useOutletContext();
|
|
|
|
return <Notifications mode="all" subscriptions={subscriptions}/>;
|
2022-03-08 21:19:15 +01:00
|
|
|
};
|
2022-03-08 20:13:32 +01:00
|
|
|
|
2022-03-08 20:29:03 +01:00
|
|
|
const SingleSubscription = () => {
|
2022-03-08 21:19:15 +01:00
|
|
|
const { subscriptions, selected } = useOutletContext();
|
2022-03-09 02:26:15 +01:00
|
|
|
useAutoSubscribe(subscriptions, selected);
|
2022-03-08 20:29:03 +01:00
|
|
|
return <Notifications mode="one" subscription={selected}/>;
|
2022-03-08 21:19:15 +01:00
|
|
|
};
|
2022-03-08 20:13:32 +01:00
|
|
|
|
2022-03-08 20:29:03 +01:00
|
|
|
const Layout = () => {
|
|
|
|
const params = useParams();
|
2022-02-25 02:18:46 +01:00
|
|
|
const [mobileDrawerOpen, setMobileDrawerOpen] = useState(false);
|
2022-03-06 06:02:27 +01:00
|
|
|
const [notificationsGranted, setNotificationsGranted] = useState(notifier.granted());
|
2022-03-03 22:52:07 +01:00
|
|
|
const users = useLiveQuery(() => userManager.all());
|
2022-03-08 20:29:03 +01:00
|
|
|
const subscriptions = useLiveQuery(() => subscriptionManager.all());
|
2022-03-07 04:37:13 +01:00
|
|
|
const newNotificationsCount = subscriptions?.reduce((prev, cur) => prev + cur.new, 0) || 0;
|
2022-03-08 20:29:03 +01:00
|
|
|
const [selected] = (subscriptions || []).filter(s => {
|
|
|
|
return (params.baseUrl && expandUrl(params.baseUrl).includes(s.baseUrl) && params.topic === s.topic)
|
|
|
|
|| (window.location.origin === s.baseUrl && params.topic === s.topic)
|
|
|
|
});
|
2022-03-04 22:10:04 +01:00
|
|
|
|
2022-03-11 20:43:54 +01:00
|
|
|
useConnectionListeners(subscriptions, users);
|
|
|
|
useLocalStorageMigration();
|
2022-03-08 20:13:32 +01:00
|
|
|
useEffect(() => updateTitle(newNotificationsCount), [newNotificationsCount]);
|
2022-03-07 04:37:13 +01:00
|
|
|
|
2022-02-18 15:49:51 +01:00
|
|
|
return (
|
2022-03-04 22:10:04 +01:00
|
|
|
<Box sx={{display: 'flex'}}>
|
2022-02-25 02:18:46 +01:00
|
|
|
<CssBaseline/>
|
2022-03-20 18:52:07 +01:00
|
|
|
<DropZone/>
|
2022-03-04 22:10:04 +01:00
|
|
|
<ActionBar
|
2022-03-08 20:13:32 +01:00
|
|
|
selected={selected}
|
2022-03-04 22:10:04 +01:00
|
|
|
onMobileDrawerToggle={() => setMobileDrawerOpen(!mobileDrawerOpen)}
|
|
|
|
/>
|
2022-03-08 17:33:17 +01:00
|
|
|
<Navigation
|
|
|
|
subscriptions={subscriptions}
|
2022-03-08 20:13:32 +01:00
|
|
|
selectedSubscription={selected}
|
2022-03-08 17:33:17 +01:00
|
|
|
notificationsGranted={notificationsGranted}
|
|
|
|
mobileDrawerOpen={mobileDrawerOpen}
|
|
|
|
onMobileDrawerToggle={() => setMobileDrawerOpen(!mobileDrawerOpen)}
|
|
|
|
onNotificationGranted={setNotificationsGranted}
|
|
|
|
/>
|
2022-03-04 22:10:04 +01:00
|
|
|
<Main>
|
|
|
|
<Toolbar/>
|
2022-03-08 20:29:03 +01:00
|
|
|
<Outlet context={{ subscriptions, selected }}/>
|
2022-03-04 22:10:04 +01:00
|
|
|
</Main>
|
2022-03-20 18:52:07 +01:00
|
|
|
<Sender/>
|
2022-03-04 22:10:04 +01:00
|
|
|
</Box>
|
2022-02-18 15:49:51 +01:00
|
|
|
);
|
|
|
|
}
|
2022-02-18 20:41:01 +01:00
|
|
|
|
2022-03-02 22:16:30 +01:00
|
|
|
const Main = (props) => {
|
|
|
|
return (
|
|
|
|
<Box
|
2022-03-08 05:07:07 +01:00
|
|
|
id="main"
|
2022-03-02 22:16:30 +01:00
|
|
|
component="main"
|
|
|
|
sx={{
|
|
|
|
display: 'flex',
|
|
|
|
flexGrow: 1,
|
|
|
|
flexDirection: 'column',
|
|
|
|
padding: 3,
|
|
|
|
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]
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{props.children}
|
|
|
|
</Box>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2022-03-20 18:52:07 +01:00
|
|
|
const priorityFiles = {
|
|
|
|
1: priority1,
|
|
|
|
2: priority2,
|
|
|
|
4: priority4,
|
|
|
|
5: priority5
|
|
|
|
};
|
|
|
|
|
|
|
|
const Sender = (props) => {
|
|
|
|
const [priority, setPriority] = useState(5);
|
|
|
|
const [priorityAnchorEl, setPriorityAnchorEl] = React.useState(null);
|
|
|
|
const priorityMenuOpen = Boolean(priorityAnchorEl);
|
|
|
|
|
|
|
|
const handlePriorityClick = (p) => {
|
|
|
|
setPriority(p);
|
|
|
|
setPriorityAnchorEl(null);
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Paper
|
|
|
|
elevation={3}
|
|
|
|
sx={{
|
|
|
|
display: "flex",
|
|
|
|
position: 'fixed',
|
|
|
|
bottom: 0,
|
|
|
|
right: 0,
|
|
|
|
padding: 2,
|
|
|
|
width: `calc(100% - ${Navigation.width}px)`,
|
|
|
|
backgroundColor: (theme) => theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900]
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<IconButton color="inherit" size="large" edge="start">
|
|
|
|
<MoreVert/>
|
|
|
|
</IconButton>
|
|
|
|
<IconButton color="inherit" size="large" edge="start">
|
|
|
|
<InsertEmoticonIcon/>
|
|
|
|
</IconButton>
|
|
|
|
<IconButton color="inherit" size="large" edge="start" onClick={(ev) => setPriorityAnchorEl(ev.currentTarget)}>
|
|
|
|
<img src={priorityFiles[priority]}/>
|
|
|
|
</IconButton>
|
|
|
|
<Menu
|
|
|
|
anchorEl={priorityAnchorEl}
|
|
|
|
open={priorityMenuOpen}
|
|
|
|
onClose={() => setPriorityAnchorEl(null)}
|
|
|
|
>
|
|
|
|
{[5,4,2,1].map(p => <MenuItem onClick={() => handlePriorityClick(p)}>
|
|
|
|
<ListItemIcon><img src={priorityFiles[p]}/></ListItemIcon>
|
|
|
|
<ListItemText>Priority {p}</ListItemText>
|
|
|
|
</MenuItem>)}
|
|
|
|
</Menu>
|
|
|
|
<div style={{display: "flex", flexDirection: "column", width: "100%"}}>
|
|
|
|
<TextField
|
|
|
|
autoFocus
|
|
|
|
margin="dense"
|
|
|
|
placeholder="Message"
|
|
|
|
type="text"
|
|
|
|
fullWidth
|
|
|
|
variant="standard"
|
|
|
|
multiline
|
|
|
|
/>
|
|
|
|
<div style={{display: "flex", width: "100%"}}>
|
|
|
|
<TextField
|
|
|
|
margin="dense"
|
|
|
|
placeholder="Title"
|
|
|
|
type="text"
|
|
|
|
fullWidth
|
|
|
|
variant="standard"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<IconButton color="inherit" size="large" edge="end">
|
|
|
|
<SendIcon/>
|
|
|
|
</IconButton>
|
|
|
|
</Paper>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
const DropZone = (props) => {
|
|
|
|
const [showDropZone, setShowDropZone] = useState(false);
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
window.addEventListener('dragenter', () => setShowDropZone(true));
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
const allowSubmit = () => true;
|
|
|
|
|
|
|
|
const allowDrag = (e) => {
|
|
|
|
if (allowSubmit()) {
|
|
|
|
e.dataTransfer.dropEffect = 'copy';
|
|
|
|
e.preventDefault();
|
|
|
|
}
|
|
|
|
};
|
|
|
|
const handleDrop = (e) => {
|
|
|
|
e.preventDefault();
|
|
|
|
setShowDropZone(false);
|
|
|
|
console.log(e.dataTransfer.files[0]);
|
|
|
|
};
|
|
|
|
|
|
|
|
if (!showDropZone) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Backdrop
|
|
|
|
sx={{ color: '#fff', zIndex: 3500 }}
|
|
|
|
open={showDropZone}
|
|
|
|
onClick={() => setShowDropZone(false)}
|
|
|
|
onDragEnter={allowDrag}
|
|
|
|
onDragOver={allowDrag}
|
|
|
|
onDragLeave={() => setShowDropZone(false)}
|
|
|
|
onDrop={handleDrop}
|
|
|
|
>
|
|
|
|
|
|
|
|
</Backdrop>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2022-03-08 20:13:32 +01:00
|
|
|
const updateTitle = (newNotificationsCount) => {
|
2022-03-10 05:28:55 +01:00
|
|
|
document.title = (newNotificationsCount > 0) ? `(${newNotificationsCount}) ntfy` : "ntfy";
|
2022-03-08 20:13:32 +01:00
|
|
|
}
|
|
|
|
|
2022-02-18 20:41:01 +01:00
|
|
|
export default App;
|