import Container from "@mui/material/Container"; import { ButtonBase, CardActions, CardContent, CircularProgress, Fade, Link, Modal, Snackbar, Stack, Tooltip } from "@mui/material"; import Card from "@mui/material/Card"; import Typography from "@mui/material/Typography"; import * as React from "react"; import {useEffect, useState} from "react"; import { formatBytes, formatMessage, formatShortDateTime, formatTitle, maybeAppendActionErrors, openUrl, shortUrl, 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"; import InfiniteScroll from "react-infinite-scroll-component"; import priority1 from "../img/priority-1.svg"; import priority2 from "../img/priority-2.svg"; import priority4 from "../img/priority-4.svg"; import priority5 from "../img/priority-5.svg"; import logoOutline from "../img/ntfy-outline.svg"; import AttachmentIcon from "./AttachmentIcon"; import {Trans, useTranslation} from "react-i18next"; const Notifications = (props) => { if (props.mode === "all") { return (props.subscriptions) ? : ; } return (props.subscription) ? : ; } const AllSubscriptions = (props) => { const subscriptions = props.subscriptions; const notifications = useLiveQuery(() => subscriptionManager.getAllNotifications(), []); if (notifications === null || notifications === undefined) { return ; } else if (subscriptions.length === 0) { return ; } else if (notifications.length === 0) { return ; } return ; } const SingleSubscription = (props) => { const subscription = props.subscription; const notifications = useLiveQuery(() => subscriptionManager.getNotifications(subscription.id), [subscription]); if (notifications === null || notifications === undefined) { return ; } else if (notifications.length === 0) { return ; } return ; } const NotificationList = (props) => { const { t } = useTranslation(); const pageSize = 20; const notifications = props.notifications; const [snackOpen, setSnackOpen] = useState(false); const [maxCount, setMaxCount] = useState(pageSize); const count = Math.min(notifications.length, maxCount); useEffect(() => { return () => { setMaxCount(pageSize); document.getElementById("main").scrollTo(0, 0); } }, [props.id]); return ( setMaxCount(prev => prev + pageSize)} hasMore={count < notifications.length} loader={<>Loading ...} scrollThreshold={0.7} scrollableTarget="main" > {notifications.slice(0, count).map(notification => setSnackOpen(true)} />)} setSnackOpen(false)} message={t("notifications_copied_to_clipboard")} /> ); } const NotificationItem = (props) => { const { t } = useTranslation(); 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}`); await subscriptionManager.deleteNotification(notification.id) } const handleCopy = (s) => { navigator.clipboard.writeText(s); props.onShowSnack(); }; const expired = attachment && attachment.expires && attachment.expires < Date.now()/1000; const hasAttachmentActions = attachment && !expired; const hasClickAction = notification.click; const hasUserActions = notification.actions && notification.actions.length > 0; const showActions = hasAttachmentActions || hasClickAction || hasUserActions; return ( {date} {[1,2,4,5].includes(notification.priority) && {t("notifications_priority_x",} {notification.new === 1 && } {notification.title && {formatTitle(notification)}} {autolink(maybeAppendActionErrors(formatMessage(notification), notification))} {attachment && } {tags && {t("notifications_tags")}: {tags}} {showActions && {hasAttachmentActions && <> } {hasClickAction && <> } {hasUserActions && } } ); } /** * Replace links with components; this is a combination of the genius function * in [1] and the regex in [2]. * * [1] https://github.com/facebook/react/issues/3386#issuecomment-78605760 * [2] https://github.com/bryanwoods/autolink-js/blob/master/autolink.js#L9 */ const autolink = (s) => { const parts = s.split(/(\bhttps?:\/\/[\-A-Z0-9+\u0026\u2019@#\/%?=()~_|!:,.;]*[\-A-Z0-9+\u0026@#\/%=~()_|]\b)/gi); for (let i = 1; i < parts.length; i += 2) { parts[i] = {shortUrl(parts[i])}; } return <>{parts}; }; const priorityFiles = { 1: priority1, 2: priority2, 4: priority4, 5: priority5 }; const Attachment = (props) => { const { t } = useTranslation(); 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(t("notifications_attachment_link_expires", { date: formatShortDateTime(attachment.expires) })); } if (expired) { infos.push(t("notifications_attachment_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 { t } = useTranslation(); 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 UserActions = (props) => { return ( <>{props.notification.actions.map(action => )} ); }; const UserAction = (props) => { const { t } = useTranslation(); const notification = props.notification; const action = props.action; if (action.action === "broadcast") { return ( ); } else if (action.action === "view") { return ( ); } else if (action.action === "http") { const method = action.method ?? "POST"; const label = action.label + (ACTION_LABEL_SUFFIX[action.progress ?? 0] ?? ""); return ( ); } return null; // Others }; const performHttpAction = async (notification, action) => { console.log(`[Notifications] Performing HTTP user action`, action); try { updateActionStatus(notification, action, ACTION_PROGRESS_ONGOING, null); const response = await fetch(action.url, { method: action.method ?? "POST", headers: action.headers ?? {}, body: action.body ?? "" }); console.log(`[Notifications] HTTP user action response`, response); const success = response.status >= 200 && response.status <= 299; if (success) { updateActionStatus(notification, action, ACTION_PROGRESS_SUCCESS, null); } else { updateActionStatus(notification, action, ACTION_PROGRESS_FAILED, `${action.label}: Unexpected response HTTP ${response.status}`); } } catch (e) { console.log(`[Notifications] HTTP action failed`, e); updateActionStatus(notification, action, ACTION_PROGRESS_FAILED, `${action.label}: ${e} Check developer console for details.`); } }; const updateActionStatus = (notification, action, progress, error) => { notification.actions = notification.actions.map(a => { if (a.id !== action.id) { return a; } return { ...a, progress: progress, error: error }; }); subscriptionManager.updateNotification(notification); } const ACTION_PROGRESS_ONGOING = 1; const ACTION_PROGRESS_SUCCESS = 2; const ACTION_PROGRESS_FAILED = 3; const ACTION_LABEL_SUFFIX = { [ACTION_PROGRESS_ONGOING]: " …", [ACTION_PROGRESS_SUCCESS]: " ✔", [ACTION_PROGRESS_FAILED]: " ❌" }; const NoNotifications = (props) => { const { t } = useTranslation(); const shortUrl = topicShortUrl(props.subscription.baseUrl, props.subscription.topic); return ( {t("action_bar_logo_alt")}/
{t("notifications_none_for_topic_title")}
{t("notifications_none_for_topic_description")} {t("notifications_example")}:
$ curl -d "Hi" {shortUrl}
); }; const NoNotificationsWithoutSubscription = (props) => { const { t } = useTranslation(); const subscription = props.subscriptions[0]; const shortUrl = topicShortUrl(subscription.baseUrl, subscription.topic); return ( {t("action_bar_logo_alt")}/
{t("notifications_none_for_any_title")}
{t("notifications_none_for_any_description")} {t("notifications_example")}:
$ curl -d "Hi" {shortUrl}
); }; const NoSubscriptions = () => { const { t } = useTranslation(); return ( {t("action_bar_logo_alt")}/
{t("notifications_no_subscriptions_title")}
{t("notifications_no_subscriptions_description", { linktext: t("nav_button_subscribe") })}
); }; const ForMoreDetails = () => { return ( , docsLink: }} /> ); }; const Loading = () => { const { t } = useTranslation(); return (
{t("notifications_loading")}
); }; export default Notifications;