CodeMirror/ntfy
1
0
Fork 0
mirror of https://github.com/binwiederhier/ntfy.git synced 2024-06-03 02:54:39 +12:00
Code Issues Projects Releases Wiki Activity

This is it

Browse source
This commit is contained in:
Philipp Heckel 2022-03-08 14:29:03 -05:00
parent 55c021796e
commit 0aefcf29ef
1 changed files with 24 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
web/src/components/App.js
View file

@ -14,7 +14,7 @@ import Preferences from "./Preferences";
import {useLiveQuery} from "dexie-react-hooks";
import subscriptionManager from "../app/SubscriptionManager";
import userManager from "../app/UserManager";
import {BrowserRouter, Route, Routes, useNavigate, useParams} from "react-router-dom";
import {BrowserRouter, Route, Routes, Outlet, useOutletContext, useNavigate, useParams} from "react-router-dom";
import {expandUrl, subscriptionRoute} from "../app/utils";
// TODO support unsubscribed routes
@ -28,62 +28,40 @@ const App = () => {
<BrowserRouter>
<ThemeProvider theme={theme}>
<CssBaseline/>
<Content/>
<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>
</ThemeProvider>
</BrowserRouter>
);
}
const Content = () => {
const subscriptions = useLiveQuery(() => subscriptionManager.all());
// const context = { subscriptions };
return (
<Routes>
<Route path="settings" element={<PrefLayout subscriptions={subscriptions}/>} />
<Route path="settings" element={<PrefLayout subscriptions={subscriptions}/>} />
<Route path="/" element={<AllSubscriptions subscriptions={subscriptions}/>} />
<Route path=":baseUrl/:topic" element={<SingleSubscription subscriptions={subscriptions}/>} />
<Route path=":topic" element={<SingleSubscription subscriptions={subscriptions}/>} />
</Routes>
)
};
const AllSubscriptions = (props) => {
return (
<Layout subscriptions={props.subscriptions}>
<Notifications mode="all" subscriptions={props.subscriptions}/>
</Layout>
);
const AllSubscriptions = () => {
const { subscriptions } = useOutletContext();
return <Notifications mode="all" subscriptions={subscriptions}/>;
}
const SingleSubscription = (props) => {
const SingleSubscription = () => {
const { selected } = useOutletContext();
return <Notifications mode="one" subscription={selected}/>;
}
const Layout = () => {
const params = useParams();
const [selected] = (props.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)
});
return (
<Layout subscriptions={props.subscriptions} selected={selected}>
<Notifications mode="one" subscription={selected}/>
</Layout>
);
}
const PrefLayout = (props) => {
return (
<Layout subscriptions={props.subscriptions}>
<Preferences/>
</Layout>
);
}
const Layout = (props) => {
const subscriptions = props.subscriptions; // May be null/undefined
const selected = props.selected; // May be null/undefined
const [mobileDrawerOpen, setMobileDrawerOpen] = useState(false);
const [notificationsGranted, setNotificationsGranted] = useState(notifier.granted());
const users = useLiveQuery(() => userManager.all());
const subscriptions = useLiveQuery(() => subscriptionManager.all());
const newNotificationsCount = subscriptions?.reduce((prev, cur) => prev + cur.new, 0) || 0;
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)
});
useConnectionListeners();
@ -107,7 +85,7 @@ const Layout = (props) => {
/>
<Main>
<Toolbar/>
{props.children}
<Outlet context={{ subscriptions, selected }}/>
</Main>
</Box>
);