From 1ae67ef3a4bba746a78d783d085c43ec88210b30 Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Fri, 7 Jul 2023 09:51:54 +0100
Subject: [PATCH] changed login type tab and made login route to home page
 without loading again once user logs in

---
 src/components/AuthPages/Login/index.jsx | 12 ++++++------
 src/index.css                            |  4 ++++
 src/middleware/AuthRoute.jsx             | 15 +++++++--------
 3 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/components/AuthPages/Login/index.jsx b/src/components/AuthPages/Login/index.jsx
index 232575c..884e12f 100644
--- a/src/components/AuthPages/Login/index.jsx
+++ b/src/components/AuthPages/Login/index.jsx
@@ -108,7 +108,7 @@ export default function Login() {
         localStorage.setItem("uid", `${res.data.uid}`);
         localStorage.setItem("session_token", `${res.data.session}`);
         // localStorage.setItem("session", `${res.data.session}`);
-        dispatch(updateUserDetails(res.data));
+        dispatch(updateUserDetails({...res.data, loggedIn:true}));
         setTimeout(() => {
           navigate("/", { replace: true });
           setLoginLoading(false);
@@ -207,11 +207,11 @@ export default function Login() {
               </div>
 
               {/* switch login component */}
-              <div className="flex justify-start items-end">
+              <div className="flex justify-start items-center gap-3">
                 <button
                   name="full"
-                  className={`px-2 py-1 w-[100px] text-left h-[40px] text-lg font-bold text-[#4687ba] hover:text-[#009ef7] tracking-wide transition outline-none border-2 border-b-0 border-r-0 border-[#4687ba] ${
-                    loginType=='full' && "border-r-2 h-[45px]"
+                  className={`login-type-btn px-4 py-1 rounded-t-[3px] transition duration-200 ${
+                    loginType=='full' ? "bg-white text-[#000] border-t-[3px] border-[#4687ba]" : "bg-[#4687ba] text-white"
                   }`}
                   onClick={handleLoginType}
                 >
@@ -219,8 +219,8 @@ export default function Login() {
                 </button>
                 <button
                   name="family"
-                  className={`px-2 py-1 w-[100px] text-left h-[40px] text-lg font-bold text-[#4687ba] hover:text-[#009ef7] tracking-wide transition outline-none border-2 border-b-0 border-l-0 border-[#4687ba] ${
-                    loginType=='family' && "border-l-2 h-[45px]"
+                  className={`login-type-btn px-4 py-1 rounded-t-[3px] transition duration-200 ${
+                    loginType=='family' ? "bg-white text-[#000] border-t-[3px] border-[#4687ba]" : "bg-[#4687ba] text-white"
                   }`}
                   onClick={handleLoginType}
                 >
diff --git a/src/index.css b/src/index.css
index 9ddfa0b..cba53b6 100644
--- a/src/index.css
+++ b/src/index.css
@@ -937,4 +937,8 @@ TODO: Responsive ===========================
 /* TO REMOVE SLIDER COMPONENT FROM CENTRALIZED */
 .slider-left .slick-slider .slick-track{
   margin: 0;
+}
+
+.login-type-btn{
+  box-shadow: 0 0 0.8rem #00000080;
 }
\ No newline at end of file
diff --git a/src/middleware/AuthRoute.jsx b/src/middleware/AuthRoute.jsx
index 8329273..8caf022 100644
--- a/src/middleware/AuthRoute.jsx
+++ b/src/middleware/AuthRoute.jsx
@@ -18,6 +18,8 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
 
   const { jobListTable } = useSelector((state) => state.tableReload);
 
+  const { userDetails:{loggedIn} } = useSelector((state) => state?.userDetails); // CHECKS IF LOGGEDIN IS TRUE
+
   useEffect(() => {
     //Removing Data stored at localStorage after session expires
     const expireSession = () => {
@@ -68,7 +70,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
   }, [resetTime]);
 
   useEffect(() => {
-    if (!isLogin.status) {
+    if (!loggedIn) {
       const loadProfile = () => {
         // function to load user profile
         setIsLogin({ loading: true, status: false });
@@ -80,7 +82,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
               return;
             }
             setLoadProfileDetails(res.data);
-            dispatch(updateUserDetails(res.data));
+            dispatch(updateUserDetails({...res.data, loggedIn:true}));
             setIsLogin({ loading: false, status: true });
           })
           .catch((error) => {
@@ -134,13 +136,10 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
     });
   },[])
 
-  return isLogin.loading ? (
+  return isLogin.loading && !loggedIn ? (
     <LoadingSpinner size="32" color="sky-blue" height="h-screen" />
-  ) : // Stills needs fixing
-  // <div className="h-screen m-auto">
-  //   <img src={WrenchBoard} alt="wrenchboard" className="h-10" />
-  // </div>
-  !isLogin.status ? (
+  ) : 
+  !isLogin.status && !loggedIn ? (
     <Navigate to={redirectPath} replace />
   ) : (
     children || <Outlet />