From 349872bdb35d7fdbe5593e352175b4c634037bb0 Mon Sep 17 00:00:00 2001 From: Philipp Heckel Date: Wed, 2 Mar 2022 16:16:30 -0500 Subject: [PATCH] Switch everything to Dexie.js --- web/src/app/ConnectionManager.js | 5 +- web/src/app/NotificationManager.js | 9 +- web/src/app/Poller.js | 49 ++++++ web/src/app/Prefs.js | 33 ++++ web/src/app/Pruner.js | 39 +++++ web/src/app/Repository.js | 83 ---------- web/src/app/Subscription.js | 33 ---- web/src/app/Subscriptions.js | 56 ------- web/src/app/db.js | 4 +- web/src/components/ActionBar.js | 19 +-- web/src/components/App.js | 160 +++++++++----------- web/src/components/IconSubscribeSettings.js | 11 +- web/src/components/Navigation.js | 15 +- web/src/components/Notifications.js | 19 ++- web/src/components/Preferences.js | 12 +- web/src/components/SubscribeDialog.js | 12 +- 16 files changed, 243 insertions(+), 316 deletions(-) create mode 100644 web/src/app/Poller.js create mode 100644 web/src/app/Prefs.js create mode 100644 web/src/app/Pruner.js delete mode 100644 web/src/app/Repository.js delete mode 100644 web/src/app/Subscription.js delete mode 100644 web/src/app/Subscriptions.js diff --git a/web/src/app/ConnectionManager.js b/web/src/app/ConnectionManager.js index 62dd13a9..93f8659e 100644 --- a/web/src/app/ConnectionManager.js +++ b/web/src/app/ConnectionManager.js @@ -10,11 +10,12 @@ class ConnectionManager { return; } console.log(`[ConnectionManager] Refreshing connections`); - const subscriptionIds = subscriptions.ids(); + const subscriptionIds = subscriptions.map(s => s.id); const deletedIds = Array.from(this.connections.keys()).filter(id => !subscriptionIds.includes(id)); // Create and add new connections - subscriptions.forEach((id, subscription) => { + subscriptions.forEach(subscription => { + const id = subscription.id; const added = !this.connections.get(id) if (added) { const baseUrl = subscription.baseUrl; diff --git a/web/src/app/NotificationManager.js b/web/src/app/NotificationManager.js index 10d6f47a..4524fff5 100644 --- a/web/src/app/NotificationManager.js +++ b/web/src/app/NotificationManager.js @@ -1,5 +1,5 @@ import {formatMessage, formatTitleWithFallback, topicShortUrl} from "./utils"; -import repository from "./Repository"; +import prefs from "./Prefs"; class NotificationManager { async notify(subscription, notification, onClickFallback) { @@ -7,8 +7,11 @@ class NotificationManager { if (!shouldNotify) { return; } + const shortUrl = topicShortUrl(subscription.baseUrl, subscription.topic); const message = formatMessage(notification); - const title = formatTitleWithFallback(notification, topicShortUrl(subscription.baseUrl, subscription.topic)); + const title = formatTitleWithFallback(notification, shortUrl); + + console.log(`[NotificationManager, ${shortUrl}] Displaying notification ${notification.id}: ${message}`); const n = new Notification(title, { body: message, icon: '/static/img/favicon.png' @@ -35,7 +38,7 @@ class NotificationManager { async shouldNotify(subscription, notification) { const priority = (notification.priority) ? notification.priority : 3; - const minPriority = await repository.getMinPriority(); + const minPriority = await prefs.minPriority(); if (priority < minPriority) { return false; } diff --git a/web/src/app/Poller.js b/web/src/app/Poller.js new file mode 100644 index 00000000..f81cb778 --- /dev/null +++ b/web/src/app/Poller.js @@ -0,0 +1,49 @@ +import db from "./db"; +import api from "./Api"; + +const delayMillis = 3000; // 3 seconds +const intervalMillis = 300000; // 5 minutes + +class Poller { + constructor() { + this.timer = null; + } + + startWorker() { + if (this.timer !== null) { + return; + } + this.timer = setInterval(() => this.pollAll(), intervalMillis); + setTimeout(() => this.pollAll(), delayMillis); + } + + async pollAll() { + console.log(`[Poller] Polling all subscriptions`); + const subscriptions = await db.subscriptions.toArray(); + for (const s of subscriptions) { + try { + await this.poll(s); + } catch (e) { + console.log(`[Poller] Error polling ${s.id}`, e); + } + } + } + + async poll(subscription) { + console.log(`[Poller] Polling ${subscription.id}`); + + const since = subscription.last; + const notifications = await api.poll(subscription.baseUrl, subscription.topic, since); + if (!notifications || notifications.length === 0) { + console.log(`[Poller] No new notifications found for ${subscription.id}`); + return; + } + const notificationsWithSubscriptionId = notifications + .map(notification => ({ ...notification, subscriptionId: subscription.id })); + await db.notifications.bulkPut(notificationsWithSubscriptionId); // FIXME + await db.subscriptions.update(subscription.id, {last: notifications.at(-1).id}); // FIXME + }; +} + +const poller = new Poller(); +export default poller; diff --git a/web/src/app/Prefs.js b/web/src/app/Prefs.js new file mode 100644 index 00000000..359fbf6f --- /dev/null +++ b/web/src/app/Prefs.js @@ -0,0 +1,33 @@ +import db from "./db"; + +class Prefs { + async setSelectedSubscriptionId(selectedSubscriptionId) { + db.prefs.put({key: 'selectedSubscriptionId', value: selectedSubscriptionId}); + } + + async selectedSubscriptionId() { + const selectedSubscriptionId = await db.prefs.get('selectedSubscriptionId'); + return (selectedSubscriptionId) ? selectedSubscriptionId.value : ""; + } + + async setMinPriority(minPriority) { + db.prefs.put({key: 'minPriority', value: minPriority.toString()}); + } + + async minPriority() { + const minPriority = await db.prefs.get('minPriority'); + return (minPriority) ? Number(minPriority.value) : 1; + } + + async setDeleteAfter(deleteAfter) { + db.prefs.put({key:'deleteAfter', value: deleteAfter.toString()}); + } + + async deleteAfter() { + const deleteAfter = await db.prefs.get('deleteAfter'); + return (deleteAfter) ? Number(deleteAfter.value) : 604800; // Default is one week + } +} + +const prefs = new Prefs(); +export default prefs; diff --git a/web/src/app/Pruner.js b/web/src/app/Pruner.js new file mode 100644 index 00000000..72ea2c10 --- /dev/null +++ b/web/src/app/Pruner.js @@ -0,0 +1,39 @@ +import db from "./db"; +import prefs from "./Prefs"; + +const delayMillis = 15000; // 15 seconds +const intervalMillis = 1800000; // 30 minutes + +class Pruner { + constructor() { + this.timer = null; + } + + startWorker() { + if (this.timer !== null) { + return; + } + this.timer = setInterval(() => this.prune(), intervalMillis); + setTimeout(() => this.prune(), delayMillis); + } + + async prune() { + const deleteAfterSeconds = await prefs.deleteAfter(); + const pruneThresholdTimestamp = Math.round(Date.now()/1000) - deleteAfterSeconds; + if (deleteAfterSeconds === 0) { + console.log(`[Pruner] Pruning is disabled. Skipping.`); + return; + } + console.log(`[Pruner] Pruning notifications older than ${deleteAfterSeconds}s (timestamp ${pruneThresholdTimestamp})`); + try { + await db.notifications + .where("time").below(pruneThresholdTimestamp) + .delete(); + } catch (e) { + console.log(`[Pruner] Error pruning old subscriptions`, e); + } + } +} + +const pruner = new Pruner(); +export default pruner; diff --git a/web/src/app/Repository.js b/web/src/app/Repository.js deleted file mode 100644 index 25237b76..00000000 --- a/web/src/app/Repository.js +++ /dev/null @@ -1,83 +0,0 @@ -import Subscription from "./Subscription"; -import Subscriptions from "./Subscriptions"; -import db from "./db"; - -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; - } - try { - 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`); - return subscriptions; - } catch (e) { - console.log(`[Repository] Unable to deserialize subscriptions: ${e.message}`); - return subscriptions; - } - } - - 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 { - baseUrl: subscription.baseUrl, - topic: subscription.topic, - last: subscription.last - } - })); - localStorage.setItem('subscriptions', serialized); - } - - async setSelectedSubscriptionId(selectedSubscriptionId) { - console.log(`[Repository] Saving selected subscription ${selectedSubscriptionId}`); - db.prefs.put({key: 'selectedSubscriptionId', value: selectedSubscriptionId}); - } - - async getSelectedSubscriptionId() { - console.log(`[Repository] Loading selected subscription ID`); - const selectedSubscriptionId = await db.prefs.get('selectedSubscriptionId'); - return (selectedSubscriptionId) ? selectedSubscriptionId.value : ""; - } - - async setMinPriority(minPriority) { - db.prefs.put({key: 'minPriority', value: minPriority.toString()}); - } - - async getMinPriority() { - const minPriority = await db.prefs.get('minPriority'); - return (minPriority) ? Number(minPriority.value) : 1; - } - - minPriority() { - return db.prefs.get('minPriority'); - } - - async setDeleteAfter(deleteAfter) { - db.prefs.put({key:'deleteAfter', value: deleteAfter.toString()}); - } - - async getDeleteAfter() { - const deleteAfter = await db.prefs.get('deleteAfter'); - return (deleteAfter) ? Number(deleteAfter.value) : 604800; // Default is one week - } - - deleteAfter() { - return db.prefs.get('deleteAfter'); - } -} - -const repository = new Repository(); -export default repository; diff --git a/web/src/app/Subscription.js b/web/src/app/Subscription.js deleted file mode 100644 index 05a05745..00000000 --- a/web/src/app/Subscription.js +++ /dev/null @@ -1,33 +0,0 @@ -import {topicShortUrl, topicUrl} from './utils'; - -class Subscription { - constructor(baseUrl, topic) { - this.id = topicUrl(baseUrl, topic); - this.baseUrl = baseUrl; - this.topic = topic; - this.last = null; // Last message ID - } - - addNotification(notification) { - if (!notification.event || notification.event !== 'message') { - return false; - } - this.last = notification.id; - return true; - } - - addNotifications(notifications) { - notifications.forEach(n => this.addNotification(n)); - return this; - } - - url() { - return topicUrl(this.baseUrl, this.topic); - } - - shortUrl() { - return topicShortUrl(this.baseUrl, this.topic); - } -} - -export default Subscription; diff --git a/web/src/app/Subscriptions.js b/web/src/app/Subscriptions.js deleted file mode 100644 index 970b9cb1..00000000 --- a/web/src/app/Subscriptions.js +++ /dev/null @@ -1,56 +0,0 @@ -class Subscriptions { - constructor() { - this.loaded = false; // FIXME I hate this - this.subscriptions = new Map(); - } - - add(subscription) { - this.subscriptions.set(subscription.id, subscription); - return this; - } - - get(subscriptionId) { - const subscription = this.subscriptions.get(subscriptionId); - return (subscription) ? subscription : null; - } - - update(subscription) { - return this.add(subscription); - } - - remove(subscriptionId) { - this.subscriptions.delete(subscriptionId); - return this; - } - - forEach(cb) { - this.subscriptions.forEach((value, key) => cb(key, value)); - } - - map(cb) { - return Array.from(this.subscriptions.values()) - .map(subscription => cb(subscription.id, subscription)); - } - - ids() { - return Array.from(this.subscriptions.keys()); - } - - firstOrNull() { - const first = this.subscriptions.values().next().value; - return (first) ? first : null; - } - - size() { - return this.subscriptions.size; - } - - clone() { - const c = new Subscriptions(); - c.loaded = this.loaded; - c.subscriptions = new Map(this.subscriptions); - return c; - } -} - -export default Subscriptions; diff --git a/web/src/app/db.js b/web/src/app/db.js index c890ca7c..aec043ad 100644 --- a/web/src/app/db.js +++ b/web/src/app/db.js @@ -9,8 +9,8 @@ import Dexie from 'dexie'; const db = new Dexie('ntfy'); db.version(1).stores({ - subscriptions: '&id', - notifications: '&id,subscriptionId', + subscriptions: '&id,baseUrl', + notifications: '&id,subscriptionId,time', users: '&baseUrl,username', prefs: '&key' }); diff --git a/web/src/components/ActionBar.js b/web/src/components/ActionBar.js index 0c1ef28e..e7255b4f 100644 --- a/web/src/components/ActionBar.js +++ b/web/src/components/ActionBar.js @@ -7,10 +7,11 @@ import Typography from "@mui/material/Typography"; import IconSubscribeSettings from "./IconSubscribeSettings"; import * as React from "react"; import Box from "@mui/material/Box"; +import {topicShortUrl} from "../app/utils"; const ActionBar = (props) => { - const title = (props.selectedSubscription !== null) - ? props.selectedSubscription.shortUrl() + const title = (props.selectedSubscription) + ? topicShortUrl(props.selectedSubscription.baseUrl, props.selectedSubscription.topic) : "ntfy"; return ( { {props.selectedSubscription !== null && } @@ -45,17 +45,4 @@ const ActionBar = (props) => { ); }; -/* - To add a top left corner logo box: - - ntfy - - - To make the size of the top bar dynamic based on the drawer: - width: { sm: `calc(100% - ${Navigation.width}px)` } -*/ - export default ActionBar; diff --git a/web/src/components/App.js b/web/src/components/App.js index 4a6d6f13..a4250787 100644 --- a/web/src/components/App.js +++ b/web/src/components/App.js @@ -6,10 +6,8 @@ import CssBaseline from '@mui/material/CssBaseline'; import Toolbar from '@mui/material/Toolbar'; import Notifications from "./Notifications"; import theme from "./theme"; -import api from "../app/Api"; -import repository from "../app/Repository"; +import prefs from "../app/Prefs"; import connectionManager from "../app/ConnectionManager"; -import Subscriptions from "../app/Subscriptions"; import Navigation from "./Navigation"; import ActionBar from "./ActionBar"; import notificationManager from "../app/NotificationManager"; @@ -17,52 +15,52 @@ import NoTopics from "./NoTopics"; import Preferences from "./Preferences"; import db from "../app/db"; import {useLiveQuery} from "dexie-react-hooks"; -import {topicUrl} from "../app/utils"; +import poller from "../app/Poller"; +import pruner from "../app/Pruner"; // TODO subscribe dialog: // - check/use existing user // - add baseUrl // TODO embed into ntfy server // TODO make default server functional -// TODO indexeddb for notifications + subscriptions // TODO business logic with callbacks // TODO connection indicator in subscription list +// TODO connectionmanager should react on users changes +// TODO attachments const App = () => { console.log(`[App] Rendering main view`); const [mobileDrawerOpen, setMobileDrawerOpen] = useState(false); const [prefsOpen, setPrefsOpen] = useState(false); - const [subscriptions, setSubscriptions] = useState(new Subscriptions()); const [selectedSubscription, setSelectedSubscription] = useState(null); const [notificationsGranted, setNotificationsGranted] = useState(notificationManager.granted()); + const subscriptions = useLiveQuery(() => db.subscriptions.toArray()); const users = useLiveQuery(() => db.users.toArray()); - const handleSubscriptionClick = (subscriptionId) => { - setSelectedSubscription(subscriptions.get(subscriptionId)); + const handleSubscriptionClick = async (subscriptionId) => { + const subscription = await db.subscriptions.get(subscriptionId); // FIXME + setSelectedSubscription(subscription); setPrefsOpen(false); } - const handleSubscribeSubmit = (subscription) => { - console.log(`[App] New subscription: ${subscription.id}`); - setSubscriptions(prev => prev.add(subscription).clone()); + const handleSubscribeSubmit = async (subscription) => { + console.log(`[App] New subscription: ${subscription.id}`, subscription); + await db.subscriptions.put(subscription); // FIXME setSelectedSubscription(subscription); - poll(subscription); handleRequestPermission(); + try { + await poller.poll(subscription); + } catch (e) { + console.error(`[App] Error polling newly added subscription ${subscription.id}`, e); + } }; - const handleDeleteNotification = (subscriptionId, notificationId) => { - console.log(`[App] Deleting notification ${notificationId} from ${subscriptionId}`); - db.notifications.delete(notificationId); // FIXME - }; - const handleDeleteAllNotifications = (subscriptionId) => { - console.log(`[App] Deleting all notifications from ${subscriptionId}`); - db.notifications.where({subscriptionId}).delete(); // FIXME - }; - const handleUnsubscribe = (subscriptionId) => { + const handleUnsubscribe = async (subscriptionId) => { console.log(`[App] Unsubscribing from ${subscriptionId}`); - setSubscriptions(prev => { - const newSubscriptions = prev.remove(subscriptionId).clone(); - setSelectedSubscription(newSubscriptions.firstOrNull()); - return newSubscriptions; - }); + await db.subscriptions.delete(subscriptionId); // FIXME + await db.notifications + .where({subscriptionId: subscriptionId}) + .delete(); // FIXME + const newSelected = await db.subscriptions.toCollection().first(); // FIXME May be undefined + setSelectedSubscription(newSelected); }; const handleRequestPermission = () => { notificationManager.maybeRequestPermission((granted) => { @@ -73,61 +71,41 @@ const App = () => { setPrefsOpen(true); setSelectedSubscription(null); }; - const poll = (subscription) => { - const since = subscription.last; - api.poll(subscription.baseUrl, subscription.topic, since) - .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(); - }); - }); - }; - // Define hooks: Note that the order of the hooks is important. The "loading" hooks // must be before the "saving" hooks. useEffect(() => { + poller.startWorker(); + pruner.startWorker(); const load = async () => { - // Load subscriptions - const subscriptions = repository.loadSubscriptions(); - const selectedSubscriptionId = await repository.getSelectedSubscriptionId(); - setSubscriptions(subscriptions); + const subs = await db.subscriptions.toArray(); // Cannot be 'subscriptions' + const selectedSubscriptionId = await prefs.selectedSubscriptionId(); // Set selected subscription - const maybeSelectedSubscription = subscriptions.get(selectedSubscriptionId); - if (maybeSelectedSubscription) { - setSelectedSubscription(maybeSelectedSubscription); + const maybeSelectedSubscription = subs?.filter(s => s.id = selectedSubscriptionId); + if (maybeSelectedSubscription.length > 0) { + setSelectedSubscription(maybeSelectedSubscription[0]); } - // Poll all subscriptions - subscriptions.forEach((subscriptionId, subscription) => { - poll(subscription); - }); }; - load(); + setTimeout(() => load(), 5000); }, [/* initial render */]); 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)) { - notificationManager.notify(subscription, notification, notificationClickFallback) - } - return prev.update(subscription).clone(); - }); + const handleNotification = async (subscriptionId, notification) => { + try { + const subscription = await db.subscriptions.get(subscriptionId); // FIXME + await db.notifications.add({ ...notification, subscriptionId }); // FIXME, will throw if exists! + await db.subscriptions.update(subscriptionId, { last: notification.id }); + await notificationManager.notify(subscription, notification, notificationClickFallback) + } catch (e) { + console.error(`[App] Error handling notification`, e); + } }; connectionManager.refresh(subscriptions, users, handleNotification); }, [subscriptions, users]); - useEffect(() => repository.saveSubscriptions(subscriptions), [subscriptions]); useEffect(() => { const subscriptionId = (selectedSubscription) ? selectedSubscription.id : ""; - repository.setSelectedSubscriptionId(subscriptionId) + prefs.setSelectedSubscriptionId(subscriptionId) }, [selectedSubscription]); return ( @@ -137,7 +115,6 @@ const App = () => { setMobileDrawerOpen(!mobileDrawerOpen)} /> @@ -155,45 +132,46 @@ const App = () => { onRequestPermissionClick={handleRequestPermission} /> - theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900] - }} - > +
- - +
); } -const MainContent = (props) => { +const Main = (props) => { + return ( + theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900] + }} + > + {props.children} + + ); +}; + +const Content = (props) => { if (props.prefsOpen) { return ; } - if (props.subscription !== null) { - return ( - - ); - } else { - return ; + if (props.subscription) { + return ; } + return ; }; export default App; diff --git a/web/src/components/IconSubscribeSettings.js b/web/src/components/IconSubscribeSettings.js index 1750e612..17032210 100644 --- a/web/src/components/IconSubscribeSettings.js +++ b/web/src/components/IconSubscribeSettings.js @@ -9,6 +9,7 @@ import MenuList from '@mui/material/MenuList'; import IconButton from "@mui/material/IconButton"; import MoreVertIcon from "@mui/icons-material/MoreVert"; import api from "../app/Api"; +import db from "../app/db"; // Originally from https://mui.com/components/menus/#MenuListComposition.js const IconSubscribeSettings = (props) => { @@ -28,7 +29,10 @@ const IconSubscribeSettings = (props) => { const handleClearAll = (event) => { handleClose(event); - props.onClearAll(props.subscription.id); + console.log(`[IconSubscribeSettings] Deleting all notifications from ${props.subscription.id}`); + db.notifications + .where({subscriptionId: props.subscription.id}) + .delete(); // FIXME }; const handleUnsubscribe = (event) => { @@ -59,7 +63,6 @@ const IconSubscribeSettings = (props) => { if (prevOpen.current === true && open === false) { anchorRef.current.focus(); } - prevOpen.current = open; }, [open]); @@ -71,9 +74,6 @@ const IconSubscribeSettings = (props) => { edge="end" ref={anchorRef} id="composition-button" - aria-controls={open ? 'composition-menu' : undefined} - aria-expanded={open ? 'true' : undefined} - aria-haspopup="true" onClick={handleToggle} > @@ -99,7 +99,6 @@ const IconSubscribeSettings = (props) => { Send test notification diff --git a/web/src/components/Navigation.js b/web/src/components/Navigation.js index f586a6f1..b96774af 100644 --- a/web/src/components/Navigation.js +++ b/web/src/components/Navigation.js @@ -14,6 +14,7 @@ import SubscribeDialog from "./SubscribeDialog"; import {Alert, AlertTitle, ListSubheader} from "@mui/material"; import Button from "@mui/material/Button"; import Typography from "@mui/material/Typography"; +import {topicShortUrl} from "../app/utils"; const navWidth = 240; @@ -61,8 +62,8 @@ const NavList = (props) => { handleSubscribeReset(); props.onSubscribeSubmit(subscription); } - const showSubscriptionsList = props.subscriptions.size() > 0; - const showGrantPermissionsBox = props.subscriptions.size() > 0 && !props.notificationsGranted; + const showSubscriptionsList = props.subscriptions?.length > 0; + const showGrantPermissionsBox = props.subscriptions?.length > 0 && !props.notificationsGranted; return ( <> { const SubscriptionList = (props) => { return ( <> - {props.subscriptions.map((id, subscription) => + {props.subscriptions.map(subscription => props.onSubscriptionClick(id)} - selected={props.selectedSubscription && !props.prefsOpen && props.selectedSubscription.id === id} + key={subscription.id} + onClick={() => props.onSubscriptionClick(subscription.id)} + selected={props.selectedSubscription && !props.prefsOpen && props.selectedSubscription.id === subscription.id} > - + )} diff --git a/web/src/components/Notifications.js b/web/src/components/Notifications.js index e3793de9..532bf3ed 100644 --- a/web/src/components/Notifications.js +++ b/web/src/components/Notifications.js @@ -3,7 +3,7 @@ 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, topicUrl, unmatchedTags} from "../app/utils"; +import {formatMessage, formatTitle, topicShortUrl, unmatchedTags} from "../app/utils"; import IconButton from "@mui/material/IconButton"; import CloseIcon from '@mui/icons-material/Close'; import {Paragraph, VerticallyCenteredContainer} from "./styles"; @@ -12,16 +12,16 @@ import db from "../app/db"; const Notifications = (props) => { const subscription = props.subscription; - const subscriptionId = topicUrl(subscription.baseUrl, subscription.topic); const notifications = useLiveQuery(() => { return db.notifications - .where({ subscriptionId: subscriptionId }) + .where({ subscriptionId: subscription.id }) .toArray(); }, [subscription]); if (!notifications || notifications.length === 0) { return ; } - const sortedNotifications = Array.from(notifications).sort((a, b) => a.time < b.time ? 1 : -1); + const sortedNotifications = Array.from(notifications) + .sort((a, b) => a.time < b.time ? 1 : -1); return ( @@ -30,7 +30,6 @@ const Notifications = (props) => { key={notification.id} subscriptionId={subscription.id} notification={notification} - onDelete={(notificationId) => props.onDeleteNotification(subscription.id, notificationId)} />)} @@ -38,15 +37,20 @@ const Notifications = (props) => { } const NotificationItem = (props) => { + const subscriptionId = props.subscriptionId; const notification = props.notification; const date = new Intl.DateTimeFormat('default', {dateStyle: 'short', timeStyle: 'short'}) .format(new Date(notification.time * 1000)); const otherTags = unmatchedTags(notification.tags); const tags = (otherTags.length > 0) ? otherTags.join(', ') : null; + const handleDelete = async () => { + console.log(`[Notifications] Deleting notification ${notification.id} from ${subscriptionId}`); + await db.notifications.delete(notification.id); // FIXME + } return ( - props.onDelete(notification.id)} sx={{ float: 'right', marginRight: -1, marginTop: -1 }}> + @@ -67,6 +71,7 @@ const NotificationItem = (props) => { } const NothingHereYet = (props) => { + const shortUrl = topicShortUrl(props.subscription.baseUrl, props.subscription.topic); return ( @@ -79,7 +84,7 @@ const NothingHereYet = (props) => { Example:
- $ curl -d "Hi" {props.subscription.shortUrl()} + $ curl -d "Hi" {shortUrl} diff --git a/web/src/components/Preferences.js b/web/src/components/Preferences.js index fca5b804..80487d9d 100644 --- a/web/src/components/Preferences.js +++ b/web/src/components/Preferences.js @@ -15,7 +15,7 @@ import { } from "@mui/material"; import Typography from "@mui/material/Typography"; import Paper from "@mui/material/Paper"; -import repository from "../app/Repository"; +import prefs from "../app/Prefs"; import {Paragraph} from "./styles"; import EditIcon from '@mui/icons-material/Edit'; import CloseIcon from "@mui/icons-material/Close"; @@ -60,9 +60,9 @@ const Notifications = () => { }; const MinPriority = () => { - const minPriority = useLiveQuery(() => repository.getMinPriority()); + const minPriority = useLiveQuery(() => prefs.minPriority()); const handleChange = async (ev) => { - await repository.setMinPriority(ev.target.value); + await prefs.setMinPriority(ev.target.value); } if (!minPriority) { return null; // While loading @@ -83,9 +83,9 @@ const MinPriority = () => { }; const DeleteAfter = () => { - const deleteAfter = useLiveQuery(async () => repository.getDeleteAfter()); + const deleteAfter = useLiveQuery(async () => prefs.deleteAfter()); const handleChange = async (ev) => { - await repository.setDeleteAfter(ev.target.value); + await prefs.setDeleteAfter(ev.target.value); } if (!deleteAfter) { return null; // While loading @@ -95,7 +95,7 @@ const DeleteAfter = () => {