From 0cccaf25f11fc0f5809f2a23f7cffcadeca6fe76 Mon Sep 17 00:00:00 2001
From: Keannu Bernasol <noehbernasol0@gmail.com>
Date: Mon, 13 Nov 2023 22:46:14 +0800
Subject: [PATCH] Added toast notifications

---
 package-lock.json                     | 23 ++++++++++++++++++++++-
 package.json                          |  3 ++-
 src/App.tsx                           | 13 +++++++++++--
 src/Components/Buttons/Button.tsx     |  4 ++--
 src/Pages/LandingPage/LandingPage.tsx | 18 +++++++++++++++---
 5 files changed, 52 insertions(+), 9 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8b20b51..2681584 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,8 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-redux": "^8.1.3",
-        "react-router-dom": "^6.18.0"
+        "react-router-dom": "^6.18.0",
+        "react-toastify": "^9.1.3"
       },
       "devDependencies": {
         "@types/react": "^18.2.15",
@@ -1496,6 +1497,14 @@
         "node": ">=4"
       }
     },
+    "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",
@@ -2732,6 +2741,18 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-toastify": {
+      "version": "9.1.3",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-9.1.3.tgz",
+      "integrity": "sha512-fPfb8ghtn/XMxw3LkxQBk3IyagNpF/LIKjOBflbexr2AWxAH1MJgvnESwEwBn9liLFXgTKWgBSdZpw9m4OTHTg==",
+      "dependencies": {
+        "clsx": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
     "node_modules/redux": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
diff --git a/package.json b/package.json
index 46cfb72..1074f9b 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.1.3",
-    "react-router-dom": "^6.18.0"
+    "react-router-dom": "^6.18.0",
+    "react-toastify": "^9.1.3"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",
diff --git a/src/App.tsx b/src/App.tsx
index 0626e10..69770e8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,9 +4,9 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { Provider } from "react-redux";
 import "./App.css";
 import store from "./Components/Plugins/Redux/Store/Store";
-
 const queryClient = new QueryClient();
-
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 const router = createHashRouter([
   {
     path: "/",
@@ -21,6 +21,15 @@ export default function App() {
       <QueryClientProvider client={queryClient}>
         <RouterProvider router={router} />
       </QueryClientProvider>
+      <ToastContainer
+        autoClose={1500}
+        position="bottom-center"
+        closeOnClick
+        pauseOnHover
+        draggable
+        theme={"light"}
+        limit={3}
+      />
     </Provider>
   );
 }
diff --git a/src/Components/Buttons/Button.tsx b/src/Components/Buttons/Button.tsx
index 2ab15c5..1320062 100644
--- a/src/Components/Buttons/Button.tsx
+++ b/src/Components/Buttons/Button.tsx
@@ -13,10 +13,10 @@ export default function Button(props: props) {
   return (
     <div>
       <button
+        onClick={props.onClick}
         onMouseDown={() => {
           if (!clicked) {
-            props.onClick;
-            setClicked(true);
+            setClicked(!clicked);
           }
         }}
         onMouseUp={() => setClicked(false)}
diff --git a/src/Pages/LandingPage/LandingPage.tsx b/src/Pages/LandingPage/LandingPage.tsx
index 3aca3b6..4830129 100644
--- a/src/Pages/LandingPage/LandingPage.tsx
+++ b/src/Pages/LandingPage/LandingPage.tsx
@@ -1,6 +1,7 @@
 import Button from "../../Components/Buttons/Button";
 import styles from "../../Components/styles";
 import citc_logo from "../../assets/citc_logo.jpg";
+import { toast } from "react-toastify";
 export default function LandingPage() {
   return (
     <div style={styles.background}>
@@ -45,13 +46,24 @@ export default function LandingPage() {
               TRACKER
             </p>
             <div style={{ ...styles.flex_column }}>
-              <Button type={"light"} label={"Login"} onClick={() => {}} />
-              <Button type={"dark"} label={"Register"} onClick={() => {}} />
+              <Button
+                type={"light"}
+                label={"Login"}
+                onClick={() => {
+                  toast("Successfully logged in!");
+                }}
+              />
+              <Button
+                type={"dark"}
+                label={"Register"}
+                onClick={() => {
+                  toast("Redirecting!");
+                }}
+              />
             </div>
           </div>
         </div>
       </div>
-      <p>heh</p>
     </div>
   );
 }