Add proper snackbars (from notisnack package) and major improvements

.github/workflows/deploy-master.yml

@@ -1,33 +1,37 @@
 name: Build and Deploy
 
 on:
-  push:
-    branches: [ "master" ]
-  pull_request:
-    branches: [ "master" ]
+    push:
+        branches: ["master"]
+    pull_request:
+        branches: ["master"]
 
 jobs:
-  build:
-    runs-on: ubuntu-latest
+    build:
+        runs-on: ubuntu-latest
 
-    steps:
-    - uses: actions/checkout@v4
+        steps:
+            - uses: actions/checkout@v4
 
-    - name: Use Node.js 22.x
-      uses: actions/setup-node@v4
-      with:
-        node-version: 22.x
+            - name: Use Node.js 22.x
+              uses: actions/setup-node@v4
+              with:
+                  node-version: 22.x
 
-    - name: Build
-      run: |
-        npm install
-        npm run build
+            - name: Build
+              run: |
+                  npm install
+                  npm run build
 
-    - name: Get commit short hash
-      id: vars
-      run: |
-        echo "sha_short=$(git rev-parse --short HEAD)" >> $GITHUB_OUTPUT
-    - name: Post request
-      run: |
-        curl -s -X POST -k ${{ secrets.WEBHOOK_URL }}?TAG=${{ steps.vars.outputs.sha_short }} \
-        -H 'sudo-token: ${{ secrets.API_SUDO_TOKEN }}'
+            - name: Get commit short hash
+              id: vars
+              run: |
+                  echo "sha_short=$(git rev-parse --short HEAD)" >> $GITHUB_OUTPUT
+
+            - name: Post request
+              env:
+                  API_WEBHOOK_URL: ${{ secrets.WEBHOOK_URL }}
+              if: ${{ env.API_WEBHOOK_URL != '' && env.API_WEBHOOK_URL != null }}
+              run: |
+                  curl -s -X POST -k ${{ secrets.WEBHOOK_URL }}?TAG=${{ steps.vars.outputs.sha_short }} \
+                  -H 'sudo-token: ${{ secrets.API_SUDO_TOKEN }}'

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "cSpell.words": [
+        "snackbars"
+    ]
+}

package.json

@@ -16,6 +16,7 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "axios": "^1.7.4",
+    "notistack": "^3.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.0",
@@ -55,6 +56,7 @@
     ]
   },
   "devDependencies": {
-    "@babel/plugin-transform-private-property-in-object": "^7.24.7"
+    "@babel/plugin-transform-private-property-in-object": "^7.24.7",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
   }
 }

src/App.tsx

@@ -7,6 +7,7 @@ import CreateUserPage from './pages/createUserPage';
 import Dashboard from './pages/dashboardPage';
 import SearchUserPage from './pages/searchUserPage';
 import UserInfoPage from './pages/userInfoPage';
