diff --git a/src/api/types/notifications.ts b/src/api/types/notifications.ts index a2e6308e6..69f785c8e 100644 --- a/src/api/types/notifications.ts +++ b/src/api/types/notifications.ts @@ -92,6 +92,7 @@ export type NotificationSendHistory = { duration_millis?: number | undefined; created_at: string; parent_id?: string; + group_id?: string; }; export type NotificationSendHistoryApiResponse = NotificationSendHistory & { diff --git a/src/components/Notifications/NotificationSendHistory.tsx b/src/components/Notifications/NotificationSendHistory.tsx index d676f55a0..68635669c 100644 --- a/src/components/Notifications/NotificationSendHistory.tsx +++ b/src/components/Notifications/NotificationSendHistory.tsx @@ -163,17 +163,38 @@ export default function NotificationSendHistoryList({ const isOpen = searchParams.has("id"); const heirarchicalData = useMemo(() => { - const child = data.filter((row) => row.parent_id); + // The latest send history for each group + const groupLeader: Record = {}; + for (const row of data) { + if (row.group_id && !groupLeader[row.group_id]) { + groupLeader[row.group_id] = row.id; + } + } + + // send histories in the same group should be grouped together + const histories = data.map((row) => { + if (row.parent_id || !row.group_id) { + return { ...row }; + } + + if (!groupLeader[row.group_id] || groupLeader[row.group_id] === row.id) { + return { ...row }; + } + + return { + ...row, + parent_id: groupLeader[row.group_id] + }; + }); - return data + return histories .filter((row) => !row.parent_id) .map((row) => { - const children = child.filter((child) => child.parent_id === row.id); - const rowWithSubRows: NotificationSendHistoryWithSubRows = { + const children = histories.filter((c) => c.parent_id === row.id); + return { ...row, subRows: children }; - return rowWithSubRows; }); }, [data]);