[ Fix : Snackbar Component Placement, Uses and State Management ]

src/components/Tutorials/subComps/ControlButtons.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, {useState} from "react";
 import Button from "@mui/material/Button";
 import Snackbar from "@mui/material/Snackbar";
 import Grid from "@mui/material/Grid";
@@ -39,6 +39,10 @@ const ControlButtons = ({
   setStepData
 }) => {
   const classes = useStyles();
+  const [snackbarOpen, setSnackbarOpen] = useState(false);
+  const handleSnackbarClose = () => {
+    setSnackbarOpen(false);
+  }
   if (!hide && stepsData) {
     return (
       <Grid>
@@ -73,15 +77,9 @@ const ControlButtons = ({
             <Button
               type="primary"
               onClick={() => {
-                <Snackbar
-                  anchorOrigin={{
-                    vertical: "bottom",
-                    horizontal: "left"
-                  }}
-                  open={true}
-                  autoHideDuration={6000}
-                  message="tutorial complete"
-                />;
+                if(!stepsData[currentStep].completed) {
+                  setSnackbarOpen(true);
+                }
                 window.scrollTo(0, 0);
                 setStepData(prevSteps =>
                   prevSteps.map((step, index) =>
@@ -99,6 +97,16 @@ const ControlButtons = ({
             </Button>
           </Box>
         </Box>
+        <Snackbar
+          anchorOrigin={{
+            vertical: "bottom",
+            horizontal: "left"
+          }}
+          open={snackbarOpen}
+          autoHideDuration={6000}
+          onClose={handleSnackbarClose}
+          message="Tutorial Step complete"
+        />
       </Grid>
     );
   } else return null;

src/components/Tutorials/subComps/ImageDrawer.jsx

@@ -50,54 +50,42 @@ const ImageDrawer = ({ onClose, visible, owner, tutorial_id, imageURLs }) => {
     }) => deleting_error
   );
 
+  const [uploadSnackbarOpen, setUploadSnackbarOpen] = React.useState(false);
+  const [uploadErrorSnackbarOpen, setUploadErrorSnackbarOpen] = React.useState(false);
+  const [deleteSnackbarOpen, setDeleteSnackbarOpen] = React.useState(false);
+  const [deleteErrorSnackbarOpen, setDeleteErrorSnackbarOpen] = React.useState(false);
+
   useEffect(() => {
     if (uploading === false && uploading_error === false) {
-      <Snackbar
-        anchorOrigin={{
-          vertical: "bottom",
-          horizontal: "left"
-        }}
-        open={true}
-        autoHideDuration={6000}
-        message="Image Uploaded successfully...."
-      />;
+      setUploadSnackbarOpen(true);
     } else if (uploading === false && uploading_error) {
-      <Snackbar
-        anchorOrigin={{
-          vertical: "bottom",
-          horizontal: "left"
-        }}
-        open={true}
-        autoHideDuration={6000}
-        message={uploading_error}
-      />;
+      setUploadErrorSnackbarOpen(true);
     }
   }, [uploading, uploading_error]);
 
   useEffect(() => {
     if (deleting === false && deleting_error === false) {
-      <Snackbar
-        anchorOrigin={{
-          vertical: "bottom",
-          horizontal: "left"
-        }}
-        open={true}
-        autoHideDuration={6000}
-        message="Deleted Succefully...."
-      />;
+      setDeleteSnackbarOpen(true);
     } else if (deleting === false && deleting_error) {
-      <Snackbar
-        anchorOrigin={{
-          vertical: "bottom",
-          horizontal: "left"
-        }}
-        open={true}
-        autoHideDuration={6000}
-        message={deleting_error}
-      />;
+      setDeleteErrorSnackbarOpen(true);
     }
   }, [deleting, deleting_error]);
 
+  const handleSnackbarClose = () => {
+    switch(type){
+      case 'upload':
+        setUploadSnackbarOpen(false);
+        setUploadErrorSnackbarOpen(false);
+        break;
+      case 'delete':
+        setDeleteSnackbarOpen(false);
+        setDeleteErrorSnackbarOpen(false);
+        break;
+      default:
+        break;
+    }
+  }
+
   useEffect(() => {
     clearTutorialImagesReducer()(dispatch);
     return () => {
@@ -127,6 +115,7 @@ const ImageDrawer = ({ onClose, visible, owner, tutorial_id, imageURLs }) => {
     )(firebase, firestore, dispatch);
 
   return (
+  <>
     <Drawer
       title="Images"
       data-testid="imageDrawer"
@@ -206,6 +195,36 @@ const ImageDrawer = ({ onClose, visible, owner, tutorial_id, imageURLs }) => {
           ))}
       </div>
     </Drawer>
+    <Snackbar
+    anchorOrigin={{
+      vertical: "bottom",
+      horizontal: "left"
+    }}
+    open={uploadErrorSnackbarOpen}
+    autoHideDuration={6000}
+    onClose={() => handleSnackbarClose("upload")}
+    message={uploading_error}
+    />
+    <Snackbar
+      anchorOrigin={{
+        vertical: "bottom",
+        horizontal: "left"
+      }}
+      open={deleteSnackbarOpen}
+      autoHideDuration={6000}
+      onClose={() => handleSnackbarClose("delete")}
+      message="Deleted Successfully...."
+    />
+    <Snackbar
+      anchorOrigin={{
+        vertical: "bottom",
+        horizontal: "left"
+      }}
+      open={deleteErrorSnackbarOpen}
+      autoHideDuration={6000}
+      onClose={() => handleSnackbarClose("delete")}
+      message={deleting_error}
+    /></>
   );
 };
 

src/components/Tutorials/subComps/RemoveStepModal.jsx

@@ -19,21 +19,16 @@ const RemoveStepModal = ({
   const firestore = useFirestore();
   const dispatch = useDispatch();
   const [visible, setVisible] = useState(false);
+  const [snackbarOpen, setSnackbarOpen] = useState(false);
+  const [snackbarMessage, setSnackbarMessage] = useState("");
 
   useEffect(() => {
     setVisible(viewModal);
   }, [viewModal]);
 
   const handleOnOk = event => {
-    <Snackbar
-      anchorOrigin={{
-        vertical: "bottom",
-        horizontal: "left"
-      }}
-      open={true}
-      autoHideDuration={6000}
-      message="Updating...."
-    />;
+    setSnackbarOpen(true);
+    setSnackbarMessage("Updating...");
     if (step_length > 1) {
       event.preventDefault();
       removeStep(
@@ -43,21 +38,18 @@ const RemoveStepModal = ({
         currentStep
       )(firebase, firestore, dispatch).then(() => {
         setVisible(false);
-        <Snackbar
-          anchorOrigin={{
-            vertical: "bottom",
-            horizontal: "left"
-          }}
-          open={true}
-          autoHideDuration={6000}
-          message="removed...."
-        />;
+        setSnackbarOpen(true)
+        setSnackbarMessage("Removed...");
       });
     }
   };
   const handleOnCancel = () => setVisible(false);
-
+  const handleSnackbarClose = () =>{
+     setSnackbarOpen(false);
+     setSnackbarMessage("");
+  }
   return (
+    <>
     <Modal
       open={visible}
       onClose={handleOnCancel}
@@ -89,6 +81,16 @@ const RemoveStepModal = ({
         </form>
       </div>
     </Modal>
+     <Snackbar
+     anchorOrigin={{
+       vertical: "bottom",
+       horizontal: "left"
+     }}
+     open={snackbarOpen}
+     autoHideDuration={6000}
+     onClose={handleSnackbarClose}
+     message={snackbarMessage}
+   /></>
   );
 };