Poll on page refresh; validate subscribe dialog properly; avoid save-races

web/src/components/App.js

@@ -23,15 +23,6 @@ const App = () => {
     const [users, setUsers] = useState(new Users());
     const [selectedSubscription, setSelectedSubscription] = useState(null);
     const [notificationsGranted, setNotificationsGranted] = useState(notificationManager.granted());
-    const handleNotification = (subscriptionId, notification) => {
-        setSubscriptions(prev => {
-            const newSubscription = prev.get(subscriptionId).addNotification(notification);
-            notificationManager.notify(newSubscription, notification, () => {
-                setSelectedSubscription(newSubscription);
-            })
-            return prev.update(newSubscription).clone();
-        });
-    };
     const handleSubscribeSubmit = (subscription, user) => {
         console.log(`[App] New subscription: ${subscription.id}`);
         if (user !== null) {
@@ -39,13 +30,7 @@ const App = () => {
         }
         setSubscriptions(prev => prev.add(subscription).clone());
         setSelectedSubscription(subscription);
-        api.poll(subscription.baseUrl, subscription.topic, user)
-            .then(messages => {
-                setSubscriptions(prev => {
-                    const newSubscription = prev.get(subscription.id).addNotifications(messages);
-                    return prev.update(newSubscription).clone();
-                });
-            });
+        poll(subscription, user);
         handleRequestPermission();
     };
     const handleDeleteNotification = (subscriptionId, notificationId) => {
@@ -75,15 +60,48 @@ const App = () => {
             setNotificationsGranted(granted);
         })
     };
+    const poll = (subscription, user) => {
+        const since = subscription.last + 1; // FIXME, sigh ...
+        api.poll(subscription.baseUrl, subscription.topic, since, user)
+            .then(notifications => {
+                setSubscriptions(prev => {
+                    subscription.addNotifications(notifications);
+                    return prev.update(subscription).clone();
+                });
+            });
+    };
+
+    // Define hooks: Note that the order of the hooks is important. The "loading" hooks
+    // must be before the "saving" hooks.
     useEffect(() => {
-        setSubscriptions(repository.loadSubscriptions());
-        setUsers(repository.loadUsers());
-    }, [/* initial render only */]);
+        // Load subscriptions and users
+        const subscriptions = repository.loadSubscriptions();
+        const users = repository.loadUsers();
+        setSubscriptions(subscriptions);
+        setUsers(users);
+
+        // Poll all subscriptions
+        subscriptions.forEach((subscriptionId, subscription) => {
+            const user = users.get(subscription.baseUrl); // May be null
+            poll(subscription, user);
+        });
+    }, [/* initial render */]);
     useEffect(() => {
+        const notificationClickFallback = (subscription) => setSelectedSubscription(subscription);
+        const handleNotification = (subscriptionId, notification) => {
+            setSubscriptions(prev => {
+                const subscription = prev.get(subscriptionId);
+                if (subscription.addNotification(notification)) {
+                    notificationManager.notify(subscription, notification, notificationClickFallback)
+                }
+                return prev.update(subscription).clone();
+            });
+        };
         connectionManager.refresh(subscriptions, users, handleNotification);
-        repository.saveSubscriptions(subscriptions);
-        repository.saveUsers(users);
     }, [subscriptions, users]);
+    useEffect(() => repository.saveSubscriptions(subscriptions), [subscriptions]);
+    useEffect(() => repository.saveUsers(users), [users]);
+
     return (
         <ThemeProvider theme={theme}>
             <CssBaseline/>

web/src/components/Navigation.js

@@ -111,6 +111,7 @@ const NavList = (props) => {
             <SubscribeDialog
                 key={subscribeDialogKey} // Resets dialog when canceled/closed
                 open={subscribeDialogOpen}
+                subscriptions={props.subscriptions}
                 onCancel={handleSubscribeReset}
                 onSuccess={handleSubscribeSubmit}
             />

web/src/components/SubscribeDialog.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import {useState} from 'react';
 import Button from '@mui/material/Button';
 import TextField from '@mui/material/TextField';
 import Dialog from '@mui/material/Dialog';
@@ -6,12 +7,11 @@ import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
-import {useState} from "react";
 import Subscription from "../app/Subscription";
 import {useMediaQuery} from "@mui/material";
 import theme from "./theme";
 import api from "../app/Api";
-import {topicUrl} from "../app/utils";
+import {topicUrl, validTopic} from "../app/utils";
 import useStyles from "./styles";
 import User from "../app/User";
 
@@ -23,14 +23,9 @@ const SubscribeDialog = (props) => {
     const [topic, setTopic] = useState("");
     const [showLoginPage, setShowLoginPage] = useState(false);
     const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
-    const handleCancel = () => {
-        setTopic('');
-        props.onCancel();
-    }
     const handleSuccess = (baseUrl, topic, user) => {
         const subscription = new Subscription(baseUrl, topic);
         props.onSuccess(subscription, user);
-        setTopic('');
     }
     return (
         <Dialog open={props.open} onClose={props.onClose} fullScreen={fullScreen}>
@@ -38,7 +33,8 @@ const SubscribeDialog = (props) => {
                 baseUrl={baseUrl}
                 topic={topic}
                 setTopic={setTopic}
-                onCancel={handleCancel}
+                subscriptions={props.subscriptions}
+                onCancel={props.onCancel}
                 onNeedsLogin={() => setShowLoginPage(true)}
                 onSuccess={handleSuccess}
             />}
@@ -65,6 +61,8 @@ const SubscribePage = (props) => {
         console.log(`[SubscribeDialog] Successful login to ${topicUrl(baseUrl, topic)} for anonymous user`);
         props.onSuccess(baseUrl, topic, null);
     };
+    const existingTopicUrls = props.subscriptions.map((id, s) => s.url());
+    const subscribeButtonEnabled = validTopic(props.topic) && !existingTopicUrls.includes(topicUrl(baseUrl, topic));
     return (
         <>
             <DialogTitle>Subscribe to topic</DialogTitle>
@@ -87,7 +85,7 @@ const SubscribePage = (props) => {
             </DialogContent>
             <DialogActions>
                 <Button onClick={props.onCancel}>Cancel</Button>
-                <Button onClick={handleSubscribe} disabled={props.topic === ""}>Subscribe</Button>
+                <Button onClick={handleSubscribe} disabled={!subscribeButtonEnabled}>Subscribe</Button>
             </DialogActions>
         </>
     );