Chore: Hooks app/views/InviteUsersEditView (#4670)

* Chore: Hooks app/views/InviteUsersEditView

* minor tweak

* switch value name

app/stacks/InsideStack.tsx

@@ -105,11 +105,7 @@ const ChatsStackNavigator = () => {
 			/>
 			<ChatsStack.Screen name='SelectedUsersView' component={SelectedUsersView} />
 			<ChatsStack.Screen name='InviteUsersView' component={InviteUsersView} />
-			<ChatsStack.Screen
+			<ChatsStack.Screen name='InviteUsersEditView' component={InviteUsersEditView} />
-				name='InviteUsersEditView'
-				component={InviteUsersEditView}
-				options={InviteUsersEditView.navigationOptions}
-			/>
 			<ChatsStack.Screen name='MessagesView' component={MessagesView} />
 			<ChatsStack.Screen name='AutoTranslateView' component={AutoTranslateView} options={AutoTranslateView.navigationOptions} />
 			<ChatsStack.Screen name='DirectoryView' component={DirectoryView} options={DirectoryView.navigationOptions} />

app/stacks/MasterDetailStack/index.tsx

@@ -142,11 +142,7 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
 					component={AddExistingChannelView}
 					options={AddExistingChannelView.navigationOptions}
 				/>
-				<ModalStack.Screen
+				<ModalStack.Screen name='InviteUsersEditView' component={InviteUsersEditView} />
-					name='InviteUsersEditView'
-					component={InviteUsersEditView}
-					options={InviteUsersEditView.navigationOptions}
-				/>
 				<ModalStack.Screen name='MessagesView' component={MessagesView} />
 				<ModalStack.Screen name='AutoTranslateView' component={AutoTranslateView} options={AutoTranslateView.navigationOptions} />
 				<ModalStack.Screen

app/views/InviteUsersEditView/Picker.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { TextInputProps } from 'react-native';
+import RNPickerSelect from 'react-native-picker-select';
+import { useDispatch } from 'react-redux';
+
+import { inviteLinksSetParams } from '../../actions/inviteLinks';
+import { useTheme } from '../../theme';
+import { useAppSelector } from '../../lib/hooks';
+import I18n from '../../i18n';
+import styles from './styles';
+import { events, logEvent } from '../../lib/methods/helpers/log';
+
+const OPTIONS = {
+	days: [
+		{
+			label: '1',
+			value: 1
+		},
+		{
+			label: '7',
+			value: 7
+		},
+		{
+			label: '15',
+			value: 15
+		},
+		{
+			label: '30',
+			value: 30
+		}
+	],
+	maxUses: [
+		{
+			label: '1',
+			value: 1
+		},
+		{
+			label: '5',
+			value: 5
+		},
+		{
+			label: '10',
+			value: 10
+		},
+		{
+			label: '25',
+			value: 25
+		},
+		{
+			label: '50',
+			value: 50
+		},
+		{
+			label: '100',
+			value: 100
+		}
+	]
+};
+
+const Picker = ({ param, first }: { param: 'days' | 'maxUses'; first: string }): JSX.Element => {
+	const { colors } = useTheme();
+	const inviteLinkParam = useAppSelector(state => state.inviteLinks[param]);
+	const dispatch = useDispatch();
+
+	const onValueChangePicker = (value: number) => {
+		logEvent(events.IU_EDIT_SET_LINK_PARAM);
+		const params = {
+			[param]: value
+		};
+		dispatch(inviteLinksSetParams(params));
+	};
+
+	const textInputStyle: TextInputProps = { style: { ...styles.pickerText, color: colors.actionTintColor } };
+	const firstEl = [
+		{
+			label: I18n.t(first),
+			value: 0
+		}
+	];
+	return (
+		<RNPickerSelect
+			style={{ viewContainer: styles.viewContainer }}
+			value={inviteLinkParam}
+			textInputProps={textInputStyle}
+			useNativeAndroidPickerStyle={false}
+			onValueChange={value => onValueChangePicker(value)}
+			items={firstEl.concat(OPTIONS[param])}
+		/>
+	);
+};
+
+export default Picker;

app/views/InviteUsersEditView/index.tsx

@@ -1,149 +1,54 @@
-import { StackNavigationOptions } from '@react-navigation/stack';
+import { StackNavigationProp } from '@react-navigation/stack';
-import React from 'react';
+import React, { useLayoutEffect } from 'react';
-import { TextInputProps, View } from 'react-native';
+import { View } from 'react-native';
-import RNPickerSelect from 'react-native-picker-select';
+import { useDispatch } from 'react-redux';
-import { connect } from 'react-redux';
+import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
 
-import { inviteLinksCreate, inviteLinksSetParams } from '../../actions/inviteLinks';
+import { inviteLinksCreate } from '../../actions/inviteLinks';
-import { themes } from '../../lib/constants';
 import Button from '../../containers/Button';
 import * as List from '../../containers/List';
 import SafeAreaView from '../../containers/SafeAreaView';
 import StatusBar from '../../containers/StatusBar';
-import { IApplicationState, IBaseScreen } from '../../definitions';
 import I18n from '../../i18n';
 import { ChatsStackParamList } from '../../stacks/types';
-import { withTheme } from '../../theme';
 import { events, logEvent } from '../../lib/methods/helpers/log';
 import styles from './styles';
+import Picker from './Picker';
 
-const OPTIONS = {
+const InviteUsersEditView = () => {
-	days: [
+	const navigation = useNavigation<StackNavigationProp<ChatsStackParamList, 'InviteUsersEditView'>>();
-		{
+	const { rid } = useRoute<RouteProp<ChatsStackParamList, 'InviteUsersEditView'>>().params;
-			label: '1',
+	const dispatch = useDispatch();
-			value: 1
-		},
-		{
-			label: '7',
-			value: 7
-		},
-		{
-			label: '15',
-			value: 15
-		},
-		{
-			label: '30',
-			value: 30
-		}
-	],
-	maxUses: [
-		{
-			label: '1',
-			value: 1
-		},
-		{
-			label: '5',
-			value: 5
-		},
-		{
-			label: '10',
-			value: 10
-		},
-		{
-			label: '25',
-			value: 25
-		},
-		{
-			label: '50',
-			value: 50
-		},
-		{
-			label: '100',
-			value: 100
-		}
-	]
-};
 
-interface IInviteUsersEditViewProps extends IBaseScreen<ChatsStackParamList, 'InviteUsersEditView'> {
+	useLayoutEffect(() => {
-	days: number;
+		navigation.setOptions({
-	maxUses: number;
+			title: I18n.t('Invite_users')
-}
+		});
+	}, [navigation]);
 
-class InviteUsersEditView extends React.Component<IInviteUsersEditViewProps, any> {
+	const createInviteLink = () => {
-	static navigationOptions = (): StackNavigationOptions => ({
-		title: I18n.t('Invite_users')
-	});
-
-	private rid: string;
-
-	constructor(props: IInviteUsersEditViewProps) {
-		super(props);
-		this.rid = props.route.params?.rid;
-	}
-
-	onValueChangePicker = (key: string, value: number) => {
-		const { dispatch } = this.props;
-		logEvent(events.IU_EDIT_SET_LINK_PARAM);
-		const params = {
-			[key]: value
-		};
-		dispatch(inviteLinksSetParams(params));
-	};
-
-	createInviteLink = () => {
-		const { dispatch, navigation } = this.props;
 		logEvent(events.IU_EDIT_CREATE_LINK);
-		dispatch(inviteLinksCreate(this.rid));
+		dispatch(inviteLinksCreate(rid));
 		navigation.pop();
 	};
 
-	renderPicker = (key: 'days' | 'maxUses', first: string) => {
+	return (
-		const { props } = this;
+		<SafeAreaView>
-		const { theme } = props;
+			<List.Container>
-		const textInputStyle: TextInputProps = { style: { ...styles.pickerText, color: themes[theme].actionTintColor } };
+				<StatusBar />
-		const firstEl = [
+				<List.Section>
-			{
+					<List.Separator />
-				label: I18n.t(first),
+					<List.Item title='Expiration_Days' right={() => <Picker param={'days'} first={'Never'} />} />
-				value: 0
+					<List.Separator />
-			}
+					<List.Item title='Max_number_of_uses' right={() => <Picker param='maxUses' first='No_limit' />} />
-		];
+					<List.Separator />
-		return (
+				</List.Section>
-			<RNPickerSelect
+				<View style={styles.innerContainer}>
-				style={{ viewContainer: styles.viewContainer }}
+					<Button title={I18n.t('Generate_New_Link')} type='primary' onPress={createInviteLink} />
-				value={props[key]}
+				</View>
-				textInputProps={textInputStyle}
+			</List.Container>
-				useNativeAndroidPickerStyle={false}
+		</SafeAreaView>
-				placeholder={{}}
+	);
-				onValueChange={value => this.onValueChangePicker(key, value)}
+};
-				items={firstEl.concat(OPTIONS[key])}
-			/>
-		);
-	};
 
-	render() {
+export default InviteUsersEditView;
-		return (
-			<SafeAreaView>
-				<List.Container>
-					<StatusBar />
-					<List.Section>
-						<List.Separator />
-						<List.Item title='Expiration_Days' right={() => this.renderPicker('days', 'Never')} />
-						<List.Separator />
-						<List.Item title='Max_number_of_uses' right={() => this.renderPicker('maxUses', 'No_limit')} />
-						<List.Separator />
-					</List.Section>
-					<View style={styles.innerContainer}>
-						<Button title={I18n.t('Generate_New_Link')} type='primary' onPress={this.createInviteLink} />
-					</View>
-				</List.Container>
-			</SafeAreaView>
-		);
-	}
-}
-
-const mapStateToProps = (state: IApplicationState) => ({
-	days: state.inviteLinks.days,
-	maxUses: state.inviteLinks.maxUses
-});
-
-export default connect(mapStateToProps)(withTheme(InviteUsersEditView));