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 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | import React, { useMemo } from "react";
import { useGiveNotificationContext } from "../provider/GiveNotificationProvider";
import SingleNotificationItem from "./SingleNotificationItem";
import { getVirtualGroups } from "../utils";
import {
useFormatDateInTimezone,
usePreciseTimeFormat,
} from "@utils/date.helpers";
import { TThreadItem } from "@features/GiveConversation/types";
import GroupedVirtualList from "./GroupedVirtualList";
import { getFallbackString } from "@features/GiveConversation/utils";
import useNotificationsRedirect from "@features/Notifications/NotificationsCenter/hooks/useNotificationsRedirect";
// List of threads
function ThreadList() {
const { currentTimezone } = useFormatDateInTimezone();
const { conversationRedirect } = useNotificationsRedirect();
const {
threadList,
isFetchingNextPageThreadList,
hasNextPageThreadList,
fetchNextPageThreadList,
setCurrentThread,
tab,
} = useGiveNotificationContext();
const { formatPreciseTime } = usePreciseTimeFormat();
const isAcquirer = ["team", "provider", "merchant"].includes(tab);
const handleClick = (item: TThreadItem) => {
if (isAcquirer) {
conversationRedirect({
threadId: item.id,
targetMerchantId: item.subjectAccID,
messageId: item.taskID,
} as any);
} else {
setCurrentThread({
id: item.id,
name: item.title,
count: item.unreadMessagesCount,
});
}
};
const grouped = useMemo(() => {
return getVirtualGroups({
list: threadList,
groupByKey: "lastMessageSentAt",
timezone: currentTimezone,
});
}, [threadList]);
return (
<GroupedVirtualList
groupedData={grouped}
shouldFetchNextPage={
!isFetchingNextPageThreadList && hasNextPageThreadList
}
fetchNextPage={fetchNextPageThreadList}
isFetchingNextPage={isFetchingNextPageThreadList}
itemContent={(index) => {
const item: TThreadItem = grouped.items[index];
const primaryFallbackString = getFallbackString({
firstName: item.lastAuthorFirstName,
lastName: item.lastAuthorLastName,
email: item.lastAuthorEmail,
});
const secondaryFallbackString = getFallbackString({
firstName: item.secondLastAuthorFirstName,
lastName: item.secondLastAuthorLastName,
email: item.secondLastAuthorEmail,
});
return (
<SingleNotificationItem
key={item.id}
id={item.id}
isRead={item.unreadMessagesCount < 1}
primaryImageURL={item.lastAuthorAvatarImageURL}
secondaryImageURL={item.secondLastAuthorAvatarImageURL}
primaryFallbackString={primaryFallbackString}
secondaryFallbackString={secondaryFallbackString}
messageText={item.lastMessageBody}
title={item.title}
time={formatPreciseTime(item.lastMessageSentAt * 1000)}
onClick={() => handleClick(item)}
/>
);
}}
/>
);
}
export default ThreadList;
|