Chore: evaluate `InviteUsersView` (#4100)

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}

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'

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'> {
+type IInviteUsersViewProps = IBaseScreen<ChatsStackParamList, 'InviteUsersView'>;
-	timeDateFormat: string;
+
-	invite: TInvite;
+const InviteUsersView = ({ route, navigation }: IInviteUsersViewProps): React.ReactElement => {
-}
+	const rid = route.params?.rid;
-class InviteUsersView extends React.Component<IInviteUsersViewProps, any> {
+	const timeDateFormat = useSelector((state: IApplicationState) => state.settings.Message_TimeAndDateFormat as string);
-	static navigationOptions = (): StackNavigationOptions => ({
+	const invite = useSelector((state: IApplicationState) => state.inviteLinks.invite);
+	const { colors, theme } = useTheme();
+	const dispatch = useDispatch();
+
+	useEffect(() => {
+		navigation.setOptions({
 			title: I18n.t('Invite_users')
 		});
+	}, []);
 
-	private rid: string;
+	useEffect(() => {
-
+		dispatch(inviteLinksCreate(rid));
-	constructor(props: IInviteUsersViewProps) {
+		return () => {
-		super(props);
-		this.rid = props.route.params?.rid;
-	}
-
-	componentDidMount() {
-		const { dispatch } = this.props;
-		dispatch(inviteLinksCreate(this.rid));
-	}
-
-	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 });
-		navigation.navigate('InviteUsersEditView', { rid: this.rid });
 	};
 
-	linkExpirationText = () => {
+	const linkExpirationText = () => {
-		const { timeDateFormat, invite } = this.props;
-
 		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 renderExpiration = () => {
-		const { theme } = this.props;
+		const expirationMessage = linkExpirationText();
-		const expirationMessage = this.linkExpirationText();
 		return <Markdown msg={expirationMessage} theme={theme} />;
 	};
 
-	render() {
-		const { theme, invite } = this.props;
 	return (
-			<SafeAreaView style={{ backgroundColor: themes[theme].backgroundColor }}>
+		<SafeAreaView style={{ backgroundColor: colors.backgroundColor }}>
-				{/* @ts-ignore*/}
 			<ScrollView
 				{...scrollPersistTaps}
-					style={{ backgroundColor: themes[theme].auxiliaryBackground }}
+				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} />
-						{this.renderExpiration()}
+					{renderExpiration()}
-						<View style={[styles.divider, { backgroundColor: themes[theme].separatorColor }]} />
+					<View style={[styles.divider, { backgroundColor: colors.separatorColor }]} />
-						<Button title={I18n.t('Share_Link')} type='primary' onPress={this.share} theme={theme} />
+					<Button title={I18n.t('Share_Link')} type='primary' onPress={share} theme={theme} />
-						<Button title={I18n.t('Edit_Invite')} type='secondary' onPress={this.edit} theme={theme} />
+					<Button title={I18n.t('Edit_Invite')} type='secondary' onPress={edit} theme={theme} />
 				</View>
 			</ScrollView>
 		</SafeAreaView>
 	);
-	}
+};
-}
 
-const mapStateToProps = (state: IApplicationState) => ({
+export default InviteUsersView;
-	timeDateFormat: state.settings.Message_TimeAndDateFormat as string,
-	invite: state.inviteLinks.invite
-});
-
-export default connect(mapStateToProps)(withTheme(InviteUsersView));