Start work on ephemeral topics

web/src/app/SubscriptionManager.js

@@ -1,8 +1,9 @@
 import db from "./db";
+import {topicUrl} from "./utils";
 
 class SubscriptionManager {
+    /** All subscriptions, including "new count"; this is a JOIN, see https://dexie.org/docs/API-Reference#joining */
     async all() {
-        // All subscriptions, including "new count"; this is a JOIN, see https://dexie.org/docs/API-Reference#joining
         const subscriptions = await db.subscriptions.toArray();
         await Promise.all(subscriptions.map(async s => {
             s.new = await db.notifications
@@ -16,8 +17,16 @@ class SubscriptionManager {
         return await db.subscriptions.get(subscriptionId)
     }
 
-    async save(subscription) {
+    async add(baseUrl, topic, ephemeral) {
+        const subscription = {
+            id: topicUrl(baseUrl, topic),
+            baseUrl: baseUrl,
+            topic: topic,
+            ephemeral: ephemeral,
+            last: null
+        };
         await db.subscriptions.put(subscription);
+        return subscription;
     }
 
     async updateState(subscriptionId, state) {

web/src/app/utils.js

@@ -11,6 +11,7 @@ export const topicUrlAuth = (baseUrl, topic) => `${topicUrl(baseUrl, topic)}/aut
 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 expandSecureUrl = (url) => `https://${url}`;
 
 export const validUrl = (url) => {
     return url.match(/^https?:\/\//);

web/src/components/App.js

@@ -14,8 +14,8 @@ import Preferences from "./Preferences";
 import {useLiveQuery} from "dexie-react-hooks";
 import subscriptionManager from "../app/SubscriptionManager";
 import userManager from "../app/UserManager";
-import {BrowserRouter, Route, Routes, Outlet, useOutletContext, useNavigate, useParams} from "react-router-dom";
+import {BrowserRouter, Outlet, Route, Routes, useNavigate, useOutletContext, useParams} from "react-router-dom";
-import {expandUrl, subscriptionRoute} from "../app/utils";
+import {expandSecureUrl, expandUrl, subscriptionRoute, topicUrl} from "../app/utils";
 
 // TODO support unsubscribed routes
 // TODO "copy url" toast
@@ -44,12 +44,25 @@ const App = () => {
 const AllSubscriptions = () => {
     const { subscriptions } = useOutletContext();
     return <Notifications mode="all" subscriptions={subscriptions}/>;
-}
+};
 
 const SingleSubscription = () => {
-    const { selected } = useOutletContext();
+    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]);
+
     return <Notifications mode="one" subscription={selected}/>;
-}
+};
 
 const Layout = () => {
     const params = useParams();

web/src/components/SubscribeDialog.js

@@ -25,13 +25,7 @@ const SubscribeDialog = (props) => {
     const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
     const handleSuccess = async () => {
         const actualBaseUrl = (baseUrl) ? baseUrl : window.location.origin;
-        const subscription = {
+        const subscription = await subscriptionManager.add(actualBaseUrl, topic, false);
-            id: topicUrl(actualBaseUrl, topic),
-            baseUrl: actualBaseUrl,
-            topic: topic,
-            last: null
-        };
-        await subscriptionManager.save(subscription);
         poller.pollInBackground(subscription); // Dangle!
         props.onSuccess(subscription);
     }