Emojis, formatting, clear all

web/src/app/Subscription.js

@@ -1,14 +1,18 @@
-import {topicUrl, shortTopicUrl, topicUrlWs} from './utils';
+import {shortTopicUrl, topicUrl} from './utils';
 
 export default class Subscription {
     constructor(baseUrl, topic) {
         this.id = topicUrl(baseUrl, topic);
         this.baseUrl = baseUrl;
         this.topic = topic;
-        this.notifications = new Map();
+        this.notifications = new Map(); // notification ID -> notification object
+        this.deleted = new Set(); // notification IDs
     }
 
     addNotification(notification) {
+        if (this.notifications.has(notification.id) || this.deleted.has(notification.id)) {
+            return this;
+        }
         this.notifications.set(notification.id, notification);
         return this;
     }
@@ -18,6 +22,21 @@ export default class Subscription {
         return this;
     }
 
+    deleteNotification(notificationId) {
+        this.notifications.delete(notificationId);
+        this.deleted.add(notificationId);
+        return this;
+    }
+
+    deleteAllNotifications() {
+        console.log(this.notifications);
+        for (const [id] of this.notifications) {
+            console.log(`delete ${id}`);
+            this.deleteNotification(id);
+        }
+        return this;
+    }
+
     getNotifications() {
         return Array.from(this.notifications.values());
     }

web/src/app/utils.js

@@ -1,3 +1,5 @@
+import { rawEmojis} from "./emojis";
+
 export const topicUrl = (baseUrl, topic) => `${baseUrl}/${topic}`;
 export const topicUrlWs = (baseUrl, topic) => `${topicUrl(baseUrl, topic)}/ws`
     .replaceAll("https://", "wss://")
@@ -8,6 +10,46 @@ export const topicUrlJsonPoll = (baseUrl, topic) => `${topicUrlJson(baseUrl, top
 export const shortUrl = (url) => url.replaceAll(/https?:\/\//g, "");
 export const shortTopicUrl = (baseUrl, topic) => shortUrl(topicUrl(baseUrl, topic));
 
+// Format emojis (see emoji.js)
+const emojis = {};
+rawEmojis.forEach(emoji => {
+    emoji.aliases.forEach(alias => {
+        emojis[alias] = emoji.emoji;
+    });
+});
+
+const toEmojis = (tags) => {
+    if (!tags) return [];
+    else return tags.filter(tag => tag in emojis).map(tag => emojis[tag]);
+}
+
+export const formatTitle = (m) => {
+    const emojiList = toEmojis(m.tags);
+    if (emojiList.length > 0) {
+        return `${emojiList.join(" ")} ${m.title}`;
+    } else {
+        return m.title;
+    }
+};
+
+export const formatMessage = (m) => {
+    if (m.title) {
+        return m.message;
+    } else {
+        const emojiList = toEmojis(m.tags);
+        if (emojiList.length > 0) {
+            return `${emojiList.join(" ")} ${m.message}`;
+        } else {
+            return m.message;
+        }
+    }
+};
+
+export const unmatchedTags = (tags) => {
+    if (!tags) return [];
+    else return tags.filter(tag => !(tag in emojis));
+}
+
 // From: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
 export async function* fetchLinesIterator(fileURL) {
     const utf8Decoder = new TextDecoder('utf-8');

web/src/components/App.js

@@ -130,6 +130,13 @@ const App = () => {
         console.log(`[App] Cancel clicked`);
         setSubscribeDialogOpen(false);
     };
+    const handleClearAll = (subscriptionId) => {
+        console.log(`[App] Deleting all notifications from ${subscriptionId}`);
+        setSubscriptions(prev => {
+            const newSubscription = prev.get(subscriptionId).deleteAllNotifications();
+            return prev.update(newSubscription).clone();
+        });
+    };
     const handleUnsubscribe = (subscriptionId) => {
         console.log(`[App] Unsubscribing from ${subscriptionId}`);
         setSubscriptions(prev => {
@@ -179,6 +186,7 @@ const App = () => {
                         </Typography>
                         {selectedSubscription !== null && <DetailSettingsIcon
                             subscription={selectedSubscription}
+                            onClearAll={handleClearAll}
                             onUnsubscribe={handleUnsubscribe}
                         />}
                     </Toolbar>

web/src/components/DetailSettingsIcon.js

@@ -26,6 +26,11 @@ const DetailSettingsIcon = (props) => {
         setOpen(false);
     };
 
+    const handleClearAll = (event) => {
+        handleClose(event);
+        props.onClearAll(props.subscription.id);
+    };
+
     const handleUnsubscribe = (event) => {
         handleClose(event);
         props.onUnsubscribe(props.subscription.id);
@@ -97,6 +102,7 @@ const DetailSettingsIcon = (props) => {
                                     onKeyDown={handleListKeyDown}
                                 >
                                     <MenuItem onClick={handleSendTestMessage}>Send test notification</MenuItem>
+                                    <MenuItem onClick={handleClearAll}>Clear all notifications</MenuItem>
                                     <MenuItem onClick={handleUnsubscribe}>Unsubscribe</MenuItem>
                                 </MenuList>
                             </ClickAwayListener>

web/src/components/NotificationList.js

@@ -3,12 +3,13 @@ import {CardContent, Stack} from "@mui/material";
 import Card from "@mui/material/Card";
 import Typography from "@mui/material/Typography";
 import * as React from "react";
+import {formatTitle, formatMessage, unmatchedTags} from "../app/utils";
 
 const NotificationList = (props) => {
     const sortedNotifications = props.notifications.sort((a, b) => a.time < b.time);
     return (
-        <Container maxWidth="lg" sx={{ marginTop: 3 }}>
-            <Stack container spacing={3}>
+        <Container maxWidth="lg" sx={{ marginTop: 3, marginBottom: 3 }}>
+            <Stack spacing={3}>
                 {sortedNotifications.map(notification =>
                     <NotificationItem key={notification.id} notification={notification}/>)}
             </Stack>
@@ -20,13 +21,22 @@ const NotificationItem = (props) => {
     const notification = props.notification;
     const date = new Intl.DateTimeFormat('default', {dateStyle: 'short', timeStyle: 'short'})
         .format(new Date(notification.time * 1000));
-    const tags = (notification.tags && notification.tags.length > 0) ? notification.tags.join(', ') : null;
+    const otherTags = unmatchedTags(notification.tags);
+    const tags = (otherTags.length > 0) ? otherTags.join(', ') : null;
     return (
         <Card sx={{ minWidth: 275 }}>
             <CardContent>
-                <Typography sx={{ fontSize: 14 }} color="text.secondary">{date}</Typography>
-                {notification.title && <Typography variant="h5" component="div">{notification.title}</Typography>}
-                <Typography variant="body1" sx={{ whiteSpace: 'pre-line' }}>{notification.message}</Typography>
+                <Typography sx={{ fontSize: 14 }} color="text.secondary">
+                    {date}
+                    {[1,2,4,5].includes(notification.priority) &&
+                        <img
+                            src={`static/img/priority-${notification.priority}.svg`}
+                            alt={`Priority ${notification.priority}`}
+                            style={{ verticalAlign: 'bottom' }}
+                        />}
+                </Typography>
+                {notification.title && <Typography variant="h5" component="div">{formatTitle(notification)}</Typography>}
+                <Typography variant="body1" sx={{ whiteSpace: 'pre-line' }}>{formatMessage(notification)}</Typography>
                 {tags && <Typography sx={{ fontSize: 14 }} color="text.secondary">Tags: {tags}</Typography>}
             </CardContent>
         </Card>