ft seller side info (#61)

* ft-seller-side-info * requested changes
atlp-rwanda · Aug 2, 2024 · d381b7a · d381b7a
1 parent 6beacdd
commit d381b7a
Show file tree

Hide file tree

Showing 14 changed files with 206 additions and 510 deletions.
diff --git a/src/assets/styles/SellerLayout.scss b/src/assets/styles/SellerLayout.scss
@@ -1,110 +1,129 @@
 .seller__wrapper {
     height: 100vh;
     display: flex;
-
+  
     .left__side {
-        width: 26rem;
+      width: 26rem;
+      display: flex;
+
+      .icons__side {
         display: flex;
-
-        .icons__side {
+        flex-direction: column;
+        background-color: $primary-color;
+        height: 100%;
+        width: 6.5rem;
+
+        .icons {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          height: 100%;
+          width: 100%;
+          justify-content: space-between;
+
+          .icons__upper {
+            margin-top: 10rem;
             display: flex;
             flex-direction: column;
-            background-color: $primary-color;
-            height: 100%;
-            width: 6.5rem;
-
-            .icons {
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                height: 100%;
-                width: 100%;
-                gap: 34rem;
-
-                .icons__upper {
-                    margin-top: 10rem;
-                    display: flex;
-                    flex-direction: column;
-                    gap: 3rem;
-
-                    .icon {
-                        color: $white-color;
-                        font-size: 2rem;
-                    }
-                }
-
-                .icons__bottom {
-                    height: 4rem;
-                    display: flex;
-                    align-items: center;
-
-                    .icon {
-                        color: $white-color;
-                        font-size: 3rem;
-                    }
-                }
+            gap: 3rem;
+
+            .icon {
+              color: $white-color;
+              font-size: 2rem;
             }
+          }
+
+          .icons__bottom {
+            height: 4rem;
+            display: flex;
+            align-items: center;
+            margin-bottom: 3rem;
+
+            .icon {
+              color: $white-color;
+              font-size: 3rem;
+            }
+          }
         }
-
-        .dashboard__lower__link h2 {
-            cursor: pointer;
-        }
-
-        .dashboard__items {
+      }
+
+      .dashboard__lower__link h2 {
+        cursor: pointer;
+      }
+
+      .dashboard__items {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        width: 100%;
+        margin-left: 1.5rem;
+
+        .dashboard__side {
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          width: 100%;
+          justify-content: space-between;
+
+          .dashboard__links {
             display: flex;
             flex-direction: column;
-            height: 100%;
-            width: 19.5rem;
-            margin-left: .1rem;
-
-            .dashboard__side {
-                display: flex;
-                flex-direction: column;
-                height: 100%;
-                width: 100%;
-                gap: 37.5rem;
-
-                .dashboard__links {
-                    display: flex;
-                    flex-direction: column;
-                    margin-top: 11rem;
-                    height: 5rem;
-                    gap: 3.5rem;
-
-                    .text_content {
-                        color: $text-color;
-                        font-size: 1.8rem;
-                        transition: all 0.5s ease-in-out;
-                        text-decoration: none;
-                    }
-                }
-
-                .dashboard__lower__link {
-                    height: 4rem;
-                    display: flex;
-                    align-items: center;
-
-                    .text_content {
-                        color: $text-color;
-                        font-size: 1.8rem;
-                        transition: all 0.5s ease-in-out;
-                        text-decoration: none;
-                    }
+            margin-top: 10rem;
+            width: 15rem;
+            gap: 3rem;
+
+            .text_content {
+                color: $text-color;
+                font-size: 1.8rem;
+                text-decoration: none;
+                padding: 1rem;
+                border-radius: .5rem;
+                transition: background-color 0.3s, color 0.3s; 
+                display: block; 
+
+
+                &:hover {
+                  background-color: $menu-hover;
+                  color: $white !important;
+                  width: 15rem !important ; 
                 }
             }
-
-            .active {
-                display: flex;
-                background-color: $menu-hover;
-                width: 15rem;
-                padding: 1rem 1rem;
-                transition: all 0.5s ease-in-out;
-                align-items: center;
+          }
+
+          .dashboard__lower__link {
+            height: 4rem;
+            display: flex;
+            margin-bottom: 3rem;
+
+            .text_content {
+                color: $text-color;
+                font-size: 1.9rem;
+                text-decoration: none;
+                padding: 1rem;
                 border-radius: .5rem;
-            }
+                transition: background-color 0.3s, color 0.3s;
+                display: block; 
+
+                &:hover {
+                  background-color: $menu-hover;
+                  color: $white !important;
+                  width: 15rem;
+                }
+              }
+          }
+        }
+
+        .active {
+          display: flex;
+          background-color: $menu-hover;
+          color: $white !important;
+          padding: 1rem;
+          border-radius: .5rem;
+          width: 15rem;
         }
+      }
     }
-
+  
     .main__seller__content__dashboard {
         display: flex;
         flex-direction: column;

diff --git a/src/assets/styles/SellerProduct.scss b/src/assets/styles/SellerProduct.scss
@@ -12,7 +12,6 @@
 
   max-width: 100%;
   max-height: 100%;
-
   .seller-product-header {
     display: flex;
     flex-direction: row;

diff --git a/src/components/layout/SellerHeader.tsx b/src/components/layout/SellerHeader.tsx
@@ -7,6 +7,7 @@ import { useAppSelector, useAppDispatch } from "../../store/store";
 import Notifications from './notification';
 import { fetchNotifications } from '../../store/features/notifications/notificationSlice';
 import useSocket from '../../hooks/useSocket';
+import logo from "../../../public/assets/images/logo.png";
 
 function SellerHeader() {
   const dispatch = useAppDispatch();
@@ -17,7 +18,7 @@ function SellerHeader() {
 
   useEffect(() => {
     if (isAuthenticated) {
-      dispatch(fetchNotifications());
+      dispatch(fetchNotifications());    
     }
   }, [dispatch, isAuthenticated]);
 
@@ -30,7 +31,16 @@ function SellerHeader() {
 
   return (
     <header className="seller-header">
-      <p className="header__title">Seller Dashboard</p>
+        <div className="header__logo">
+        <img
+          src={logo}
+          alt="Ecommerce logo"
+          className="header__logo__img"
+        />
+        <p className="header__logo__text">
+          e-Commerce <span>Ninjas</span>
+        </p>
+      </div>
       {isAuthenticated && (
       <div className="header__notificationss__box">
         <IoIosNotifications

diff --git a/src/hooks/useAdminAuthCheck.ts b/src/hooks/useAdminAuthCheck.ts
@@ -0,0 +1,44 @@
+/* eslint-disable */
+import { useLocation, useNavigate } from "react-router-dom";
+import { useAppSelector, useAppDispatch } from "../store/store";
+import { useEffect, useState, useCallback } from "react";
+import { toast } from "react-toastify";
+import { getUserDetails } from "../store/features/auth/authSlice";
+
+function useAdminAuthCheck() {
+    const navigate = useNavigate();
+    const dispatch = useAppDispatch();
+    const location = useLocation();
+    const { pathname } = location;
+    const { user, isAuthenticated, token } = useAppSelector((state) => state.auth);
+    const [isChecking, setIsChecking] = useState(true);
+    const [isAuthorized, setIsAuthorized] = useState(false);
+
+    const checkAuth = useCallback(async () => {
+        if (token) {
+            await dispatch(getUserDetails(token));
+        }
+        setIsChecking(false);
+    }, [dispatch, token]);
+
+    useEffect(() => {
+        checkAuth();
+    }, [checkAuth]);
+
+    useEffect(() => {
+        if (!isChecking) {
+            if (!isAuthenticated || !user || (user as any).role !== "admin") {
+                const message = !isAuthenticated ? 'You must login first' : 'You must login as an admin';
+                toast.info(message);
+                navigate(`/login?callbackUrl=${encodeURIComponent(pathname)}`);
+                setIsAuthorized(false);
+            } else {
+                setIsAuthorized(true);
+            }
+        }
+    }, [isChecking, isAuthenticated, user, navigate, pathname]);
+
+    return isAuthorized;
+}
+
+export default useAdminAuthCheck;
diff --git a/src/hooks/useSellerAuthCheck.ts b/src/hooks/useSellerAuthCheck.ts
@@ -33,7 +33,7 @@ function useSellerAuthCheck() {
             if (!isAuthenticated || !token || !user || (user as any).role !== "seller") {
                 const message = !isAuthenticated ? 'You must login first' : 'You must login as a seller';
                 // toast.info(message);
-                navigate(`/seller/login?callbackUrl=${callbackUrl}`);
+                navigate(`/login?callbackUrl=${callbackUrl}`);
                 setIsAuthorized(false);
             } else {
                 setIsAuthorized(true);

diff --git a/src/pages/UserLogin.tsx → src/pages/Login.tsx b/src/pages/UserLogin.tsx → src/pages/Login.tsx
@@ -21,7 +21,7 @@ const LoginSchema = Yup.object().shape({
   password: Yup.string().required("Password is required"),
 });
 
-function UserLogin() {
+function Login() {
   const [isClicked, setIsClicked] = useState(false);
   const [isFocused, setIsFocused] = useState(false);
   const [isVisible, setIsVisible] = useState(false);
@@ -46,11 +46,17 @@ function UserLogin() {
     onSubmit: async (values) => {
       const action = await dispatch(loginUser(values));
       if (loginUser.fulfilled.match(action)) {
-        const pendingWishlistProduct = localStorage.getItem("pendingWishlistProduct");
-        if (pendingWishlistProduct) {
-          await dispatch(addProductToWishlist(pendingWishlistProduct));
-          localStorage.removeItem("pendingWishlistProduct");
-        }
+        const token = action.payload.token; 
+          localStorage.setItem("token", token);
+          toast.success('Login successfully');
+          joinRoom(token);
+          if (action.payload.user.role === "buyer") {
+              navigate("/home");
+          } else if (action.payload.user.role === "seller") {
+              navigate("/seller/dashboard");
+          } else if (action.payload.user.role === "admin") {
+              navigate("/admin/dashboard");
+          }
       }
     }
   });
@@ -186,4 +192,4 @@ function UserLogin() {
   );
 }
 
-export default UserLogin;
+export default Login;