import Container from "@mui/material/Container"; import {ButtonBase, CardActions, CardContent, Fade, Link, Modal, Stack} from "@mui/material"; import Card from "@mui/material/Card"; import Typography from "@mui/material/Typography"; import * as React from "react"; import {useState} from "react"; import {formatBytes, formatMessage, formatShortDateTime, formatTitle, topicShortUrl, unmatchedTags} from "../app/utils"; import IconButton from "@mui/material/IconButton"; import CloseIcon from '@mui/icons-material/Close'; import {LightboxBackdrop, Paragraph, VerticallyCenteredContainer} from "./styles"; import {useLiveQuery} from "dexie-react-hooks"; import Box from "@mui/material/Box"; import Button from "@mui/material/Button"; import subscriptionManager from "../app/SubscriptionManager"; const Notifications = (props) => { const subscription = props.subscription; const notifications = useLiveQuery(() => { return subscriptionManager.getNotifications(subscription.id); }, [subscription]); if (!notifications || notifications.length === 0) { return ; } const sortedNotifications = Array.from(notifications) .sort((a, b) => a.time < b.time ? 1 : -1); return ( {sortedNotifications.map(notification => )} ); } const NotificationItem = (props) => { const subscriptionId = props.subscriptionId; const notification = props.notification; const attachment = notification.attachment; const date = formatShortDateTime(notification.time); 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 subscriptionManager.deleteNotification(notification.id) } const expired = attachment && attachment.expires && attachment.expires < Date.now()/1000; return ( {date} {[1,2,4,5].includes(notification.priority) && {`Priority} {notification.title && {formatTitle(notification)}} {formatMessage(notification)} {attachment && } {tags && Tags: {tags}} {attachment && !expired && } ); } const Attachment = (props) => { const attachment = props.attachment; const expired = attachment.expires && attachment.expires < Date.now()/1000; const expires = attachment.expires && attachment.expires > Date.now()/1000; const displayableImage = !expired && attachment.type && attachment.type.startsWith("image/"); // Unexpired image if (displayableImage) { return ; } // Anything else: Show box const infos = []; if (attachment.size) { infos.push(formatBytes(attachment.size)); } if (expires) { infos.push(`link expires ${formatShortDateTime(attachment.expires)}`); } if (expired) { infos.push(`download link expired`); } const maybeInfoText = (infos.length > 0) ? <>
{infos.join(", ")} : null; // If expired, just show infos without click target if (expired) { return ( {attachment.name} {maybeInfoText} ); } // Not expired return ( {attachment.name} {maybeInfoText} ); }; const Image = (props) => { const [open, setOpen] = useState(false); return ( <> setOpen(true)} sx={{ marginTop: 2, borderRadius: '4px', boxShadow: 2, width: 1, maxHeight: '400px', objectFit: 'cover', cursor: 'pointer' }} /> setOpen(false)} BackdropComponent={LightboxBackdrop} > ); } const Icon = (props) => { const type = props.type; let imageFile; if (!type) { imageFile = 'file-document.svg'; } else if (type.startsWith('image/')) { imageFile = 'file-image.svg'; } else if (type.startsWith('video/')) { imageFile = 'file-video.svg'; } else if (type.startsWith('audio/')) { imageFile = 'file-audio.svg'; } else if (type === "application/vnd.android.package-archive") { imageFile = 'file-app.svg'; } else { imageFile = 'file-document.svg'; } return ( ); } const NothingHereYet = (props) => { const shortUrl = topicShortUrl(props.subscription.baseUrl, props.subscription.topic); return ( No notifications
You haven't received any notifications for this topic yet.
To send notifications to this topic, simply PUT or POST to the topic URL. Example:
$ curl -d "Hi" {shortUrl}
For more detailed instructions, check out the website or {" "}documentation.
); }; export default Notifications;