Fix : extended notification component

src/App.tsx

@@ -13,7 +13,10 @@ import {
   disconnectFromSocket,
   getSocket,
 } from "./utils/socket";
-import { getUserNotifications } from "./redux/reducers/notificationSlice";
+import {
+  getUserNotifications,
+  handleCurrentUser,
+} from "./redux/reducers/notificationSlice";
 import UpdatePasswordmod from "./components/password/updateModal";
 import PasswordPopup from "./components/password/PasswordPopup";
 
@@ -39,6 +42,10 @@ const App: React.FC = () => {
     dispatch(getUserNotifications());
   }, [dispatch]);
 
+  React.useEffect(() => {
+    dispatch(handleCurrentUser());
+  }, []);
+
   const { isPasswordExpired } = useAppSelector((state) => state.updatePin);
 
   return (

src/components/cards/Notification.tsx

@@ -17,7 +17,16 @@ export const NotificationPopup: React.FC<INotificationPop> = ({
   handleClose,
   open,
 }) => {
-  const { notifications } = useAppSelector((state) => state.notifications);
+  const { notifications, currentUser } = useAppSelector(
+    (state) => state.notifications,
+  );
+
+  const recentNotifications = [...notifications]
+    .sort(
+      (a, b) =>
+        new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
+    )
+    .slice(0, 5);
 
   return (
     <Menu
@@ -65,18 +74,22 @@ export const NotificationPopup: React.FC<INotificationPop> = ({
       }}
     >
       {notifications.length > 0 ? (
-        notifications.slice(0, 5).map((notification, index) => (
+        recentNotifications.map((notification, index) => (
           <>
             <Link
-              to={`/dashboard/notifications/${notification.id}`}
+              to={
+                currentUser && currentUser.roleId === 2
+                  ? `/dashboard/notifications/${notification.id}`
+                  : `/notifications/${notification.id}`
+              }
               onClick={handleClose}
               key={index}
               className="flex justify-between items-center mb-[3px] px-2 gap-4 $"
             >
               {notification.isRead ? (
-                <FaEnvelopeOpenText className=" min-h-[30px] min-w-[30px] " />
+                <FaEnvelopeOpenText className="text-[30px] min-h-[30px] min-w-[30px] " />
               ) : (
-                <FaEnvelope className=" text-[30px]" />
+                <FaEnvelope className=" text-[30px] min-w-[30px] min-h-[30px]" />
               )}
               <p className={` text-[13px]  `}>{notification.message}</p>
             </Link>
@@ -88,7 +101,11 @@ export const NotificationPopup: React.FC<INotificationPop> = ({
       )}
 
       <Link
-        to="/dashboard/notifications"
+        to={
+          currentUser && currentUser.roleId === 2
+            ? "/dashboard/notifications"
+            : "/notifications"
+        }
         onClick={handleClose}
         className=" flex items-center justify-center text-center text-blue-700"
       >

src/components/cards/ProductCard.tsx

@@ -191,7 +191,7 @@ const ProductCard: React.FC<IProductCardProps> = ({ product }) => {
         <img
           src={product.images[0]}
           alt="product"
-          className="w-[100%] h-[200px] hover:scale-[1.05] transition duration-200"
+          className="w-[100%] h-[200px] hover:scale-[1.05] transition duration-200 cursor-pointer"
           data-testid="prod-image"
           onClick={() => navigate(`/products/${product.id}`)}
         />
@@ -258,15 +258,15 @@ const ProductCard: React.FC<IProductCardProps> = ({ product }) => {
         {name}
       </Typography>
       <div className="flex items-center gap-1 p-1">
-        <p className="text-red-700 font-bold text-[10px]" data-testid="price">
+        <p className="text-red-700 font-bold text-[14px]" data-testid="price">
           {/* ${formatPrice(product.price)} */}
           {product.price}
           {' '}
           Rwf
         </p>
         <Rating
           value={total}
-          color="orange"
+          color="red"
           disabled
           size="small"
           data-testid="rating"

src/components/common/header/Header.tsx

@@ -8,14 +8,16 @@ import { LuUser } from "react-icons/lu";
 import { IoCartOutline } from "react-icons/io5";
 import { IoMdHeartEmpty } from "react-icons/io";
 import { FiSearch } from "react-icons/fi";
+import { FaRegBell } from "react-icons/fa";
 
 import { fetchWishes } from "../../../redux/reducers/wishListSlice";
 import { getProfile } from "../../../redux/reducers/profileSlice";
 import Logo from "../auth/Logo";
 import { RootState } from "../../../redux/store";
 import { cartManage } from "../../../redux/reducers/cartSlice";
-import { useAppDispatch } from "../../../redux/hooks";
+import { useAppDispatch, useAppSelector } from "../../../redux/hooks";
 import ProfileDropdown from "../ProfileDropdown";
+import { NotificationPopup } from "../../cards/Notification";
 
 import SearchSuggestions from "./SearchSuggestions";
 
@@ -39,8 +41,12 @@ const Header: React.FC<ISerachProps> = ({ searchQuery, setSearchQuery }) => {
   const userInfo = localStorage.getItem("accessToken")
     ? JSON.parse(atob(localStorage.getItem("accessToken")!.split(".")[1]))
     : null;
+  const [target, setTarget] = useState<null | HTMLElement>(null);
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
+  const { unreadCount, currentUser } = useAppSelector(
+    (state) => state.notifications,
+  );
 
   const handleSelectSuggestion = (suggestion: string) => {
     setSearchQuery(suggestion);
@@ -102,6 +108,10 @@ const Header: React.FC<ISerachProps> = ({ searchQuery, setSearchQuery }) => {
     navigate(`/products?query=${encodeURIComponent(searchQuery)}`);
   };
 
+  const handleClose = () => {
+    setTarget(null);
+  };
+
   return (
     <Stack
       className="px-[5%] z-40 2xl:px-[8%] border-t bg-white w-full relative "
@@ -148,6 +158,15 @@ const Header: React.FC<ISerachProps> = ({ searchQuery, setSearchQuery }) => {
               )}
             </div>
           </div>
+          <div
+            className="flex items-center justify-center relative p-3"
+            onClick={(e) => setTarget(e.currentTarget)}
+          >
+            <FaRegBell className="text-dark-gray size-6 cursor-pointer" />
+            <p className="bg-red-500 text-white rounded-full  text-[10px] absolute top-0 right-0 px-2 py-1">
+              {unreadCount}
+            </p>
+          </div>
           <div>
             {localStorage.getItem("accessToken") && userInfo.roleId === 2 ? (
               <Link to="dashboard/wishes">
@@ -198,6 +217,11 @@ const Header: React.FC<ISerachProps> = ({ searchQuery, setSearchQuery }) => {
           )}
         </div>
       </div>
+      <NotificationPopup
+        anchorEl={target}
+        open={Boolean(target)}
+        handleClose={handleClose}
+      />
     </Stack>
   );
 };

src/components/common/user-notifications/UserNotifcations.tsx

@@ -0,0 +1,104 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { FaEnvelope, FaEnvelopeOpenText } from "react-icons/fa";
+import { Button } from "@mui/material";
+
+import { useAppSelector } from "../../../redux/hooks";
+import { getCurrentUser } from "../../../utils/currentuser";
+
+const UserNotifications = () => {
+  const { notifications, currentUser } = useAppSelector(
+    (state) => state.notifications,
+  );
+
+  const formatDate = (dateString: Date) => {
+    const date = new Date(dateString);
+    const options = {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+      hour: "numeric",
+      minute: "numeric",
+      second: "numeric",
+    };
+    // @ts-ignore
+    return date.toLocaleDateString("en-US", options);
+  };
+
+  const sortedNotifications = notifications
+    .slice()
+    .sort(
+      (a, b) =>
+        new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
+    );
+
+  if (notifications.length < 1) {
+    return (
+      <div className="flex justify-center items-center gap-[12px]">
+        <p className="text-[16px] sm:text-[18px] md:text-[20px]">
+          You dont have any notification yet.
+        </p>
+      </div>
+    );
+  }
+
+  const goToLogin = () => {
+    window.location.href = "/login";
+  };
+
+  if (!getCurrentUser) {
+    return (
+      <div className="flex justify-center items-center gap-[12px]">
+        <Button
+          size="medium"
+          variant="contained"
+          color="error"
+          onClick={() => goToLogin}
+        >
+          Login
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={` ${currentUser && currentUser.roleId === 2 && "mt-24"} mb-4`}
+    >
+      <div>
+        {sortedNotifications.map((notification, index) => (
+          <Link
+            to={
+              currentUser && currentUser.roleId === 2
+                ? `/dashboard/notifications/${notification.id}`
+                : `/notifications/${notification.id}`
+            }
+            key={index}
+            className={`flex sm:flex-row flex-col justify-between items-center mb-[3px] p-4 rounded-md gap-4 ${notification.isRead ? "bg-[#FFFFFF]" : "bg-[#E1ECF4]"}`}
+          >
+            <div className="flex gap-2 items-center justify-between">
+              {notification.isRead ? (
+                <FaEnvelopeOpenText className="min-h-[30px] min-w-[30px]" />
+              ) : (
+                <FaEnvelope className="min-h-[30px] min-w-[30px]" />
+              )}
+              <div>
+                <p className="text-[13px] sm:text-[15px] md:text-[17px]">
+                  {notification.message}
+                </p>
+                <p className="text-[13px] sm:text-[15px] md:text-[17px]">
+                  {formatDate(notification.createdAt)}
+                </p>
+              </div>
+            </div>
+            <p className="text-[13px] sm:text-[15px] md:text-[17px]">
+              View Detail
+            </p>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default UserNotifications;

src/components/common/user-notifications/UserNotificationDetail.tsx

@@ -0,0 +1,74 @@
+import React, { useEffect } from "react";
+import { useParams } from "react-router-dom";
+import { FaEnvelope, FaEnvelopeOpenText } from "react-icons/fa";
+
+import { useAppDispatch, useAppSelector } from "../../../redux/hooks";
+import { readNotification } from "../../../redux/reducers/notificationSlice";
+
+const UserNotificationDetail = () => {
+  const { id } = useParams<{ id: string }>();
+  const { notifications, currentUser } = useAppSelector(
+    (state) => state.notifications,
+  );
+
+  const dispatch = useAppDispatch();
+
+  const notification = notifications.find(
+    // @ts-ignore
+    (notif) => notif.id === parseInt(id, 10),
+  );
+
+  if (!notification) {
+    return (
+      <div className="mt-24 mb-4">
+        <p>Notification not found!</p>
+      </div>
+    );
+  }
+
+  const formatDate = (dateString: Date) => {
+    const date = new Date(dateString);
+    const options = {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+      hour: "numeric",
+      minute: "numeric",
+      second: "numeric",
+    };
+    // @ts-ignore
+    return date.toLocaleDateString("en-US", options);
+  };
+  useEffect(() => {
+    if (notification && !notification.isRead) {
+      dispatch(readNotification(notification.id));
+    }
+  }, []);
+
+  useEffect(() => {
+    if (id) {
+      dispatch(readNotification(Number(id)));
+    }
+  }, []);
+
+  return (
+    <div
+      className={` ${currentUser && currentUser.roleId === 2 && "mt-24"} mb-4`}
+    >
+      <div className="flex flex-col gap-4 p-4 rounded-md bg-[#FFFFFF] min-h-[80vh]">
+        <p>
+          When :
+          {formatDate(notification.createdAt)}
+        </p>
+
+        <div>
+          <p className="text-[13px] sm:text-[15px] md:text-[17px]">
+            {notification.message}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default UserNotificationDetail;