Skip to content

Chore: Improve code and migrate some props to hooks on ThemeView #4414

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
diegolmello merged 8 commits into from
Sep 12, 2022
Merged

Chore: Improve code and migrate some props to hooks on ThemeView #4414

Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
0320950
code reading improvements
dnlsilva Aug 8, 2022
29aeada
Merge branch 'develop' into theme-view-hooks
reinaldonetof Aug 9, 2022
084f915
Merge branch 'develop' into theme-view-hooks
dnlsilva Aug 11, 2022
e8e81fa
adds useCallback
dnlsilva Aug 11, 2022
3ff5f29
remove item from comp
dnlsilva Aug 17, 2022
ea4023c
remove useCallback
dnlsilva Aug 23, 2022
f1e2020
Merge branch 'develop' into theme-view-hooks
dnlsilva Aug 23, 2022
ca951dc
Merge branch 'develop' into theme-view-hooks
dnlsilva Sep 12, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
152 changes: 92 additions & 60 deletions app/views/ThemeView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,16 @@
import React, { useLayoutEffect } from 'react';
import React, { useCallback, useLayoutEffect } from 'react';
import { useNavigation } from '@react-navigation/native';

import { SettingsStackParamList } from '../stacks/types';
import I18n from '../i18n';
import { useTheme } from '../theme';
import StatusBar from '../containers/StatusBar';
import * as List from '../containers/List';
import { supportSystemTheme } from '../lib/methods/helpers';
import SafeAreaView from '../containers/SafeAreaView';
import UserPreferences from '../lib/methods/userPreferences';
import StatusBar from '../containers/StatusBar';
import { IThemePreference, TDarkLevel, TThemeMode } from '../definitions/ITheme';
import I18n from '../i18n';
import { THEME_PREFERENCES_KEY } from '../lib/constants';
import { supportSystemTheme } from '../lib/methods/helpers';
import { events, logEvent } from '../lib/methods/helpers/log';
import { IThemePreference, TThemeMode, TDarkLevel } from '../definitions/ITheme';
import { THEME_PREFERENCES_KEY, themes } from '../lib/constants';
import { IBaseScreen } from '../definitions';
import UserPreferences from '../lib/methods/userPreferences';
import { useTheme } from '../theme';

const THEME_GROUP = 'THEME_GROUP';
const DARK_GROUP = 'DARK_GROUP';
Expand Down Expand Up @@ -58,79 +57,112 @@ interface ITheme {
group: string;
}

type IThemeViewProps = IBaseScreen<SettingsStackParamList, 'ThemeView'>;
const Item = ({
Comment thread
reinaldonetof marked this conversation as resolved.
onPress,
label,
value,
isSelected
}: {
onPress: () => void;
label: string;
value: string;
isSelected: boolean;
}) => {
const { colors } = useTheme();
return (
<>
<List.Item
title={label}
onPress={onPress}
testID={`theme-view-${value}`}
right={() => (isSelected ? <List.Icon name='check' color={colors.tintColor} /> : null)}
/>
<List.Separator />
</>
);
};

const ThemeView = ({ navigation }: IThemeViewProps): React.ReactElement => {
const { theme, themePreferences, setTheme } = useTheme();
const ThemeView = (): React.ReactElement => {
const { themePreferences, setTheme } = useTheme();
const { setOptions } = useNavigation();

useLayoutEffect(() => {
navigation.setOptions({
setOptions({
title: I18n.t('Theme')
});
}, [navigation]);

const isSelected = (item: ITheme) => {
const { group } = item;
const { darkLevel, currentTheme } = themePreferences as IThemePreference;
if (group === THEME_GROUP) {
return item.value === currentTheme;
}
if (group === DARK_GROUP) {
return item.value === darkLevel;
}
};
}, []);

const isSelected = useCallback(
(item: ITheme) => {
const { group } = item;
const { darkLevel, currentTheme } = themePreferences as IThemePreference;
if (group === THEME_GROUP) {
return item.value === currentTheme;
}
if (group === DARK_GROUP) {
return item.value === darkLevel;
}
},
[themePreferences?.currentTheme, themePreferences?.darkLevel]
);

const onClick = (item: ITheme) => {
const { darkLevel, currentTheme } = themePreferences as IThemePreference;
const { value, group } = item;
let changes: Partial<IThemePreference> = {};
if (group === THEME_GROUP && currentTheme !== value) {
logEvent(events.THEME_SET_THEME_GROUP, { theme_group: value });
changes = { currentTheme: value as TThemeMode };
}
if (group === DARK_GROUP && darkLevel !== value) {
logEvent(events.THEME_SET_DARK_LEVEL, { dark_level: value });
changes = { darkLevel: value as TDarkLevel };
}
_setTheme(changes);
};
const onClick = useCallback(
Comment thread
dnlsilva marked this conversation as resolved.
Outdated
(item: ITheme) => {
const { darkLevel, currentTheme } = themePreferences as IThemePreference;
const { value, group } = item;
let changes: Partial<IThemePreference> = {};
if (group === THEME_GROUP && currentTheme !== value) {
logEvent(events.THEME_SET_THEME_GROUP, { theme_group: value });
changes = { currentTheme: value as TThemeMode };
}
if (group === DARK_GROUP && darkLevel !== value) {
logEvent(events.THEME_SET_DARK_LEVEL, { dark_level: value });
changes = { darkLevel: value as TDarkLevel };
}
handleTheme(changes);
},
[themePreferences?.currentTheme, themePreferences?.darkLevel]
);

const _setTheme = (theme: Partial<IThemePreference>) => {
const handleTheme = (theme: Partial<IThemePreference>) => {
const newTheme: IThemePreference = { ...(themePreferences as IThemePreference), ...theme };
if (setTheme) {
setTheme(newTheme);
UserPreferences.setMap(THEME_PREFERENCES_KEY, newTheme);
}
};

const renderIcon = () => <List.Icon name='check' color={themes[theme].tintColor} />;

const renderItem = ({ item }: { item: ITheme }) => {
const { label, value } = item;
return (
<>
<List.Item
title={label}
onPress={() => onClick(item)}
testID={`theme-view-${value}`}
right={() => (isSelected(item) ? renderIcon() : null)}
/>
<List.Separator />
</>
);
};

return (
<SafeAreaView testID='theme-view'>
<StatusBar />
<List.Container>
<List.Section title='Theme'>
<List.Separator />
<>{themeGroup.map(item => renderItem({ item }))}</>
<>
{themeGroup.map(theme => (
<Item
onPress={() => onClick(theme)}
label={theme.label}
value={theme.value}
isSelected={!!isSelected(theme)}
key={theme.label}
/>
))}
</>
</List.Section>
<List.Section title='Dark_level'>
<List.Separator />
<>{darkGroup.map(item => renderItem({ item }))}</>
<>
{darkGroup.map(theme => (
<Item
onPress={() => onClick(theme)}
label={theme.label}
value={theme.value}
isSelected={!!isSelected(theme)}
key={theme.label}
/>
))}
</>
</List.Section>
</List.Container>
</SafeAreaView>
Expand Down