From 4a5f34801a9de89df08866f4619805cf0490a218 Mon Sep 17 00:00:00 2001
From: Philipp Heckel <pheckel@datto.com>
Date: Tue, 5 Apr 2022 22:57:57 -0400
Subject: [PATCH] Do not hide notification behind message bar

---
 web/src/app/Api.js                  |  6 +++++-
 web/src/components/ActionBar.js     | 16 ++++++++++------
 web/src/components/Messaging.js     | 21 ++++++++++++++++++---
 web/src/components/Notifications.js | 12 +++++++++---
 4 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/web/src/app/Api.js b/web/src/app/Api.js
index de338775..a5e5bec3 100644
--- a/web/src/app/Api.js
+++ b/web/src/app/Api.js
@@ -37,11 +37,15 @@ class Api {
             message: message,
             ...options
         };
-        await fetch(baseUrl, {
+        const response = await fetch(baseUrl, {
             method: 'PUT',
             body: JSON.stringify(body),
             headers: maybeWithBasicAuth(headers, user)
         });
+        if (response.status < 200 || response.status > 299) {
+            throw new Error(`Unexpected response: ${response.status}`);
+        }
+        return response;
     }
 
     /**
diff --git a/web/src/components/ActionBar.js b/web/src/components/ActionBar.js
index 878f7fe0..bb10b1c4 100644
--- a/web/src/components/ActionBar.js
+++ b/web/src/components/ActionBar.js
@@ -105,7 +105,7 @@ const SettingsIcons = (props) => {
         }
     };
 
-    const handleSendTestMessage = () => {
+    const handleSendTestMessage = async () => {
         const baseUrl = props.subscription.baseUrl;
         const topic = props.subscription.topic;
         const tags = shuffle([
@@ -135,11 +135,15 @@ const SettingsIcons = (props) => {
             `I'm really excited that you're trying out ntfy. Did you know that there are a few public topics, such as ntfy.sh/stats and ntfy.sh/announcements.`,
             `It's interesting to hear what people use ntfy for. I've heard people talk about using it for so many cool things. What do you use it for?`
         ])[0];
-        api.publish(baseUrl, topic, message, {
-            title: title,
-            priority: priority,
-            tags: tags
-        });
+        try {
+            await api.publish(baseUrl, topic, message, {
+                title: title,
+                priority: priority,
+                tags: tags
+            });
+        } catch (e) {
+            console.log(`[ActionBar] Error publishing message`, e);
+        }
         setOpen(false);
     }
 
diff --git a/web/src/components/Messaging.js b/web/src/components/Messaging.js
index 28634065..aa1d4740 100644
--- a/web/src/components/Messaging.js
+++ b/web/src/components/Messaging.js
@@ -10,6 +10,7 @@ import api from "../app/Api";
 import SendDialog from "./SendDialog";
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 import EmojiPicker from "./EmojiPicker";
+import {Portal, Snackbar} from "@mui/material";
 
 const Messaging = (props) => {
     const [message, setMessage] = useState("");
@@ -51,8 +52,14 @@ const Messaging = (props) => {
 
 const MessageBar = (props) => {
     const subscription = props.subscription;
-    const handleSendClick = () => {
-        api.publish(subscription.baseUrl, subscription.topic, props.message); // FIXME
+    const [snackOpen, setSnackOpen] = useState(false);
+    const handleSendClick = async () => {
+        try {
+            await api.publish(subscription.baseUrl, subscription.topic, props.message);
+        } catch (e) {
+            console.log(`[MessageBar] Error publishing message`, e);
+            setSnackOpen(true);
+        }
         props.onMessageChange("");
     };
     return (
@@ -64,7 +71,7 @@ const MessageBar = (props) => {
                 bottom: 0,
                 right: 0,
                 padding: 2,
-                width: `calc(100% - ${Navigation.width}px)`,
+                width: { xs: "100%", sm: `calc(100% - ${Navigation.width}px)` },
                 backgroundColor: (theme) => theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900]
             }}
         >
@@ -90,6 +97,14 @@ const MessageBar = (props) => {
             <IconButton color="inherit" size="large" edge="end" onClick={handleSendClick}>
                 <SendIcon/>
             </IconButton>
+            <Portal>
+                <Snackbar
+                    open={snackOpen}
+                    autoHideDuration={3000}
+                    onClose={() => setSnackOpen(false)}
+                    message="Error publishing message"
+                />
+            </Portal>
         </Paper>
     );
 };
diff --git a/web/src/components/Notifications.js b/web/src/components/Notifications.js
index e915d618..c543de39 100644
--- a/web/src/components/Notifications.js
+++ b/web/src/components/Notifications.js
@@ -57,7 +57,7 @@ const AllSubscriptions = (props) => {
     } else if (notifications.length === 0) {
         return <NoNotificationsWithoutSubscription subscriptions={subscriptions}/>;
     }
-    return <NotificationList key="all" notifications={notifications}/>;
+    return <NotificationList key="all" notifications={notifications} messageBar={false}/>;
 }
 
 const SingleSubscription = (props) => {
@@ -68,7 +68,7 @@ const SingleSubscription = (props) => {
     } else if (notifications.length === 0) {
         return <NoNotifications subscription={subscription}/>;
     }
-    return <NotificationList id={subscription.id} notifications={notifications}/>;
+    return <NotificationList id={subscription.id} notifications={notifications} messageBar={true}/>;
 }
 
 const NotificationList = (props) => {
@@ -94,7 +94,13 @@ const NotificationList = (props) => {
             scrollThreshold={0.7}
             scrollableTarget="main"
         >
-            <Container maxWidth="md" sx={{marginTop: 3, marginBottom: 3}}>
+            <Container
+                maxWidth="md"
+                sx={{
+                    marginTop: 3,
+                    marginBottom: (props.messageBar) ? "100px" : 3 // Hack to avoid hiding notifications behind the message bar
+                }}
+            >
                 <Stack spacing={3}>
                     {notifications.slice(0, count).map(notification =>
                         <NotificationItem