From ed66246d0accddb7a4144ad339299bf50a0e5b23 Mon Sep 17 00:00:00 2001 From: Reinaldo Neto <47038980+reinaldonetof@users.noreply.github.com> Date: Thu, 22 Sep 2022 18:31:23 -0300 Subject: [PATCH] Chore: Hooks app/views/UserNotificationPreferenceView (#4502) * Chore: Hooks app/views/UserNotificationPreferenceView * added trycatch and userId Co-authored-by: Gleidson Daniel Silva --- app/definitions/IUser.ts | 2 +- app/stacks/InsideStack.tsx | 6 +- app/stacks/MasterDetailStack/index.tsx | 6 +- .../ListPicker.tsx | 68 +++++ .../UserNotificationPreferencesView/index.tsx | 249 +++++++----------- 5 files changed, 164 insertions(+), 167 deletions(-) create mode 100644 app/views/UserNotificationPreferencesView/ListPicker.tsx diff --git a/app/definitions/IUser.ts b/app/definitions/IUser.ts index 14328f230..f5c15caa1 100644 --- a/app/definitions/IUser.ts +++ b/app/definitions/IUser.ts @@ -110,7 +110,7 @@ export interface INotificationPreferences { enableMessageParserEarlyAdoption: boolean; desktopNotifications: TNotifications; pushNotifications: TNotifications; - emailNotificationMode?: 'mentions' | 'nothing'; + emailNotificationMode: 'mentions' | 'nothing'; language?: string; } diff --git a/app/stacks/InsideStack.tsx b/app/stacks/InsideStack.tsx index 4c7007bd8..9b11b1a47 100644 --- a/app/stacks/InsideStack.tsx +++ b/app/stacks/InsideStack.tsx @@ -150,11 +150,7 @@ const ProfileStackNavigator = () => { > - + ); diff --git a/app/stacks/MasterDetailStack/index.tsx b/app/stacks/MasterDetailStack/index.tsx index 37fb43bd9..feb02bfe2 100644 --- a/app/stacks/MasterDetailStack/index.tsx +++ b/app/stacks/MasterDetailStack/index.tsx @@ -195,11 +195,7 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => { - + 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 ? () => : undefined + })); + + return ( + showActionSheet({ options: getOptions() })} + right={() => ( + + {option?.label ? I18n.t(option?.label, { defaultValue: option?.label }) : option?.label} + + )} + /> + ); +}; + +export default ListPicker; diff --git a/app/views/UserNotificationPreferencesView/index.tsx b/app/views/UserNotificationPreferencesView/index.tsx index 519297bd6..eca0d91a5 100644 --- a/app/views/UserNotificationPreferencesView/index.tsx +++ b/app/views/UserNotificationPreferencesView/index.tsx @@ -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>(); + const userId = useAppSelector(state => getUserSelector(state).id); -interface IUserNotificationPreferencesViewState { - preferences: INotificationPreferences; - loading: boolean; -} - -interface IUserNotificationPreferencesViewProps { - navigation: StackNavigationProp; - 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?.label ? I18n.t(text?.label) : text?.label} - - ); - }; - - 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 ( - - - - {loading ? ( - <> - - - this.pickerSelection(title, 'desktopNotifications')} - right={() => this.renderPickerOption('desktopNotifications')} - /> - - - + return ( + + + + {loading ? ( + <> + + + + + + - - - this.pickerSelection(title, 'pushNotifications')} - right={() => this.renderPickerOption('pushNotifications')} - /> - - - + + + + + + - - - this.pickerSelection(title, 'emailNotificationMode')} - right={() => this.renderPickerOption('emailNotificationMode')} - /> - - - - - ) : ( - - )} - - - ); - } -} + + + + + + + + ) : ( + + )} + + + ); +}; -const mapStateToProps = (state: IApplicationState) => ({ - user: getUserSelector(state) -}); - -export default connect(mapStateToProps)(withTheme(UserNotificationPreferencesView)); +export default UserNotificationPreferencesView;