Account sync in action

web/src/components/App.js

@@ -27,6 +27,7 @@ import Login from "./Login";
 import Pricing from "./Pricing";
 import Signup from "./Signup";
 import Account from "./Account";
+import accountApi from "../app/AccountApi";
 
 export const AccountContext = createContext(null);
 
@@ -79,6 +80,20 @@ const Layout = () => {
     useBackgroundProcesses();
     useEffect(() => updateTitle(newNotificationsCount), [newNotificationsCount]);
 
+    useEffect(() => {
+        if (!account || !account.sync_topic) {
+            return;
+        }
+        (async () => {
+            const subscription = await subscriptionManager.add(config.base_url, account.sync_topic);
+            if (!subscription.hidden) {
+                await subscriptionManager.update(subscription.id, {
+                    internal: true
+                });
+            }
+        })();
+    }, [account]);
+
     return (
         <Box sx={{display: 'flex'}}>
             <ActionBar

web/src/components/Navigation.js

@@ -215,9 +215,11 @@ const UpgradeBanner = () => {
 };
 
 const SubscriptionList = (props) => {
-    const sortedSubscriptions = props.subscriptions.sort( (a, b) => {
-        return (topicUrl(a.baseUrl, a.topic) < topicUrl(b.baseUrl, b.topic)) ? -1 : 1;
-    });
+    const sortedSubscriptions = props.subscriptions
+        .filter(s => !s.internal)
+        .sort((a, b) => {
+            return (topicUrl(a.baseUrl, a.topic) < topicUrl(b.baseUrl, b.topic)) ? -1 : 1;
+        });
     return (
         <>
             {sortedSubscriptions.map(subscription =>

web/src/components/hooks.js

@@ -1,5 +1,5 @@
 import {useNavigate, useParams} from "react-router-dom";
-import {useEffect, useState} from "react";
+import {useContext, useEffect, useState} from "react";
 import subscriptionManager from "../app/SubscriptionManager";
 import {disallowedTopic, expandSecureUrl, topicUrl} from "../app/utils";
 import notifier from "../app/Notifier";
@@ -10,6 +10,7 @@ import pruner from "../app/Pruner";
 import session from "../app/Session";
 import {UnauthorizedError} from "../app/AccountApi";
 import accountApi from "../app/AccountApi";
+import {AccountContext} from "./App";
 
 /**
  * Wire connectionManager and subscriptionManager so that subscriptions are updated when the connection
@@ -20,6 +21,34 @@ export const useConnectionListeners = (subscriptions, users) => {
     const navigate = useNavigate();
 
     useEffect(() => {
+            const handleMessage = async (subscriptionId, message) => {
+                const subscription = await subscriptionManager.get(subscriptionId);
+                if (subscription.internal) {
+                    await handleInternalMessage(message);
+                } else {
+                    await handleNotification(subscriptionId, message);
+                }
+            };
+
+            const handleInternalMessage = async (message) => {
+                console.log(`[ConnectionListener] Received message on sync topic`, message.message);
+                try {
+                    const data = JSON.parse(message.message);
+                    if (data.event === "sync") {
+                        if (data.source !== accountApi.identity) {
+                            console.log(`[ConnectionListener] Triggering account sync`);
+                            await accountApi.sync();
+                        } else {
+                            console.log(`[ConnectionListener] I triggered the account sync, ignoring message`);
+                        }
+                    } else {
+                        console.log(`[ConnectionListener] Unknown message type. Doing nothing.`);
+                    }
+                } catch (e) {
+                    console.log(`[ConnectionListener] Error parsing sync topic message`, e);
+                }
+            };
+
             const handleNotification = async (subscriptionId, notification) => {
                 const added = await subscriptionManager.addNotification(subscriptionId, notification);
                 if (added) {
@@ -28,10 +57,10 @@ export const useConnectionListeners = (subscriptions, users) => {
                 }
             };
             connectionManager.registerStateListener(subscriptionManager.updateState);
-            connectionManager.registerNotificationListener(handleNotification);
+            connectionManager.registerMessageListener(handleMessage);
             return () => {
                 connectionManager.resetStateListener();
-                connectionManager.resetNotificationListener();
+                connectionManager.resetMessageListener();
             }
         },
         // We have to disable dep checking for "navigate". This is fine, it never changes.
@@ -100,11 +129,9 @@ export const useBackgroundProcesses = () => {
 export const useAccountListener = (setAccount) => {
     useEffect(() => {
         accountApi.registerListener(setAccount);
-        (async () => {
-            await accountApi.sync();
-        })();
+        accountApi.sync(); // Dangle
         return () => {
-            accountApi.registerListener();
+            accountApi.resetListener();
         }
     }, []);
 }