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

web/src/app/Api.js

@@ -1,12 +1,24 @@
-import {topicUrlJsonPoll, fetchLinesIterator, topicUrl, topicUrlAuth, maybeWithBasicAuth} from "./utils";
+import {
+    topicUrlJsonPoll,
+    fetchLinesIterator,
+    topicUrl,
+    topicUrlAuth,
+    maybeWithBasicAuth,
+    topicShortUrl,
+    topicUrlJsonPollWithSince
+} from "./utils";
 
 class Api {
-    async poll(baseUrl, topic, user) {
-        const url = topicUrlJsonPoll(baseUrl, topic);
+    async poll(baseUrl, topic, since, user) {
+        const shortUrl = topicShortUrl(baseUrl, topic);
+        const url = (since > 1) // FIXME Ahh, this is >1, because we do +1 when we call this .....
+            ? topicUrlJsonPollWithSince(baseUrl, topic, since)
+            : topicUrlJsonPoll(baseUrl, topic);
         const messages = [];
         const headers = maybeWithBasicAuth({}, user);
         console.log(`[Api] Polling ${url}`);
         for await (let line of fetchLinesIterator(url, headers)) {
+            console.log(`[Api, ${shortUrl}] Received message ${line}`);
             messages.push(JSON.parse(line));
         }
         return messages;

web/src/app/NotificationManager.js

@@ -1,9 +1,9 @@
-import {formatMessage, formatTitle} from "./utils";
+import {formatMessage, formatTitleWithFallback, topicShortUrl} from "./utils";
 
 class NotificationManager {
     notify(subscription, notification, onClickFallback) {
         const message = formatMessage(notification);
-        const title = formatTitle(notification);
+        const title = formatTitleWithFallback(notification, topicShortUrl(subscription.baseUrl, subscription.topic));
         const n = new Notification(title, {
             body: message,
             icon: '/static/img/favicon.png'

web/src/app/Repository.js

@@ -7,6 +7,7 @@ class Repository {
     loadSubscriptions() {
         console.log(`[Repository] Loading subscriptions from localStorage`);
         const subscriptions = new Subscriptions();
+        subscriptions.loaded = true;
         const serialized = localStorage.getItem('subscriptions');
         if (serialized === null) {
             return subscriptions;
@@ -15,6 +16,7 @@ class Repository {
             JSON.parse(serialized).forEach(s => {
                 const subscription = new Subscription(s.baseUrl, s.topic);
                 subscription.addNotifications(s.notifications);
+                subscription.last = s.last; // Explicitly set, in case old notifications have been deleted
                 subscriptions.add(subscription);
             });
             console.log(`[Repository] Loaded ${subscriptions.size()} subscription(s) from localStorage`);
@@ -26,6 +28,9 @@ class Repository {
     }
 
     saveSubscriptions(subscriptions) {
+        if (!subscriptions.loaded) {
+            return; // Avoid saving invalid state, triggered by initial useEffect hook
+        }
         console.log(`[Repository] Saving ${subscriptions.size()} subscription(s) to localStorage`);
         const serialized = JSON.stringify(subscriptions.map( (id, subscription) => {
             return {
@@ -41,6 +46,7 @@ class Repository {
     loadUsers() {
         console.log(`[Repository] Loading users from localStorage`);
         const users = new Users();
+        users.loaded = true;
         const serialized = localStorage.getItem('users');
         if (serialized === null) {
             return users;
@@ -57,6 +63,9 @@ class Repository {
     }
 
     saveUsers(users) {
+        if (!users.loaded) {
+            return; // Avoid saving invalid state, triggered by initial useEffect hook
+        }
         console.log(`[Repository] Saving users to localStorage`);
         const serialized = JSON.stringify(users.map(user => {
             return {

web/src/app/Subscription.js

@@ -11,11 +11,11 @@ class Subscription {
 
     addNotification(notification) {
         if (this.notifications.has(notification.id) || notification.time < this.last) {
-            return this;
+            return false;
         }
         this.notifications.set(notification.id, notification);
         this.last = notification.time;
-        return this;
+        return true;
     }
 
     addNotifications(notifications) {
@@ -39,6 +39,10 @@ class Subscription {
         return Array.from(this.notifications.values());
     }
 
+    url() {
+        return topicUrl(this.baseUrl, this.topic);
+    }
+
     shortUrl() {
         return topicShortUrl(this.baseUrl, this.topic);
     }

web/src/app/Subscriptions.js

@@ -1,5 +1,6 @@
 class Subscriptions {
     constructor() {
+        this.loaded = false; // FIXME I hate this
         this.subscriptions = new Map();
     }
 
@@ -46,6 +47,7 @@ class Subscriptions {
 
     clone() {
         const c = new Subscriptions();
+        c.loaded = this.loaded;
         c.subscriptions = new Map(this.subscriptions);
         return c;
     }

web/src/app/Users.js

@@ -1,5 +1,6 @@
 class Users {
     constructor() {
+        this.loaded = false; // FIXME I hate this
         this.users = new Map();
     }
 
@@ -28,6 +29,7 @@ class Users {
 
     clone() {
         const c = new Users();
+        c.loaded = this.loaded;
         c.users = new Map(this.users);
         return c;
     }

web/src/app/utils.js

@@ -6,10 +6,15 @@ export const topicUrlWs = (baseUrl, topic) => `${topicUrl(baseUrl, topic)}/ws`
     .replaceAll("http://", "ws://");
 export const topicUrlJson = (baseUrl, topic) => `${topicUrl(baseUrl, topic)}/json`;
 export const topicUrlJsonPoll = (baseUrl, topic) => `${topicUrlJson(baseUrl, topic)}?poll=1`;
+export const topicUrlJsonPollWithSince = (baseUrl, topic, since) => `${topicUrlJson(baseUrl, topic)}?poll=1&since=${since}`;
 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 validTopic = (topic) => {
+    return topic.match(/^([-_a-zA-Z0-9]{1,64})$/) // Regex must match Go & Android app!
+}
+
 // Format emojis (see emoji.js)
 const emojis = {};
 rawEmojis.forEach(emoji => {
@@ -23,6 +28,14 @@ const toEmojis = (tags) => {
     else return tags.filter(tag => tag in emojis).map(tag => emojis[tag]);
 }
 
+
+export const formatTitleWithFallback = (m, fallback) => {
+    if (m.title) {
+        return formatTitle(m);
+    }
+    return fallback;
+};
+
 export const formatTitle = (m) => {
     const emojiList = toEmojis(m.tags);
     if (emojiList.length > 0) {