fix filters (work in progress)

apps/meteor/client/views/admin/users/AdminUsersPage.tsx

@@ -1,7 +1,7 @@
 import { Button, ButtonGroup, Tabs } from '@rocket.chat/fuselage';
 import { usePermission, useRouteParameter, useTranslation, useRouter } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import UserPageHeaderContentWithSeatsCap from '../../../../ee/client/views/admin/users/UserPageHeaderContentWithSeatsCap';
 import { useSeatsCap } from '../../../../ee/client/views/admin/users/useSeatsCap';
@@ -12,7 +12,6 @@ import AdminUserForm from './AdminUserForm';
 import AdminUserFormWithData from './AdminUserFormWithData';
 import AdminUserInfoWithData from './AdminUserInfoWithData';
 import UsersTable from './UsersTable';
-import { usePendingUsersStats } from './usePendingUsersStats';
 
 const UsersPage = async (): Promise<ReactElement> => {
 	const t = useTranslation();
@@ -28,6 +27,8 @@ const UsersPage = async (): Promise<ReactElement> => {
 
 	const [tab, setTab] = useState<'all' | 'invited' | 'pending' | 'active' | 'deactivated'>('all');
 
+	const [pendingActionsCount, setPendingActionsCount] = useState<number>(0);
+
 	useEffect(() => {
 		if (!context || !seatsCap) {
 			return;
@@ -43,19 +44,6 @@ const UsersPage = async (): Promise<ReactElement> => {
 		reload.current();
 	};
 
-	const [pendingActionsCount, setPendingActionsCount] = useState<number>(0);
-
-	useCallback(() => {
-		const usePending = async () => {
-			const users = await usePendingUsersStats();
-			return users?.length;
-		};
-	}, []);
-
-	useEffect(() => {
-		setPendingActionsCount(pending);
-	}, [pending]);
-
 	return (
 		<Page flexDirection='row'>
 			<Page>
@@ -95,7 +83,7 @@ const UsersPage = async (): Promise<ReactElement> => {
 							{t('Invited')}
 						</Tabs.Item>
 					</Tabs>
-					<UsersTable reload={reload} tab={tab} onReload={handleReload} />
+					<UsersTable reload={reload} tab={tab} onReload={handleReload} setPendingActionsCount={setPendingActionsCount} />
 				</Page.Content>
 			</Page>
 			{context && (

apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx

@@ -24,9 +24,10 @@ type UsersTableProps = {
 	reload: MutableRefObject<() => void>;
 	tab: string;
 	onReload: () => void;
+	setPendingActionsCount: React.Dispatch<React.SetStateAction<number>>;
 };
 
-const UsersTable = ({ reload, tab, onReload }: UsersTableProps): ReactElement | null => {
+const UsersTable = ({ reload, tab, onReload, setPendingActionsCount }: UsersTableProps): ReactElement | null => {
 	const t = useTranslation();
 	const router = useRouter();
 	const mediaQuery = useMediaQuery('(min-width: 1024px)');
@@ -47,11 +48,13 @@ const UsersTable = ({ reload, tab, onReload }: UsersTableProps): ReactElement |
 		sortDirection,
 		itemsPerPage,
 		current,
+		setPendingActionsCount,
 	);
 
 	const useAllUsers = () => (tab === 'all' && isSuccess ? data?.users : []);
 
-	const filteredUsers = [...useAllUsers(), ...useFilterActiveUsers(data?.users, tab), ...useFilterPendingUsers(data?.users, tab)];
+	// TODO: fix types
+	const filteredUsers = [...useAllUsers(), ...useFilterActiveUsers(data?.users, tab), ...useFilterPendingUsers(data?.users as any, tab)];
 
 	useEffect(() => {
 		reload.current = refetch;

apps/meteor/client/views/admin/users/hooks/useFilterActiveUsers.ts

@@ -1,7 +1,7 @@
 import type { IUser } from '@rocket.chat/core-typings';
 
 export const useFilterActiveUsers = (
-	users: Pick<IUser, '_id' | 'username' | 'name' | 'status' | 'roles' | 'emails' | 'active' | 'avatarETag' | 'lastLogin'>[] | undefined,
+	users: Pick<IUser, '_id' | 'username' | 'name' | 'status' | 'roles' | 'emails' | 'active' | 'avatarETag'>[] | undefined,
 	tab: string,
 ) => {
 	if (!users || tab !== 'active') return [];

apps/meteor/client/views/admin/users/hooks/useListUsers.ts

@@ -16,6 +16,7 @@ export const useListUsers = (
 	sortDirection: ReturnType<typeof useSort>['sortDirection'],
 	itemsPerPage: ReturnType<typeof usePagination>['itemsPerPage'],
 	current: ReturnType<typeof usePagination>['current'],
+	setPendingActionsCount: React.Dispatch<React.SetStateAction<number>>,
 ) => {
 	const query = useDebouncedValue(
 		useMemo(() => {
@@ -65,5 +66,9 @@ export const useListUsers = (
 		},
 	);
 
+	if (usersListQueryResult.isSuccess) {
+		setPendingActionsCount(usersListQueryResult.data.users.filter((user) => !user.active).length);
+	}
+
 	return usersListQueryResult;
 };

packages/rest-typings/src/v1/users.ts

@@ -147,7 +147,7 @@ export type UsersEndpoints = {
 
 	'/v1/users.list': {
 		GET: (params: PaginatedRequest<{ fields: string }>) => PaginatedResult<{
-			users: Pick<IUser, '_id' | 'username' | 'name' | 'status' | 'roles' | 'emails' | 'active' | 'avatarETag' | 'lastLogin'>[];
+			users: Pick<IUser, '_id' | 'username' | 'name' | 'status' | 'roles' | 'emails' | 'active' | 'avatarETag'>[];
 		}>;
 	};