[IMPROVE] Sorting functionality in team channel while leaving a team (#21790)

Co-authored-by: Guilherme Gazzo <guilherme@gazzo.xyz>
Co-authored-by: Guilherme Gazzo <guilhermegazzo@gmail.com>

apps/meteor/client/views/teams/ChannelDesertionTable/ChannelDesertionTable.tsx

@@ -2,9 +2,10 @@ import type { IRoom } from '@rocket.chat/core-typings';
 import { Serialized } from '@rocket.chat/core-typings';
 import { Box, CheckBox } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
-import React, { FC, ReactElement } from 'react';
+import React, { FC, ReactElement, useMemo } from 'react';
 
 import { GenericTable, GenericTableHeaderCell, GenericTableHeader, GenericTableBody } from '../../../components/GenericTable';
+import { useSort } from '../../../components/GenericTable/hooks/useSort';
 import ChannelDesertionTableRow from './ChannelDesertionTableRow';
 
 type ChannelDesertionTableProps = {
@@ -26,6 +27,8 @@ const ChannelDesertionTable: FC<ChannelDesertionTableProps> = ({
 	onToggleAllRooms,
 	lastOwnerWarning,
 }) => {
+	const { sortBy, sortDirection, setSort } = useSort<'name' | 'ts'>('name');
+
 	const t = useTranslation();
 
 	const selectedRoomsLength = Object.values(selectedRooms).filter(Boolean).length;
@@ -33,22 +36,35 @@ const ChannelDesertionTable: FC<ChannelDesertionTableProps> = ({
 	const checked = eligibleRoomsLength === selectedRoomsLength;
 	const indeterminate = eligibleRoomsLength && eligibleRoomsLength > selectedRoomsLength ? selectedRoomsLength > 0 : false;
 
+	const results = useMemo(() => {
+		if (!rooms) {
+			return [];
+		}
+
+		const direction = sortDirection === 'asc' ? 1 : -1;
+
+		return rooms.sort((a, b) =>
+			// eslint-disable-next-line no-nested-ternary
+			a[sortBy] && b[sortBy] ? (a[sortBy]?.localeCompare(b[sortBy] ?? '') ?? 1) * direction : direction,
+		);
+	}, [rooms, sortBy, sortDirection]);
+
 	return (
 		<Box display='flex' flexDirection='column' height='x200' mbs='x24'>
 			<GenericTable fixed={false}>
 				<GenericTableHeader>
-					<GenericTableHeaderCell key='name'>
+					<GenericTableHeaderCell key='name' sort='name' onClick={setSort} direction={sortDirection} active={sortBy === 'name'}>
 						<CheckBox indeterminate={indeterminate} checked={checked} onChange={onToggleAllRooms} />
 						<Box mi='x8'>{t('Channel_name')}</Box>
 					</GenericTableHeaderCell>
-					<GenericTableHeaderCell key='joinedAt'>
+					<GenericTableHeaderCell key='ts' sort='ts' onClick={setSort} direction={sortDirection} active={sortBy === 'ts'}>
 						<Box width='100%' textAlign='end'>
 							{t('Joined_at')}
 						</Box>
 					</GenericTableHeaderCell>
 				</GenericTableHeader>
 				<GenericTableBody>
-					{rooms?.map(
+					{results?.map(
 						(room, key): ReactElement => (
 							<ChannelDesertionTableRow
 								key={key}