React toast for notification added

package.json

@@ -57,6 +57,7 @@
     "react-select": "^5.7.0",
     "react-social-login-buttons": "^3.4.0",
     "react-syntax-highlighter": "^15.4.3",
+    "react-toastify": "^9.1.3",
     "redux": "^4.0.5",
     "redux-auth-wrapper": "^3.0.0",
     "redux-firestore": "^0.15.0",

src/components/Tutorials/subComps/EditControls.jsx

@@ -22,6 +22,7 @@ import { useDispatch } from "react-redux";
 import RemoveStepModal from "./RemoveStepModal";
 import ColorPickerModal from "./ColorPickerModal";
 import { Box, Stack } from "@mui/system";
+import { toast} from 'react-toastify';
 
 const EditControls = ({
   isPublished,
@@ -104,15 +105,24 @@ const EditControls = ({
     );
   };
 
-  const handlePublishTutorial = async () => {
-    setPublishLoad(true);
-    await publishUnpublishTutorial(owner, tutorial_id, isPublished)(
-      firebase,
-      firestore,
-      dispatch
-    );
-    setPublishLoad(false);
-  };
+const handlePublishTutorial = async () => {
+  setPublishLoad(true);
+    try {
+      await publishUnpublishTutorial(owner, tutorial_id, isPublished)(
+        firebase,
+        firestore,
+        dispatch
+      );
+      if(!isPublished)
+        toast.success('🚀 Tutorial published successfully!')
+      else
+        toast.success('Tutorial unpublished!')
+    } catch (error) {
+        toast.error('An error occurred!');
+    } finally {
+      setPublishLoad(false);
+    }
+};
 
   return (
     <>

src/components/ui-helpers/ToastContainer.jsx

@@ -0,0 +1,4 @@
+import { ToastContainer} from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+
+export default ToastContainer;

src/routes.jsx

@@ -27,6 +27,7 @@ import MainNavbar from "./components/NavBar/new/MainNavbar";
 import UserDashboard from "./components/UserDashboard";
 import TutorialPage from "./components/TutorialPage";
 import Notification from "./components/Notification";
+import ToastContainer from "./components/ui-helpers/ToastContainer";
 
 const AuthIsLoaded = ({ children }) => {
   const profile = useSelector(({ firebase: { profile } }) => profile);
@@ -88,6 +89,7 @@ const Routes = () => {
     <Router>
       <AuthIsLoaded>
         <CodeLabzAppBar />
+        <ToastContainer/>
         {/* <Navbar /> */}
          <Switch>
           <Route exact path={"/"} component={HomePage} />