From 7c12c0c78a91c3e2dfe5051468b005f6e5bbe26a Mon Sep 17 00:00:00 2001
From: akshat2jain <akshat.2024it1031@kiet.edu>
Date: Sun, 21 Jan 2024 10:22:56 +0530
Subject: [PATCH] added a timer for better user exp

---
 client/src/componetnts/Notification.jsx | 36 +++++++++++++++++++++++++
 client/src/pages/Booking.jsx            | 27 +++++++++++++++++--
 2 files changed, 61 insertions(+), 2 deletions(-)
 create mode 100644 client/src/componetnts/Notification.jsx

diff --git a/client/src/componetnts/Notification.jsx b/client/src/componetnts/Notification.jsx
new file mode 100644
index 0000000..f9cfdee
--- /dev/null
+++ b/client/src/componetnts/Notification.jsx
@@ -0,0 +1,36 @@
+// Notification.js
+
+import React, { useState, useEffect } from "react";
+
+const Notification = ({ message, duration, onClose }) => {
+  const [isVisible, setIsVisible] = useState(true);
+  const [timer, setTimer] = useState(duration);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTimer((prevTimer) => {
+        if (prevTimer === 1) {
+          clearInterval(interval);
+          setIsVisible(false);
+          onClose();
+        }
+        return prevTimer - 1;
+      });
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [duration, onClose]);
+
+  return (
+    <>
+      {isVisible && (
+        <div className="fixed  font-roboto bottom-0 right-0 mb-4 mr-4 p-4 bg-black text-white rounded-md shadow-md">
+          <p>{message}</p>
+          <p className="mt-2 text-sm">{`${timer} seconds`}</p>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Notification;
diff --git a/client/src/pages/Booking.jsx b/client/src/pages/Booking.jsx
index 1cd0bc6..6883f2b 100644
--- a/client/src/pages/Booking.jsx
+++ b/client/src/pages/Booking.jsx
@@ -2,11 +2,17 @@ import React, { useState, useEffect } from "react";
 import Loading from "../componetnts/Loading";
 import bgimg2 from "../assests/2.jpg";
 import NoRideAvailable from "./NoRIdeAvailable";
-import { message } from "antd";
+// import { message } from "antd";
+import Notification from "../componetnts/Notification";
 const Booking = ({ showUi }) => {
   const [isLoading, setIsLoading] = useState(true);
   const [isHovered, setIsHovered] = useState(false);
   const [imageLoaded, setImageLoaded] = useState(false);
+  const [notification, setNotification] = useState({
+    message: "",
+    duration: 10,
+    isVisible: false,
+  });
   const containerStyle = {
     backgroundColor: "#0A192F", // Background color
   };
@@ -43,9 +49,19 @@ const Booking = ({ showUi }) => {
     }, 2000); // Adjust the delay as needed
     return () => clearTimeout(loadingTimeout);
   }, []);
+  // Notification
+  const showNotification = (message, duration = 10) => {
+    setNotification({ message, duration, isVisible: true });
 
+    const timer = setTimeout(() => {
+      setNotification({ ...notification, isVisible: false });
+    }, duration * 1000);
+
+    return () => clearTimeout(timer);
+  };
+  // google login invoke
   const googleLogin = async () => {
-    message.success("Please Wait! This may take few seconds");
+    showNotification("Please Wait! This may take a few seconds");
     window.open(`${process.env.REACT_APP_SECRETROUTE}/auth/google`, "_self");
   };
 
@@ -100,6 +116,13 @@ const Booking = ({ showUi }) => {
           )}
         </>
       )}
+      {notification.isVisible && (
+        <Notification
+          message={notification.message}
+          duration={notification.duration}
+          onClose={() => setNotification({ ...notification, isVisible: false })}
+        />
+      )}
     </>
   );
 };