From d17e49612716430002dfe9013d10554bdaeda00b Mon Sep 17 00:00:00 2001
From: Ananyamadhu08 <78725970+Ananyamadhu08@users.noreply.github.com>
Date: Sat, 30 Jul 2022 16:42:53 +0700
Subject: [PATCH] [FEAT]: created useToast component

---
 package-lock.json     | 36 +++++++++++++++++++++++++++++++++++-
 package.json          |  3 ++-
 src/App.jsx           | 20 +++++++++++++++++---
 src/hooks/useToast.js | 22 ++++++++++++++++++++++
 4 files changed, 76 insertions(+), 5 deletions(-)
 create mode 100644 src/hooks/useToast.js

diff --git a/package-lock.json b/package-lock.json
index 06a380b..11c1efa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,8 @@
         "react-circular-progressbar": "^2.0.4",
         "react-dom": "^18.1.0",
         "react-moment": "^1.1.2",
-        "react-router-dom": "^6.3.0"
+        "react-router-dom": "^6.3.0",
+        "react-toastify": "^9.0.1"
       },
       "devDependencies": {
         "@babel/core": "^7.18.0",
@@ -2934,6 +2935,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -6135,6 +6144,18 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-toastify": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-9.0.1.tgz",
+      "integrity": "sha512-c2zeZHkCX+WXuItS/JRqQ/8CH8Qm/je+M0rt09xe9fnu5YPJigtNOdD8zX4fwLA093V2am3abkGfOowwpkrwOQ==",
+      "dependencies": {
+        "clsx": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
     "node_modules/readable-stream": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
@@ -9759,6 +9780,11 @@
         "shallow-clone": "^3.0.0"
       }
     },
+    "clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg=="
+    },
     "color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -12141,6 +12167,14 @@
         "react-router": "6.3.0"
       }
     },
+    "react-toastify": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-9.0.1.tgz",
+      "integrity": "sha512-c2zeZHkCX+WXuItS/JRqQ/8CH8Qm/je+M0rt09xe9fnu5YPJigtNOdD8zX4fwLA093V2am3abkGfOowwpkrwOQ==",
+      "requires": {
+        "clsx": "^1.1.1"
+      }
+    },
     "readable-stream": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
diff --git a/package.json b/package.json
index d546a1b..82414d8 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "react-circular-progressbar": "^2.0.4",
     "react-dom": "^18.1.0",
     "react-moment": "^1.1.2",
-    "react-router-dom": "^6.3.0"
+    "react-router-dom": "^6.3.0",
+    "react-toastify": "^9.0.1"
   }
 }
diff --git a/src/App.jsx b/src/App.jsx
index 429d28b..16afac8 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,17 +1,31 @@
 import React from "react";
 import { Footer, Header } from "./components";
-import { useTheme } from "./context";
+import { useAuth, useTheme } from "./context";
+import { ToastContainer } from "react-toastify";
 
 import { WebsiteRoutes } from "./routes";
 
 const App = () => {
   const { theme } = useTheme();
+  const { authenticated } = useAuth();
 
   return (
     <div className={`${theme === "light" ? "bg-orange-200" : "bg-slate-900"}`}>
-      <Header />
+      <ToastContainer
+        theme={theme === "light" ? "light" : "dark"}
+        position="bottom-left"
+        autoClose={2000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick
+        rtl={false}
+        draggable
+        pauseOnHover
+      />
+
+      {authenticated && <Header />}
       <WebsiteRoutes />
-      <Footer />
+      {authenticated && <Footer />}
     </div>
   );
 };
diff --git a/src/hooks/useToast.js b/src/hooks/useToast.js
new file mode 100644
index 0000000..5c52853
--- /dev/null
+++ b/src/hooks/useToast.js
@@ -0,0 +1,22 @@
+import { toast } from "react-toastify";
+
+const useToast = () => {
+  const showToast = (toastText, toastTheme) => {
+    const notify = () => {
+      toast[toastTheme](toastText, {
+        position: "top-right",
+        autoClose: 3000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+      });
+    };
+    notify();
+  };
+
+  return { showToast };
+};
+
+export { useToast };