vbatts/ntfy
1
0
Fork 0
Code Pull requests 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 {useLiveQuery} from "dexie-react-hooks";
import subscriptionManager from "../app/SubscriptionManager"; import subscriptionManager from "../app/SubscriptionManager";
import userManager from "../app/UserManager"; 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"; import {expandUrl, subscriptionRoute} from "../app/utils";
// TODO support unsubscribed routes // TODO support unsubscribed routes
@ -28,62 +28,40 @@ const App = () => {
<BrowserRouter> <BrowserRouter>
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
<CssBaseline/> <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> </ThemeProvider>
</BrowserRouter> </BrowserRouter>
); );
} }
const Content = () => { const AllSubscriptions = () => {
const subscriptions = useLiveQuery(() => subscriptionManager.all()); const { subscriptions } = useOutletContext();
// const context = { subscriptions }; return <Notifications mode="all" subscriptions={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 SingleSubscription = (props) => { const SingleSubscription = () => {
const { selected } = useOutletContext();
return <Notifications mode="one" subscription={selected}/>;
}
const Layout = () => {
const params = useParams(); 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 [mobileDrawerOpen, setMobileDrawerOpen] = useState(false);
const [notificationsGranted, setNotificationsGranted] = useState(notifier.granted()); const [notificationsGranted, setNotificationsGranted] = useState(notifier.granted());
const users = useLiveQuery(() => userManager.all()); const users = useLiveQuery(() => userManager.all());
const subscriptions = useLiveQuery(() => subscriptionManager.all());
const newNotificationsCount = subscriptions?.reduce((prev, cur) => prev + cur.new, 0) || 0; 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(); useConnectionListeners();
@ -107,7 +85,7 @@ const Layout = (props) => {
/> />
<Main> <Main>
<Toolbar/> <Toolbar/>
{props.children} <Outlet context={{ subscriptions, selected }}/>
</Main> </Main>
</Box> </Box>
); );