From 311b34634728c1a2766d830f31a8db54a0945206 Mon Sep 17 00:00:00 2001
From: Gerzon Z <gerzonzcanario@gmail.com>
Date: Fri, 13 May 2022 09:02:01 -0400
Subject: [PATCH] Chore: evaluate `InviteUsersView` (#4100)

---
 app/stacks/InsideStack.tsx             |   2 +-
 app/stacks/MasterDetailStack/index.tsx |   2 +-
 app/views/InviteUsersView/index.tsx    | 113 ++++++++++---------------
 3 files changed, 48 insertions(+), 69 deletions(-)

diff --git a/app/stacks/InsideStack.tsx b/app/stacks/InsideStack.tsx
index f2f8c8d4f..6b903e9c9 100644
--- a/app/stacks/InsideStack.tsx
+++ b/app/stacks/InsideStack.tsx
@@ -101,7 +101,7 @@ const ChatsStackNavigator = () => {
 				options={SearchMessagesView.navigationOptions}
 			/>
 			<ChatsStack.Screen name='SelectedUsersView' component={SelectedUsersView} />
-			<ChatsStack.Screen name='InviteUsersView' component={InviteUsersView} options={InviteUsersView.navigationOptions} />
+			<ChatsStack.Screen name='InviteUsersView' component={InviteUsersView} />
 			<ChatsStack.Screen
 				name='InviteUsersEditView'
 				component={InviteUsersEditView}
diff --git a/app/stacks/MasterDetailStack/index.tsx b/app/stacks/MasterDetailStack/index.tsx
index 99f3914f4..f33e5fe4b 100644
--- a/app/stacks/MasterDetailStack/index.tsx
+++ b/app/stacks/MasterDetailStack/index.tsx
@@ -129,7 +129,7 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
 					options={SearchMessagesView.navigationOptions}
 				/>
 				<ModalStack.Screen name='SelectedUsersView' component={SelectedUsersView} />
-				<ModalStack.Screen name='InviteUsersView' component={InviteUsersView} options={InviteUsersView.navigationOptions} />
+				<ModalStack.Screen name='InviteUsersView' component={InviteUsersView} />
 				<ModalStack.Screen name='AddChannelTeamView' component={AddChannelTeamView} />
 				<ModalStack.Screen
 					name='AddExistingChannelView'
diff --git a/app/views/InviteUsersView/index.tsx b/app/views/InviteUsersView/index.tsx
index c7a6f225d..0850f28d1 100644
--- a/app/views/InviteUsersView/index.tsx
+++ b/app/views/InviteUsersView/index.tsx
@@ -1,11 +1,9 @@
-import { StackNavigationOptions } from '@react-navigation/stack';
+import React, { useEffect } from 'react';
 import moment from 'moment';
-import React from 'react';
 import { ScrollView, Share, View } from 'react-native';
-import { connect } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
 import { inviteLinksClear, inviteLinksCreate } from '../../actions/inviteLinks';
-import { themes } from '../../lib/constants';
 import Button from '../../containers/Button';
 import Markdown from '../../containers/markdown';
 import SafeAreaView from '../../containers/SafeAreaView';
@@ -13,57 +11,48 @@ import StatusBar from '../../containers/StatusBar';
 import RCTextInput from '../../containers/TextInput';
 import { IApplicationState, IBaseScreen } from '../../definitions';
 import I18n from '../../i18n';
-import { TInvite } from '../../reducers/inviteLinks';
 import { ChatsStackParamList } from '../../stacks/types';
-import { withTheme } from '../../theme';
+import { useTheme } from '../../theme';
 import { events, logEvent } from '../../utils/log';
 import scrollPersistTaps from '../../utils/scrollPersistTaps';
 import styles from './styles';
 
-interface IInviteUsersViewProps extends IBaseScreen<ChatsStackParamList, 'InviteUsersView'> {
-	timeDateFormat: string;
-	invite: TInvite;
-}
-class InviteUsersView extends React.Component<IInviteUsersViewProps, any> {
-	static navigationOptions = (): StackNavigationOptions => ({
-		title: I18n.t('Invite_users')
-	});
+type IInviteUsersViewProps = IBaseScreen<ChatsStackParamList, 'InviteUsersView'>;
 
-	private rid: string;
+const InviteUsersView = ({ route, navigation }: IInviteUsersViewProps): React.ReactElement => {
+	const rid = route.params?.rid;
+	const timeDateFormat = useSelector((state: IApplicationState) => state.settings.Message_TimeAndDateFormat as string);
+	const invite = useSelector((state: IApplicationState) => state.inviteLinks.invite);
+	const { colors, theme } = useTheme();
+	const dispatch = useDispatch();
 
-	constructor(props: IInviteUsersViewProps) {
-		super(props);
-		this.rid = props.route.params?.rid;
-	}
+	useEffect(() => {
+		navigation.setOptions({
+			title: I18n.t('Invite_users')
+		});
+	}, []);
 
-	componentDidMount() {
-		const { dispatch } = this.props;
-		dispatch(inviteLinksCreate(this.rid));
-	}
+	useEffect(() => {
+		dispatch(inviteLinksCreate(rid));
+		return () => {
+			dispatch(inviteLinksClear());
+		};
+	}, []);
 
-	componentWillUnmount() {
-		const { dispatch } = this.props;
-		dispatch(inviteLinksClear());
-	}
-
-	share = () => {
+	const share = () => {
 		logEvent(events.IU_SHARE);
-		const { invite } = this.props;
 		if (!invite || !invite.url) {
 			return;
 		}
 		Share.share({ message: invite.url });
 	};
 
-	edit = () => {
+	const edit = () => {
 		logEvent(events.IU_GO_IU_EDIT);
-		const { navigation } = this.props;
-		navigation.navigate('InviteUsersEditView', { rid: this.rid });
+		navigation.navigate('InviteUsersEditView', { rid });
 	};
 
-	linkExpirationText = () => {
-		const { timeDateFormat, invite } = this.props;
-
+	const linkExpirationText = () => {
 		if (!invite || !invite.url) {
 			return null;
 		}
@@ -90,38 +79,28 @@ class InviteUsersView extends React.Component<IInviteUsersViewProps, any> {
 		return I18n.t('Your_invite_link_will_never_expire');
 	};
 
-	renderExpiration = () => {
-		const { theme } = this.props;
-		const expirationMessage = this.linkExpirationText();
+	const renderExpiration = () => {
+		const expirationMessage = linkExpirationText();
 		return <Markdown msg={expirationMessage} theme={theme} />;
 	};
 
-	render() {
-		const { theme, invite } = this.props;
-		return (
-			<SafeAreaView style={{ backgroundColor: themes[theme].backgroundColor }}>
-				{/* @ts-ignore*/}
-				<ScrollView
-					{...scrollPersistTaps}
-					style={{ backgroundColor: themes[theme].auxiliaryBackground }}
-					showsVerticalScrollIndicator={false}>
-					<StatusBar />
-					<View style={styles.innerContainer}>
-						<RCTextInput label={I18n.t('Invite_Link')} theme={theme} value={invite && invite.url} editable={false} />
-						{this.renderExpiration()}
-						<View style={[styles.divider, { backgroundColor: themes[theme].separatorColor }]} />
-						<Button title={I18n.t('Share_Link')} type='primary' onPress={this.share} theme={theme} />
-						<Button title={I18n.t('Edit_Invite')} type='secondary' onPress={this.edit} theme={theme} />
-					</View>
-				</ScrollView>
-			</SafeAreaView>
-		);
-	}
-}
+	return (
+		<SafeAreaView style={{ backgroundColor: colors.backgroundColor }}>
+			<ScrollView
+				{...scrollPersistTaps}
+				style={{ backgroundColor: colors.auxiliaryBackground }}
+				showsVerticalScrollIndicator={false}>
+				<StatusBar />
+				<View style={styles.innerContainer}>
+					<RCTextInput label={I18n.t('Invite_Link')} theme={theme} value={invite && invite.url} editable={false} />
+					{renderExpiration()}
+					<View style={[styles.divider, { backgroundColor: colors.separatorColor }]} />
+					<Button title={I18n.t('Share_Link')} type='primary' onPress={share} theme={theme} />
+					<Button title={I18n.t('Edit_Invite')} type='secondary' onPress={edit} theme={theme} />
+				</View>
+			</ScrollView>
+		</SafeAreaView>
+	);
+};
 
-const mapStateToProps = (state: IApplicationState) => ({
-	timeDateFormat: state.settings.Message_TimeAndDateFormat as string,
-	invite: state.inviteLinks.invite
-});
-
-export default connect(mapStateToProps)(withTheme(InviteUsersView));
+export default InviteUsersView;