Merge remote-tracking branch 'origin/dev' into fix-notification

atlp-rwanda · Jul 30, 2024 · c5613c9 · c5613c9
2 parents cdd6a0e + ee7d51f
commit c5613c9
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 8 deletions.
diff --git a/src/components/cards/Notification.tsx b/src/components/cards/Notification.tsx
@@ -21,6 +21,13 @@ export const NotificationPopup: React.FC<INotificationPop> = ({
     (state) => state.notifications,
   );
 
+  const recentNotifications = [...notifications]
+    .sort(
+      (a, b) =>
+        new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
+    )
+    .slice(0, 5);
+
   return (
     <Menu
       open={Boolean(anchorEl)}
@@ -67,7 +74,7 @@ export const NotificationPopup: React.FC<INotificationPop> = ({
       }}
     >
       {notifications.length > 0 ? (
-        notifications.slice(0, 5).map((notification, index) => (
+        recentNotifications.map((notification, index) => (
           <>
             <Link
               to={
@@ -80,9 +87,9 @@ export const NotificationPopup: React.FC<INotificationPop> = ({
               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>

diff --git a/src/components/common/user-notifications/UserNotifcations.tsx b/src/components/common/user-notifications/UserNotifcations.tsx
@@ -7,7 +7,9 @@ import { useAppSelector } from "../../../redux/hooks";
 import { getCurrentUser } from "../../../utils/currentuser";
 
 const UserNotifications = () => {
-  const { notifications } = useAppSelector((state) => state.notifications);
+  const { notifications, currentUser } = useAppSelector(
+    (state) => state.notifications,
+  );
 
   const formatDate = (dateString: Date) => {
     const date = new Date(dateString);
@@ -60,11 +62,17 @@ const UserNotifications = () => {
   }
 
   return (
-    <div className="mt-24 mb-4">
+    <div
+      className={` ${currentUser && currentUser.roleId === 2 && "mt-24"} mb-4`}
+    >
       <div>
         {sortedNotifications.map((notification, index) => (
           <Link
-            to={`/dashboard/notifications/${notification.id}`}
+            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]"}`}
           >

diff --git a/src/components/common/user-notifications/UserNotificationDetail.tsx b/src/components/common/user-notifications/UserNotificationDetail.tsx
@@ -7,7 +7,9 @@ import { readNotification } from "../../../redux/reducers/notificationSlice";
 
 const UserNotificationDetail = () => {
   const { id } = useParams<{ id: string }>();
-  const { notifications } = useAppSelector((state) => state.notifications);
+  const { notifications, currentUser } = useAppSelector(
+    (state) => state.notifications,
+  );
 
   const dispatch = useAppDispatch();
 
@@ -50,7 +52,9 @@ const UserNotificationDetail = () => {
   }, []);
 
   return (
-    <div className="mt-24 mb-4">
+    <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 :