diff --git a/web/src/components/App.js b/web/src/components/App.js index afa53a16..0c69a017 100644 --- a/web/src/components/App.js +++ b/web/src/components/App.js @@ -16,8 +16,8 @@ import subscriptionManager from "../app/SubscriptionManager"; import userManager from "../app/UserManager"; import {BrowserRouter, Outlet, Route, Routes, useNavigate, useOutletContext, useParams} from "react-router-dom"; import {expandSecureUrl, expandUrl, subscriptionRoute, topicUrl} from "../app/utils"; +import poller from "../app/Poller"; -// TODO support unsubscribed routes // TODO "copy url" toast // TODO "copy link url" button // TODO races when two tabs are open @@ -48,19 +48,7 @@ const AllSubscriptions = () => { const SingleSubscription = () => { const { subscriptions, selected } = useOutletContext(); - const [missingAdded, setMissingAdded] = useState(false); - const params = useParams(); - useEffect(() => { - const loaded = subscriptions !== null && subscriptions !== undefined; - const missing = loaded && params.topic && !selected && !missingAdded; - if (missing) { - setMissingAdded(true); - const baseUrl = (params.baseUrl) ? expandSecureUrl(params.baseUrl) : window.location.origin; - console.log(`[App] Adding ephemeral subscription for ${topicUrl(baseUrl, params.topic)}`); - // subscriptionManager.add(baseUrl, params.topic, true); // Dangle! - } - }, [params, subscriptions, selected, missingAdded]); - + useAutoSubscribe(subscriptions, selected); return ; }; @@ -147,6 +135,25 @@ const useConnectionListeners = () => { []); }; +const useAutoSubscribe = (subscriptions, selected) => { + const [autoSubscribed, setAutoSubscribed] = useState(false); + const params = useParams(); + + useEffect(() => { + const loaded = subscriptions !== null && subscriptions !== undefined; + const eligible = loaded && params.topic && !selected && !autoSubscribed; + if (eligible) { + setAutoSubscribed(true); + const baseUrl = (params.baseUrl) ? expandSecureUrl(params.baseUrl) : window.location.origin; + console.log(`[App] Auto-subscribing to ${topicUrl(baseUrl, params.topic)}`); + (async () => { + const subscription = await subscriptionManager.add(baseUrl, params.topic, true); + poller.pollInBackground(subscription); // Dangle! + })(); + } + }, [params, subscriptions, selected, autoSubscribed]); +}; + const updateTitle = (newNotificationsCount) => { document.title = (newNotificationsCount > 0) ? `(${newNotificationsCount}) ntfy web` : "ntfy web"; }