From 55c021796eb4be3c0756e252023ac6667798f173 Mon Sep 17 00:00:00 2001 From: Philipp Heckel Date: Tue, 8 Mar 2022 14:13:32 -0500 Subject: [PATCH] Attempt to use react router the way it was meant to --- web/src/app/utils.js | 1 + web/src/components/ActionBar.js | 8 +-- web/src/components/App.js | 111 +++++++++++++++++--------------- 3 files changed, 63 insertions(+), 57 deletions(-) diff --git a/web/src/app/utils.js b/web/src/app/utils.js index c9b5b4c5..d8763409 100644 --- a/web/src/app/utils.js +++ b/web/src/app/utils.js @@ -10,6 +10,7 @@ export const topicUrlJsonPollWithSince = (baseUrl, topic, since) => `${topicUrlJ export const topicUrlAuth = (baseUrl, topic) => `${topicUrl(baseUrl, topic)}/auth`; export const topicShortUrl = (baseUrl, topic) => shortUrl(topicUrl(baseUrl, topic)); export const shortUrl = (url) => url.replaceAll(/https?:\/\//g, ""); +export const expandUrl = (url) => [`https://${url}`, `http://${url}`]; export const validUrl = (url) => { return url.match(/^https?:\/\//); diff --git a/web/src/components/ActionBar.js b/web/src/components/ActionBar.js index 88e36dcd..a135a238 100644 --- a/web/src/components/ActionBar.js +++ b/web/src/components/ActionBar.js @@ -22,8 +22,8 @@ import subscriptionManager from "../app/SubscriptionManager"; const ActionBar = (props) => { const location = useLocation(); let title = "ntfy"; - if (props.selectedSubscription) { - title = topicShortUrl(props.selectedSubscription.baseUrl, props.selectedSubscription.topic); + if (props.selected) { + title = topicShortUrl(props.selected.baseUrl, props.selected.topic); } else if (location.pathname === "/settings") { title = "Settings"; } @@ -50,8 +50,8 @@ const ActionBar = (props) => { {title} - {props.selectedSubscription && } diff --git a/web/src/components/App.js b/web/src/components/App.js index 2367fa6b..29899850 100644 --- a/web/src/components/App.js +++ b/web/src/components/App.js @@ -12,16 +12,12 @@ import ActionBar from "./ActionBar"; import notifier from "../app/Notifier"; import Preferences from "./Preferences"; import {useLiveQuery} from "dexie-react-hooks"; -import poller from "../app/Poller"; -import pruner from "../app/Pruner"; import subscriptionManager from "../app/SubscriptionManager"; import userManager from "../app/UserManager"; -import {BrowserRouter, Route, Routes, useLocation, useNavigate} from "react-router-dom"; -import {subscriptionRoute} from "../app/utils"; +import {BrowserRouter, Route, Routes, useNavigate, useParams} from "react-router-dom"; +import {expandUrl, subscriptionRoute} from "../app/utils"; // TODO support unsubscribed routes -// TODO add "home" route that is selected when nothing else fits -// TODO new notification indicator // TODO "copy url" toast // TODO "copy link url" button // TODO races when two tabs are open @@ -32,42 +28,78 @@ const App = () => { - + ); } -const Root = () => { +const Content = () => { + const subscriptions = useLiveQuery(() => subscriptionManager.all()); + // const context = { subscriptions }; + return ( + + } /> + } /> + } /> + } /> + } /> + + ) +}; + +const AllSubscriptions = (props) => { + return ( + + + + ); +} + +const SingleSubscription = (props) => { + 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 ( + + + + ); +} + +const PrefLayout = (props) => { + return ( + + + + ); +} + +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 location = useLocation(); const users = useLiveQuery(() => userManager.all()); - const subscriptions = useLiveQuery(() => subscriptionManager.all()); - const selectedSubscription = findSelected(location, subscriptions); const newNotificationsCount = subscriptions?.reduce((prev, cur) => prev + cur.new, 0) || 0; useConnectionListeners(); - useEffect(() => { - connectionManager.refresh(subscriptions, users); - }, [subscriptions, users]); // Dangle! - - useEffect(() => { - document.title = (newNotificationsCount > 0) ? `(${newNotificationsCount}) ntfy web` : "ntfy web"; - }, [newNotificationsCount]); + useEffect(() => connectionManager.refresh(subscriptions, users), [subscriptions, users]); + useEffect(() => updateTitle(newNotificationsCount), [newNotificationsCount]); return ( setMobileDrawerOpen(!mobileDrawerOpen)} /> setMobileDrawerOpen(!mobileDrawerOpen)} @@ -75,12 +107,7 @@ const Root = () => { />
- - } /> - } /> - } /> - } /> - + {props.children}
); @@ -107,32 +134,6 @@ const Main = (props) => { ); }; -const findSelected = (location, subscriptions) => { - if (!subscriptions || !location) { - return null; - } - const [subscription] = subscriptions.filter(s => location.pathname === subscriptionRoute(s)); - return subscription; - - /* - if (location.pathname === "/" || location.pathname === "/settings") { - return null; - } - if (!subscription) { - const [, topic] = location.pathname.split("/"); - const subscription = { - id: topicUrl(window.location.origin, topic), - baseUrl: window.location.origin, - topic: topic, - last: "" - } - subscriptionManager.save(subscription); - return subscription; - } - - */ -}; - const useConnectionListeners = () => { const navigate = useNavigate(); useEffect(() => { @@ -155,4 +156,8 @@ const useConnectionListeners = () => { []); }; +const updateTitle = (newNotificationsCount) => { + document.title = (newNotificationsCount > 0) ? `(${newNotificationsCount}) ntfy web` : "ntfy web"; +} + export default App;