From 5bed9263231b97d9f51f51411ee4b848b7e77b09 Mon Sep 17 00:00:00 2001 From: Philipp Heckel Date: Mon, 7 Mar 2022 16:36:49 -0500 Subject: [PATCH] Home page; "all notifications" --- web/src/app/SubscriptionManager.js | 8 +++ web/src/components/App.js | 8 ++- web/src/components/Navigation.js | 3 +- web/src/components/NoTopics.js | 25 ---------- web/src/components/Notifications.js | 75 +++++++++++++++++++++++------ 5 files changed, 73 insertions(+), 46 deletions(-) delete mode 100644 web/src/components/NoTopics.js diff --git a/web/src/app/SubscriptionManager.js b/web/src/app/SubscriptionManager.js index ca9fd34..70a7e18 100644 --- a/web/src/app/SubscriptionManager.js +++ b/web/src/app/SubscriptionManager.js @@ -38,6 +38,14 @@ class SubscriptionManager { async getNotifications(subscriptionId) { return db.notifications .where({ subscriptionId: subscriptionId }) + .reverse() + .sortBy("time"); // Inefficient, but there is no other way (see docs) + } + + async getAllNotifications() { + return db.notifications + .orderBy("time") // Efficient, see docs + .reverse() .toArray(); } diff --git a/web/src/components/App.js b/web/src/components/App.js index 113ef95..04c5e28 100644 --- a/web/src/components/App.js +++ b/web/src/components/App.js @@ -10,7 +10,6 @@ import connectionManager from "../app/ConnectionManager"; import Navigation from "./Navigation"; import ActionBar from "./ActionBar"; import notifier from "../app/Notifier"; -import NoTopics from "./NoTopics"; import Preferences from "./Preferences"; import {useLiveQuery} from "dexie-react-hooks"; import poller from "../app/Poller"; @@ -56,7 +55,6 @@ const Root = () => { }, [subscriptions, users]); // Dangle! useEffect(() => { - console.log(`hello ${newNotificationsCount}`) document.title = (newNotificationsCount > 0) ? `(${newNotificationsCount}) ntfy web` : "ntfy web"; }, [newNotificationsCount]); @@ -81,10 +79,10 @@ const Root = () => {
- } /> } /> - } /> - } /> + } /> + } /> + } />
diff --git a/web/src/components/Navigation.js b/web/src/components/Navigation.js index 551cd6e..f2875d6 100644 --- a/web/src/components/Navigation.js +++ b/web/src/components/Navigation.js @@ -133,9 +133,10 @@ const SubscriptionList = (props) => { const SubscriptionItem = (props) => { const navigate = useNavigate(); const subscription = props.subscription; + const iconBadge = (subscription.new <= 99) ? subscription.new : "99+"; const icon = (subscription.state === ConnectionState.Connecting) ? - : ; + : ; const label = (subscription.baseUrl === window.location.origin) ? subscription.topic : topicShortUrl(subscription.baseUrl, subscription.topic); diff --git a/web/src/components/NoTopics.js b/web/src/components/NoTopics.js deleted file mode 100644 index 364f436..0000000 --- a/web/src/components/NoTopics.js +++ /dev/null @@ -1,25 +0,0 @@ -import {Link} from "@mui/material"; -import Typography from "@mui/material/Typography"; -import * as React from "react"; -import {Paragraph, VerticallyCenteredContainer} from "./styles"; - -const NoTopics = (props) => { - return ( - - - No topics
- It looks like you don't have any subscriptions yet. - - - Click the "Add subscription" link to create or subscribe to a topic. After that, you can send messages - via PUT or POST and you'll receive notifications here. - - - For more information, check out the website or - {" "}documentation. - - - ); -}; - -export default NoTopics; diff --git a/web/src/components/Notifications.js b/web/src/components/Notifications.js index 1e53f5b..68680fa 100644 --- a/web/src/components/Notifications.js +++ b/web/src/components/Notifications.js @@ -1,5 +1,5 @@ import Container from "@mui/material/Container"; -import {ButtonBase, CardActions, CardContent, Fade, Link, Modal, Stack} from "@mui/material"; +import {ButtonBase, CardActions, CardContent, CircularProgress, Fade, Link, Modal, Stack} from "@mui/material"; import Card from "@mui/material/Card"; import Typography from "@mui/material/Typography"; import * as React from "react"; @@ -22,28 +22,43 @@ import Button from "@mui/material/Button"; import subscriptionManager from "../app/SubscriptionManager"; const Notifications = (props) => { - const subscription = props.subscription; - if (!subscription) { - return null; + if (props.mode === "all") { + return (props.subscriptions) ? : ; } - return ; + return (props.subscription) ? : ; +} + +const AllSubscriptions = () => { + const notifications = useLiveQuery(() => subscriptionManager.getAllNotifications(), []); + if (notifications === null || notifications === undefined) { + 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 subscription = props.subscription; - const notifications = useLiveQuery(() => 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); + const sortedNotifications = props.notifications; + /*const sortedNotifications = Array.from(props.notifications) + .sort((a, b) => a.time < b.time ? 1 : -1);*/ return ( {sortedNotifications.map(notification => )} @@ -52,8 +67,8 @@ const NotificationList = (props) => { } const NotificationItem = (props) => { - const subscriptionId = props.subscriptionId; const notification = props.notification; + const subscriptionId = notification.subscriptionId; const attachment = notification.attachment; const date = formatShortDateTime(notification.time); const otherTags = unmatchedTags(notification.tags); @@ -250,7 +265,7 @@ const Icon = (props) => { ); } -const NothingHereYet = (props) => { +const NoNotifications = (props) => { const shortUrl = topicShortUrl(props.subscription.baseUrl, props.subscription.topic); return ( @@ -275,4 +290,34 @@ const NothingHereYet = (props) => { ); }; +const NoSubscriptions = () => { + return ( + + + No topics
+ It looks like you don't have any subscriptions yet. + + + Click the "Add subscription" link to create or subscribe to a topic. After that, you can send messages + via PUT or POST and you'll receive notifications here. + + + For more information, check out the website or + {" "}documentation. + + + ); +}; + +const Loading = () => { + return ( + + +
+ Loading notifications ... + + + ); +}; + export default Notifications;