Do not store notifications in localStorage anymore

web/src/app/NotificationManager.js

@@ -2,8 +2,9 @@ import {formatMessage, formatTitleWithFallback, topicShortUrl} from "./utils";
 import repository from "./Repository";
 
 class NotificationManager {
-    notify(subscription, notification, onClickFallback) {
+    async notify(subscription, notification, onClickFallback) {
-        if (!this.shouldNotify(subscription, notification)) {
+        const shouldNotify = await this.shouldNotify(subscription, notification);
+        if (!shouldNotify) {
             return;
         }
         const message = formatMessage(notification);
@@ -32,9 +33,10 @@ class NotificationManager {
         }
     }
 
-    shouldNotify(subscription, notification) {
+    async shouldNotify(subscription, notification) {
         const priority = (notification.priority) ? notification.priority : 3;
-        if (priority < repository.getMinPriority()) {
+        const minPriority = await repository.getMinPriority();
+        if (priority < minPriority) {
             return false;
         }
         return true;

web/src/app/Repository.js

@@ -35,7 +35,6 @@ class Repository {
             return {
                 baseUrl: subscription.baseUrl,
                 topic: subscription.topic,
-                notifications: subscription.getNotifications(),
                 last: subscription.last
             }
         }));

web/src/app/Subscription.js

@@ -5,15 +5,13 @@ class Subscription {
         this.id = topicUrl(baseUrl, topic);
         this.baseUrl = baseUrl;
         this.topic = topic;
-        this.notifications = new Map(); // notification ID -> notification object
         this.last = null; // Last message ID
     }
 
     addNotification(notification) {
-        if (!notification.event || notification.event !== 'message' || this.notifications.has(notification.id)) {
+        if (!notification.event || notification.event !== 'message') {
             return false;
         }
-        this.notifications.set(notification.id, notification);
         this.last = notification.id;
         return true;
     }
@@ -23,22 +21,6 @@ class Subscription {
         return this;
     }
 
-    deleteNotification(notificationId) {
-        this.notifications.delete(notificationId);
-        return this;
-    }
-
-    deleteAllNotifications() {
-        for (const [id] of this.notifications) {
-            this.deleteNotification(id);
-        }
-        return this;
-    }
-
-    getNotifications() {
-        return Array.from(this.notifications.values());
-    }
-
     url() {
         return topicUrl(this.baseUrl, this.topic);
     }

web/src/components/App.js

@@ -17,6 +17,7 @@ import NoTopics from "./NoTopics";
 import Preferences from "./Preferences";
 import db from "../app/db";
 import {useLiveQuery} from "dexie-react-hooks";
+import {topicUrl} from "../app/utils";
 
 // TODO subscribe dialog:
 //  - check/use existing user
@@ -49,17 +50,11 @@ const App = () => {
     };
     const handleDeleteNotification = (subscriptionId, notificationId) => {
         console.log(`[App] Deleting notification ${notificationId} from ${subscriptionId}`);
-        setSubscriptions(prev => {
+        db.notifications.delete(notificationId); // FIXME
-            const newSubscription = prev.get(subscriptionId).deleteNotification(notificationId);
-            return prev.update(newSubscription).clone();
-        });
     };
     const handleDeleteAllNotifications = (subscriptionId) => {
         console.log(`[App] Deleting all notifications from ${subscriptionId}`);
-        setSubscriptions(prev => {
+        db.notifications.where({subscriptionId}).delete(); // FIXME
-            const newSubscription = prev.get(subscriptionId).deleteAllNotifications();
-            return prev.update(newSubscription).clone();
-        });
     };
     const handleUnsubscribe = (subscriptionId) => {
         console.log(`[App] Unsubscribing from ${subscriptionId}`);
@@ -84,6 +79,10 @@ const App = () => {
             .then(notifications => {
                 setSubscriptions(prev => {
                     subscription.addNotifications(notifications);
+                    const subscriptionId = topicUrl(subscription.baseUrl, subscription.topic);
+                    const notificationsWithSubscriptionId = notifications
+                        .map(notification => ({ ...notification, subscriptionId }));
+                    db.notifications.bulkPut(notificationsWithSubscriptionId); // FIXME
                     return prev.update(subscription).clone();
                 });
             });
@@ -114,6 +113,7 @@ const App = () => {
     useEffect(() => {
         const notificationClickFallback = (subscription) => setSelectedSubscription(subscription);
         const handleNotification = (subscriptionId, notification) => {
+            db.notifications.put({ ...notification, subscriptionId }); // FIXME
             setSubscriptions(prev => {
                 const subscription = prev.get(subscriptionId);
                 if (subscription.addNotification(notification)) {

web/src/components/Notifications.js

@@ -3,18 +3,25 @@ import {CardContent, Link, Stack} from "@mui/material";
 import Card from "@mui/material/Card";
 import Typography from "@mui/material/Typography";
 import * as React from "react";
-import {formatMessage, formatTitle, unmatchedTags} from "../app/utils";
+import {formatMessage, formatTitle, topicUrl, unmatchedTags} from "../app/utils";
 import IconButton from "@mui/material/IconButton";
 import CloseIcon from '@mui/icons-material/Close';
 import {Paragraph, VerticallyCenteredContainer} from "./styles";
+import {useLiveQuery} from "dexie-react-hooks";
+import db from "../app/db";
 
 const Notifications = (props) => {
     const subscription = props.subscription;
-    const sortedNotifications = subscription.getNotifications()
+    const subscriptionId = topicUrl(subscription.baseUrl, subscription.topic);
-        .sort((a, b) => a.time < b.time ? 1 : -1);
+    const notifications = useLiveQuery(() => {
-    if (sortedNotifications.length === 0) {
+        return db.notifications
+            .where({ subscriptionId: subscriptionId })
+            .toArray();
+    }, [subscription]);
+    if (!notifications || notifications.length === 0) {
         return <NothingHereYet subscription={subscription}/>;
     }
+    const sortedNotifications = Array.from(notifications).sort((a, b) => a.time < b.time ? 1 : -1);
     return (
         <Container maxWidth="lg" sx={{marginTop: 3, marginBottom: 3}}>
             <Stack spacing={3}>