astra/ntfy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Switch everything to Dexie.js

Browse source
This commit is contained in:
Philipp Heckel 2022-03-02 16:16:30 -05:00
parent 39f4613719
commit 349872bdb3
16 changed files with 243 additions and 316 deletions
Download patch file Download diff file Expand all files Collapse all files

19
web/src/components/Notifications.js
View file

@ -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 <NothingHereYet subscription={subscription}/>;
}
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 (
<Container maxWidth="lg" sx={{marginTop: 3, marginBottom: 3}}>
<Stack spacing={3}>
@ -30,7 +30,6 @@ const Notifications = (props) => {
key={notification.id}
subscriptionId={subscription.id}
notification={notification}
onDelete={(notificationId) => props.onDeleteNotification(subscription.id, notificationId)}
/>)}
</Stack>
</Container>
@ -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 (
<Card sx={{ minWidth: 275 }}>
<CardContent>
<IconButton onClick={() => props.onDelete(notification.id)} sx={{ float: 'right', marginRight: -1, marginTop: -1 }}>
<IconButton onClick={handleDelete} sx={{ float: 'right', marginRight: -1, marginTop: -1 }}>
<CloseIcon />
</IconButton>
<Typography sx={{ fontSize: 14 }} color="text.secondary">
@ -67,6 +71,7 @@ const NotificationItem = (props) => {
}
const NothingHereYet = (props) => {
const shortUrl = topicShortUrl(props.subscription.baseUrl, props.subscription.topic);
return (
<VerticallyCenteredContainer maxWidth="xs">
<Typography variant="h5" align="center" sx={{ paddingBottom: 1 }}>
@ -79,7 +84,7 @@ const NothingHereYet = (props) => {
<Paragraph>
Example:<br/>
<tt>
$ curl -d "Hi" {props.subscription.shortUrl()}
$ curl -d "Hi" {shortUrl}
</tt>
</Paragraph>
<Paragraph>