Alert snackbar update

src/components/ui/alert-snackbar/AlertSnackbar.tsx

@@ -0,0 +1,26 @@
+import { Alert, AlertColor, Snackbar } from "@mui/material";
+
+type Props = {
+  alertText?: string;
+  closeHandle: Function;
+  severity?: AlertColor;
+  autoHideDuration?: number;
+}
+
+export function AlertSnackBar(props:Props) {
+    return (
+      <Snackbar
+        open={props.alertText != null}
+        autoHideDuration={props.autoHideDuration ?? 4000}
+        onClose={(e) => props.closeHandle()}
+        anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
+      >
+        <Alert
+          severity={props.severity ?? "error"}
+          sx={{ width: "100%", whiteSpace: "pre-line" }}
+        >
+          {props.alertText}
+        </Alert>
+      </Snackbar>
+    );
+}

src/components/ui/side-bar/AdvancedSideBar.tsx

@@ -1,22 +1,34 @@
+import { AlertColor } from "@mui/lab";
+import { useState } from "react";
+import { AlertSnackBar } from "../alert-snackbar/AlertSnackbar";
 import { ErrorPageWithLottie } from "../error-page/ErrorPageWithLottie";
 import { CenterPageLoading } from "../page-loading/PageLoading";
 import SideBar from "./SideBar";
 
 type Props = {
   children: any;
   isLoading: boolean;
-  errorMessage?: string|null|undefined;
+  alertCloseHandler?:Function;
+  errorMessage?: string | null | undefined;
+  alertText?: string;
+  alertColor?: AlertColor;
 };
 
-
 export function AdvancedSideBar(props: Props) {
   return (
-    <SideBar>
-      <CenterPageLoading isLoading={props.isLoading}>
-        <ErrorPageWithLottie message={props.errorMessage}>
-          {props.children}
-        </ErrorPageWithLottie>
-      </CenterPageLoading>
-    </SideBar>
+    <>
+      <SideBar>
+        <CenterPageLoading isLoading={props.isLoading}>
+          <ErrorPageWithLottie message={props.errorMessage}>
+            {props.children}
+          </ErrorPageWithLottie>
+        </CenterPageLoading>
+      </SideBar>
+      <AlertSnackBar
+        alertText={props.alertText}
+        closeHandle={props.alertCloseHandler ?? new Function()}
+        severity={props.alertColor}
+      />
+    </>
   );
 }

src/pages/product/ProductPage.tsx

@@ -1,21 +1,18 @@
 import LoadingButton from "@mui/lab/LoadingButton/LoadingButton";
 import {
-  Alert,
   AlertColor,
   Box,
   Card,
   CardActions,
   CardContent,
   CardMedia,
-  Snackbar,
   TextField,
 } from "@mui/material";
 import { useEffect, useState } from "react";
 import { useNavigate, useSearchParams } from "react-router-dom";
 import { AdvancedSideBar } from "../../components/ui/side-bar/AdvancedSideBar";
 import { ProductResultModel } from "../../datas/response-models/ProductResultModel";
 import { ProductApiService } from "../../services/api-service/ProductApiService";
-import { DefaultTextConst } from "../../utils/consts/DefaultTextConst";
 import {
   NavigationConsts,
   QueryParameterConsts,
@@ -27,7 +24,7 @@ export default function ProductPage() {
   const [searchParams, setSearchParams] = useSearchParams();
   const [pageLoading, setPageLoading] = useState(true);
   const [isSaveButtonLoading, setSaveButtonLoading] = useState(false);
-  const [alertText, setAlertText] = useState<null | string>(null);
+  const [alertText, setAlertText] = useState<undefined | string>(undefined);
   const [alertColor, setAlertColor] = useState<AlertColor>("error");
   const [product, setProduct] = useState<ProductResultModel>(
     new ProductResultModel()
@@ -115,49 +112,21 @@ export default function ProductPage() {
       [event.target.name]: event.target.value,
     });
   }
-
+  debugger
   return (
-    <AdvancedSideBar isLoading={pageLoading}>
-      <>
+    <AdvancedSideBar isLoading={pageLoading} alertColor={alertColor} alertText={alertText} alertCloseHandler={() => setAlertText(undefined)}>
         <PageContent
           productModel={product}
           handleChange={handleProductChange}
           isAddingPage={isAddingPage()}
           saveButtonHandle={productSaveHandle}
           isSaveButtonLoading={isSaveButtonLoading}
         />
-        <AlertSnackBar
-          alertText={alertText}
-          closeHandle={() => setAlertText(null)}
-          severity={alertColor}
-        />
-      </>
     </AdvancedSideBar>
   );
 }
 
-function AlertSnackBar(props: {
-  alertText: string | null;
-  closeHandle: Function;
-  severity?: AlertColor;
-  autoHideDuration?: number;
-}) {
-  return (
-    <Snackbar
-      open={props.alertText != null}
-      autoHideDuration={props.autoHideDuration ?? 4000}
-      onClose={(e) => props.closeHandle()}
-      anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
-    >
-      <Alert
-        severity={props.severity ?? "error"}
-        sx={{ width: "100%", whiteSpace: "pre-line" }}
-      >
-        {props.alertText}
-      </Alert>
-    </Snackbar>
-  );
-}
+
 
 function PageContent(props: {
   productModel: ProductResultModel;