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;