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-24 02:30:12 +01:00
|
|
|
import connectionManager from "../app/ConnectionManager";
|
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-08 21:19:15 +01:00
|
|
|
import {BrowserRouter, Outlet, Route, Routes, useNavigate, useOutletContext, useParams} from "react-router-dom";
|
|
|
|
import {expandSecureUrl, expandUrl, subscriptionRoute, topicUrl} from "../app/utils";
|
2022-03-09 02:26:15 +01:00
|
|
|
import poller from "../app/Poller";
|
2022-02-25 02:18:46 +01:00
|
|
|
|
2022-03-06 04:11:32 +01:00
|
|
|
// TODO "copy url" toast
|
|
|
|
// TODO "copy link url" button
|
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 (
|
|
|
|
<BrowserRouter>
|
|
|
|
<ThemeProvider theme={theme}>
|
|
|
|
<CssBaseline/>
|
2022-03-08 20:29:03 +01:00
|
|
|
<Routes>
|
|
|
|
<Route element={<Layout/>}>
|
|
|
|
<Route path="/" element={<AllSubscriptions/>} />
|
|
|
|
<Route path="settings" element={<Preferences/>} />
|
|
|
|
<Route path=":topic" element={<SingleSubscription/>} />
|
|
|
|
<Route path=":baseUrl/:topic" element={<SingleSubscription/>} />
|
|
|
|
</Route>
|
|
|
|
</Routes>
|
2022-03-04 22:10:04 +01:00
|
|
|
</ThemeProvider>
|
|
|
|
</BrowserRouter>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
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-07 03:39:20 +01:00
|
|
|
useConnectionListeners();
|
2022-03-06 04:33:34 +01:00
|
|
|
|
2022-03-08 20:13:32 +01:00
|
|
|
useEffect(() => connectionManager.refresh(subscriptions, users), [subscriptions, users]);
|
|
|
|
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-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>
|
|
|
|
</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-07 03:39:20 +01:00
|
|
|
const useConnectionListeners = () => {
|
|
|
|
const navigate = useNavigate();
|
|
|
|
useEffect(() => {
|
|
|
|
const handleNotification = async (subscriptionId, notification) => {
|
|
|
|
const added = await subscriptionManager.addNotification(subscriptionId, notification);
|
|
|
|
if (added) {
|
|
|
|
const defaultClickAction = (subscription) => navigate(subscriptionRoute(subscription));
|
|
|
|
await notifier.notify(subscriptionId, notification, defaultClickAction)
|
|
|
|
}
|
|
|
|
};
|
|
|
|
connectionManager.registerStateListener(subscriptionManager.updateState);
|
|
|
|
connectionManager.registerNotificationListener(handleNotification);
|
|
|
|
return () => {
|
|
|
|
connectionManager.resetStateListener();
|
|
|
|
connectionManager.resetNotificationListener();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
// We have to disable dep checking for "navigate". This is fine, it never changes.
|
|
|
|
// eslint-disable-next-line
|
|
|
|
[]);
|
|
|
|
};
|
|
|
|
|
2022-03-09 02:26:15 +01:00
|
|
|
const useAutoSubscribe = (subscriptions, selected) => {
|
|
|
|
const [autoSubscribed, setAutoSubscribed] = useState(false);
|
|
|
|
const params = useParams();
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
const loaded = subscriptions !== null && subscriptions !== undefined;
|
|
|
|
const eligible = loaded && params.topic && !selected && !autoSubscribed;
|
|
|
|
if (eligible) {
|
|
|
|
setAutoSubscribed(true);
|
|
|
|
const baseUrl = (params.baseUrl) ? expandSecureUrl(params.baseUrl) : window.location.origin;
|
|
|
|
console.log(`[App] Auto-subscribing to ${topicUrl(baseUrl, params.topic)}`);
|
|
|
|
(async () => {
|
|
|
|
const subscription = await subscriptionManager.add(baseUrl, params.topic, true);
|
|
|
|
poller.pollInBackground(subscription); // Dangle!
|
|
|
|
})();
|
|
|
|
}
|
|
|
|
}, [params, subscriptions, selected, autoSubscribed]);
|
|
|
|
};
|
|
|
|
|
2022-03-08 20:13:32 +01:00
|
|
|
const updateTitle = (newNotificationsCount) => {
|
|
|
|
document.title = (newNotificationsCount > 0) ? `(${newNotificationsCount}) ntfy web` : "ntfy web";
|
|
|
|
}
|
|
|
|
|
2022-02-18 20:41:01 +01:00
|
|
|
export default App;
|