diff --git a/src/components/cards/Notification.tsx b/src/components/cards/Notification.tsx index 0bcc477..c48befb 100644 --- a/src/components/cards/Notification.tsx +++ b/src/components/cards/Notification.tsx @@ -21,6 +21,13 @@ export const NotificationPopup: React.FC = ({ (state) => state.notifications, ); + const recentNotifications = [...notifications] + .sort( + (a, b) => + new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(), + ) + .slice(0, 5); + return ( = ({ }} > {notifications.length > 0 ? ( - notifications.slice(0, 5).map((notification, index) => ( + recentNotifications.map((notification, index) => ( <> = ({ className="flex justify-between items-center mb-[3px] px-2 gap-4 $" > {notification.isRead ? ( - + ) : ( - + )}

{notification.message}

diff --git a/src/components/common/user-notifications/UserNotifcations.tsx b/src/components/common/user-notifications/UserNotifcations.tsx index f7ac55c..744a517 100644 --- 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 ( -
+
{sortedNotifications.map((notification, index) => ( diff --git a/src/components/common/user-notifications/UserNotificationDetail.tsx b/src/components/common/user-notifications/UserNotificationDetail.tsx index cbef003..eeb2159 100644 --- 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 ( -
+

When :