Home page; "all notifications"

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();
     }
 

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>

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);

web/src/components/NoTopics.js

@@ -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;

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 NotificationList = (props) => {
+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 || notifications.length === 0) {
-        return <NothingHereYet subscription={subscription}/>;
+    if (notifications === null || notifications === undefined) {
+        return <Loading/>;
+    } else if (notifications.length === 0) {
+        return <NoNotifications subscription={subscription}/>;
     }
-    const sortedNotifications = Array.from(notifications)
-        .sort((a, b) => a.time < b.time ? 1 : -1);
+    return <NotificationList notifications={notifications}/>;
+}
+
+const NotificationList = (props) => {
+    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;