Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | 8x 8x 8x 4x 8x 32x 32x 32x 32x 32x | import {
useFormatDateInTimezone,
usePreciseTimeFormat,
} from "@utils/date.helpers";
import { useGiveNotificationContext } from "../provider/GiveNotificationProvider";
import SingleNotificationItem from "./SingleNotificationItem";
import React, { useMemo } from "react";
import { getVirtualGroups } from "../utils";
import GroupedVirtualList from "./GroupedVirtualList";
import { NotificationType } from "../giveNotificationTypes";
import { useNotificationRedirection } from "../hooks/useNotificationRedirection";
export default function NotificationsList() {
const { currentTimezone } = useFormatDateInTimezone();
const {
notificationList,
hasNotificationsNextPage,
isFetchingNotificationsNextPage,
fetchNotificationsNextPage,
} = useGiveNotificationContext();
const grouped = useMemo(() => {
return getVirtualGroups({
list: notificationList,
groupByKey: "createdAt",
timezone: currentTimezone,
});
}, [notificationList]);
return (
<GroupedVirtualList
groupedData={grouped}
shouldFetchNextPage={
!isFetchingNotificationsNextPage && hasNotificationsNextPage
}
fetchNextPage={fetchNotificationsNextPage}
isFetchingNextPage={isFetchingNotificationsNextPage}
itemContent={(index) => {
const item: NotificationType = grouped.items[index];
return <NotificationWithRedirection key={item.id} item={item} />;
}}
/>
);
}
function NotificationWithRedirection({ item }: { item: NotificationType }) {
const { formatPreciseTime } = usePreciseTimeFormat();
const { handleNotificationClick } = useNotificationRedirection(item);
return (
<SingleNotificationItem
isRead={Boolean(item.readAt)}
messageText={item?.displayMessage}
title={item.displayTitle}
id={item.id}
time={formatPreciseTime(item.createdAt * 1000)}
mandatory={item.alertType === "mandatory"}
onClick={handleNotificationClick}
/>
);
}
|