From 8637ba263099579fe2b470d84558ee78b059fdff Mon Sep 17 00:00:00 2001
From: csuadev <72958726+csuadev@users.noreply.github.com>
Date: Mon, 20 Jun 2022 02:33:55 -0500
Subject: [PATCH] Chore: Rewrite AddUsers to TS (#25830)

<!-- This is a pull request template, you do not need to uncomment or remove the comments, they won't show up in the PR text. -->

<!-- Your Pull Request name should start with one of the following tags
  [NEW] For new features
  [IMPROVE] For an improvement (performance or little improvements) in existing features
  [FIX] For bug fixes that affect the end-user
  [BREAK] For pull requests including breaking changes
  Chore: For small tasks
  Doc: For documentation
-->

<!-- Checklist!!! If you're unsure about any of them, don't hesitate to ask. We're here to help! This is simply a reminder of what we are going to look for before merging your code.
  - I have read the Contributing Guide - https://github.com/RocketChat/Rocket.Chat/blob/develop/.github/CONTRIBUTING.md#contributing-to-rocketchat doc
  - I have signed the CLA - https://cla-assistant.io/RocketChat/Rocket.Chat
  - Lint and unit tests pass locally with my changes
  - I have added tests that prove my fix is effective or that my feature works (if applicable)
  - I have added necessary documentation (if applicable)
  - Any dependent changes have been merged and published in downstream modules
-->

## Proposed changes (including videos or screenshots)
<!-- CHANGELOG -->
<!--
  Describe the big picture of your changes here to communicate to the maintainers why we should accept this pull request.
  If it fixes a bug or resolves a feature request, be sure to link to that issue below.
  This description will appear in the release notes if we accept the contribution.
-->

<!-- END CHANGELOG -->

## Issue(s)
<!-- Link the issues being closed by or related to this PR. For example, you can use #594 if this PR closes issue number 594 -->

## Steps to test or reproduce
<!-- Mention how you would reproduce the bug if not mentioned on the issue page already. Also mention which screens are going to have the changes if applicable -->

## Further comments
<!-- If this is a relatively large or complex change, kick off the discussion by explaining why you chose the solution you did and what alternatives you considered, etc... -->


Co-authored-by: Douglas Fabris <27704687+dougfabris@users.noreply.github.com>
Co-authored-by: Yash Rajpal <58601732+yash-rajpal@users.noreply.github.com>
---
 .../VerticalBar/VerticalBarActionBack.tsx     |  9 --------
 .../VerticalBar/VerticalBarBack.tsx           | 13 ++++++++++++
 .../client/components/VerticalBar/index.ts    |  4 ++--
 .../RoomMembers/AddUsers/AddUsers.stories.tsx |  2 +-
 .../AddUsers/{AddUsers.js => AddUsers.tsx}    | 17 +++++++++++----
 ...dUsersWithData.js => AddUsersWithData.tsx} | 21 ++++++++++++++-----
 6 files changed, 45 insertions(+), 21 deletions(-)
 delete mode 100644 apps/meteor/client/components/VerticalBar/VerticalBarActionBack.tsx
 create mode 100644 apps/meteor/client/components/VerticalBar/VerticalBarBack.tsx
 rename apps/meteor/client/views/room/contextualBar/RoomMembers/AddUsers/{AddUsers.js => AddUsers.tsx} (61%)
 rename apps/meteor/client/views/room/contextualBar/RoomMembers/AddUsers/{AddUsersWithData.js => AddUsersWithData.tsx} (67%)

