Improve Settings screen components to match linter

This commit is contained in:
Arnaud Vergnet 2020-08-05 13:51:14 +02:00
parent 0a64f5fcd7
commit a3299c19f7
3 changed files with 425 additions and 337 deletions

View file

@ -131,7 +131,11 @@ export default class AsyncStorageManager {
* @param key
* @param value
*/
static set(key: string, value: number | string | boolean | {...} | []) {
static set(
key: string,
// eslint-disable-next-line flowtype/no-weak-types
value: number | string | boolean | {...} | Array<any>,
) {
AsyncStorageManager.getInstance().setPreference(key, value);
}
@ -142,7 +146,8 @@ export default class AsyncStorageManager {
* @returns {string}
*/
static getString(key: string): string {
return AsyncStorageManager.getInstance().getPreference(key);
const value = AsyncStorageManager.getInstance().getPreference(key);
return value != null ? value : '';
}
/**
@ -207,7 +212,11 @@ export default class AsyncStorageManager {
* @param key
* @param value
*/
setPreference(key: string, value: number | string | boolean | {...} | []) {
setPreference(
key: string,
// eslint-disable-next-line flowtype/no-weak-types
value: number | string | boolean | {...} | Array<any>,
) {
if (AsyncStorageManager.PREFERENCES[key] != null) {
let convertedValue;
if (typeof value === 'string') convertedValue = value;

View file

@ -1,14 +1,14 @@
// @flow
import * as React from 'react';
import {Avatar, Button, Card, Paragraph, withTheme} from "react-native-paper";
import i18n from "i18n-js";
import {Linking} from "react-native";
import type {CustomTheme} from "../../managers/ThemeManager";
import CollapsibleScrollView from "../../components/Collapsible/CollapsibleScrollView";
import {Avatar, Button, Card, Paragraph, withTheme} from 'react-native-paper';
import i18n from 'i18n-js';
import {Linking} from 'react-native';
import type {CustomThemeType} from '../../managers/ThemeManager';
import CollapsibleScrollView from '../../components/Collapsible/CollapsibleScrollView';
type Props = {
theme: CustomTheme
type PropsType = {
theme: CustomThemeType,
};
const links = {
@ -18,95 +18,118 @@ Informations sur ton système si tu sais (iOS ou Android, modèle du tel, versio
Nature du problème :\n\n\n
Étapes pour reproduire ce pb :\n\n\n\n
Stp corrige le pb, bien cordialement.`,
bugsGit: 'https://git.etud.insa-toulouse.fr/vergnet/application-amicale/issues/new',
facebook: "https://www.facebook.com/campus.insat",
bugsGit:
'https://git.etud.insa-toulouse.fr/vergnet/application-amicale/issues/new',
facebook: 'https://www.facebook.com/campus.insat',
feedbackMail: `mailto:app@amicale-insat.fr?subject=[FEEDBACK] Application CAMPUS
&body=Coucou Arnaud j'ai du feedback\n\n\n\nBien cordialement.`,
feedbackGit: "https://git.etud.insa-toulouse.fr/vergnet/application-amicale/issues/new",
}
class FeedbackScreen extends React.Component<Props> {
feedbackGit:
'https://git.etud.insa-toulouse.fr/vergnet/application-amicale/issues/new',
};
class FeedbackScreen extends React.Component<PropsType> {
/**
* Gets link buttons
*
* @param isBug True if buttons should redirect to bug report methods
* @returns {*}
*/
getButtons(isBug: boolean) {
static getButtons(isBug: boolean): React.Node {
return (
<Card.Actions style={{
<Card.Actions
style={{
flex: 1,
flexWrap: 'wrap',
}}>
<Button
icon="email"
mode={"contained"}
mode="contained"
style={{
marginLeft: 'auto',
marginTop: 5,
}}
onPress={() => Linking.openURL(isBug ? links.bugsMail : links.feedbackMail)}>
onPress={() => {
Linking.openURL(isBug ? links.bugsMail : links.feedbackMail);
}}>
MAIL
</Button>
<Button
icon="git"
mode={"contained"}
color={"#609927"}
mode="contained"
color="#609927"
style={{
marginLeft: 'auto',
marginTop: 5,
}}
onPress={() => Linking.openURL(isBug ? links.bugsGit : links.feedbackGit)}>
onPress={() => {
Linking.openURL(isBug ? links.bugsGit : links.feedbackGit);
}}>
GITEA
</Button>
<Button
icon="facebook"
mode={"contained"}
color={"#2e88fe"}
mode="contained"
color="#2e88fe"
style={{
marginLeft: 'auto',
marginTop: 5,
}}
onPress={() => Linking.openURL(links.facebook)}>
onPress={() => {
Linking.openURL(links.facebook);
}}>
Facebook
</Button>
</Card.Actions>
);
}
render() {
render(): React.Node {
const {theme} = this.props;
return (
<CollapsibleScrollView style={{padding: 5}}>
<Card>
<Card.Title
title={i18n.t('screens.feedback.bugs')}
subtitle={i18n.t('screens.feedback.bugsSubtitle')}
left={(props) => <Avatar.Icon {...props} icon="bug"/>}
left={({
size,
color,
}: {
size: number,
color: number,
}): React.Node => (
<Avatar.Icon size={size} color={color} icon="bug" />
)}
/>
<Card.Content>
<Paragraph>
{i18n.t('screens.feedback.bugsDescription')}
</Paragraph>
<Paragraph style={{color: this.props.theme.colors.primary}}>
<Paragraph>{i18n.t('screens.feedback.bugsDescription')}</Paragraph>
<Paragraph style={{color: theme.colors.primary}}>
{i18n.t('screens.feedback.contactMeans')}
</Paragraph>
</Card.Content>
{this.getButtons(true)}
{FeedbackScreen.getButtons(true)}
</Card>
<Card style={{marginTop: 20, marginBottom: 10}}>
<Card.Title
title={i18n.t('screens.feedback.title')}
subtitle={i18n.t('screens.feedback.feedbackSubtitle')}
left={(props) => <Avatar.Icon {...props} icon="comment"/>}
left={({
size,
color,
}: {
size: number,
color: number,
}): React.Node => (
<Avatar.Icon size={size} color={color} icon="comment" />
)}
/>
<Card.Content>
<Paragraph>
{i18n.t('screens.feedback.feedbackDescription')}
</Paragraph>
</Card.Content>
{this.getButtons(false)}
{FeedbackScreen.getButtons(false)}
</Card>
</CollapsibleScrollView>
);

View file

@ -1,26 +1,25 @@
// @flow
import * as React from 'react';
import {View} from "react-native";
import type {CustomTheme} from "../../../managers/ThemeManager";
import ThemeManager from '../../../managers/ThemeManager';
import i18n from "i18n-js";
import AsyncStorageManager from "../../../managers/AsyncStorageManager";
import {View} from 'react-native';
import i18n from 'i18n-js';
import {Card, List, Switch, ToggleButton, withTheme} from 'react-native-paper';
import {Appearance} from "react-native-appearance";
import CustomSlider from "../../../components/Overrides/CustomSlider";
import {StackNavigationProp} from "@react-navigation/stack";
import CollapsibleScrollView from "../../../components/Collapsible/CollapsibleScrollView";
import {Appearance} from 'react-native-appearance';
import {StackNavigationProp} from '@react-navigation/stack';
import type {CustomThemeType} from '../../../managers/ThemeManager';
import ThemeManager from '../../../managers/ThemeManager';
import AsyncStorageManager from '../../../managers/AsyncStorageManager';
import CustomSlider from '../../../components/Overrides/CustomSlider';
import CollapsibleScrollView from '../../../components/Collapsible/CollapsibleScrollView';
type Props = {
type PropsType = {
navigation: StackNavigationProp,
theme: CustomTheme,
theme: CustomThemeType,
};
type State = {
type StateType = {
nightMode: boolean,
nightModeFollowSystem: boolean,
notificationReminderSelected: number,
startScreenPickerSelected: string,
isDebugUnlocked: boolean,
};
@ -28,8 +27,7 @@ type State = {
/**
* Class defining the Settings screen. This screen shows controls to modify app preferences.
*/
class SettingsScreen extends React.Component<Props, State> {
class SettingsScreen extends React.Component<PropsType, StateType> {
savedNotificationReminder: number;
/**
@ -37,37 +35,38 @@ class SettingsScreen extends React.Component<Props, State> {
*/
constructor() {
super();
let notifReminder = AsyncStorageManager.getString(AsyncStorageManager.PREFERENCES.proxiwashNotifications.key);
this.savedNotificationReminder = parseInt(notifReminder);
if (isNaN(this.savedNotificationReminder))
const notifReminder = AsyncStorageManager.getString(
AsyncStorageManager.PREFERENCES.proxiwashNotifications.key,
);
this.savedNotificationReminder = parseInt(notifReminder, 10);
if (Number.isNaN(this.savedNotificationReminder))
this.savedNotificationReminder = 0;
this.state = {
nightMode: ThemeManager.getNightMode(),
nightModeFollowSystem: AsyncStorageManager.getBool(AsyncStorageManager.PREFERENCES.nightModeFollowSystem.key)
&& Appearance.getColorScheme() !== 'no-preference',
notificationReminderSelected: this.savedNotificationReminder,
startScreenPickerSelected: AsyncStorageManager.getString(AsyncStorageManager.PREFERENCES.defaultStartScreen.key),
isDebugUnlocked: AsyncStorageManager.getBool(AsyncStorageManager.PREFERENCES.debugUnlocked.key)
nightModeFollowSystem:
AsyncStorageManager.getBool(
AsyncStorageManager.PREFERENCES.nightModeFollowSystem.key,
) && Appearance.getColorScheme() !== 'no-preference',
startScreenPickerSelected: AsyncStorageManager.getString(
AsyncStorageManager.PREFERENCES.defaultStartScreen.key,
),
isDebugUnlocked: AsyncStorageManager.getBool(
AsyncStorageManager.PREFERENCES.debugUnlocked.key,
),
};
}
/**
* Unlocks debug mode and saves its state to user preferences
*/
unlockDebugMode = () => {
this.setState({isDebugUnlocked: true});
AsyncStorageManager.set(AsyncStorageManager.PREFERENCES.debugUnlocked.key, true);
}
/**
* Saves the value for the proxiwash reminder notification time
*
* @param value The value to store
*/
onProxiwashNotifPickerValueChange = (value: number) => {
this.setState({notificationReminderSelected: value});
AsyncStorageManager.set(AsyncStorageManager.PREFERENCES.proxiwashNotifications.key, value);
AsyncStorageManager.set(
AsyncStorageManager.PREFERENCES.proxiwashNotifications.key,
value,
);
};
/**
@ -78,7 +77,10 @@ class SettingsScreen extends React.Component<Props, State> {
onStartScreenPickerValueChange = (value: string) => {
if (value != null) {
this.setState({startScreenPickerSelected: value});
AsyncStorageManager.set(AsyncStorageManager.PREFERENCES.defaultStartScreen.key, value);
AsyncStorageManager.set(
AsyncStorageManager.PREFERENCES.defaultStartScreen.key,
value,
);
}
};
@ -87,7 +89,8 @@ class SettingsScreen extends React.Component<Props, State> {
*
* @returns {React.Node}
*/
getProxiwashNotifPicker() {
getProxiwashNotifPicker(): React.Node {
const {theme} = this.props;
return (
<CustomSlider
style={{flex: 1, marginHorizontal: 10, height: 50}}
@ -96,8 +99,8 @@ class SettingsScreen extends React.Component<Props, State> {
step={1}
value={this.savedNotificationReminder}
onValueChange={this.onProxiwashNotifPickerValueChange}
thumbTintColor={this.props.theme.colors.primary}
minimumTrackTintColor={this.props.theme.colors.primary}
thumbTintColor={theme.colors.primary}
minimumTrackTintColor={theme.colors.primary}
/>
);
}
@ -107,18 +110,18 @@ class SettingsScreen extends React.Component<Props, State> {
*
* @returns {React.Node}
*/
getStartScreenPicker() {
getStartScreenPicker(): React.Node {
const {startScreenPickerSelected} = this.state;
return (
<ToggleButton.Row
onValueChange={this.onStartScreenPickerValueChange}
value={this.state.startScreenPickerSelected}
style={{marginLeft: 'auto', marginRight: 'auto'}}
>
<ToggleButton icon="account-circle" value="services"/>
<ToggleButton icon="tshirt-crew" value="proxiwash"/>
<ToggleButton icon="triangle" value="home"/>
<ToggleButton icon="calendar-range" value="planning"/>
<ToggleButton icon="clock" value="planex"/>
value={startScreenPickerSelected}
style={{marginLeft: 'auto', marginRight: 'auto'}}>
<ToggleButton icon="account-circle" value="services" />
<ToggleButton icon="tshirt-crew" value="proxiwash" />
<ToggleButton icon="triangle" value="home" />
<ToggleButton icon="calendar-range" value="planning" />
<ToggleButton icon="clock" value="planex" />
</ToggleButton.Row>
);
}
@ -127,18 +130,23 @@ class SettingsScreen extends React.Component<Props, State> {
* Toggles night mode and saves it to preferences
*/
onToggleNightMode = () => {
ThemeManager.getInstance().setNightMode(!this.state.nightMode);
this.setState({nightMode: !this.state.nightMode});
const {nightMode} = this.state;
ThemeManager.getInstance().setNightMode(!nightMode);
this.setState({nightMode: !nightMode});
};
onToggleNightModeFollowSystem = () => {
const value = !this.state.nightModeFollowSystem;
const {nightModeFollowSystem} = this.state;
const value = !nightModeFollowSystem;
this.setState({nightModeFollowSystem: value});
AsyncStorageManager.set(AsyncStorageManager.PREFERENCES.nightModeFollowSystem.key, value);
AsyncStorageManager.set(
AsyncStorageManager.PREFERENCES.nightModeFollowSystem.key,
value,
);
if (value) {
const nightMode = Appearance.getColorScheme() === 'dark';
ThemeManager.getInstance().setNightMode(nightMode);
this.setState({nightMode: nightMode});
this.setState({nightMode});
}
};
@ -152,81 +160,129 @@ class SettingsScreen extends React.Component<Props, State> {
* @param state The current state of the switch
* @returns {React.Node}
*/
getToggleItem(onPressCallback: Function, icon: string, title: string, subtitle: string, state: boolean) {
static getToggleItem(
onPressCallback: () => void,
icon: string,
title: string,
subtitle: string,
state: boolean,
): React.Node {
return (
<List.Item
title={title}
description={subtitle}
left={props => <List.Icon {...props} icon={icon}/>}
right={() =>
<Switch
value={state}
onValueChange={onPressCallback}
/>}
left={({size, color}: {size: number, color: number}): React.Node => (
<List.Icon size={size} color={color} icon={icon} />
)}
right={(): React.Node => (
<Switch value={state} onValueChange={onPressCallback} />
)}
/>
);
}
getNavigateItem(route: string, icon: string, title: string, subtitle: string, onLongPress?: () => void) {
getNavigateItem(
route: string,
icon: string,
title: string,
subtitle: string,
onLongPress?: () => void,
): React.Node {
const {navigation} = this.props;
return (
<List.Item
title={title}
description={subtitle}
onPress={() => this.props.navigation.navigate(route)}
left={props => <List.Icon {...props} icon={icon}/>}
right={props => <List.Icon {...props} icon={"chevron-right"}/>}
onPress={() => {
navigation.navigate(route);
}}
left={({size, color}: {size: number, color: number}): React.Node => (
<List.Icon size={size} color={color} icon={icon} />
)}
right={({size, color}: {size: number, color: number}): React.Node => (
<List.Icon size={size} color={color} icon="chevron-right" />
)}
onLongPress={onLongPress}
/>
);
}
render() {
/**
* Unlocks debug mode and saves its state to user preferences
*/
unlockDebugMode = () => {
this.setState({isDebugUnlocked: true});
AsyncStorageManager.set(
AsyncStorageManager.PREFERENCES.debugUnlocked.key,
true,
);
};
render(): React.Node {
const {nightModeFollowSystem, nightMode, isDebugUnlocked} = this.state;
return (
<CollapsibleScrollView>
<Card style={{margin: 5}}>
<Card.Title title={i18n.t('screens.settings.generalCard')}/>
<Card.Title title={i18n.t('screens.settings.generalCard')} />
<List.Section>
{Appearance.getColorScheme() !== 'no-preference' ? this.getToggleItem(
{Appearance.getColorScheme() !== 'no-preference'
? SettingsScreen.getToggleItem(
this.onToggleNightModeFollowSystem,
'theme-light-dark',
i18n.t('screens.settings.nightModeAuto'),
i18n.t('screens.settings.nightModeAutoSub'),
this.state.nightModeFollowSystem
) : null}
{
Appearance.getColorScheme() === 'no-preference' || !this.state.nightModeFollowSystem ?
this.getToggleItem(
nightModeFollowSystem,
)
: null}
{Appearance.getColorScheme() === 'no-preference' ||
!nightModeFollowSystem
? SettingsScreen.getToggleItem(
this.onToggleNightMode,
'theme-light-dark',
i18n.t('screens.settings.nightMode'),
this.state.nightMode ?
i18n.t('screens.settings.nightModeSubOn') :
i18n.t('screens.settings.nightModeSubOff'),
this.state.nightMode
) : null
}
nightMode
? i18n.t('screens.settings.nightModeSubOn')
: i18n.t('screens.settings.nightModeSubOff'),
nightMode,
)
: null}
<List.Item
title={i18n.t('screens.settings.startScreen')}
description={i18n.t('screens.settings.startScreenSub')}
left={props => <List.Icon {...props} icon="power"/>}
left={({
size,
color,
}: {
size: number,
color: number,
}): React.Node => (
<List.Icon size={size} color={color} icon="power" />
)}
/>
{this.getStartScreenPicker()}
{this.getNavigateItem(
"dashboard-edit",
"view-dashboard",
'dashboard-edit',
'view-dashboard',
i18n.t('screens.settings.dashboard'),
i18n.t('screens.settings.dashboardSub')
i18n.t('screens.settings.dashboardSub'),
)}
</List.Section>
</Card>
<Card style={{margin: 5}}>
<Card.Title title="Proxiwash"/>
<Card.Title title="Proxiwash" />
<List.Section>
<List.Item
title={i18n.t('screens.settings.proxiwashNotifReminder')}
description={i18n.t('screens.settings.proxiwashNotifReminderSub')}
left={props => <List.Icon {...props} icon="washing-machine"/>}
opened={true}
left={({
size,
color,
}: {
size: number,
color: number,
}): React.Node => (
<List.Icon size={size} color={color} icon="washing-machine" />
)}
/>
<View style={{marginLeft: 30}}>
{this.getProxiwashNotifPicker()}
@ -234,26 +290,26 @@ class SettingsScreen extends React.Component<Props, State> {
</List.Section>
</Card>
<Card style={{margin: 5}}>
<Card.Title title={i18n.t('screens.settings.information')}/>
<Card.Title title={i18n.t('screens.settings.information')} />
<List.Section>
{this.state.isDebugUnlocked
{isDebugUnlocked
? this.getNavigateItem(
"debug",
"bug-check",
'debug',
'bug-check',
i18n.t('screens.debug.title'),
""
'',
)
: null}
{this.getNavigateItem(
"about",
"information",
'about',
'information',
i18n.t('screens.about.title'),
i18n.t('screens.about.buttonDesc'),
this.unlockDebugMode,
)}
{this.getNavigateItem(
"feedback",
"comment-quote",
'feedback',
'comment-quote',
i18n.t('screens.feedback.homeButtonTitle'),
i18n.t('screens.feedback.homeButtonSubtitle'),
)}