From 1d19c2b75b9c520d2d06feee1a1b79befc617349 Mon Sep 17 00:00:00 2001
From: Sandeep Bhagat <sandeepbh0502@gmail.com>
Date: Mon, 16 Oct 2023 03:35:28 +0530
Subject: [PATCH] React toast for notification added

---
 package.json                                  |  1 +
 .../Tutorials/subComps/EditControls.jsx       | 28 +++++++++++++------
 src/components/ui-helpers/ToastContainer.jsx  |  4 +++
 src/routes.jsx                                |  2 ++
 4 files changed, 26 insertions(+), 9 deletions(-)
 create mode 100644 src/components/ui-helpers/ToastContainer.jsx

diff --git a/package.json b/package.json
index f0068d9a..36f1cc31 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/Tutorials/subComps/EditControls.jsx b/src/components/Tutorials/subComps/EditControls.jsx
index 7ba446a6..a6d82b12 100644
--- a/src/components/Tutorials/subComps/EditControls.jsx
+++ b/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 (
     <>
diff --git a/src/components/ui-helpers/ToastContainer.jsx b/src/components/ui-helpers/ToastContainer.jsx
new file mode 100644
index 00000000..afe4c557
--- /dev/null
+++ b/src/components/ui-helpers/ToastContainer.jsx
@@ -0,0 +1,4 @@
+import { ToastContainer} from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+
+export default ToastContainer;
\ No newline at end of file
diff --git a/src/routes.jsx b/src/routes.jsx
index b94f3c37..bf07dca1 100644
--- a/src/routes.jsx
+++ b/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} />