diff --git a/apps/meteor/client/components/VerticalBar/VerticalBarActionBack.tsx b/apps/meteor/client/components/VerticalBar/VerticalBarActionBack.tsx
deleted file mode 100644
index 427dbd1d7fc6..000000000000
--- a/apps/meteor/client/components/VerticalBar/VerticalBarActionBack.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React, { ReactElement, memo, ComponentProps } from 'react';
-
-import VerticalBarAction from './VerticalBarAction';
-
-const VerticalBarActionBack = (props: ComponentProps<typeof VerticalBarAction>): ReactElement => (
-	<VerticalBarAction {...props} name='arrow-back' />
-);
-
-export default memo(VerticalBarActionBack);
diff --git a/apps/meteor/client/components/VerticalBar/VerticalBarBack.tsx b/apps/meteor/client/components/VerticalBar/VerticalBarBack.tsx
new file mode 100644
index 000000000000..ecfcc9716be2
--- /dev/null
+++ b/apps/meteor/client/components/VerticalBar/VerticalBarBack.tsx
@@ -0,0 +1,13 @@
+import { useTranslation } from '@rocket.chat/ui-contexts';
+import React, { ReactElement, memo, ComponentProps } from 'react';
+
+import VerticalBarAction from './VerticalBarAction';
+
+type VerticalBarBackProps = Partial<ComponentProps<typeof VerticalBarAction>>;
+
+const VerticalBarBack = (props: VerticalBarBackProps): ReactElement => {
+	const t = useTranslation();
+	return <VerticalBarAction {...props} title={t('Back')} name='arrow-back' />;
+};
+
+export default memo(VerticalBarBack);
diff --git a/apps/meteor/client/components/VerticalBar/index.ts b/apps/meteor/client/components/VerticalBar/index.ts
index 9d5d37e9246d..e970ab61915a 100644
--- a/apps/meteor/client/components/VerticalBar/index.ts
+++ b/apps/meteor/client/components/VerticalBar/index.ts
@@ -1,7 +1,7 @@
 import VerticalBar from './VerticalBar';
 import VerticalBarAction from './VerticalBarAction';
-import VerticalBarActionBack from './VerticalBarActionBack';
 import VerticalBarActions from './VerticalBarActions';
+import VerticalBarBack from './VerticalBarBack';
 import VerticalBarButton from './VerticalBarButton';
 import VerticalBarClose from './VerticalBarClose';
 import VerticalBarContent from './VerticalBarContent';
@@ -26,5 +26,5 @@ export default Object.assign(VerticalBar, {
 	ScrollableContent: VerticalBarScrollableContent,
 	Skeleton: VerticalBarSkeleton,
 	Button: VerticalBarButton,
-	Back: VerticalBarActionBack,
+	Back: VerticalBarBack,
 });
diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/AddUsers/AddUsers.stories.tsx b/apps/meteor/client/views/room/contextualBar/RoomMembers/AddUsers/AddUsers.stories.tsx
index 0ee902a32686..e45f0f55158d 100644
--- a/apps/meteor/client/views/room/contextualBar/RoomMembers/AddUsers/AddUsers.stories.tsx
+++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/AddUsers/AddUsers.stories.tsx
@@ -17,5 +17,5 @@ export default {
 export const Default: ComponentStory<typeof AddUsers> = (args) => <AddUsers {...args} />;
 Default.storyName = 'AddUsers';
 Default.args = {
-	value: 'rocket.cat',
+	users: ['rocket.cat'],
 };
diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/AddUsers/AddUsers.js b/apps/meteor/client/views/room/contextualBar/RoomMembers/AddUsers/AddUsers.tsx
similarity index 61%
rename from apps/meteor/client/views/room/contextualBar/RoomMembers/AddUsers/AddUsers.js
rename to apps/meteor/client/views/room/contextualBar/RoomMembers/AddUsers/AddUsers.tsx
index a6f3db83a52e..ae39742aac61 100644
--- a/apps/meteor/client/views/room/contextualBar/RoomMembers/AddUsers/AddUsers.js
+++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/AddUsers/AddUsers.tsx
@@ -1,11 +1,20 @@
+import { IUser } from '@rocket.chat/core-typings';
 import { Field, Button } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
-import React from 'react';
+import React, { ReactElement } from 'react';
 
 import UserAutoCompleteMultiple from '../../../../../components/UserAutoCompleteMultiple';
 import VerticalBar from '../../../../../components/VerticalBar';
 
-const AddUsers = ({ onClickClose, onClickBack, onClickSave, value, onChange }) => {
+type AddUsersProps = {
+	onClickClose?: () => void;
+	onClickBack?: () => void;
+	onClickSave: () => Promise<void>;
+	users: IUser['username'][];
+	onChange: (value: IUser['username'][], action?: string) => void;
+};
+
+const AddUsers = ({ onClickClose, onClickBack, onClickSave, users, onChange }: AddUsersProps): ReactElement => {
 	const t = useTranslation();
 
 	return (
@@ -18,11 +27,11 @@ const AddUsers = ({ onClickClose, onClickBack, onClickSave, value, onChange }) =
 			<VerticalBar.ScrollableContent>
 				<Field>
 					<Field.Label flexGrow={0}>{t('Choose_users')}</Field.Label>
-					<UserAutoCompleteMultiple value={value} onChange={onChange} placeholder={t('Choose_users')} />
+					<UserAutoCompleteMultiple value={users} onChange={onChange} placeholder={t('Choose_users')} />
 				</Field>
 			</VerticalBar.ScrollableContent>
 			<VerticalBar.Footer>
-				<Button primary disabled={!value || value.length === 0} onClick={onClickSave}>
+				<Button primary disabled={!users || users.length === 0} onClick={onClickSave}>
 					{t('Add_users')}
 				</Button>
 			</VerticalBar.Footer>
diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/AddUsers/AddUsersWithData.js b/apps/meteor/client/views/room/contextualBar/RoomMembers/AddUsers/AddUsersWithData.tsx
similarity index 67%
rename from apps/meteor/client/views/room/contextualBar/RoomMembers/AddUsers/AddUsersWithData.js
rename to apps/meteor/client/views/room/contextualBar/RoomMembers/AddUsers/AddUsersWithData.tsx
index 90bc58d23dfd..e088874417c5 100644
--- a/apps/meteor/client/views/room/contextualBar/RoomMembers/AddUsers/AddUsersWithData.js
+++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/AddUsers/AddUsersWithData.tsx
@@ -1,20 +1,31 @@
+import { IRoom, IUser } from '@rocket.chat/core-typings';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useToastMessageDispatch, useMethod, useTranslation } from '@rocket.chat/ui-contexts';
-import React from 'react';
+import React, { ReactElement } from 'react';
 
 import { useForm } from '../../../../../hooks/useForm';
 import { useTabBarClose } from '../../../providers/ToolboxProvider';
 import AddUsers from './AddUsers';
 
-const AddUsersWithData = ({ rid, onClickBack, reload }) => {
+type AddUsersWithDataProps = {
+	rid: IRoom['_id'];
+	onClickBack: () => void;
+	reload: () => void;
+};
+
+type AddUsersInitialProps = {
+	users: IUser['username'][];
+};
+
+const AddUsersWithData = ({ rid, onClickBack, reload }: AddUsersWithDataProps): ReactElement => {
 	const t = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
 
 	const onClickClose = useTabBarClose();
 	const saveAction = useMethod('addUsersToRoom');
 
-	const { values, handlers } = useForm({ users: [] });
-	const { users } = values;
+	const { values, handlers } = useForm({ users: [] as IUser['username'][] });
+	const { users } = values as AddUsersInitialProps;
 	const { handleUsers } = handlers;
 
 	const onChangeUsers = useMutableCallback((value, action) => {
@@ -38,7 +49,7 @@ const AddUsersWithData = ({ rid, onClickBack, reload }) => {
 		}
 	});
 
-	return <AddUsers onClickClose={onClickClose} onClickBack={onClickBack} onClickSave={handleSave} value={users} onChange={onChangeUsers} />;
+	return <AddUsers onClickClose={onClickClose} onClickBack={onClickBack} onClickSave={handleSave} users={users} onChange={onChangeUsers} />;
 };
 
 export default AddUsersWithData;