+import { Box, CircularProgress, Typography } from '@mui/material';
 
 const App: React.FC = () => {
   const [isLoggedIn, setIsLoggedIn] = useState<boolean>(apiClient.isLoggedIn());
@@ -32,7 +33,28 @@ const App: React.FC = () => {
   }, []);
 
   if (isLoading) {
-    return <div>{CurrentAppTranslation.LoadingText}</div>;
+      return (
+          <Box
+              sx={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  height: '100vh',
+                  backgroundColor: '#f0f0f0',
+                  textAlign: 'center',
+                  padding: 2,
+              }}
+          >
+              <CircularProgress size={80} thickness={4} />
+              <Typography variant="h6" sx={{ mt: 3 }}>
+                  {CurrentAppTranslation.LoadingText}
+              </Typography>
+              <Typography variant="body2" sx={{ mt: 1, color: 'text.secondary' }}>
+                  Please wait while we load the content for you.
+              </Typography>
+          </Box>
+      );
   }
 
   return (

src/components/menus/selectMenu.tsx

@@ -4,7 +4,7 @@ import Box from '@mui/material/Box';
 import InputLabel from '@mui/material/InputLabel';
 import MenuItem from '@mui/material/MenuItem';
 import FormControl from '@mui/material/FormControl';
-import Select, { SelectChangeEvent } from '@mui/material/Select';
+import Select from '@mui/material/Select';
 
 
 interface SelectMenuProps {

src/components/snackbars/AppSnackBarProvider.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import React from "react";
+import { SnackbarProvider } from "notistack";
+
+export default function AppSnackBarProvider(props: { children: JSX.Element }) {
+  return (
+    <SnackbarProvider
+      anchorOrigin={{
+        horizontal: "right",
+        vertical: "bottom",
+      }}
+      maxSnack={3}
+    >
+      {props.children}
+    </SnackbarProvider>
+  );
+}

src/components/snackbars/SnackbarButtons.css

@@ -0,0 +1,8 @@
+.go703367398 {
+    padding: 0 !important;
+    margin: 0 !important;
+}
+
+.notistack-MuiContent {
+    justify-content: space-between;
+}

src/components/snackbars/SnackbarButtons.tsx

@@ -0,0 +1,28 @@
+import { Close } from "@mui/icons-material";
+import { IconButton } from "@mui/material";
+import { closeSnackbar } from "notistack";
+import React from "react";
+import "./SnackbarButtons.css";
+
+interface SnackbarButtonsProps {
+  snackbarId: string | number;
+}
+
+export default function SnackbarButtons(props: SnackbarButtonsProps) {
+  const { snackbarId } = props;
+  return (
+    <IconButton
+      onClick={() => closeSnackbar(snackbarId)}
+      sx={{
+        color: "white",
+        opacity: "0.4",
+        "&:hover": {
+          bgcolor: "unset",
+          opacity: "1",
+        },
+      }}
+    >
+      <Close />
+    </IconButton>
+  );
+}

src/components/snackbars/useAppSnackbars.tsx

@@ -0,0 +1,70 @@
+import { SnackbarAction, SnackbarKey, useSnackbar } from "notistack";
+import SnackbarButtons from "./SnackbarButtons";
+
+interface AppSnackbarProps {
+  action?: SnackbarAction;
+  key?: SnackbarKey;
+  hideDuration?: number;
+  preventAutoHide?: boolean;
+  preventAction?: boolean;
+}
+
+const useAppSnackbar = () => {
+  const { enqueueSnackbar } = useSnackbar();
+
+  const success = (message: string, props?: AppSnackbarProps) => {
+    enqueueSnackbar(message, {
+      variant: "success",
+      key: props?.key,
+      autoHideDuration: props?.preventAutoHide
+        ? null
+        : props?.hideDuration ?? 5 * 1000,
+      action: (key) =>
+        props?.preventAction
+          ? undefined
+          : SnackbarButtons({
+              snackbarId: key,
+            }),
+    });
+  };
+
+  const error = (message: string, props?: AppSnackbarProps) => {
+    enqueueSnackbar(message, {
+      key: props?.key,
+      autoHideDuration: props?.preventAutoHide
+        ? null
+        : props?.hideDuration ?? 20 * 1000,
+      variant: "error",
+      action: (key) =>
+        props?.preventAction
+          ? undefined
+          : SnackbarButtons({
+              snackbarId: key,
+            }),
+    });
+  };
+
+  const warning = (message: string, props?: AppSnackbarProps) => {
+    enqueueSnackbar(message, {
+      variant: "warning",
+      key: props?.key,
+      autoHideDuration: props?.preventAutoHide
+        ? null
+        : props?.hideDuration ?? 20 * 1000,
+      action: (key) =>
+        props?.preventAction
+          ? undefined
+          : SnackbarButtons({
+              snackbarId: key,
+            }),
+    });
+  };
+
+  return {
+    success,
+    error,
+    warning,
+  };
+};
+
+export default useAppSnackbar;

src/index.tsx

@@ -3,13 +3,16 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import AppSnackBarProvider from './components/snackbars/AppSnackBarProvider';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 root.render(
   <React.StrictMode>
-    <App />
+    <AppSnackBarProvider>
+      <App />
+    </AppSnackBarProvider>
   </React.StrictMode>
 );