diff --git a/web/src/app/SubscriptionManager.js b/web/src/app/SubscriptionManager.js
index ca9fd340..70a7e18b 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 113ef952..04c5e285 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 = () => {
<Main>
<Toolbar/>
<Routes>
- <Route path="/" element={<NoTopics />} />
<Route path="settings" element={<Preferences />} />
- <Route path=":baseUrl/:topic" element={<Notifications subscription={selectedSubscription}/>} />
- <Route path=":topic" element={<Notifications subscription={selectedSubscription}/>} />
+ <Route path="/" element={<Notifications mode="all" subscriptions={subscriptions} />} />
+ <Route path=":baseUrl/:topic" element={<Notifications mode="one" subscription={selectedSubscription}/>} />
+ <Route path=":topic" element={<Notifications mode="one" subscription={selectedSubscription}/>} />
</Routes>
</Main>
</Box>
diff --git a/web/src/components/Navigation.js b/web/src/components/Navigation.js
index 551cd6e1..f2875d64 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)
? <CircularProgress size="24px"/>
- : <Badge badgeContent={subscription.new} invisible={subscription.new === 0} color="primary"><ChatBubbleOutlineIcon/></Badge>;
+ : <Badge badgeContent={iconBadge} invisible={subscription.new === 0} color="primary"><ChatBubbleOutlineIcon/></Badge>;
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 364f4362..00000000
--- 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 (
- <VerticallyCenteredContainer maxWidth="xs">
- <Typography variant="h5" align="center" sx={{ paddingBottom: 1 }}>
- <img src="static/img/ntfy-outline.svg" height="64" width="64" alt="No topics"/><br />
- It looks like you don't have any subscriptions yet.
- </Typography>
- <Paragraph>
- 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.
- </Paragraph>
- <Paragraph>
- For more information, check out the <Link href="https://ntfy.sh" target="_blank" rel="noopener">website</Link> or
- {" "}<Link href="https://ntfy.sh/docs" target="_blank" rel="noopener">documentation</Link>.
- </Paragraph>
- </VerticallyCenteredContainer>
- );
-};
-
-export default NoTopics;
diff --git a/web/src/components/Notifications.js b/web/src/components/Notifications.js
index 1e53f5b4..68680fa9 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) ? <AllSubscriptions subscriptions={props.subscriptions}/> : <Loading/>;
}
- return <NotificationList subscription={subscription}/>;
+ return (props.subscription) ? <SingleSubscription subscription={props.subscription}/> : <Loading/>;
+}
+
+const AllSubscriptions = () => {
+ const notifications = useLiveQuery(() => subscriptionManager.getAllNotifications(), []);
+ if (notifications === null || notifications === undefined) {
+ return <Loading/>;
+ } else if (notifications.length === 0) {
+ return <NoSubscriptions/>;
+ }
+ return <NotificationList notifications={notifications}/>;
+}
+
+const SingleSubscription = (props) => {
+ const subscription = props.subscription;
+ const notifications = useLiveQuery(() => subscriptionManager.getNotifications(subscription.id), [subscription]);
+ if (notifications === null || notifications === undefined) {
+ return <Loading/>;
+ } else if (notifications.length === 0) {
+ return <NoNotifications subscription={subscription}/>;
+ }
+ return <NotificationList notifications={notifications}/>;
}
const NotificationList = (props) => {
- const subscription = props.subscription;
- const notifications = useLiveQuery(() => subscriptionManager.getNotifications(subscription.id), [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 = props.notifications;
+ /*const sortedNotifications = Array.from(props.notifications)
+ .sort((a, b) => a.time < b.time ? 1 : -1);*/
return (
<Container maxWidth="md" sx={{marginTop: 3, marginBottom: 3}}>
<Stack spacing={3}>
{sortedNotifications.map(notification =>
<NotificationItem
key={notification.id}
- subscriptionId={subscription.id}
notification={notification}
/>)}
</Stack>
@@ -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 (
<VerticallyCenteredContainer maxWidth="xs">
@@ -275,4 +290,34 @@ const NothingHereYet = (props) => {
);
};
+const NoSubscriptions = () => {
+ return (
+ <VerticallyCenteredContainer maxWidth="xs">
+ <Typography variant="h5" align="center" sx={{ paddingBottom: 1 }}>
+ <img src="/static/img/ntfy-outline.svg" height="64" width="64" alt="No topics"/><br />
+ It looks like you don't have any subscriptions yet.
+ </Typography>
+ <Paragraph>
+ 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.
+ </Paragraph>
+ <Paragraph>
+ For more information, check out the <Link href="https://ntfy.sh" target="_blank" rel="noopener">website</Link> or
+ {" "}<Link href="https://ntfy.sh/docs" target="_blank" rel="noopener">documentation</Link>.
+ </Paragraph>
+ </VerticallyCenteredContainer>
+ );
+};
+
+const Loading = () => {
+ return (
+ <VerticallyCenteredContainer>
+ <Typography variant="h5" color="text.secondary" align="center" sx={{ paddingBottom: 1 }}>
+ <CircularProgress disableShrink sx={{marginBottom: 1}}/><br />
+ Loading notifications ...
+ </Typography>
+ </VerticallyCenteredContainer>
+ );
+};
+
export default Notifications;