add groupBymsg function and resolve TS errors

RocketChat · Feb 8, 2023 · d2d2e17 · d2d2e17
1 parent b252043
commit d2d2e17
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 32 deletions.
diff --git a/apps/meteor/client/views/admin/moderation/ModerationConsoleTable.tsx b/apps/meteor/client/views/admin/moderation/ModerationConsoleTable.tsx
@@ -1,10 +1,10 @@
+import type { IReport } from '@rocket.chat/core-typings';
 import { Pagination } from '@rocket.chat/fuselage';
 import { useDebouncedValue, useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useEndpoint, useToastMessageDispatch, useRoute } from '@rocket.chat/ui-contexts';
 import { useQuery } from '@tanstack/react-query';
 import type { FC, MutableRefObject } from 'react';
 import React, { useEffect, useMemo, useState } from 'react';
-import { sort } from 'semver';
 
 import FilterByText from '../../../components/FilterByText';
 import {
@@ -18,20 +18,36 @@ import { usePagination } from '../../../components/GenericTable/hooks/usePaginat
 import { useSort } from '../../../components/GenericTable/hooks/useSort';
 import ModerationConsoleTableRow from './ModerationConsoleTableRow';
 
+// function which takes an array of IReport and return an array of object such that all the reports are grouped by the message id
+
+export type GroupedReports = {
+	messageId: string;
+	reports: IReport[];
+};
+
+const groupReportsByMessageId = (reports: IReport[] | any[]): GroupedReports[] => {
+	const groupedReports: Record<string, IReport[]> = {};
+
+	reports.forEach((report) => {
+		if (groupedReports[report.message._id]) {
+			groupedReports[report.message._id].push(report);
+		} else {
+			groupedReports[report.message._id] = [report];
+		}
+	});
+	// convert the groupedReports object to an array of objects and return it
+	const groupedReportsArray = Object.keys(groupedReports).map((key) => {
+		return { messageId: key, reports: groupedReports[key] };
+	});
+	return groupedReportsArray;
+};
+
 const ModerationConsoleTable: FC<{ reload: MutableRefObject<() => void> }> = ({ reload }) => {
 	const [text, setText] = useState('');
 	const moderationRoute = useRoute('moderation-console');
 
 	const { sortBy, sortDirection, setSort } = useSort<'ts' | 'u.username' | 'description'>('ts');
-	const {
-		current,
-		itemsPerPage,
-		currentItemsPerPage,
-		onChangeItemsPerPage,
-		setItemsPerPage,
-		setCurrent: onSetCurrent,
-		...paginationProps
-	} = usePagination();
+	const { current, itemsPerPage, setItemsPerPage: onSetItemsPerPage, setCurrent: onSetCurrent, ...paginationProps } = usePagination();
 	// write a custom query to get the reports data from the database
 
 	const query = useDebouncedValue(
@@ -69,12 +85,18 @@ const ModerationConsoleTable: FC<{ reload: MutableRefObject<() => void> }> = ({
 		},
 	);
 
+	const groupedReports = useMemo(() => {
+		if (!data?.reports) {
+			return;
+		}
+
+		return groupReportsByMessageId(data.reports);
+	}, [data]);
+
 	useEffect(() => {
 		reload.current = reloadReports;
 	}, [reload, reloadReports]);
 
-	console.log('data', data);
-
 	const handleClick = useMutableCallback((id): void => {
 		moderationRoute.push({
 			context: 'info',
@@ -121,22 +143,22 @@ const ModerationConsoleTable: FC<{ reload: MutableRefObject<() => void> }> = ({
 					<GenericTableBody>{isLoading && <GenericTableLoadingTable headerCells={6} />}</GenericTableBody>
 				</GenericTable>
 			)}
-			{isSuccess && data.reports.length > 0 && (
+			{isSuccess && data.reports.length > 0 && groupedReports && (
 				<>
 					<GenericTable>
 						<GenericTableHeader>{headers}</GenericTableHeader>
 						<GenericTableBody>
-							{data.reports.map((report) => (
-								<ModerationConsoleTableRow key={report._id} report={report} onClick={handleClick} />
+							{groupedReports.map((report) => (
+								<ModerationConsoleTableRow key={report.messageId} report={report} onClick={handleClick} reload={reload} />
 							))}
 						</GenericTableBody>
 					</GenericTable>
 					<Pagination
 						current={current}
 						divider
-						itemsPerPage={currentItemsPerPage}
+						itemsPerPage={itemsPerPage}
 						count={data?.total || 0}
-						onSetItemsPerPage={onChangeItemsPerPage}
+						onSetItemsPerPage={onSetItemsPerPage}
 						onSetCurrent={onSetCurrent}
 						{...paginationProps}
 					/>

diff --git a/apps/meteor/client/views/admin/moderation/ModerationConsoleTableRow.tsx b/apps/meteor/client/views/admin/moderation/ModerationConsoleTableRow.tsx
@@ -3,21 +3,22 @@ import { TableRow, TableCell, Box, Menu } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import { useEndpoint, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
 import { useQuery } from '@tanstack/react-query';
-import React, { useMemo, useState } from 'react';
+import type { MutableRefObject } from 'react';
+import React, { useEffect, useMemo } from 'react';
 
 import UserAvatar from '../../../components/avatar/UserAvatar';
+import type { GroupedReports } from './ModerationConsoleTable';
 
 type MonderationConsoleRowProps = {
-	report: IReport;
+	report: GroupedReports;
 	onClick: (id: IReport['_id']) => void;
+	reload: MutableRefObject<() => void>;
 };
 
-const ModerationConsoleTableRow = ({ report, onClick }: MonderationConsoleRowProps): JSX.Element => {
-	const { _id, description, message, ts } = report;
+const ModerationConsoleTableRow = ({ report, onClick, reload }: MonderationConsoleRowProps): JSX.Element => {
+	const { messageId, reports } = report;
+	const { _id, message, ts } = reports[0];
 	const { username } = message.u;
-	const { rid } = message;
-	const { msg } = message;
-	const [text, setText] = useState('');
 
 	// write a custom query to get the reports data from the database
 
@@ -26,9 +27,8 @@ const ModerationConsoleTableRow = ({ report, onClick }: MonderationConsoleRowPro
 			() => ({
 				count: 50,
 				msgId: message._id,
-				selector: text,
 			}),
-			[message._id, text],
+			[message._id],
 		),
 		500,
 	);
@@ -42,7 +42,6 @@ const ModerationConsoleTableRow = ({ report, onClick }: MonderationConsoleRowPro
 		refetch: reloadReportsByMessage,
 		isLoading: isLoadingReportsByMessage,
 		isSuccess: isSuccessReportsByMessage,
-		isError: isErrorReportsByMessage,
 	} = useQuery(
 		['reportsByMessage', query],
 		async () => {
@@ -56,8 +55,26 @@ const ModerationConsoleTableRow = ({ report, onClick }: MonderationConsoleRowPro
 		},
 	);
 
+	useEffect(() => {
+		reload.current = reloadReportsByMessage;
+	}, [reload, reloadReportsByMessage]);
+
+	// a return function based on the status of the query which shows the query total or a loading spinner or a "-" incase of error
+
+	const renderReportsByMessage = (): string | number => {
+		if (isLoadingReportsByMessage) {
+			return '...';
+		}
+
+		if (isSuccessReportsByMessage) {
+			return reportsByMessage.total;
+		}
+
+		return '-';
+	};
+
 	return (
-		<TableRow key={_id} onKeyDown={(): void => onClick(_id)} onClick={(): void => onClick(_id)} tabIndex={0} role='link' action>
+		<TableRow key={_id} onKeyDown={(): void => onClick(messageId)} onClick={(): void => onClick(messageId)} tabIndex={0} role='link' action>
 			<TableCell withTruncatedText>
 				<Box display='flex' alignItems='center'>
 					{username && <UserAvatar size={'x40'} username={username} />}
@@ -70,11 +87,11 @@ const ModerationConsoleTableRow = ({ report, onClick }: MonderationConsoleRowPro
 					</Box>
 				</Box>
 			</TableCell>
-			<TableCell withTruncatedText>{msg}</TableCell>
-			<TableCell withTruncatedText>{rid}</TableCell>
+			<TableCell withTruncatedText>{message.msg}</TableCell>
+			<TableCell withTruncatedText>{message.rid}</TableCell>
 			<TableCell withTruncatedText>{ts}</TableCell>
-			<TableCell withTruncatedText>{isSuccessReportsByMessage ? reportsByMessage.total : '-'}</TableCell>
-			<TableCell>
+			<TableCell withTruncatedText>{renderReportsByMessage()}</TableCell>
+			<TableCell onClick={(e): void => e.stopPropagation()}>
 				<Menu
 					options={{
 						seeReports: {