From 448444eccfbba647084625cced770efa30ee7968 Mon Sep 17 00:00:00 2001
From: Philipp Heckel <pheckel@datto.com>
Date: Fri, 8 Apr 2022 20:24:11 -0400
Subject: [PATCH] Show snack bar error message when publishing fails, closes
 #205

---
 docs/releases.md                |  1 +
 web/src/components/ActionBar.js | 11 +++++++++++
 2 files changed, 12 insertions(+)

diff --git a/docs/releases.md b/docs/releases.md
index 79b7706d..f45fa367 100644
--- a/docs/releases.md
+++ b/docs/releases.md
@@ -14,6 +14,7 @@ and the [ntfy Android app](https://github.com/binwiederhier/ntfy-android/release
 **Bugs:**
 
 * Web app: English language strings fixes ([#203](https://github.com/binwiederhier/ntfy/issues/203), thanks to [@StoyanDimitrov](https://github.com/StoyanDimitrov))
+* Web app: Show error message snackbar when sending test notification fails ([#205](https://github.com/binwiederhier/ntfy/issues/205), thanks to [@cmeis](https://github.com/cmeis))
 
 **Translations (web app):**
 
diff --git a/web/src/components/ActionBar.js b/web/src/components/ActionBar.js
index 7e3ce44b..95e14440 100644
--- a/web/src/components/ActionBar.js
+++ b/web/src/components/ActionBar.js
@@ -23,6 +23,7 @@ import routes from "./routes";
 import subscriptionManager from "../app/SubscriptionManager";
 import logo from "../img/ntfy.svg";
 import {useTranslation} from "react-i18next";
+import {Portal, Snackbar} from "@mui/material";
 
 const ActionBar = (props) => {
     const { t } = useTranslation();
@@ -71,6 +72,7 @@ const SettingsIcons = (props) => {
     const { t } = useTranslation();
     const navigate = useNavigate();
     const [open, setOpen] = useState(false);
+    const [snackOpen, setSnackOpen] = useState(false);
     const anchorRef = useRef(null);
     const subscription = props.subscription;
 
@@ -146,6 +148,7 @@ const SettingsIcons = (props) => {
             });
         } catch (e) {
             console.log(`[ActionBar] Error publishing message`, e);
+            setSnackOpen(true);
         }
         setOpen(false);
     }
@@ -201,6 +204,14 @@ const SettingsIcons = (props) => {
                     </Grow>
                 )}
             </Popper>
+            <Portal>
+                <Snackbar
+                    open={snackOpen}
+                    autoHideDuration={3000}
+                    onClose={() => setSnackOpen(false)}
+                    message={t("message_bar_error_publishing")}
+                />
+            </Portal>
         </>
     );
 };