index.tsx 5.26 KB
Newer Older
1
import React from 'react';
2
import { StyleSheet, Text } from 'react-native';
3
import { StackNavigationOptions, StackNavigationProp } from '@react-navigation/stack';
4
5
6
7
import { connect } from 'react-redux';

import { themes } from '../../constants/colors';
import StatusBar from '../../containers/StatusBar';
8
import * as List from '../../containers/List';
9
10
11
12
13
14
import I18n from '../../i18n';
import RocketChat from '../../lib/rocketchat';
import { withTheme } from '../../theme';
import SafeAreaView from '../../containers/SafeAreaView';
import ActivityIndicator from '../../containers/ActivityIndicator';
import { getUserSelector } from '../../selectors/login';
15
import sharedStyles from '../Styles';
16
import { OPTIONS } from './options';
17
import { ProfileStackParamList } from '../../stacks/types';
18
19
20
21
22
23
24

const styles = StyleSheet.create({
	pickerText: {
		...sharedStyles.textRegular,
		fontSize: 16
	}
});
25

26
type TKey = 'desktopNotifications' | 'pushNotifications' | 'emailNotificationMode';
27
28
29
30

interface IUserNotificationPreferencesViewState {
	preferences: {
		desktopNotifications?: string;
31
		pushNotifications?: string;
32
33
34
35
		emailNotificationMode?: string;
	};
	loading: boolean;
}
36

37
interface IUserNotificationPreferencesViewProps {
38
	navigation: StackNavigationProp<ProfileStackParamList, 'UserNotificationPrefView'>;
39
40
41
	theme: string;
	user: {
		id: string;
42
	};
43
}
44

45
46
47
48
49
50
51
52
53
class UserNotificationPreferencesView extends React.Component<
	IUserNotificationPreferencesViewProps,
	IUserNotificationPreferencesViewState
> {
	static navigationOptions = (): StackNavigationOptions => ({
		title: I18n.t('Notification_Preferences')
	});

	constructor(props: IUserNotificationPreferencesViewProps) {
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
		super(props);
		this.state = {
			preferences: {},
			loading: false
		};
	}

	async componentDidMount() {
		const { user } = this.props;
		const { id } = user;
		const result = await RocketChat.getUserPreferences(id);
		const { preferences } = result;
		this.setState({ preferences, loading: true });
	}

69
	findDefaultOption = (key: TKey) => {
70
71
72
		const { preferences } = this.state;
		const option = preferences[key] ? OPTIONS[key].find(item => item.value === preferences[key]) : OPTIONS[key][0];
		return option;
73
	};
74

75
	renderPickerOption = (key: TKey) => {
76
		const { theme } = this.props;
77
		const text = this.findDefaultOption(key);
78
		return <Text style={[styles.pickerText, { color: themes[theme].actionTintColor }]}>{I18n.t(text?.label)}</Text>;
79
	};
80

81
	pickerSelection = (title: string, key: TKey) => {
82
83
84
		const { preferences } = this.state;
		const { navigation } = this.props;
		let values = OPTIONS[key];
85
86

		const defaultOption = this.findDefaultOption(key);
87
		if (OPTIONS[key][0]?.value !== 'default') {
88
89
90
91
92
			const defaultValue = { label: `${I18n.t('Default')} (${I18n.t(defaultOption?.label)})` } as {
				label: string;
				value: string;
			};
			values = [defaultValue, ...OPTIONS[key]];
93
		}
94

95
96
97
98
		navigation.navigate('PickerView', {
			title,
			data: values,
			value: preferences[key],
99
			onChangeValue: (value: string) => this.onValueChangePicker(key, value ?? defaultOption?.value)
100
		});
101
	};
102

103
	onValueChangePicker = (key: TKey, value: string) => this.saveNotificationPreferences({ [key]: value.toString() });
104

105
	saveNotificationPreferences = async (params: { [key: string]: string }) => {
106
107
108
		const { user } = this.props;
		const { id } = user;
		const result = await RocketChat.setUserPreferences(id, params);
109
110
111
		const {
			user: { settings }
		} = result;
112
		this.setState({ preferences: settings.preferences });
113
	};
114
115
116
117
118

	render() {
		const { theme } = this.props;
		const { loading } = this.state;
		return (
119
120
121
			<SafeAreaView testID='user-notification-preference-view'>
				<StatusBar />
				<List.Container>
122
123
124
125
126
127
128
					{loading ? (
						<>
							<List.Section title='Desktop_Notifications'>
								<List.Separator />
								<List.Item
									title='Alert'
									testID='user-notification-preference-view-alert'
129
									onPress={(title: string) => this.pickerSelection(title, 'desktopNotifications')}
130
131
132
133
134
135
136
137
138
139
140
									right={() => this.renderPickerOption('desktopNotifications')}
								/>
								<List.Separator />
								<List.Info info='Desktop_Alert_info' />
							</List.Section>

							<List.Section title='Push_Notifications'>
								<List.Separator />
								<List.Item
									title='Alert'
									testID='user-notification-preference-view-push-notification'
141
142
									onPress={(title: string) => this.pickerSelection(title, 'pushNotifications')}
									right={() => this.renderPickerOption('pushNotifications')}
143
144
145
146
147
148
149
150
151
152
								/>
								<List.Separator />
								<List.Info info='Push_Notifications_Alert_Info' />
							</List.Section>

							<List.Section title='Email'>
								<List.Separator />
								<List.Item
									title='Alert'
									testID='user-notification-preference-view-email-alert'
153
									onPress={(title: string) => this.pickerSelection(title, 'emailNotificationMode')}
154
155
156
157
158
159
160
161
162
									right={() => this.renderPickerOption('emailNotificationMode')}
								/>
								<List.Separator />
								<List.Info info='You_need_to_verifiy_your_email_address_to_get_notications' />
							</List.Section>
						</>
					) : (
						<ActivityIndicator theme={theme} />
					)}
163
				</List.Container>
164
165
166
167
168
			</SafeAreaView>
		);
	}
}

169
const mapStateToProps = (state: any) => ({
170
171
172
173
	user: getUserSelector(state)
});

export default connect(mapStateToProps)(withTheme(UserNotificationPreferencesView));