Merge pull request #34 from atlp-rwanda/fix-nav-side-icons

Finishes fixing homepage sign in links
atlp-rwanda · Jul 11, 2024 · 0ba8442 · 0ba8442
2 parents 6befa21 + 417625a
commit 0ba8442
Show file tree

Hide file tree

Showing 11 changed files with 340 additions and 61 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -5,6 +5,7 @@ import { RouterProvider, createBrowserRouter } from 'react-router-dom';
 import Login from './pages/Login';
 import LandingPage from './pages/LandingPage';
 import GoogleAuthSuccess from './components/authentication/GoogleAuthSucces';
+import EditUserProfile from './pages/EditUserProfile';
 import { ToastContainer } from 'react-toastify';
 import Searchpage from './containers/searchResults/SearchPage';
 import { useDispatch } from 'react-redux';
@@ -68,6 +69,10 @@ const App = () => {
           path: 'auth/success/:token',
           element: <GoogleAuthSuccess />,
         },
+        {
+          path: 'profile',
+          element: <EditUserProfile />,
+        },
         {
           path: 'categories/:categoryId',
           element: <CategoriesPage />,

diff --git a/src/components/common/Input.tsx b/src/components/common/Input.tsx
@@ -21,7 +21,12 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           type={type}
           id={id}
           placeholder={placeholder}
-          className={cn('p-1 px-3 rounded-lg border border-blackColor outline-none font-normal', inputClasname)}
+          className={cn(
+            'p-1 px-3 rounded-lg border border-blackColor outline-none font-normal',
+
+            'p-1 px-3 rounded-lg border border-blackColor outline-none font-normal disabled:cursor-not-allowed disabled:opacity-50 focus:ring-grayColor/40 disabled:border-grayColor',
+            inputClasname
+          )}
           ref={ref}
           {...rest}
         />

diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx
@@ -3,9 +3,12 @@ import { useNavigate } from 'react-router-dom';
 import { DesktopNav, PopularCategory } from '../../containers/nav/NavbarComponents';
 import WishNav from './wishNav/WishNav';
 import CartNav from './cartNav/CartNav';
-import { LuBell } from 'react-icons/lu';
+import { LuBell, LuUser } from 'react-icons/lu';
 import Notifications from './notifications/Notifications';
 import { cn } from '../../utils';
+import { useGetUserByIdQuery } from '../../services/userApi';
+import { useSelector } from 'react-redux';
+import { RootState } from '../../redux/store';
 
 const Navbar: React.FC = () => {
   const [notificationOpen, setNotificationOpen] = useState<boolean>(false);
@@ -49,7 +52,6 @@ const Navbar: React.FC = () => {
       showScrollbar();
     });
   }, []);
