2022-02-18 15:49:51 +01:00
|
|
|
import * as React from 'react';
|
2022-04-08 01:11:51 +02:00
|
|
|
import { Suspense } 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";
|
2022-04-04 16:04:01 +02:00
|
|
|
import {expandUrl} from "../app/utils";
|
2022-03-10 05:28:55 +01:00
|
|
|
import ErrorBoundary from "./ErrorBoundary";
|
|
|
|
import routes from "./routes";
|
2022-03-28 20:14:20 +02:00
|
|
|
import {useAutoSubscribe, useBackgroundProcesses, useConnectionListeners} from "./hooks";
|
2022-04-08 16:44:35 +02:00
|
|
|
import PublishDialog from "./PublishDialog";
|
2022-04-04 16:04:01 +02:00
|
|
|
import Messaging from "./Messaging";
|
2022-04-08 01:11:51 +02:00
|
|
|
import "./i18n"; // Translations!
|
2022-04-08 02:31:24 +02:00
|
|
|
import {Backdrop, CircularProgress} from "@mui/material";
|
2022-12-02 21:37:48 +01:00
|
|
|
import Home from "./Home";
|
|
|
|
import Login from "./Login";
|
2022-12-03 21:20:59 +01:00
|
|
|
import i18n from "i18next";
|
2022-12-24 21:51:22 +01:00
|
|
|
import api, {UnauthorizedError} from "../app/Api";
|
2022-12-03 21:20:59 +01:00
|
|
|
import prefs from "../app/Prefs";
|
|
|
|
import session from "../app/Session";
|
2022-12-13 21:19:40 +01:00
|
|
|
import Pricing from "./Pricing";
|
2022-12-14 11:36:53 +01:00
|
|
|
import Signup from "./Signup";
|
2022-12-16 04:07:04 +01:00
|
|
|
import Account from "./Account";
|
|
|
|
import ResetPassword from "./ResetPassword";
|
2022-02-25 02:18:46 +01:00
|
|
|
|
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-04-08 01:11:51 +02:00
|
|
|
<Suspense fallback={<Loader />}>
|
|
|
|
<BrowserRouter>
|
|
|
|
<ThemeProvider theme={theme}>
|
|
|
|
<CssBaseline/>
|
|
|
|
<ErrorBoundary>
|
|
|
|
<Routes>
|
2022-12-02 21:37:48 +01:00
|
|
|
<Route path={routes.home} element={<Home/>}/>
|
2022-12-13 21:19:40 +01:00
|
|
|
<Route path={routes.pricing} element={<Pricing/>}/>
|
2022-12-02 21:37:48 +01:00
|
|
|
<Route path={routes.login} element={<Login/>}/>
|
2022-12-14 11:36:53 +01:00
|
|
|
<Route path={routes.signup} element={<Signup/>}/>
|
2022-12-16 04:07:04 +01:00
|
|
|
<Route path={routes.resetPassword} element={<ResetPassword/>}/>
|
2022-04-08 01:11:51 +02:00
|
|
|
<Route element={<Layout/>}>
|
2022-12-02 21:37:48 +01:00
|
|
|
<Route path={routes.app} element={<AllSubscriptions/>}/>
|
2022-12-16 04:07:04 +01:00
|
|
|
<Route path={routes.account} element={<Account/>}/>
|
2022-04-08 01:11:51 +02:00
|
|
|
<Route path={routes.settings} element={<Preferences/>}/>
|
|
|
|
<Route path={routes.subscription} element={<SingleSubscription/>}/>
|
|
|
|
<Route path={routes.subscriptionExternal} element={<SingleSubscription/>}/>
|
|
|
|
</Route>
|
|
|
|
</Routes>
|
|
|
|
</ErrorBoundary>
|
|
|
|
</ThemeProvider>
|
|
|
|
</BrowserRouter>
|
|
|
|
</Suspense>
|
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-04-04 04:58:44 +02:00
|
|
|
const [sendDialogOpenMode, setSendDialogOpenMode] = useState("");
|
2022-12-17 19:49:32 +01:00
|
|
|
const [account, setAccount] = useState(null);
|
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)
|
2022-12-21 19:19:07 +01:00
|
|
|
|| (config.baseUrl === s.baseUrl && params.topic === s.topic)
|
2022-03-08 20:29:03 +01:00
|
|
|
});
|
2022-03-04 22:10:04 +01:00
|
|
|
|
2022-03-11 20:43:54 +01:00
|
|
|
useConnectionListeners(subscriptions, users);
|
2022-03-27 15:20:25 +02:00
|
|
|
useBackgroundProcesses();
|
2022-03-08 20:13:32 +01:00
|
|
|
useEffect(() => updateTitle(newNotificationsCount), [newNotificationsCount]);
|
2022-03-07 04:37:13 +01:00
|
|
|
|
2022-12-03 21:20:59 +01:00
|
|
|
useEffect(() => {
|
|
|
|
(async () => {
|
2022-12-24 21:51:22 +01:00
|
|
|
// TODO this should not live here
|
|
|
|
try {
|
|
|
|
if (!session.token()) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
const acc = await api.getAccount(config.baseUrl, session.token());
|
2022-12-17 19:49:32 +01:00
|
|
|
setAccount(acc);
|
|
|
|
if (acc.language) {
|
|
|
|
await i18n.changeLanguage(acc.language);
|
2022-12-03 21:20:59 +01:00
|
|
|
}
|
2022-12-17 19:49:32 +01:00
|
|
|
if (acc.notification) {
|
|
|
|
if (acc.notification.sound) {
|
|
|
|
await prefs.setSound(acc.notification.sound);
|
2022-12-03 21:20:59 +01:00
|
|
|
}
|
2022-12-17 19:49:32 +01:00
|
|
|
if (acc.notification.delete_after) {
|
|
|
|
await prefs.setDeleteAfter(acc.notification.delete_after);
|
2022-12-09 02:50:48 +01:00
|
|
|
}
|
2022-12-17 19:49:32 +01:00
|
|
|
if (acc.notification.min_priority) {
|
|
|
|
await prefs.setMinPriority(acc.notification.min_priority);
|
2022-12-09 02:50:48 +01:00
|
|
|
}
|
|
|
|
}
|
2022-12-17 19:49:32 +01:00
|
|
|
if (acc.subscriptions) {
|
|
|
|
await subscriptionManager.syncFromRemote(acc.subscriptions);
|
2022-12-03 21:20:59 +01:00
|
|
|
}
|
2022-12-24 21:51:22 +01:00
|
|
|
} catch (e) {
|
|
|
|
console.log(`[App] Error fetching account`, e);
|
|
|
|
if ((e instanceof UnauthorizedError)) {
|
|
|
|
session.reset();
|
|
|
|
window.location.href = routes.login;
|
|
|
|
}
|
2022-12-03 21:20:59 +01:00
|
|
|
}
|
|
|
|
})();
|
2022-12-09 02:50:48 +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-04-08 16:44:35 +02:00
|
|
|
onPublishMessageClick={() => setSendDialogOpenMode(PublishDialog.OPEN_MODE_DEFAULT)}
|
2022-03-08 17:33:17 +01:00
|
|
|
/>
|
2022-03-04 22:10:04 +01:00
|
|
|
<Main>
|
|
|
|
<Toolbar/>
|
2022-12-17 19:49:32 +01:00
|
|
|
<Outlet context={{ account, subscriptions, selected }}/>
|
2022-03-04 22:10:04 +01:00
|
|
|
</Main>
|
2022-04-04 04:58:44 +02:00
|
|
|
<Messaging
|
|
|
|
selected={selected}
|
|
|
|
dialogOpenMode={sendDialogOpenMode}
|
|
|
|
onDialogOpenModeChange={setSendDialogOpenMode}
|
|
|
|
/>
|
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-04-08 02:31:24 +02:00
|
|
|
const Loader = () => (
|
|
|
|
<Backdrop
|
|
|
|
open={true}
|
|
|
|
sx={{
|
|
|
|
zIndex: 100000,
|
|
|
|
backgroundColor: (theme) => theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900]
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<CircularProgress color="success" disableShrink />
|
|
|
|
</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;
|