snackbar alerts

package.json

@@ -30,9 +30,11 @@
     "dayjs": "^1.11.9",
     "history": "^5.3.0",
     "jest-docblock": "^29.4.3",
+    "notistack": "^3.0.1",
     "react-hook-form": "^7.43.9",
     "react-redux": "^8.0.7",
-    "react-router-dom": "^6.14.0"
+    "react-router-dom": "^6.14.0",
+    "uuid": "^9.0.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.28",
@@ -60,6 +62,7 @@
     "react-dom": "^18.2.0",
     "redux-mock-store": "^1.5.4",
     "tailwindcss": "^3.3.2",
+    "tailwindcss-animated": "^1.0.1",
     "vite": "^4.3.2"
   }
 }

src/App.jsx

@@ -11,6 +11,8 @@ import AppRouter from "./Components/AppRouter";
 import { Provider } from "react-redux";
 import DialogStack from "./dialog/DialogStack";
 import Auth from "./Components/Auth";
+import SnackbarStack from "./Components/snackbars/SnackbarStack";
+import { SnackbarProvider } from "notistack";
 
 const theme = createTheme({
   components: {
@@ -60,9 +62,14 @@ function App() {
         <StyledEngineProvider injectFirst>
           <Auth>
             <ThemeProvider theme={theme}>
-              <CssBaseline />
-              <AppRouter />
-              <DialogStack />
+              <SnackbarProvider
+                anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
+              >
+                <CssBaseline />
+                <AppRouter />
+                <DialogStack />
+                <SnackbarStack />
+              </SnackbarProvider>
             </ThemeProvider>
           </Auth>
         </StyledEngineProvider>

src/Components/snackbars/SnackbarStack.jsx

@@ -0,0 +1,32 @@
+import { Icon, IconButton } from "@mui/material";
+import { useSnackbar } from "notistack";
+import { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { shiftSnackbar } from "../../slices/snackbarSlice";
+
+const SnackbarStack = () => {
+  const snackbarStack = useSelector(({ snackbar }) => snackbar.stack);
+  const dispatch = useDispatch();
+  const { enqueueSnackbar, closeSnackbar } = useSnackbar();
+
+  useEffect(() => {
+    const lastSnackbar = snackbarStack[snackbarStack.length - 1];
+    if (lastSnackbar) {
+      enqueueSnackbar(lastSnackbar?.message, {
+        variant: lastSnackbar?.variant,
+        action: (snackbarId) => (
+          <IconButton onClick={() => closeSnackbar(snackbarId)}>
+            <Icon color="primary">close</Icon>
+          </IconButton>
+        ),
+      });
+      setTimeout(() => {
+        dispatch(shiftSnackbar());
+      }, 10000);
+    }
+  }, [snackbarStack.length]);
+
+  return null;
+};
+
+export default SnackbarStack;

src/Pages/AppointmentInfo.jsx

@@ -21,6 +21,7 @@ import { createAppointment, updateAppointment, deleteAppointment } from "../serv
 import DtxTextField from "../Components/Form/DtxTextField";
 import DtxSelect from "../Components/Form/DtxSelect";
 import DtxCheckbox from "../Components/Form/DtxCheckbox";
+import { showSnackbar } from '../slices/snackbarSlice';
 
 
 const AppointmentInfo = ({ ...props }) => {
@@ -126,8 +127,24 @@ const AppointmentInfo = ({ ...props }) => {
                 await createAppointment(doctorId, appointmentDataToSend)
             }
             dispatch(incrementDataRevision({ event: "appointmentRevision" }))
+            dispatch(
+                showSnackbar({
+                  message: isEditMode
+                    ? "Cambios guardados exitosamente"
+                    : "La cita ha sido registrada con éxito en el sistema",
+                  variant: "success",
+                })
+              );
             dispatch(popDialog())
         } catch (err) {
+            dispatch(
+                showSnackbar({
+                  message: `Ha ocurrido un error al momento de ${
+                    isEditMode ? "actualizar" : "crear"
+                  } la cita`,
+                  variant: "error",
+                })
+              );
             console.error(err)
         } finally {
             setLoading(false)

src/Pages/PatientInfo.jsx

@@ -1,4 +1,4 @@
-import React from 'react'; 
+import React from "react";
 import { useState, memo } from "react";
 import { useForm } from "react-hook-form";
 
@@ -32,6 +32,7 @@ import { createPatient, updatePatient } from "../services/patientServices";
 import { useDispatch, useSelector } from "react-redux";
 import { popDialog } from "../slices/dialogSlice";
 import { incrementDataRevision } from "../slices/revisionSlice";
+import { showSnackbar } from "../slices/snackbarSlice";
 
 function TabPanel(props) {
   const { children, value, index, ...other } = props;
@@ -99,8 +100,24 @@ const PatientInfo = ({ onProgress, ...props }) => {
       }
 
       dispatch(incrementDataRevision({ event: "patientRevision" }));
+      dispatch(
+        showSnackbar({
+          message: isEditMode
+            ? "Cambios guardados exitosamente"
+            : "El paciente ha sido registrado con éxito en el sistema",
+          variant: "success",
+        })
+      );
       dispatch(popDialog());
     } catch (err) {
+      dispatch(
+        showSnackbar({
+          message: `Ha ocurrido un error al momento de ${
+            isEditMode ? "actualizar" : "crear"
+          } el paciente`,
+          variant: "error",
+        })
+      );
       console.error(err);
     } finally {
       setLoading(false);

src/reducer/store.js

@@ -4,13 +4,16 @@ import { dialogReducer } from "../slices/dialogSlice";
 import { loginReducer } from "../slices/loginSlice";
 import { userReducer } from "../slices/userSlice";
 import { revisionReducer } from "../slices/revisionSlice";
+import { snackbarReducer } from "../slices/snackbarSlice";
+
 
 const store = configureStore({
   reducer: {
     dialog: dialogReducer,
     login: loginReducer,
     user: userReducer,
-    revision: revisionReducer
+    revision: revisionReducer,
+    snackbar: snackbarReducer
   },
 });
 

src/slices/snackbarSlice.js

@@ -0,0 +1,22 @@
+import { createSlice } from "@reduxjs/toolkit";
+import { v4 as uuid } from "uuid";
+
+const snackbarSlice = createSlice({
+  name: "snackbar",
+  initialState: {
+    stack: [],
+  },
+  reducers: {
+    showSnackbar: (state, action) => {
+      const snackbarId = uuid();
+      state.stack.push({ id: snackbarId, ...action.payload });
+    },
+    shiftSnackbar: (state, action) => {
+      state.stack.shift();
+    },
+  },
+});
+
+export const snackbarReducer = snackbarSlice.reducer;
+export const { showSnackbar, shiftSnackbar } = snackbarSlice.actions;
+export default snackbarSlice;

tailwind.config.js

@@ -13,5 +13,5 @@ export default {
       },
     },
   },
-  plugins: [],
+  plugins: [import('tailwindcss-animated')],
 };