2022-02-18 15:49:51 +01:00
|
|
|
import * as React from "react";
|
2023-05-24 10:20:15 +02:00
|
|
|
import { createContext, Suspense, useContext, useEffect, useState, useMemo } from "react";
|
2023-05-24 12:25:20 +02:00
|
|
|
import { Box, Toolbar, CssBaseline, Backdrop, CircularProgress } from "@mui/material";
|
2022-02-25 02:18:46 +01:00
|
|
|
import { ThemeProvider } from "@mui/material/styles";
|
2022-03-02 03:23:12 +01:00
|
|
|
import { useLiveQuery } from "dexie-react-hooks";
|
2023-01-10 02:37:13 +01:00
|
|
|
import { BrowserRouter, Outlet, Route, Routes, useParams } from "react-router-dom";
|
|
|
|
import { AllSubscriptions, SingleSubscription } 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-03 22:52:07 +01:00
|
|
|
import subscriptionManager from "../app/SubscriptionManager";
|
|
|
|
import userManager from "../app/UserManager";
|
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";
|
2023-01-10 02:37:13 +01:00
|
|
|
import { useAccountListener, 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-12-02 21:37:48 +01:00
|
|
|
import Login from "./Login";
|
2022-12-14 11:36:53 +01:00
|
|
|
import Signup from "./Signup";
|
2022-12-16 04:07:04 +01:00
|
|
|
import Account from "./Account";
|
2023-01-10 02:37:13 +01:00
|
|
|
|
|
|
|
export const AccountContext = createContext(null);
|
2022-02-25 02:18:46 +01:00
|
|
|
|
2022-02-18 20:41:01 +01:00
|
|
|
const App = () => {
|
2023-01-10 02:37:13 +01:00
|
|
|
const [account, setAccount] = useState(null);
|
2023-05-25 03:32:15 +02:00
|
|
|
const accountMemo = useMemo(() => ({ account, setAccount }), [account, setAccount]);
|
2023-05-24 10:20:15 +02:00
|
|
|
|
2022-03-04 22:10:04 +01:00
|
|
|
return (
|
2022-04-08 01:11:51 +02:00
|
|
|
<Suspense fallback={<Loader />}>
|
|
|
|
<BrowserRouter>
|
|
|
|
<ThemeProvider theme={theme}>
|
2023-05-25 03:32:15 +02:00
|
|
|
<AccountContext.Provider value={accountMemo}>
|
2023-01-10 02:37:13 +01:00
|
|
|
<CssBaseline />
|
|
|
|
<ErrorBoundary>
|
|
|
|
<Routes>
|
|
|
|
<Route path={routes.login} element={<Login />} />
|
|
|
|
<Route path={routes.signup} element={<Signup />} />
|
|
|
|
<Route element={<Layout />}>
|
|
|
|
<Route path={routes.app} element={<AllSubscriptions />} />
|
|
|
|
<Route path={routes.account} element={<Account />} />
|
|
|
|
<Route path={routes.settings} element={<Preferences />} />
|
|
|
|
<Route path={routes.subscription} element={<SingleSubscription />} />
|
|
|
|
<Route path={routes.subscriptionExternal} element={<SingleSubscription />} />
|
|
|
|
</Route>
|
|
|
|
</Routes>
|
|
|
|
</ErrorBoundary>
|
|
|
|
</AccountContext.Provider>
|
2022-04-08 01:11:51 +02:00
|
|
|
</ThemeProvider>
|
|
|
|
</BrowserRouter>
|
|
|
|
</Suspense>
|
2022-03-04 22:10:04 +01:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2023-05-24 10:20:15 +02:00
|
|
|
const updateTitle = (newNotificationsCount) => {
|
|
|
|
document.title = newNotificationsCount > 0 ? `(${newNotificationsCount}) ntfy` : "ntfy";
|
|
|
|
};
|
|
|
|
|
2022-03-08 20:29:03 +01:00
|
|
|
const Layout = () => {
|
|
|
|
const params = useParams();
|
2023-01-10 02:37:13 +01:00
|
|
|
const { account, setAccount } = useContext(AccountContext);
|
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-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());
|
2023-01-17 16:09:37 +01:00
|
|
|
const subscriptionsWithoutInternal = subscriptions?.filter((s) => !s.internal);
|
|
|
|
const newNotificationsCount = subscriptionsWithoutInternal?.reduce((prev, cur) => prev + cur.new, 0) || 0;
|
|
|
|
const [selected] = (subscriptionsWithoutInternal || []).filter(
|
|
|
|
(s) =>
|
2022-04-08 16:44:35 +02:00
|
|
|
(params.baseUrl && expandUrl(params.baseUrl).includes(s.baseUrl) && params.topic === s.topic) ||
|
2022-04-04 04:58:44 +02:00
|
|
|
(config.base_url === s.baseUrl && params.topic === s.topic)
|
2022-02-18 15:49:51 +01:00
|
|
|
);
|
2023-05-23 21:13:01 +02:00
|
|
|
|
2023-01-24 21:31:39 +01:00
|
|
|
useConnectionListeners(account, subscriptions, users);
|
2023-01-03 04:21:11 +01:00
|
|
|
useAccountListener(setAccount);
|
2022-03-27 15:20:25 +02:00
|
|
|
useBackgroundProcesses();
|
2022-03-08 20:13:32 +01:00
|
|
|
useEffect(() => updateTitle(newNotificationsCount), [newNotificationsCount]);
|
2023-05-23 21:13:01 +02:00
|
|
|
|
|
|
|
return (
|
2022-03-04 22:10:04 +01:00
|
|
|
<Box sx={{ display: "flex" }}>
|
2022-03-08 17:33:17 +01:00
|
|
|
<ActionBar selected={selected} onMobileDrawerToggle={() => setMobileDrawerOpen(!mobileDrawerOpen)} />
|
|
|
|
<Navigation
|
2023-01-17 16:09:37 +01:00
|
|
|
subscriptions={subscriptionsWithoutInternal}
|
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)}
|
2023-05-23 21:13:01 +02:00
|
|
|
/>
|
|
|
|
<Main>
|
2022-03-04 22:10:04 +01:00
|
|
|
<Toolbar />
|
2023-05-23 21:13:01 +02:00
|
|
|
<Outlet
|
2023-01-17 16:09:37 +01:00
|
|
|
context={{
|
|
|
|
subscriptions: subscriptionsWithoutInternal,
|
|
|
|
selected,
|
2023-05-23 21:13:01 +02:00
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</Main>
|
2022-04-04 04:58:44 +02:00
|
|
|
<Messaging selected={selected} dialogOpenMode={sendDialogOpenMode} onDialogOpenModeChange={setSendDialogOpenMode} />
|
2023-05-23 21:13:01 +02:00
|
|
|
</Box>
|
|
|
|
);
|
|
|
|
};
|
2022-02-18 20:41:01 +01:00
|
|
|
|
2022-03-02 22:16:30 +01:00
|
|
|
const Main = (props) => (
|
|
|
|
<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",
|
2023-05-24 10:20:15 +02:00
|
|
|
backgroundColor: ({ palette }) => (palette.mode === "light" ? palette.grey[100] : palette.grey[900]),
|
2022-03-02 22:16:30 +01:00
|
|
|
}}
|
|
|
|
>
|
|
|
|
{props.children}
|
|
|
|
</Box>
|
|
|
|
);
|
|
|
|
|
2022-04-08 02:31:24 +02:00
|
|
|
const Loader = () => (
|
|
|
|
<Backdrop
|
|
|
|
open
|
|
|
|
sx={{
|
|
|
|
zIndex: 100000,
|
2023-05-24 10:20:15 +02:00
|
|
|
backgroundColor: ({ palette }) => (palette.mode === "light" ? palette.grey[100] : palette.grey[900]),
|
2022-04-08 02:31:24 +02:00
|
|
|
}}
|
|
|
|
>
|
|
|
|
<CircularProgress color="success" disableShrink />
|
|
|
|
</Backdrop>
|
|
|
|
);
|
|
|
|
|
2022-02-18 20:41:01 +01:00
|
|
|
export default App;
|