Chore: Rewrite Admin UsersTable to Typescript

apps/meteor/client/views/admin/users/AddUser.js

@@ -8,7 +8,7 @@ import { useEndpointData } from '../../../hooks/useEndpointData';
 import { useForm } from '../../../hooks/useForm';
 import UserForm from './UserForm';
 
-export function AddUser({ roles, onReload, ...props }) {
+const AddUser = ({ onReload, ...props }) => {
 	const t = useTranslation();
 
 	const router = useRoute('admin-users');
@@ -126,4 +126,6 @@ export function AddUser({ roles, onReload, ...props }) {
 	return (
 		<UserForm errors={errors} formValues={values} formHandlers={handlers} availableRoles={availableRoles} append={append} {...props} />
 	);
-}
+};
+
+export default AddUser;

apps/meteor/client/views/admin/users/UserInfo.js → apps/meteor/client/views/admin/users/AdminUserInfoWithData.js

@@ -13,7 +13,7 @@ import { getUserEmailVerified } from '../../../lib/utils/getUserEmailVerified';
 import UserInfo from '../../room/contextualBar/UserInfo/UserInfo';
 import { UserInfoActions } from './UserInfoActions';
 
-export function UserInfoWithData({ uid, username, onReload, ...props }) {
+const AdminUserInfoWithData = ({ uid, onReload, ...props }) => {
 	const t = useTranslation();
 	const showRealNames = useSetting('UI_Use_Real_Name');
 	const getRoles = useRolesDescription();
@@ -26,7 +26,7 @@ export function UserInfoWithData({ uid, username, onReload, ...props }) {
 		reload: reloadUserInfo,
 	} = useEndpointData(
 		'/v1/users.info',
-		useMemo(() => ({ ...(uid && { userId: uid }), ...(username && { username }) }), [uid, username]),
+		useMemo(() => ({ ...(uid && { userId: uid }) }), [uid]),
 	);
 
 	const onChange = useMutableCallback(() => {
@@ -96,4 +96,6 @@ export function UserInfoWithData({ uid, username, onReload, ...props }) {
 			{...props}
 		/>
 	);
-}
+};
+
+export default AdminUserInfoWithData;

apps/meteor/client/views/admin/users/EditUserWithData.js → apps/meteor/client/views/admin/users/EditUserWithData.tsx

@@ -1,15 +1,21 @@
+import { IUser } from '@rocket.chat/core-typings';
 import { Box, Callout } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
-import React, { useMemo } from 'react';
+import React, { useMemo, ReactElement } from 'react';
 
 import { FormSkeleton } from '../../../components/Skeleton';
 import { AsyncStatePhase } from '../../../hooks/useAsyncState';
 import { useEndpointData } from '../../../hooks/useEndpointData';
 import EditUser from './EditUser';
 
-function EditUserWithData({ uid, ...props }) {
+type EditUserWithDataProps = {
+	uid: IUser['_id'];
+	onReload: () => void;
+};
+
+const EditUserWithData = ({ uid, onReload, ...props }: EditUserWithDataProps): ReactElement => {
 	const t = useTranslation();
-	const { value: roleData, phase: roleState, error: roleError } = useEndpointData('/v1/roles.list', '');
+	const { value: roleData, phase: roleState, error: roleError } = useEndpointData('/v1/roles.list');
 	const {
 		value: data,
 		phase: state,
@@ -35,7 +41,7 @@ function EditUserWithData({ uid, ...props }) {
 		);
 	}
 
-	return <EditUser data={data.user} roles={roleData.roles} {...props} />;
-}
+	return <EditUser data={data?.user} roles={roleData?.roles} onReload={onReload} {...props} />;
+};
 
 export default EditUserWithData;

apps/meteor/client/views/admin/users/InviteUsers.js → apps/meteor/client/views/admin/users/InviteUsers.tsx

@@ -1,24 +1,28 @@
 import { Box, Button, Icon, TextAreaInput } from '@rocket.chat/fuselage';
 import { useToastMessageDispatch, useMethod, useTranslation } from '@rocket.chat/ui-contexts';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useState, ReactElement, ChangeEvent, ComponentProps } from 'react';
 
 import { validateEmail } from '../../../../lib/emailValidator';
 import VerticalBar from '../../../components/VerticalBar';
 
-export function InviteUsers({ data, ...props }) {
+type InviteUsersProps = ComponentProps<typeof VerticalBar.ScrollableContent>;
+
+const InviteUsers = (props: InviteUsersProps): ReactElement => {
 	const t = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
 	const [text, setText] = useState('');
 	const sendInvites = useMethod('sendInvitationEmail');
-	const getEmails = useCallback((text) => text.split(/[\ ,;]+/i).filter((val) => validateEmail(val)), []);
-	const handleClick = async () => {
+	const getEmails = useCallback((text) => text.split(/[\ ,;]+/i).filter((val: string) => validateEmail(val)), []);
+
+	const handleClick = async (): Promise<void> => {
 		try {
 			await sendInvites(getEmails(text));
 			dispatchToastMessage({ type: 'success', message: t('Emails_sent_successfully!') });
 		} catch (error) {
 			dispatchToastMessage({ type: 'error', message: error.message });
 		}
 	};
+
 	return (
 		<VerticalBar.ScrollableContent {...props}>
 			<Box is='h2' fontScale='h2' mb='x8'>
@@ -27,11 +31,13 @@ export function InviteUsers({ data, ...props }) {
 			<Box fontScale='p2' mb='x8'>
 				{t('Send_invitation_email_info')}
 			</Box>
-			<TextAreaInput rows={5} flexGrow={0} onChange={(e) => setText(e.currentTarget.value)} />
+			<TextAreaInput rows={5} flexGrow={0} onChange={(e: ChangeEvent<HTMLInputElement>): void => setText(e.currentTarget.value)} />
 			<Button primary onClick={handleClick} disabled={!getEmails(text).length} alignItems='stretch' mb='x8'>
 				<Icon name='send' size='x16' />
 				{t('Send')}
 			</Button>
 		</VerticalBar.ScrollableContent>
 	);
-}
+};
+
+export default InviteUsers;