Chore: Evaluate DisplayPrefsView - TypeScript (#4127)
* Chore: Evaluate DisplayPrefsView - TypeScript * minor tweak
This commit is contained in:
parent
f04b15a432
commit
a1e672df0e
|
@ -1,11 +1,12 @@
|
|||
import { StackNavigationProp } from '@react-navigation/stack';
|
||||
import React, { useEffect } from 'react';
|
||||
import { StackNavigationProp } from '@react-navigation/stack';
|
||||
import { useNavigation } from '@react-navigation/native';
|
||||
import { Switch } from 'react-native';
|
||||
import { RadioButton } from 'react-native-ui-lib';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
|
||||
import { setPreference } from '../actions/sortPreferences';
|
||||
import { DisplayMode, SortBy, themes } from '../lib/constants';
|
||||
import { DisplayMode, SortBy } from '../lib/constants';
|
||||
import * as HeaderButton from '../containers/HeaderButton';
|
||||
import * as List from '../containers/List';
|
||||
import { ICON_SIZE } from '../containers/List/constants';
|
||||
|
@ -18,22 +19,17 @@ import { useTheme } from '../theme';
|
|||
import { events, logEvent } from '../utils/log';
|
||||
import { saveSortPreference } from '../lib/methods';
|
||||
|
||||
interface IDisplayPrefsView {
|
||||
navigation: StackNavigationProp<SettingsStackParamList, 'DisplayPrefsView'>;
|
||||
isMasterDetail: boolean;
|
||||
}
|
||||
|
||||
const DisplayPrefsView = (props: IDisplayPrefsView): JSX.Element => {
|
||||
const { theme } = useTheme();
|
||||
const DisplayPrefsView = (): React.ReactElement => {
|
||||
const navigation = useNavigation<StackNavigationProp<SettingsStackParamList, 'DisplayPrefsView'>>();
|
||||
const { colors } = useTheme();
|
||||
|
||||
const { sortBy, groupByType, showFavorites, showUnread, showAvatar, displayMode } = useSelector(
|
||||
(state: IApplicationState) => state.sortPreferences
|
||||
);
|
||||
const { isMasterDetail } = useSelector((state: any) => state.app);
|
||||
const { isMasterDetail } = useSelector((state: IApplicationState) => state.app);
|
||||
const dispatch = useDispatch();
|
||||
|
||||
useEffect(() => {
|
||||
const { navigation } = props;
|
||||
navigation.setOptions({
|
||||
title: I18n.t('Display')
|
||||
});
|
||||
|
@ -42,7 +38,7 @@ const DisplayPrefsView = (props: IDisplayPrefsView): JSX.Element => {
|
|||
headerLeft: () => <HeaderButton.Drawer navigation={navigation} testID='display-view-drawer' />
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
}, [isMasterDetail, navigation]);
|
||||
|
||||
const setSortPreference = (param: Partial<IPreferences>) => {
|
||||
dispatch(setPreference(param));
|
||||
|
@ -90,7 +86,7 @@ const DisplayPrefsView = (props: IDisplayPrefsView): JSX.Element => {
|
|||
};
|
||||
|
||||
const renderCheckBox = (value: boolean) => (
|
||||
<List.Icon name={value ? 'checkbox-checked' : 'checkbox-unchecked'} color={value ? themes[theme].actionTintColor : null} />
|
||||
<List.Icon name={value ? 'checkbox-checked' : 'checkbox-unchecked'} color={value ? colors.actionTintColor : null} />
|
||||
);
|
||||
|
||||
const renderAvatarSwitch = (value: boolean) => (
|
||||
|
@ -98,11 +94,7 @@ const DisplayPrefsView = (props: IDisplayPrefsView): JSX.Element => {
|
|||
);
|
||||
|
||||
const renderRadio = (value: boolean) => (
|
||||
<RadioButton
|
||||
selected={!!value}
|
||||
color={value ? themes[theme].actionTintColor : themes[theme].auxiliaryText}
|
||||
size={ICON_SIZE}
|
||||
/>
|
||||
<RadioButton selected={!!value} color={value ? colors.actionTintColor : colors.auxiliaryText} size={ICON_SIZE} />
|
||||
);
|
||||
|
||||
return (
|
||||
|
@ -188,6 +180,4 @@ const DisplayPrefsView = (props: IDisplayPrefsView): JSX.Element => {
|
|||
);
|
||||
};
|
||||
|
||||
DisplayPrefsView.propTypes = {};
|
||||
|
||||
export default DisplayPrefsView;
|
||||
|
|
Loading…
Reference in New Issue