verdnatura-mirror
/
verdnatura-chat
forked from verdnatura-mirror/Rocket.Chat.ReactNative
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Chore: Hooks app/views/UserNotificationPreferenceView (#4502) 

* Chore: Hooks app/views/UserNotificationPreferenceView

* added trycatch and userId

Co-authored-by: Gleidson Daniel Silva <gleidson10daniel@hotmail.com>
This commit is contained in:
Reinaldo Neto 2022-09-22 18:31:23 -03:00 committed by GitHub
parent 214e1cc009
commit b3a286329c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 164 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/definitions/IUser.ts
View File

@ -110,7 +110,7 @@ export interface INotificationPreferences {
enableMessageParserEarlyAdoption: boolean;
desktopNotifications: TNotifications;
pushNotifications: TNotifications;
emailNotificationMode?: 'mentions' | 'nothing';
emailNotificationMode: 'mentions' | 'nothing';
language?: string;
}

6
app/stacks/InsideStack.tsx
View File

@ -150,11 +150,7 @@ const ProfileStackNavigator = () => {
>
<ProfileStack.Screen name='ProfileView' component={ProfileView} options={ProfileView.navigationOptions} />
<ProfileStack.Screen name='UserPreferencesView' component={UserPreferencesView} />
<ProfileStack.Screen
name='UserNotificationPrefView'
component={UserNotificationPrefView}
options={UserNotificationPrefView.navigationOptions}
/>
<ProfileStack.Screen name='UserNotificationPrefView' component={UserNotificationPrefView} />
<ProfileStack.Screen name='PickerView' component={PickerView} options={PickerView.navigationOptions} />
</ProfileStack.Navigator>
);

6
app/stacks/MasterDetailStack/index.tsx
View File

@ -195,11 +195,7 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
<ModalStack.Screen name='E2EHowItWorksView' component={E2EHowItWorksView} />
<ModalStack.Screen name='E2EEnterYourPasswordView' component={E2EEnterYourPasswordView} />
<ModalStack.Screen name='UserPreferencesView' component={UserPreferencesView} />
<ModalStack.Screen
name='UserNotificationPrefView'
component={UserNotificationPrefView}
options={UserNotificationPrefView.navigationOptions}
/>
<ModalStack.Screen name='UserNotificationPrefView' component={UserNotificationPrefView} />
<ModalStack.Screen name='SecurityPrivacyView' component={SecurityPrivacyView} />
<ModalStack.Screen
name='E2EEncryptionSecurityView'

68
app/views/UserNotificationPreferencesView/ListPicker.tsx Normal file
View File

@ -0,0 +1,68 @@
import React, { useState } from 'react';
import { StyleSheet, Text } from 'react-native';
import * as List from '../../containers/List';
import I18n from '../../i18n';
import { useTheme } from '../../theme';
import sharedStyles from '../Styles';
import { OPTIONS } from './options';
import { CustomIcon } from '../../containers/CustomIcon';
import { useActionSheet } from '../../containers/ActionSheet';
const styles = StyleSheet.create({
pickerText: {
...sharedStyles.textRegular,
fontSize: 16
}
});
type TKey = 'desktopNotifications' | 'pushNotifications' | 'emailNotificationMode';
interface IBaseParams {
preference: TKey;
value: string;
onChangeValue: (param: { [key: string]: string }, onError: () => void) => void;
}
const ListPicker = ({
preference,
value,
title,
testID,
onChangeValue
}: {
title: string;
testID: string;
} & IBaseParams) => {
const { showActionSheet, hideActionSheet } = useActionSheet();
const { colors } = useTheme();
const [option, setOption] = useState(
value ? OPTIONS[preference].find(option => option.value === value) : OPTIONS[preference][0]
);
const getOptions = () =>
OPTIONS[preference].map(i => ({
title: I18n.t(i.label, { defaultValue: i.label }),
onPress: () => {
hideActionSheet();
onChangeValue({ [preference]: i.value.toString() }, () => setOption(option));
setOption(i);
},
right: option?.value === i.value ? () => <CustomIcon name={'check'} size={20} color={colors.tintActive} /> : undefined
}));
return (
<List.Item
title={title}
testID={testID}
onPress={() => showActionSheet({ options: getOptions() })}
right={() => (
<Text style={[styles.pickerText, { color: colors.actionTintColor }]}>
{option?.label ? I18n.t(option?.label, { defaultValue: option?.label }) : option?.label}
</Text>
)}
/>
);
};
export default ListPicker;

159
app/views/UserNotificationPreferencesView/index.tsx
View File

@ -1,124 +1,63 @@
import React from 'react';
import { StyleSheet, Text } from 'react-native';
import { StackNavigationOptions, StackNavigationProp } from '@react-navigation/stack';
import { connect } from 'react-redux';
import React, { useEffect, useLayoutEffect, useState } from 'react';
import { StackNavigationProp } from '@react-navigation/stack';
import { useNavigation } from '@react-navigation/native';
import { themes } from '../../lib/constants';
import StatusBar from '../../containers/StatusBar';
import * as List from '../../containers/List';
import I18n from '../../i18n';
import { TSupportedThemes, withTheme } from '../../theme';
import SafeAreaView from '../../containers/SafeAreaView';
import ActivityIndicator from '../../containers/ActivityIndicator';
import { getUserSelector } from '../../selectors/login';
import sharedStyles from '../Styles';
import { OPTIONS } from './options';
import { ProfileStackParamList } from '../../stacks/types';
import { IApplicationState, INotificationPreferences, IUser } from '../../definitions';
import { INotificationPreferences } from '../../definitions';
import { Services } from '../../lib/services';
import { useAppSelector } from '../../lib/hooks';
import ListPicker from './ListPicker';
import log from '../../lib/methods/helpers/log';
const styles = StyleSheet.create({
pickerText: {
...sharedStyles.textRegular,
fontSize: 16
}
});
const UserNotificationPreferencesView = () => {
const [preferences, setPreferences] = useState({} as INotificationPreferences);
const [loading, setLoading] = useState(false);
type TKey = 'desktopNotifications' | 'pushNotifications' | 'emailNotificationMode';
const navigation = useNavigation<StackNavigationProp<ProfileStackParamList, 'UserNotificationPrefView'>>();
const userId = useAppSelector(state => getUserSelector(state).id);
interface IUserNotificationPreferencesViewState {
preferences: INotificationPreferences;
loading: boolean;
}
interface IUserNotificationPreferencesViewProps {
navigation: StackNavigationProp<ProfileStackParamList, 'UserNotificationPrefView'>;
theme: TSupportedThemes;
user: IUser;
}
class UserNotificationPreferencesView extends React.Component<
IUserNotificationPreferencesViewProps,
IUserNotificationPreferencesViewState
> {
static navigationOptions = (): StackNavigationOptions => ({
useLayoutEffect(() => {
navigation.setOptions({
title: I18n.t('Notification_Preferences')
});
}, [navigation]);
constructor(props: IUserNotificationPreferencesViewProps) {
super(props);
this.state = {
preferences: {} as INotificationPreferences,
loading: false
};
}
async componentDidMount() {
const { user } = this.props;
const { id } = user;
const result = await Services.getUserPreferences(id);
useEffect(() => {
async function getPreferences() {
try {
const result = await Services.getUserPreferences(userId);
if (result.success) {
const { preferences } = result;
this.setState({ preferences, loading: true });
setLoading(true);
setPreferences(result.preferences);
}
} catch (error) {
log(error);
}
}
getPreferences();
}, [userId]);
findDefaultOption = (key: TKey) => {
const { preferences } = this.state;
const option = preferences[key] ? OPTIONS[key].find(item => item.value === preferences[key]) : OPTIONS[key][0];
return option;
};
renderPickerOption = (key: TKey) => {
const { theme } = this.props;
const text = this.findDefaultOption(key);
return (
<Text style={[styles.pickerText, { color: themes[theme].actionTintColor }]}>
{text?.label ? I18n.t(text?.label) : text?.label}
</Text>
);
};
pickerSelection = (title: string, key: TKey) => {
const { preferences } = this.state;
const { navigation } = this.props;
let values = OPTIONS[key];
const defaultOption = this.findDefaultOption(key);
if (OPTIONS[key][0]?.value !== 'default') {
const defaultValue = {
label: `${I18n.t('Default')} (${defaultOption?.label ? I18n.t(defaultOption?.label) : defaultOption?.label})`
} as {
label: string;
value: string;
};
values = [defaultValue, ...OPTIONS[key]];
}
navigation.navigate('PickerView', {
title,
data: values,
value: preferences[key],
onChangeValue: (value: string) => this.onValueChangePicker(key, value ?? defaultOption?.value)
});
};
onValueChangePicker = (key: TKey, value: string) => this.saveNotificationPreferences({ [key]: value.toString() });
saveNotificationPreferences = async (params: { [key: string]: string }) => {
const { user } = this.props;
const { id } = user;
const result = await Services.setUserPreferences(id, params);
const onValueChangePicker = async (param: { [key: string]: string }, onError: () => void) => {
try {
const result = await Services.setUserPreferences(userId, param);
if (result.success) {
const {
user: { settings }
} = result;
this.setState({ preferences: settings.preferences });
setPreferences(settings.preferences);
}
} catch (error) {
log(error);
onError();
}
};
render() {
const { loading } = this.state;
return (
<SafeAreaView testID='user-notification-preference-view'>
<StatusBar />
@ -127,11 +66,12 @@ class UserNotificationPreferencesView extends React.Component<
<>
<List.Section title='Desktop_Notifications'>
<List.Separator />
<List.Item
<ListPicker
onChangeValue={onValueChangePicker}
preference={'desktopNotifications'}
title='Alert'
testID='user-notification-preference-view-alert'
onPress={(title: string) => this.pickerSelection(title, 'desktopNotifications')}
right={() => this.renderPickerOption('desktopNotifications')}
value={preferences.desktopNotifications}
/>
<List.Separator />
<List.Info info='Desktop_Alert_info' />
@ -139,11 +79,12 @@ class UserNotificationPreferencesView extends React.Component<
<List.Section title='Push_Notifications'>
<List.Separator />
<List.Item
<ListPicker
onChangeValue={onValueChangePicker}
preference={'pushNotifications'}
title='Alert'
testID='user-notification-preference-view-push-notification'
onPress={(title: string) => this.pickerSelection(title, 'pushNotifications')}
right={() => this.renderPickerOption('pushNotifications')}
value={preferences.pushNotifications}
/>
<List.Separator />
<List.Info info='Push_Notifications_Alert_Info' />
@ -151,11 +92,12 @@ class UserNotificationPreferencesView extends React.Component<
<List.Section title='Email'>
<List.Separator />
<List.Item
<ListPicker
onChangeValue={onValueChangePicker}
preference={'emailNotificationMode'}
title='Alert'
testID='user-notification-preference-view-email-alert'
onPress={(title: string) => this.pickerSelection(title, 'emailNotificationMode')}
right={() => this.renderPickerOption('emailNotificationMode')}
value={preferences.emailNotificationMode}
/>
<List.Separator />
<List.Info info='You_need_to_verifiy_your_email_address_to_get_notications' />
@ -167,11 +109,6 @@ class UserNotificationPreferencesView extends React.Component<
</List.Container>
</SafeAreaView>
);
}
}
};
const mapStateToProps = (state: IApplicationState) => ({
user: getUserSelector(state)
});
export default connect(mapStateToProps)(withTheme(UserNotificationPreferencesView));
export default UserNotificationPreferencesView;