mirror of
https://github.com/binwiederhier/ntfy.git
synced 2024-11-12 22:57:59 +01:00
Allow deleting individual notifications
This commit is contained in:
parent
703f94a25f
commit
f9e22dcaa9
2 changed files with 29 additions and 7 deletions
|
@ -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}`);
|
console.log(`[App] Deleting all notifications from ${subscriptionId}`);
|
||||||
setSubscriptions(prev => {
|
setSubscriptions(prev => {
|
||||||
const newSubscription = prev.get(subscriptionId).deleteAllNotifications();
|
const newSubscription = prev.get(subscriptionId).deleteAllNotifications();
|
||||||
|
@ -196,7 +203,6 @@ const App = () => {
|
||||||
return newSubscriptions;
|
return newSubscriptions;
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
const notifications = (selectedSubscription !== null) ? selectedSubscription.getNotifications() : [];
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setSubscriptions(repository.loadSubscriptions());
|
setSubscriptions(repository.loadSubscriptions());
|
||||||
}, [/* initial render only */]);
|
}, [/* initial render only */]);
|
||||||
|
@ -212,7 +218,7 @@ const App = () => {
|
||||||
<CssBaseline/>
|
<CssBaseline/>
|
||||||
<ActionBar
|
<ActionBar
|
||||||
selectedSubscription={selectedSubscription}
|
selectedSubscription={selectedSubscription}
|
||||||
onClearAll={handleClearAll}
|
onClearAll={handleDeleteAllNotifications}
|
||||||
onUnsubscribe={handleUnsubscribe}
|
onUnsubscribe={handleUnsubscribe}
|
||||||
onMobileDrawerToggle={() => setMobileDrawerOpen(!mobileDrawerOpen)}
|
onMobileDrawerToggle={() => setMobileDrawerOpen(!mobileDrawerOpen)}
|
||||||
/>
|
/>
|
||||||
|
@ -237,7 +243,11 @@ const App = () => {
|
||||||
backgroundColor: (theme) => theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900]
|
backgroundColor: (theme) => theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900]
|
||||||
}}>
|
}}>
|
||||||
<Toolbar/>
|
<Toolbar/>
|
||||||
<NotificationList notifications={notifications}/>
|
{selectedSubscription !== null &&
|
||||||
|
<NotificationList
|
||||||
|
subscription={selectedSubscription}
|
||||||
|
onDeleteNotification={handleDeleteNotification}
|
||||||
|
/>}
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
|
|
|
@ -1,17 +1,26 @@
|
||||||
import Container from "@mui/material/Container";
|
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 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 {formatTitle, formatMessage, unmatchedTags} from "../app/utils";
|
import {formatTitle, formatMessage, unmatchedTags} from "../app/utils";
|
||||||
|
import IconButton from "@mui/material/IconButton";
|
||||||
|
import CloseIcon from '@mui/icons-material/Close';
|
||||||
|
|
||||||
const NotificationList = (props) => {
|
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 (
|
return (
|
||||||
<Container maxWidth="lg" sx={{ marginTop: 3, marginBottom: 3 }}>
|
<Container maxWidth="lg" sx={{ marginTop: 3, marginBottom: 3 }}>
|
||||||
<Stack spacing={3}>
|
<Stack spacing={3}>
|
||||||
{sortedNotifications.map(notification =>
|
{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>
|
</Stack>
|
||||||
</Container>
|
</Container>
|
||||||
);
|
);
|
||||||
|
@ -26,6 +35,9 @@ const NotificationItem = (props) => {
|
||||||
return (
|
return (
|
||||||
<Card sx={{ minWidth: 275 }}>
|
<Card sx={{ minWidth: 275 }}>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
|
<IconButton onClick={() => props.onDelete(notification.id)} sx={{ float: 'right', marginRight: -1, marginTop: -1 }}>
|
||||||
|
<CloseIcon />
|
||||||
|
</IconButton>
|
||||||
<Typography sx={{ fontSize: 14 }} color="text.secondary">
|
<Typography sx={{ fontSize: 14 }} color="text.secondary">
|
||||||
{date}
|
{date}
|
||||||
{[1,2,4,5].includes(notification.priority) &&
|
{[1,2,4,5].includes(notification.priority) &&
|
||||||
|
|
Loading…
Reference in a new issue