vbatts/ntfy
1
0
Fork 0
Code Pull requests Activity

Allow deleting individual notifications

Browse source
This commit is contained in:
Philipp Heckel 2022-02-25 10:23:04 -05:00
parent 703f94a25f
commit f9e22dcaa9
2 changed files with 29 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
web/src/components/App.js
View file

@ -181,7 +181,14 @@ const App = () => {
});
});
};
const handleClearAll = (subscriptionId) => {
const handleDeleteNotification = (subscriptionId, notificationId) => {
console.log(`[App] Deleting notification ${notificationId} from ${subscriptionId}`);
setSubscriptions(prev => {
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 => {
const newSubscription = prev.get(subscriptionId).deleteAllNotifications();
@ -196,7 +203,6 @@ const App = () => {
return newSubscriptions;
});
};
const notifications = (selectedSubscription !== null) ? selectedSubscription.getNotifications() : [];
useEffect(() => {
setSubscriptions(repository.loadSubscriptions());
}, [/* initial render only */]);
@ -212,7 +218,7 @@ const App = () => {
<CssBaseline/>
<ActionBar
selectedSubscription={selectedSubscription}
onClearAll={handleClearAll}
onClearAll={handleDeleteAllNotifications}
onUnsubscribe={handleUnsubscribe}
onMobileDrawerToggle={() => setMobileDrawerOpen(!mobileDrawerOpen)}
/>
@ -237,7 +243,11 @@ const App = () => {
backgroundColor: (theme) => theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900]
}}>
<Toolbar/>
<NotificationList notifications={notifications}/>
{selectedSubscription !== null &&
<NotificationList
subscription={selectedSubscription}
onDeleteNotification={handleDeleteNotification}
/>}
</Box>
</Box>
</ThemeProvider>

18
web/src/components/NotificationList.js
View file

@ -1,17 +1,26 @@
import Container from "@mui/material/Container";
import {CardContent, Stack} from "@mui/material";
import {CardContent, CardHeader, 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";
import IconButton from "@mui/material/IconButton";
import CloseIcon from '@mui/icons-material/Close';
const NotificationList = (props) => {
const sortedNotifications = props.notifications.sort((a, b) => a.time < b.time);
const subscription = props.subscription;
const sortedNotifications = subscription.getNotifications()
.sort((a, b) => a.time < b.time);
return (
<Container maxWidth="lg" sx={{ marginTop: 3, marginBottom: 3 }}>
<Stack spacing={3}>
{sortedNotifications.map(notification =>
<NotificationItem key={notification.id} notification={notification}/>)}
<NotificationItem
key={notification.id}
subscriptionId={subscription.id}
notification={notification}
onDelete={(notificationId) => props.onDeleteNotification(subscription.id, notificationId)}
/>)}
</Stack>
</Container>
);
@ -26,6 +35,9 @@ const NotificationItem = (props) => {
return (
<Card sx={{ minWidth: 275 }}>
<CardContent>
<IconButton onClick={() => props.onDelete(notification.id)} sx={{ float: 'right', marginRight: -1, marginTop: -1 }}>
<CloseIcon />
</IconButton>
<Typography sx={{ fontSize: 14 }} color="text.secondary">
{date}
{[1,2,4,5].includes(notification.priority) &&