index.tsx 4.04 KB
Newer Older
Diego Mello's avatar
Diego Mello committed
1
import React from 'react';
2
import { TextInputProps, View } from 'react-native';
Diego Mello's avatar
Diego Mello committed
3
4
import { connect } from 'react-redux';
import RNPickerSelect from 'react-native-picker-select';
5
6
7
import { StackNavigationOptions, StackNavigationProp } from '@react-navigation/stack';
import { RouteProp } from '@react-navigation/core';
import { Dispatch } from 'redux';
Diego Mello's avatar
Diego Mello committed
8
9

import {
10
11
	inviteLinksCreate as inviteLinksCreateAction,
	inviteLinksSetParams as inviteLinksSetParamsAction
Diego Mello's avatar
Diego Mello committed
12
} from '../../actions/inviteLinks';
13
import * as List from '../../containers/List';
Diego Mello's avatar
Diego Mello committed
14
15
16
17
18
import Button from '../../containers/Button';
import I18n from '../../i18n';
import StatusBar from '../../containers/StatusBar';
import { themes } from '../../constants/colors';
import { withTheme } from '../../theme';
19
import SafeAreaView from '../../containers/SafeAreaView';
20
21
import { events, logEvent } from '../../utils/log';
import styles from './styles';
22
import { ChatsStackParamList } from '../../stacks/types';
Diego Mello's avatar
Diego Mello committed
23
24

const OPTIONS = {
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
	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
		}
	]
Diego Mello's avatar
Diego Mello committed
69
70
};

71
72
73
interface IInviteUsersEditViewProps {
	navigation: StackNavigationProp<ChatsStackParamList, 'InviteUsersEditView'>;
	route: RouteProp<ChatsStackParamList, 'InviteUsersEditView'>;
74
75
76
77
78
79
80
	theme: string;
	createInviteLink(rid: string): void;
	inviteLinksSetParams(params: { [key: string]: number }): void;
	days: number;
	maxUses: number;
}

81
class InviteUsersEditView extends React.Component<IInviteUsersEditViewProps, any> {
82
	static navigationOptions = (): StackNavigationOptions => ({
83
		title: I18n.t('Invite_users')
84
	});
Diego Mello's avatar
Diego Mello committed
85

86
	private rid: string;
Diego Mello's avatar
Diego Mello committed
87

88
	constructor(props: IInviteUsersEditViewProps) {
Diego Mello's avatar
Diego Mello committed
89
		super(props);
90
		this.rid = props.route.params?.rid;
Diego Mello's avatar
Diego Mello committed
91
92
	}

93
	onValueChangePicker = (key: string, value: number) => {
94
		logEvent(events.IU_EDIT_SET_LINK_PARAM);
Diego Mello's avatar
Diego Mello committed
95
96
97
98
99
		const { inviteLinksSetParams } = this.props;
		const params = {
			[key]: value
		};
		inviteLinksSetParams(params);
100
	};
Diego Mello's avatar
Diego Mello committed
101
102

	createInviteLink = () => {
103
		logEvent(events.IU_EDIT_CREATE_LINK);
Diego Mello's avatar
Diego Mello committed
104
105
106
		const { createInviteLink, navigation } = this.props;
		createInviteLink(this.rid);
		navigation.pop();
107
	};
Diego Mello's avatar
Diego Mello committed
108

109
	renderPicker = (key: 'days' | 'maxUses', first: string) => {
Diego Mello's avatar
Diego Mello committed
110
111
		const { props } = this;
		const { theme } = props;
112
		const textInputStyle: TextInputProps = { style: { ...styles.pickerText, color: themes[theme].actionTintColor } };
113
114
115
116
117
118
		const firstEl = [
			{
				label: I18n.t(first),
				value: 0
			}
		];
Diego Mello's avatar
Diego Mello committed
119
120
121
122
		return (
			<RNPickerSelect
				style={{ viewContainer: styles.viewContainer }}
				value={props[key]}
123
				textInputProps={textInputStyle}
Diego Mello's avatar
Diego Mello committed
124
125
126
				useNativeAndroidPickerStyle={false}
				placeholder={{}}
				onValueChange={value => this.onValueChangePicker(key, value)}
127
				items={firstEl.concat(OPTIONS[key])}
Diego Mello's avatar
Diego Mello committed
128
129
			/>
		);
130
	};
Diego Mello's avatar
Diego Mello committed
131
132
133
134

	render() {
		const { theme } = this.props;
		return (
135
136
137
138
139
			<SafeAreaView>
				<List.Container>
					<StatusBar />
					<List.Section>
						<List.Separator />
140
						<List.Item title='Expiration_Days' right={() => this.renderPicker('days', 'Never')} />
141
						<List.Separator />
142
						<List.Item title='Max_number_of_uses' right={() => this.renderPicker('maxUses', 'No_limit')} />
143
144
						<List.Separator />
					</List.Section>
Diego Mello's avatar
Diego Mello committed
145
					<View style={styles.innerContainer}>
146
						<Button title={I18n.t('Generate_New_Link')} type='primary' onPress={this.createInviteLink} theme={theme} />
Diego Mello's avatar
Diego Mello committed
147
					</View>
148
				</List.Container>
Diego Mello's avatar
Diego Mello committed
149
150
151
152
153
			</SafeAreaView>
		);
	}
}

154
const mapStateToProps = (state: any) => ({
Diego Mello's avatar
Diego Mello committed
155
156
157
158
	days: state.inviteLinks.days,
	maxUses: state.inviteLinks.maxUses
});

159
160
161
const mapDispatchToProps = (dispatch: Dispatch) => ({
	inviteLinksSetParams: (params: object) => dispatch(inviteLinksSetParamsAction(params)),
	createInviteLink: (rid: string) => dispatch(inviteLinksCreateAction(rid))
Diego Mello's avatar
Diego Mello committed
162
163
});

164
export default connect(mapStateToProps, mapDispatchToProps)(withTheme(InviteUsersEditView));