fix: Add snackbar notifications

stenic · Dec 30, 2022 · d5c400e · d5c400e
1 parent 8fd5f8a
commit d5c400e
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 23 deletions.
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -23,6 +23,7 @@
     "@types/react-dom": "^18.0.8",
     "graphql-request": "^5.0.0",
     "graphql-tag": "^2.12.6",
+    "notistack": "^2.0.8",
     "oidc-client-ts": "^2.1.0",
     "react": "^18.2.0",
     "react-admin": "^4.4.4",

diff --git a/ui/src/App.tsx b/ui/src/App.tsx
@@ -14,6 +14,7 @@ import Login from "./scenes/login";
 import Feed from "./scenes/feed";
 import Toolbar from "@mui/material/Toolbar";
 import { useAuth } from "react-oidc-context";
+import { SnackbarProvider } from "notistack";
 
 const App = () => {
   const auth = useAuth();
@@ -39,24 +40,26 @@ const App = () => {
   if (auth.isAuthenticated) {
     return (
       <>
-        <div className="app">
-          <SideBar />
-          <main className="content">
-            <TopBar />
-            <Toolbar />
-            <Routes>
-              <Route path="/" element={<Dashboard />} />
-              <Route path="/settings" element={<Settings />} />
-              <Route path="/versions2" element={<Versions2 />} />
-              <Route path="/versions" element={<Versions />} />
-              <Route path="/last" element={<LastVersions />} />
-              <Route path="/profile" element={<Profile />} />
-              <Route path="/feed" element={<Feed />} />
-              <Route path="/chart" element={<Chart />} />
-            </Routes>
-            <Actions />
-          </main>
-        </div>
+        <SnackbarProvider maxSnack={3}>
+          <div className="app">
+            <SideBar />
+            <main className="content">
+              <TopBar />
+              <Toolbar />
+              <Routes>
+                <Route path="/" element={<Dashboard />} />
+                <Route path="/settings" element={<Settings />} />
+                <Route path="/versions2" element={<Versions2 />} />
+                <Route path="/versions" element={<Versions />} />
+                <Route path="/last" element={<LastVersions />} />
+                <Route path="/profile" element={<Profile />} />
+                <Route path="/feed" element={<Feed />} />
+                <Route path="/chart" element={<Chart />} />
+              </Routes>
+              <Actions />
+            </main>
+          </div>
+        </SnackbarProvider>
       </>
     );
   }

diff --git a/ui/src/scenes/Actions.tsx b/ui/src/scenes/Actions.tsx
@@ -18,6 +18,7 @@ import { useAuth } from "react-oidc-context";
 import { EnvironmentData } from "../types/environment";
 import { ApplicationData } from "../types/application";
 import { LocationData } from "../types/location";
+import { useSnackbar } from "notistack";
 
 interface TFormData {
   environment: string;
@@ -34,6 +35,7 @@ const AddVersionDialog = ({ handleClose }: { handleClose: () => void }) => {
     version: "",
   };
   const [formData, setFormData] = useState(defaultFormData);
+  const { enqueueSnackbar } = useSnackbar();
 
   const auth = useAuth();
   const [apps, setApps] = useState([]);
@@ -57,6 +59,7 @@ const AddVersionDialog = ({ handleClose }: { handleClose: () => void }) => {
       .then(setEnvs)
       .catch((e) => {
         console.error(e);
+        enqueueSnackbar(`Error: ${e}`, { variant: "error" });
         // auth.signinSilent();
       });
   }, [auth, setEnvs]);
@@ -78,6 +81,7 @@ const AddVersionDialog = ({ handleClose }: { handleClose: () => void }) => {
       .then(setApps)
       .catch((e) => {
         console.error(e);
+        enqueueSnackbar(`Error: ${e}`, { variant: "error" });
         // auth.signinSilent();
       });
   }, [auth, setApps]);
@@ -99,12 +103,13 @@ const AddVersionDialog = ({ handleClose }: { handleClose: () => void }) => {
       .then(setLocs)
       .catch((e) => {
         console.error(e);
+        enqueueSnackbar(`Error: ${e}`, { variant: "error" });
         // auth.signinSilent();
       });
   }, [auth, setLocs]);
 
-  const saveHandler = (formData: TFormData) => {
-    fetch("/query", {
+  const saveHandler = (formData: TFormData): Promise<Response> => {
+    return fetch("/query", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
@@ -120,9 +125,15 @@ const AddVersionDialog = ({ handleClose }: { handleClose: () => void }) => {
     event: React.FormEvent<HTMLButtonElement | HTMLFormElement>
   ) => {
     event.preventDefault();
-    saveHandler(formData);
-    handleClose();
-    setFormData(defaultFormData);
+    saveHandler(formData)
+      .then(() => {
+        enqueueSnackbar("New version created!", { variant: "success" });
+        handleClose();
+        setFormData(defaultFormData);
+      })
+      .catch((err) => {
+        enqueueSnackbar("Failed to save!", { variant: "error" });
+      });
   };
 
   return (