-
   useEffect(() => {
     const updateNavbarHeight = () => {
       setNavbarHeight(navbarRef.current?.offsetHeight as number);
@@ -66,7 +68,32 @@ const Navbar: React.FC = () => {
     e.preventDefault();
     navigate(`/search?searchQuery=${searchQuery}`);
   };
-
+  //HANDLE OPERATION OF ROUTING THE USER TO THE ACCOUNT OR SIGN IN
+  const [userInfo, setUserInfo] = useState<string[]>([]);
+  const user = useSelector((state: RootState) => state.user);
+  const userId = user.userId ? user.userId.replace(/"/g, '') : '';
+  const {
+    isLoading: isFetchingUser,
+    isSuccess: isUserFetched,
+    data: userData,
+  } = useGetUserByIdQuery(userId);
+  const handleNavigate = () => {
+    const token = localStorage.getItem('token') || null;
+    if (!token) {
+      navigate('/login');
+      return;
+    } else {
+      setWish(state => !state);
+    }
+  };
+  useEffect(() => {
+    if (isUserFetched && userData && userData.message) {
+      const { firstName, lastName } = userData.message;
+      setUserInfo([firstName, lastName]);
+      return;
+    }
+    setUserInfo(['Anynmous', 'Anoonymous']);
+  }, [isUserFetched]);
   return (
     <>
       {(wish || cartOpen || notificationOpen) && (
@@ -121,23 +148,12 @@ const Navbar: React.FC = () => {
           </div>
           <div className='flex items-center gap-2 order-2 md:order-3'>
             <div
-              onClick={() => setWish(state => !state)}
+              // onClick={() => setWish(state => !state)}
+              onClick={handleNavigate}
               className='rounded-full transition-all ease-in-out delay-100 hover:bg-grayColor active:bg-greenColor p-1 active:text-blackColor hover:text-blackColor'
             >
-              <svg
-                xmlns='http://www.w3.org/2000/svg'
-                fill='none'
-                viewBox='0 0 24 24'
-                strokeWidth={1}
-                stroke='currentColor'
-                className='size-6 md:size-8'
-              >
-                <path
-                  strokeLinecap='round'
-                  strokeLinejoin='round'
-                  d='M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z'
-                />
-              </svg>
+
+              <LuUser stroke='currentColor' className='size-6 md:size-8' strokeWidth={1} />
               {wish && (
                 <div
                   onClick={e => {
@@ -148,31 +164,18 @@ const Navbar: React.FC = () => {
                   }}
                   className='absolute top-0 md:h-[115px] w-screen right-0 h-[100px] bg-[#0000000] z-40'
                 >
-                  <WishNav setWish={setWish} />
+                  <WishNav setWish={setWish} isLoading={isFetchingUser} userInfo={userInfo} />
                 </div>
               )}
             </div>
-            {/* Favorite */}
+
             <a
               className='rounded-full transition-all ease-in-out delay-100 hover:bg-grayColor active:bg-greenColor p-1  active:text-blackColor hover:text-blackColor relative'
               onClick={() => setNotificationOpen(!notificationOpen)}
             >
-              {/* <svg
-                xmlns='http://www.w3.org/2000/svg'
-                fill='none'
-                viewBox='0 0 24 24'
-                strokeWidth={1}
-                stroke='currentColor'
-                className='size-6 md:size-8'
-              >
-                <path
-                  strokeLinecap='round'
-                  strokeLinejoin='round'
-                  d='M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z'
-                />
-              </svg> */}
+
               <LuBell strokeWidth={1} stroke='currentColor' className='size-6 md:size-8' />
-              <span className='absolute top-1 right-1 w-2 h-2 rounded-full bg-redColor'></span>
+              {/* <span className='absolute top-1 right-1 w-2 h-2 rounded-full bg-redColor'></span> */}
             </a>
             <div
               onClick={() => SetCartOpen(state => !state)}

diff --git a/src/components/navbar/notifications/Notifications.tsx b/src/components/navbar/notifications/Notifications.tsx
@@ -12,8 +12,8 @@ import { useEffect, useRef, useState } from 'react';
 import { FaSpinner } from 'react-icons/fa6';
 
 export const Notifications = () => {
-  const userId = useSelector((state: any) => state.userId) || localStorage.getItem('userId');
-  // const userId = '06e0d866-2544-4cfa-83b0-2c3cede7a2f0';
+  const user = useSelector((state: any) => state.user);
+  const userId = user.userId ? user.userId.replace(/"/g, '') : '';
   const [mainMenuClicked, setMainMenuClicked] = useState(false);
 
   const mainMenuRef = useRef<HTMLDivElement>(null);

diff --git a/src/components/navbar/wishNav/WishNav.tsx b/src/components/navbar/wishNav/WishNav.tsx
@@ -1,27 +1,54 @@
-import React from 'react'
-import { Link } from 'react-router-dom';
-
+import React from 'react';
+import { BiLoader } from 'react-icons/bi';
+import { LuUser } from 'react-icons/lu';
+import { useDispatch } from 'react-redux';
+import { Link, useNavigate } from 'react-router-dom';
+import { clearUserData } from '../../../redux/slices/userSlice';
 interface WishNav {
-    setWish: React.Dispatch<React.SetStateAction<boolean>>
+  setWish: React.Dispatch<React.SetStateAction<boolean>>;
+  isLoading: boolean;
+  userInfo: string[];
 }
 
-const WishNav: React.FC<WishNav> = () => {
-    return (
-        <>
-            <div className='absolute w-[280px] right-20 md:right-24 top-12 md:top-14 mt-2 bg-whiteColor text-blackColor rounded-md border border-grayColor shadow-customShadow p-3 px-4 flex flex-col gap-3 z-50'>
-                <div className='flex justify-center items-center gap-1'>
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1} stroke="currentColor" className="size-6 md:size-8">
-                        <path strokeLinecap="round" strokeLinejoin="round" d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
-                    </svg>
-                    <Link to="/" className='hover:underline font-light text-base'>My Account</Link>
-                </div>
-                <div className='flex flex-col justify-center items-center gap-2 font-light'>
-                    <span>Not Ange?</span>
-                    <button className='rounded-full py-1 px-2 font-normal text-center select-none border border-greenColor cursor-pointer w-full'>Sign Out</button>
-                </div>
+const WishNav: React.FC<WishNav> = ({ isLoading, userInfo }) => {
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+  const [firstName, lastName] = userInfo;
+  const handleSignOut = () => {
+    dispatch(clearUserData());
+    navigate('/');
+  };
+  return (
+    <>
+      <div className='absolute w-[280px] right-20 md:right-24 top-12 md:top-14 mt-2 bg-whiteColor text-blackColor rounded-md border border-grayColor shadow-customShadow p-3 px-4 flex flex-col gap-3 z-50'>
+        {isLoading ? (
+          <div className='min-h-20 flex flex-col items-center justify-center'>
+            <BiLoader className='animate-spin w-full h-full max-h-12' />
+          </div>
+        ) : (
+          <>
+            <div className='flex flex-col justify-center items-center gap-1'>
+              <p className='text-xl font-medium '>{firstName + ' ' + lastName}</p>
+              <div className='flex items-center gap-3 mt-5 mb-2'>
+                <LuUser className='size-6 md:size-8' strokeWidth={1} stroke='currentColor' />{' '}
+                <Link to='/' className='hover:underline font-light text-base'>
+                  Account Settings
+                </Link>
+              </div>
             </div>
-        </>
-    )
-}
+            <div className='flex flex-col justify-center items-center gap-2 font-light'>
+              <button
+                className='rounded-full text-blackColor py-1 px-2 font-normal text-center select-none border border-greenColor cursor-pointer w-full transition-all hover:bg-greenColor hover:text-whiteColor'
+                onClick={handleSignOut}
+              >
+                Sign Out
+              </button>
+            </div>
+          </>
+        )}
+      </div>
+    </>
+  );
+};
 
-export default WishNav
+export default WishNav;