Do not store notifications in localStorage anymore

This commit is contained in:
Philipp Heckel 2022-03-01 22:41:49 -05:00
parent effc1f42eb
commit 39f4613719
5 changed files with 26 additions and 36 deletions

View File

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

View File

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

View File

@ -5,15 +5,13 @@ class Subscription {
this.id = topicUrl(baseUrl, topic); this.id = topicUrl(baseUrl, topic);
this.baseUrl = baseUrl; this.baseUrl = baseUrl;
this.topic = topic; this.topic = topic;
this.notifications = new Map(); // notification ID -> notification object
this.last = null; // Last message ID this.last = null; // Last message ID
} }
addNotification(notification) { addNotification(notification) {
if (!notification.event || notification.event !== 'message' || this.notifications.has(notification.id)) { if (!notification.event || notification.event !== 'message') {
return false; return false;
} }
this.notifications.set(notification.id, notification);
this.last = notification.id; this.last = notification.id;
return true; return true;
} }
@ -23,22 +21,6 @@ class Subscription {
return this; 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() { url() {
return topicUrl(this.baseUrl, this.topic); return topicUrl(this.baseUrl, this.topic);
} }

View File

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

View File

@ -3,18 +3,25 @@ import {CardContent, Link, Stack} from "@mui/material";
import Card from "@mui/material/Card"; import Card from "@mui/material/Card";
import Typography from "@mui/material/Typography"; import Typography from "@mui/material/Typography";
import * as React from "react"; 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 IconButton from "@mui/material/IconButton";
import CloseIcon from '@mui/icons-material/Close'; import CloseIcon from '@mui/icons-material/Close';
import {Paragraph, VerticallyCenteredContainer} from "./styles"; import {Paragraph, VerticallyCenteredContainer} from "./styles";
import {useLiveQuery} from "dexie-react-hooks";
import db from "../app/db";
const Notifications = (props) => { const Notifications = (props) => {
const subscription = props.subscription; 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}/>; return <NothingHereYet subscription={subscription}/>;
} }
const sortedNotifications = Array.from(notifications).sort((a, b) => a.time < b.time ? 1 : -1);
return ( return (
<Container maxWidth="lg" sx={{marginTop: 3, marginBottom: 3}}> <Container maxWidth="lg" sx={{marginTop: 3, marginBottom: 3}}>
<Stack spacing={3}> <Stack spacing={3}>