Improve Settings screen components to match linter

src/managers/AsyncStorageManager.js

@@ -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;

src/screens/Other/FeedbackScreen.js

@@ -1,14 +1,14 @@
 // @flow
 
 import * as React from 'react';
-import {Avatar, Button, Card, Paragraph, withTheme} from "react-native-paper";
+import {Avatar, Button, Card, Paragraph, withTheme} from 'react-native-paper';
-import i18n from "i18n-js";
+import i18n from 'i18n-js';
-import {Linking} from "react-native";
+import {Linking} from 'react-native';
-import type {CustomTheme} from "../../managers/ThemeManager";
+import type {CustomThemeType} from '../../managers/ThemeManager';
-import CollapsibleScrollView from "../../components/Collapsible/CollapsibleScrollView";
+import CollapsibleScrollView from '../../components/Collapsible/CollapsibleScrollView';
 
-type Props = {
+type PropsType = {
-    theme: CustomTheme
+  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',
+  bugsGit:
-    facebook: "https://www.facebook.com/campus.insat",
+    '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",
+  feedbackGit:
-}
+    'https://git.etud.insa-toulouse.fr/vergnet/application-amicale/issues/new',
-
+};
-class FeedbackScreen extends React.Component<Props> {
 
+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"}
+          mode="contained"
-                    color={"#609927"}
+          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"}
+          mode="contained"
-                    color={"#2e88fe"}
+          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>
+            <Paragraph>{i18n.t('screens.feedback.bugsDescription')}</Paragraph>
-                            {i18n.t('screens.feedback.bugsDescription')}
+            <Paragraph style={{color: theme.colors.primary}}>
-                        </Paragraph>
-                        <Paragraph style={{color: this.props.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>
     );

src/screens/Other/Settings/SettingsScreen.js

@@ -1,26 +1,25 @@
 // @flow
 
 import * as React from 'react';
-import {View} from "react-native";
+import {View} from 'react-native';
-import type {CustomTheme} from "../../../managers/ThemeManager";
+import i18n from 'i18n-js';
-import ThemeManager from '../../../managers/ThemeManager';
-import i18n from "i18n-js";
-import AsyncStorageManager from "../../../managers/AsyncStorageManager";
 import {Card, List, Switch, ToggleButton, withTheme} from 'react-native-paper';
-import {Appearance} from "react-native-appearance";
+import {Appearance} from 'react-native-appearance';
-import CustomSlider from "../../../components/Overrides/CustomSlider";
+import {StackNavigationProp} from '@react-navigation/stack';
-import {StackNavigationProp} from "@react-navigation/stack";
+import type {CustomThemeType} from '../../../managers/ThemeManager';
-import CollapsibleScrollView from "../../../components/Collapsible/CollapsibleScrollView";
+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);
+    const notifReminder = AsyncStorageManager.getString(
-        this.savedNotificationReminder = parseInt(notifReminder);
+      AsyncStorageManager.PREFERENCES.proxiwashNotifications.key,
-        if (isNaN(this.savedNotificationReminder))
+    );
+    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)
+      nightModeFollowSystem:
-                && Appearance.getColorScheme() !== 'no-preference',
+        AsyncStorageManager.getBool(
-            notificationReminderSelected: this.savedNotificationReminder,
+          AsyncStorageManager.PREFERENCES.nightModeFollowSystem.key,
-            startScreenPickerSelected: AsyncStorageManager.getString(AsyncStorageManager.PREFERENCES.defaultStartScreen.key),
+        ) && Appearance.getColorScheme() !== 'no-preference',
-            isDebugUnlocked: AsyncStorageManager.getBool(AsyncStorageManager.PREFERENCES.debugUnlocked.key)
+      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.set(AsyncStorageManager.PREFERENCES.proxiwashNotifications.key, value);
+      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}
+        thumbTintColor={theme.colors.primary}
-                minimumTrackTintColor={this.props.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}
+        value={startScreenPickerSelected}
-                style={{marginLeft: 'auto', marginRight: 'auto'}}
+        style={{marginLeft: 'auto', marginRight: 'auto'}}>
-            >
+        <ToggleButton icon="account-circle" value="services" />
-                <ToggleButton icon="account-circle" value="services"/>
+        <ToggleButton icon="tshirt-crew" value="proxiwash" />
-                <ToggleButton icon="tshirt-crew" value="proxiwash"/>
+        <ToggleButton icon="triangle" value="home" />
-                <ToggleButton icon="triangle" value="home"/>
+        <ToggleButton icon="calendar-range" value="planning" />
-                <ToggleButton icon="calendar-range" value="planning"/>
+        <ToggleButton icon="clock" value="planex" />
-                <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);
+    const {nightMode} = this.state;
-        this.setState({nightMode: !this.state.nightMode});
+    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}/>}
+        left={({size, color}: {size: number, color: number}): React.Node => (
-                right={() =>
+          <List.Icon size={size} color={color} icon={icon} />
-                    <Switch
+        )}
-                        value={state}
+        right={(): React.Node => (
-                        onValueChange={onPressCallback}
+          <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)}
+        onPress={() => {
-                left={props => <List.Icon {...props} icon={icon}/>}
+          navigation.navigate(route);
-                right={props => <List.Icon {...props} icon={"chevron-right"}/>}
+        }}
+        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
+                  nightModeFollowSystem,
-                        ) : null}
+                )
-                        {
+              : null}
-                            Appearance.getColorScheme() === 'no-preference' || !this.state.nightModeFollowSystem ?
+            {Appearance.getColorScheme() === 'no-preference' ||
-                                this.getToggleItem(
+            !nightModeFollowSystem
+              ? SettingsScreen.getToggleItem(
                   this.onToggleNightMode,
                   'theme-light-dark',
                   i18n.t('screens.settings.nightMode'),
-                                    this.state.nightMode ?
+                  nightMode
-                                        i18n.t('screens.settings.nightModeSubOn') :
+                    ? i18n.t('screens.settings.nightModeSubOn')
-                                        i18n.t('screens.settings.nightModeSubOff'),
+                    : i18n.t('screens.settings.nightModeSubOff'),
-                                    this.state.nightMode
+                  nightMode,
-                                ) : null
+                )
-                        }
+              : 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",
+              'dashboard-edit',
-                            "view-dashboard",
+              '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"/>}
+              left={({
-                            opened={true}
+                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",
+                  'debug',
-                                "bug-check",
+                  'bug-check',
                   i18n.t('screens.debug.title'),
-                                ""
+                  '',
                 )
               : null}
             {this.getNavigateItem(
-                            "about",
+              'about',
-                            "information",
+              'information',
               i18n.t('screens.about.title'),
               i18n.t('screens.about.buttonDesc'),
               this.unlockDebugMode,
             )}
             {this.getNavigateItem(
-                            "feedback",
+              'feedback',
-                            "comment-quote",
+              'comment-quote',
               i18n.t('screens.feedback.homeButtonTitle'),
               i18n.t('screens.feedback.homeButtonSubtitle'),
             )}