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
Diego Mello
parent
2a1bacaead
commit
ed66246d0a
|
|
@ -110,7 +110,7 @@ export interface INotificationPreferences {
|
|||
enableMessageParserEarlyAdoption: boolean;
|
||||
desktopNotifications: TNotifications;
|
||||
pushNotifications: TNotifications;
|
||||
emailNotificationMode?: 'mentions' | 'nothing';
|
||||
emailNotificationMode: 'mentions' | 'nothing';
|
||||
language?: string;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -1,177 +1,114 @@
|
|||
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 => ({
|
||||
title: I18n.t('Notification_Preferences')
|
||||
});
|
||||
|
||||
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);
|
||||
if (result.success) {
|
||||
const { preferences } = result;
|
||||
this.setState({ preferences, loading: true });
|
||||
}
|
||||
}
|
||||
|
||||
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)
|
||||
useLayoutEffect(() => {
|
||||
navigation.setOptions({
|
||||
title: I18n.t('Notification_Preferences')
|
||||
});
|
||||
};
|
||||
}, [navigation]);
|
||||
|
||||
onValueChangePicker = (key: TKey, value: string) => this.saveNotificationPreferences({ [key]: value.toString() });
|
||||
useEffect(() => {
|
||||
async function getPreferences() {
|
||||
try {
|
||||
const result = await Services.getUserPreferences(userId);
|
||||
if (result.success) {
|
||||
setLoading(true);
|
||||
setPreferences(result.preferences);
|
||||
}
|
||||
} catch (error) {
|
||||
log(error);
|
||||
}
|
||||
}
|
||||
getPreferences();
|
||||
}, [userId]);
|
||||
|
||||
saveNotificationPreferences = async (params: { [key: string]: string }) => {
|
||||
const { user } = this.props;
|
||||
const { id } = user;
|
||||
const result = await Services.setUserPreferences(id, params);
|
||||
if (result.success) {
|
||||
const {
|
||||
user: { settings }
|
||||
} = result;
|
||||
this.setState({ preferences: settings.preferences });
|
||||
const onValueChangePicker = async (param: { [key: string]: string }, onError: () => void) => {
|
||||
try {
|
||||
const result = await Services.setUserPreferences(userId, param);
|
||||
if (result.success) {
|
||||
const {
|
||||
user: { settings }
|
||||
} = result;
|
||||
setPreferences(settings.preferences);
|
||||
}
|
||||
} catch (error) {
|
||||
log(error);
|
||||
onError();
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { loading } = this.state;
|
||||
return (
|
||||
<SafeAreaView testID='user-notification-preference-view'>
|
||||
<StatusBar />
|
||||
<List.Container>
|
||||
{loading ? (
|
||||
<>
|
||||
<List.Section title='Desktop_Notifications'>
|
||||
<List.Separator />
|
||||
<List.Item
|
||||
title='Alert'
|
||||
testID='user-notification-preference-view-alert'
|
||||
onPress={(title: string) => this.pickerSelection(title, 'desktopNotifications')}
|
||||
right={() => this.renderPickerOption('desktopNotifications')}
|
||||
/>
|
||||
<List.Separator />
|
||||
<List.Info info='Desktop_Alert_info' />
|
||||
</List.Section>
|
||||
return (
|
||||
<SafeAreaView testID='user-notification-preference-view'>
|
||||
<StatusBar />
|
||||
<List.Container>
|
||||
{loading ? (
|
||||
<>
|
||||
<List.Section title='Desktop_Notifications'>
|
||||
<List.Separator />
|
||||
<ListPicker
|
||||
onChangeValue={onValueChangePicker}
|
||||
preference={'desktopNotifications'}
|
||||
title='Alert'
|
||||
testID='user-notification-preference-view-alert'
|
||||
value={preferences.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'
|
||||
onPress={(title: string) => this.pickerSelection(title, 'pushNotifications')}
|
||||
right={() => this.renderPickerOption('pushNotifications')}
|
||||
/>
|
||||
<List.Separator />
|
||||
<List.Info info='Push_Notifications_Alert_Info' />
|
||||
</List.Section>
|
||||
<List.Section title='Push_Notifications'>
|
||||
<List.Separator />
|
||||
<ListPicker
|
||||
onChangeValue={onValueChangePicker}
|
||||
preference={'pushNotifications'}
|
||||
title='Alert'
|
||||
testID='user-notification-preference-view-push-notification'
|
||||
value={preferences.pushNotifications}
|
||||
/>
|
||||
<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'
|
||||
onPress={(title: string) => this.pickerSelection(title, 'emailNotificationMode')}
|
||||
right={() => this.renderPickerOption('emailNotificationMode')}
|
||||
/>
|
||||
<List.Separator />
|
||||
<List.Info info='You_need_to_verifiy_your_email_address_to_get_notications' />
|
||||
</List.Section>
|
||||
</>
|
||||
) : (
|
||||
<ActivityIndicator />
|
||||
)}
|
||||
</List.Container>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
}
|
||||
<List.Section title='Email'>
|
||||
<List.Separator />
|
||||
<ListPicker
|
||||
onChangeValue={onValueChangePicker}
|
||||
preference={'emailNotificationMode'}
|
||||
title='Alert'
|
||||
testID='user-notification-preference-view-email-alert'
|
||||
value={preferences.emailNotificationMode}
|
||||
/>
|
||||
<List.Separator />
|
||||
<List.Info info='You_need_to_verifiy_your_email_address_to_get_notications' />
|
||||
</List.Section>
|
||||
</>
|
||||
) : (
|
||||
<ActivityIndicator />
|
||||
)}
|
||||
</List.Container>
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
const mapStateToProps = (state: IApplicationState) => ({
|
||||
user: getUserSelector(state)
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps)(withTheme(UserNotificationPreferencesView));
|
||||
export default UserNotificationPreferencesView;
|
||||
|
|
|
|||
Loading…
Reference in New Issue