Browse Source

Improve Settings screen components to match linter

Arnaud Vergnet 3 years ago
parent
commit
a3299c19f7

+ 12
- 3
src/managers/AsyncStorageManager.js View File

@@ -131,7 +131,11 @@ export default class AsyncStorageManager {
131 131
    * @param key
132 132
    * @param value
133 133
    */
134
-  static set(key: string, value: number | string | boolean | {...} | []) {
134
+  static set(
135
+    key: string,
136
+    // eslint-disable-next-line flowtype/no-weak-types
137
+    value: number | string | boolean | {...} | Array<any>,
138
+  ) {
135 139
     AsyncStorageManager.getInstance().setPreference(key, value);
136 140
   }
137 141
 
@@ -142,7 +146,8 @@ export default class AsyncStorageManager {
142 146
    * @returns {string}
143 147
    */
144 148
   static getString(key: string): string {
145
-    return AsyncStorageManager.getInstance().getPreference(key);
149
+    const value = AsyncStorageManager.getInstance().getPreference(key);
150
+    return value != null ? value : '';
146 151
   }
147 152
 
148 153
   /**
@@ -207,7 +212,11 @@ export default class AsyncStorageManager {
207 212
    * @param key
208 213
    * @param value
209 214
    */
210
-  setPreference(key: string, value: number | string | boolean | {...} | []) {
215
+  setPreference(
216
+    key: string,
217
+    // eslint-disable-next-line flowtype/no-weak-types
218
+    value: number | string | boolean | {...} | Array<any>,
219
+  ) {
211 220
     if (AsyncStorageManager.PREFERENCES[key] != null) {
212 221
       let convertedValue;
213 222
       if (typeof value === 'string') convertedValue = value;

+ 120
- 97
src/screens/Other/FeedbackScreen.js View File

@@ -1,116 +1,139 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Avatar, Button, Card, Paragraph, withTheme} from "react-native-paper";
5
-import i18n from "i18n-js";
6
-import {Linking} from "react-native";
7
-import type {CustomTheme} from "../../managers/ThemeManager";
8
-import CollapsibleScrollView from "../../components/Collapsible/CollapsibleScrollView";
4
+import {Avatar, Button, Card, Paragraph, withTheme} from 'react-native-paper';
5
+import i18n from 'i18n-js';
6
+import {Linking} from 'react-native';
7
+import type {CustomThemeType} from '../../managers/ThemeManager';
8
+import CollapsibleScrollView from '../../components/Collapsible/CollapsibleScrollView';
9 9
 
10
-type Props = {
11
-    theme: CustomTheme
10
+type PropsType = {
11
+  theme: CustomThemeType,
12 12
 };
13 13
 
14 14
 const links = {
15
-    bugsMail: `mailto:app@amicale-insat.fr?subject=[BUG] Application CAMPUS
15
+  bugsMail: `mailto:app@amicale-insat.fr?subject=[BUG] Application CAMPUS
16 16
 &body=Coucou Arnaud ça bug c'est nul,\n\n
17 17
 Informations sur ton système si tu sais (iOS ou Android, modèle du tel, version):\n\n\n
18 18
 Nature du problème :\n\n\n
19 19
 Étapes pour reproduire ce pb :\n\n\n\n
20 20
 Stp corrige le pb, bien cordialement.`,
21
-    bugsGit: 'https://git.etud.insa-toulouse.fr/vergnet/application-amicale/issues/new',
22
-    facebook: "https://www.facebook.com/campus.insat",
23
-    feedbackMail: `mailto:app@amicale-insat.fr?subject=[FEEDBACK] Application CAMPUS
21
+  bugsGit:
22
+    'https://git.etud.insa-toulouse.fr/vergnet/application-amicale/issues/new',
23
+  facebook: 'https://www.facebook.com/campus.insat',
24
+  feedbackMail: `mailto:app@amicale-insat.fr?subject=[FEEDBACK] Application CAMPUS
24 25
 &body=Coucou Arnaud j'ai du feedback\n\n\n\nBien cordialement.`,
25
-    feedbackGit: "https://git.etud.insa-toulouse.fr/vergnet/application-amicale/issues/new",
26
-}
27
-
28
-class FeedbackScreen extends React.Component<Props> {
26
+  feedbackGit:
27
+    'https://git.etud.insa-toulouse.fr/vergnet/application-amicale/issues/new',
28
+};
29 29
 
30
-    /**
31
-     * Gets link buttons
32
-     *
33
-     * @param isBug True if buttons should redirect to bug report methods
34
-     * @returns {*}
35
-     */
36
-    getButtons(isBug: boolean) {
37
-        return (
38
-            <Card.Actions style={{
39
-                flex: 1,
40
-                flexWrap: 'wrap',
41
-            }}>
42
-                <Button
43
-                    icon="email"
44
-                    mode={"contained"}
45
-                    style={{
46
-                        marginLeft: 'auto',
47
-                        marginTop: 5,
48
-                    }}
49
-                    onPress={() => Linking.openURL(isBug ? links.bugsMail : links.feedbackMail)}>
50
-                    MAIL
51
-                </Button>
52
-                <Button
53
-                    icon="git"
54
-                    mode={"contained"}
55
-                    color={"#609927"}
56
-                    style={{
57
-                        marginLeft: 'auto',
58
-                        marginTop: 5,
59
-                    }}
60
-                    onPress={() => Linking.openURL(isBug ? links.bugsGit : links.feedbackGit)}>
61
-                    GITEA
62
-                </Button>
63
-                <Button
64
-                    icon="facebook"
65
-                    mode={"contained"}
66
-                    color={"#2e88fe"}
67
-                    style={{
68
-                        marginLeft: 'auto',
69
-                        marginTop: 5,
70
-                    }}
71
-                    onPress={() => Linking.openURL(links.facebook)}>
72
-                    Facebook
73
-                </Button>
74
-            </Card.Actions>
75
-        );
76
-    }
30
+class FeedbackScreen extends React.Component<PropsType> {
31
+  /**
32
+   * Gets link buttons
33
+   *
34
+   * @param isBug True if buttons should redirect to bug report methods
35
+   * @returns {*}
36
+   */
37
+  static getButtons(isBug: boolean): React.Node {
38
+    return (
39
+      <Card.Actions
40
+        style={{
41
+          flex: 1,
42
+          flexWrap: 'wrap',
43
+        }}>
44
+        <Button
45
+          icon="email"
46
+          mode="contained"
47
+          style={{
48
+            marginLeft: 'auto',
49
+            marginTop: 5,
50
+          }}
51
+          onPress={() => {
52
+            Linking.openURL(isBug ? links.bugsMail : links.feedbackMail);
53
+          }}>
54
+          MAIL
55
+        </Button>
56
+        <Button
57
+          icon="git"
58
+          mode="contained"
59
+          color="#609927"
60
+          style={{
61
+            marginLeft: 'auto',
62
+            marginTop: 5,
63
+          }}
64
+          onPress={() => {
65
+            Linking.openURL(isBug ? links.bugsGit : links.feedbackGit);
66
+          }}>
67
+          GITEA
68
+        </Button>
69
+        <Button
70
+          icon="facebook"
71
+          mode="contained"
72
+          color="#2e88fe"
73
+          style={{
74
+            marginLeft: 'auto',
75
+            marginTop: 5,
76
+          }}
77
+          onPress={() => {
78
+            Linking.openURL(links.facebook);
79
+          }}>
80
+          Facebook
81
+        </Button>
82
+      </Card.Actions>
83
+    );
84
+  }
77 85
 
78
-    render() {
79
-        return (
80
-            <CollapsibleScrollView style={{padding: 5}}>
81
-                <Card>
82
-                    <Card.Title
83
-                        title={i18n.t('screens.feedback.bugs')}
84
-                        subtitle={i18n.t('screens.feedback.bugsSubtitle')}
85
-                        left={(props) => <Avatar.Icon {...props} icon="bug"/>}
86
-                    />
87
-                    <Card.Content>
88
-                        <Paragraph>
89
-                            {i18n.t('screens.feedback.bugsDescription')}
90
-                        </Paragraph>
91
-                        <Paragraph style={{color: this.props.theme.colors.primary}}>
92
-                            {i18n.t('screens.feedback.contactMeans')}
93
-                        </Paragraph>
94
-                    </Card.Content>
95
-                    {this.getButtons(true)}
96
-                </Card>
86
+  render(): React.Node {
87
+    const {theme} = this.props;
88
+    return (
89
+      <CollapsibleScrollView style={{padding: 5}}>
90
+        <Card>
91
+          <Card.Title
92
+            title={i18n.t('screens.feedback.bugs')}
93
+            subtitle={i18n.t('screens.feedback.bugsSubtitle')}
94
+            left={({
95
+              size,
96
+              color,
97
+            }: {
98
+              size: number,
99
+              color: number,
100
+            }): React.Node => (
101
+              <Avatar.Icon size={size} color={color} icon="bug" />
102
+            )}
103
+          />
104
+          <Card.Content>
105
+            <Paragraph>{i18n.t('screens.feedback.bugsDescription')}</Paragraph>
106
+            <Paragraph style={{color: theme.colors.primary}}>
107
+              {i18n.t('screens.feedback.contactMeans')}
108
+            </Paragraph>
109
+          </Card.Content>
110
+          {FeedbackScreen.getButtons(true)}
111
+        </Card>
97 112
 
98
-                <Card style={{marginTop: 20, marginBottom: 10}}>
99
-                    <Card.Title
100
-                        title={i18n.t('screens.feedback.title')}
101
-                        subtitle={i18n.t('screens.feedback.feedbackSubtitle')}
102
-                        left={(props) => <Avatar.Icon {...props} icon="comment"/>}
103
-                    />
104
-                    <Card.Content>
105
-                        <Paragraph>
106
-                            {i18n.t('screens.feedback.feedbackDescription')}
107
-                        </Paragraph>
108
-                    </Card.Content>
109
-                    {this.getButtons(false)}
110
-                </Card>
111
-            </CollapsibleScrollView>
112
-        );
113
-    }
113
+        <Card style={{marginTop: 20, marginBottom: 10}}>
114
+          <Card.Title
115
+            title={i18n.t('screens.feedback.title')}
116
+            subtitle={i18n.t('screens.feedback.feedbackSubtitle')}
117
+            left={({
118
+              size,
119
+              color,
120
+            }: {
121
+              size: number,
122
+              color: number,
123
+            }): React.Node => (
124
+              <Avatar.Icon size={size} color={color} icon="comment" />
125
+            )}
126
+          />
127
+          <Card.Content>
128
+            <Paragraph>
129
+              {i18n.t('screens.feedback.feedbackDescription')}
130
+            </Paragraph>
131
+          </Card.Content>
132
+          {FeedbackScreen.getButtons(false)}
133
+        </Card>
134
+      </CollapsibleScrollView>
135
+    );
136
+  }
114 137
 }
115 138
 
116 139
 export default withTheme(FeedbackScreen);

+ 291
- 235
src/screens/Other/Settings/SettingsScreen.js View File

@@ -1,267 +1,323 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {View} from "react-native";
5
-import type {CustomTheme} from "../../../managers/ThemeManager";
6
-import ThemeManager from '../../../managers/ThemeManager';
7
-import i18n from "i18n-js";
8
-import AsyncStorageManager from "../../../managers/AsyncStorageManager";
4
+import {View} from 'react-native';
5
+import i18n from 'i18n-js';
9 6
 import {Card, List, Switch, ToggleButton, withTheme} from 'react-native-paper';
10
-import {Appearance} from "react-native-appearance";
11
-import CustomSlider from "../../../components/Overrides/CustomSlider";
12
-import {StackNavigationProp} from "@react-navigation/stack";
13
-import CollapsibleScrollView from "../../../components/Collapsible/CollapsibleScrollView";
7
+import {Appearance} from 'react-native-appearance';
8
+import {StackNavigationProp} from '@react-navigation/stack';
9
+import type {CustomThemeType} from '../../../managers/ThemeManager';
10
+import ThemeManager from '../../../managers/ThemeManager';
11
+import AsyncStorageManager from '../../../managers/AsyncStorageManager';
12
+import CustomSlider from '../../../components/Overrides/CustomSlider';
13
+import CollapsibleScrollView from '../../../components/Collapsible/CollapsibleScrollView';
14 14
 
15
-type Props = {
16
-    navigation: StackNavigationProp,
17
-    theme: CustomTheme,
15
+type PropsType = {
16
+  navigation: StackNavigationProp,
17
+  theme: CustomThemeType,
18 18
 };
19 19
 
20
-type State = {
21
-    nightMode: boolean,
22
-    nightModeFollowSystem: boolean,
23
-    notificationReminderSelected: number,
24
-    startScreenPickerSelected: string,
25
-    isDebugUnlocked: boolean,
20
+type StateType = {
21
+  nightMode: boolean,
22
+  nightModeFollowSystem: boolean,
23
+  startScreenPickerSelected: string,
24
+  isDebugUnlocked: boolean,
26 25
 };
27 26
 
28 27
 /**
29 28
  * Class defining the Settings screen. This screen shows controls to modify app preferences.
30 29
  */
31
-class SettingsScreen extends React.Component<Props, State> {
30
+class SettingsScreen extends React.Component<PropsType, StateType> {
31
+  savedNotificationReminder: number;
32 32
 
33
-    savedNotificationReminder: number;
33
+  /**
34
+   * Loads user preferences into state
35
+   */
36
+  constructor() {
37
+    super();
38
+    const notifReminder = AsyncStorageManager.getString(
39
+      AsyncStorageManager.PREFERENCES.proxiwashNotifications.key,
40
+    );
41
+    this.savedNotificationReminder = parseInt(notifReminder, 10);
42
+    if (Number.isNaN(this.savedNotificationReminder))
43
+      this.savedNotificationReminder = 0;
34 44
 
35
-    /**
36
-     * Loads user preferences into state
37
-     */
38
-    constructor() {
39
-        super();
40
-        let notifReminder = AsyncStorageManager.getString(AsyncStorageManager.PREFERENCES.proxiwashNotifications.key);
41
-        this.savedNotificationReminder = parseInt(notifReminder);
42
-        if (isNaN(this.savedNotificationReminder))
43
-            this.savedNotificationReminder = 0;
45
+    this.state = {
46
+      nightMode: ThemeManager.getNightMode(),
47
+      nightModeFollowSystem:
48
+        AsyncStorageManager.getBool(
49
+          AsyncStorageManager.PREFERENCES.nightModeFollowSystem.key,
50
+        ) && Appearance.getColorScheme() !== 'no-preference',
51
+      startScreenPickerSelected: AsyncStorageManager.getString(
52
+        AsyncStorageManager.PREFERENCES.defaultStartScreen.key,
53
+      ),
54
+      isDebugUnlocked: AsyncStorageManager.getBool(
55
+        AsyncStorageManager.PREFERENCES.debugUnlocked.key,
56
+      ),
57
+    };
58
+  }
44 59
 
45
-        this.state = {
46
-            nightMode: ThemeManager.getNightMode(),
47
-            nightModeFollowSystem: AsyncStorageManager.getBool(AsyncStorageManager.PREFERENCES.nightModeFollowSystem.key)
48
-                && Appearance.getColorScheme() !== 'no-preference',
49
-            notificationReminderSelected: this.savedNotificationReminder,
50
-            startScreenPickerSelected: AsyncStorageManager.getString(AsyncStorageManager.PREFERENCES.defaultStartScreen.key),
51
-            isDebugUnlocked: AsyncStorageManager.getBool(AsyncStorageManager.PREFERENCES.debugUnlocked.key)
52
-        };
53
-    }
60
+  /**
61
+   * Saves the value for the proxiwash reminder notification time
62
+   *
63
+   * @param value The value to store
64
+   */
65
+  onProxiwashNotifPickerValueChange = (value: number) => {
66
+    AsyncStorageManager.set(
67
+      AsyncStorageManager.PREFERENCES.proxiwashNotifications.key,
68
+      value,
69
+    );
70
+  };
54 71
 
55
-    /**
56
-     * Unlocks debug mode and saves its state to user preferences
57
-     */
58
-    unlockDebugMode = () => {
59
-        this.setState({isDebugUnlocked: true});
60
-        AsyncStorageManager.set(AsyncStorageManager.PREFERENCES.debugUnlocked.key, true);
72
+  /**
73
+   * Saves the value for the proxiwash reminder notification time
74
+   *
75
+   * @param value The value to store
76
+   */
77
+  onStartScreenPickerValueChange = (value: string) => {
78
+    if (value != null) {
79
+      this.setState({startScreenPickerSelected: value});
80
+      AsyncStorageManager.set(
81
+        AsyncStorageManager.PREFERENCES.defaultStartScreen.key,
82
+        value,
83
+      );
61 84
     }
85
+  };
62 86
 
63
-    /**
64
-     * Saves the value for the proxiwash reminder notification time
65
-     *
66
-     * @param value The value to store
67
-     */
68
-    onProxiwashNotifPickerValueChange = (value: number) => {
69
-        this.setState({notificationReminderSelected: value});
70
-        AsyncStorageManager.set(AsyncStorageManager.PREFERENCES.proxiwashNotifications.key, value);
71
-    };
87
+  /**
88
+   * Returns a picker allowing the user to select the proxiwash reminder notification time
89
+   *
90
+   * @returns {React.Node}
91
+   */
92
+  getProxiwashNotifPicker(): React.Node {
93
+    const {theme} = this.props;
94
+    return (
95
+      <CustomSlider
96
+        style={{flex: 1, marginHorizontal: 10, height: 50}}
97
+        minimumValue={0}
98
+        maximumValue={10}
99
+        step={1}
100
+        value={this.savedNotificationReminder}
101
+        onValueChange={this.onProxiwashNotifPickerValueChange}
102
+        thumbTintColor={theme.colors.primary}
103
+        minimumTrackTintColor={theme.colors.primary}
104
+      />
105
+    );
106
+  }
72 107
 
73
-    /**
74
-     * Saves the value for the proxiwash reminder notification time
75
-     *
76
-     * @param value The value to store
77
-     */
78
-    onStartScreenPickerValueChange = (value: string) => {
79
-        if (value != null) {
80
-            this.setState({startScreenPickerSelected: value});
81
-            AsyncStorageManager.set(AsyncStorageManager.PREFERENCES.defaultStartScreen.key, value);
82
-        }
83
-    };
108
+  /**
109
+   * Returns a picker allowing the user to select the start screen
110
+   *
111
+   * @returns {React.Node}
112
+   */
113
+  getStartScreenPicker(): React.Node {
114
+    const {startScreenPickerSelected} = this.state;
115
+    return (
116
+      <ToggleButton.Row
117
+        onValueChange={this.onStartScreenPickerValueChange}
118
+        value={startScreenPickerSelected}
119
+        style={{marginLeft: 'auto', marginRight: 'auto'}}>
120
+        <ToggleButton icon="account-circle" value="services" />
121
+        <ToggleButton icon="tshirt-crew" value="proxiwash" />
122
+        <ToggleButton icon="triangle" value="home" />
123
+        <ToggleButton icon="calendar-range" value="planning" />
124
+        <ToggleButton icon="clock" value="planex" />
125
+      </ToggleButton.Row>
126
+    );
127
+  }
84 128
 
85
-    /**
86
-     * Returns a picker allowing the user to select the proxiwash reminder notification time
87
-     *
88
-     * @returns {React.Node}
89
-     */
90
-    getProxiwashNotifPicker() {
91
-        return (
92
-            <CustomSlider
93
-                style={{flex: 1, marginHorizontal: 10, height: 50}}
94
-                minimumValue={0}
95
-                maximumValue={10}
96
-                step={1}
97
-                value={this.savedNotificationReminder}
98
-                onValueChange={this.onProxiwashNotifPickerValueChange}
99
-                thumbTintColor={this.props.theme.colors.primary}
100
-                minimumTrackTintColor={this.props.theme.colors.primary}
101
-            />
102
-        );
103
-    }
129
+  /**
130
+   * Toggles night mode and saves it to preferences
131
+   */
132
+  onToggleNightMode = () => {
133
+    const {nightMode} = this.state;
134
+    ThemeManager.getInstance().setNightMode(!nightMode);
135
+    this.setState({nightMode: !nightMode});
136
+  };
104 137
 
105
-    /**
106
-     * Returns a picker allowing the user to select the start screen
107
-     *
108
-     * @returns {React.Node}
109
-     */
110
-    getStartScreenPicker() {
111
-        return (
112
-            <ToggleButton.Row
113
-                onValueChange={this.onStartScreenPickerValueChange}
114
-                value={this.state.startScreenPickerSelected}
115
-                style={{marginLeft: 'auto', marginRight: 'auto'}}
116
-            >
117
-                <ToggleButton icon="account-circle" value="services"/>
118
-                <ToggleButton icon="tshirt-crew" value="proxiwash"/>
119
-                <ToggleButton icon="triangle" value="home"/>
120
-                <ToggleButton icon="calendar-range" value="planning"/>
121
-                <ToggleButton icon="clock" value="planex"/>
122
-            </ToggleButton.Row>
123
-        );
138
+  onToggleNightModeFollowSystem = () => {
139
+    const {nightModeFollowSystem} = this.state;
140
+    const value = !nightModeFollowSystem;
141
+    this.setState({nightModeFollowSystem: value});
142
+    AsyncStorageManager.set(
143
+      AsyncStorageManager.PREFERENCES.nightModeFollowSystem.key,
144
+      value,
145
+    );
146
+    if (value) {
147
+      const nightMode = Appearance.getColorScheme() === 'dark';
148
+      ThemeManager.getInstance().setNightMode(nightMode);
149
+      this.setState({nightMode});
124 150
     }
151
+  };
125 152
 
126
-    /**
127
-     * Toggles night mode and saves it to preferences
128
-     */
129
-    onToggleNightMode = () => {
130
-        ThemeManager.getInstance().setNightMode(!this.state.nightMode);
131
-        this.setState({nightMode: !this.state.nightMode});
132
-    };
153
+  /**
154
+   * Gets a list item using a checkbox control
155
+   *
156
+   * @param onPressCallback The callback when the checkbox state changes
157
+   * @param icon The icon name to display on the list item
158
+   * @param title The text to display as this list item title
159
+   * @param subtitle The text to display as this list item subtitle
160
+   * @param state The current state of the switch
161
+   * @returns {React.Node}
162
+   */
163
+  static getToggleItem(
164
+    onPressCallback: () => void,
165
+    icon: string,
166
+    title: string,
167
+    subtitle: string,
168
+    state: boolean,
169
+  ): React.Node {
170
+    return (
171
+      <List.Item
172
+        title={title}
173
+        description={subtitle}
174
+        left={({size, color}: {size: number, color: number}): React.Node => (
175
+          <List.Icon size={size} color={color} icon={icon} />
176
+        )}
177
+        right={(): React.Node => (
178
+          <Switch value={state} onValueChange={onPressCallback} />
179
+        )}
180
+      />
181
+    );
182
+  }
133 183
 
134
-    onToggleNightModeFollowSystem = () => {
135
-        const value = !this.state.nightModeFollowSystem;
136
-        this.setState({nightModeFollowSystem: value});
137
-        AsyncStorageManager.set(AsyncStorageManager.PREFERENCES.nightModeFollowSystem.key, value);
138
-        if (value) {
139
-            const nightMode = Appearance.getColorScheme() === 'dark';
140
-            ThemeManager.getInstance().setNightMode(nightMode);
141
-            this.setState({nightMode: nightMode});
142
-        }
143
-    };
184
+  getNavigateItem(
185
+    route: string,
186
+    icon: string,
187
+    title: string,
188
+    subtitle: string,
189
+    onLongPress?: () => void,
190
+  ): React.Node {
191
+    const {navigation} = this.props;
192
+    return (
193
+      <List.Item
194
+        title={title}
195
+        description={subtitle}
196
+        onPress={() => {
197
+          navigation.navigate(route);
198
+        }}
199
+        left={({size, color}: {size: number, color: number}): React.Node => (
200
+          <List.Icon size={size} color={color} icon={icon} />
201
+        )}
202
+        right={({size, color}: {size: number, color: number}): React.Node => (
203
+          <List.Icon size={size} color={color} icon="chevron-right" />
204
+        )}
205
+        onLongPress={onLongPress}
206
+      />
207
+    );
208
+  }
144 209
 
145
-    /**
146
-     * Gets a list item using a checkbox control
147
-     *
148
-     * @param onPressCallback The callback when the checkbox state changes
149
-     * @param icon The icon name to display on the list item
150
-     * @param title The text to display as this list item title
151
-     * @param subtitle The text to display as this list item subtitle
152
-     * @param state The current state of the switch
153
-     * @returns {React.Node}
154
-     */
155
-    getToggleItem(onPressCallback: Function, icon: string, title: string, subtitle: string, state: boolean) {
156
-        return (
210
+  /**
211
+   * Unlocks debug mode and saves its state to user preferences
212
+   */
213
+  unlockDebugMode = () => {
214
+    this.setState({isDebugUnlocked: true});
215
+    AsyncStorageManager.set(
216
+      AsyncStorageManager.PREFERENCES.debugUnlocked.key,
217
+      true,
218
+    );
219
+  };
220
+
221
+  render(): React.Node {
222
+    const {nightModeFollowSystem, nightMode, isDebugUnlocked} = this.state;
223
+    return (
224
+      <CollapsibleScrollView>
225
+        <Card style={{margin: 5}}>
226
+          <Card.Title title={i18n.t('screens.settings.generalCard')} />
227
+          <List.Section>
228
+            {Appearance.getColorScheme() !== 'no-preference'
229
+              ? SettingsScreen.getToggleItem(
230
+                  this.onToggleNightModeFollowSystem,
231
+                  'theme-light-dark',
232
+                  i18n.t('screens.settings.nightModeAuto'),
233
+                  i18n.t('screens.settings.nightModeAutoSub'),
234
+                  nightModeFollowSystem,
235
+                )
236
+              : null}
237
+            {Appearance.getColorScheme() === 'no-preference' ||
238
+            !nightModeFollowSystem
239
+              ? SettingsScreen.getToggleItem(
240
+                  this.onToggleNightMode,
241
+                  'theme-light-dark',
242
+                  i18n.t('screens.settings.nightMode'),
243
+                  nightMode
244
+                    ? i18n.t('screens.settings.nightModeSubOn')
245
+                    : i18n.t('screens.settings.nightModeSubOff'),
246
+                  nightMode,
247
+                )
248
+              : null}
157 249
             <List.Item
158
-                title={title}
159
-                description={subtitle}
160
-                left={props => <List.Icon {...props} icon={icon}/>}
161
-                right={() =>
162
-                    <Switch
163
-                        value={state}
164
-                        onValueChange={onPressCallback}
165
-                    />}
250
+              title={i18n.t('screens.settings.startScreen')}
251
+              description={i18n.t('screens.settings.startScreenSub')}
252
+              left={({
253
+                size,
254
+                color,
255
+              }: {
256
+                size: number,
257
+                color: number,
258
+              }): React.Node => (
259
+                <List.Icon size={size} color={color} icon="power" />
260
+              )}
166 261
             />
167
-        );
168
-    }
169
-
170
-    getNavigateItem(route: string, icon: string, title: string, subtitle: string, onLongPress?: () => void) {
171
-        return (
262
+            {this.getStartScreenPicker()}
263
+            {this.getNavigateItem(
264
+              'dashboard-edit',
265
+              'view-dashboard',
266
+              i18n.t('screens.settings.dashboard'),
267
+              i18n.t('screens.settings.dashboardSub'),
268
+            )}
269
+          </List.Section>
270
+        </Card>
271
+        <Card style={{margin: 5}}>
272
+          <Card.Title title="Proxiwash" />
273
+          <List.Section>
172 274
             <List.Item
173
-                title={title}
174
-                description={subtitle}
175
-                onPress={() => this.props.navigation.navigate(route)}
176
-                left={props => <List.Icon {...props} icon={icon}/>}
177
-                right={props => <List.Icon {...props} icon={"chevron-right"}/>}
178
-                onLongPress={onLongPress}
275
+              title={i18n.t('screens.settings.proxiwashNotifReminder')}
276
+              description={i18n.t('screens.settings.proxiwashNotifReminderSub')}
277
+              left={({
278
+                size,
279
+                color,
280
+              }: {
281
+                size: number,
282
+                color: number,
283
+              }): React.Node => (
284
+                <List.Icon size={size} color={color} icon="washing-machine" />
285
+              )}
179 286
             />
180
-        );
181
-    }
182
-
183
-    render() {
184
-        return (
185
-            <CollapsibleScrollView>
186
-                <Card style={{margin: 5}}>
187
-                    <Card.Title title={i18n.t('screens.settings.generalCard')}/>
188
-                    <List.Section>
189
-                        {Appearance.getColorScheme() !== 'no-preference' ? this.getToggleItem(
190
-                            this.onToggleNightModeFollowSystem,
191
-                            'theme-light-dark',
192
-                            i18n.t('screens.settings.nightModeAuto'),
193
-                            i18n.t('screens.settings.nightModeAutoSub'),
194
-                            this.state.nightModeFollowSystem
195
-                        ) : null}
196
-                        {
197
-                            Appearance.getColorScheme() === 'no-preference' || !this.state.nightModeFollowSystem ?
198
-                                this.getToggleItem(
199
-                                    this.onToggleNightMode,
200
-                                    'theme-light-dark',
201
-                                    i18n.t('screens.settings.nightMode'),
202
-                                    this.state.nightMode ?
203
-                                        i18n.t('screens.settings.nightModeSubOn') :
204
-                                        i18n.t('screens.settings.nightModeSubOff'),
205
-                                    this.state.nightMode
206
-                                ) : null
207
-                        }
208
-                        <List.Item
209
-                            title={i18n.t('screens.settings.startScreen')}
210
-                            description={i18n.t('screens.settings.startScreenSub')}
211
-                            left={props => <List.Icon {...props} icon="power"/>}
212
-                        />
213
-                        {this.getStartScreenPicker()}
214
-                        {this.getNavigateItem(
215
-                            "dashboard-edit",
216
-                            "view-dashboard",
217
-                            i18n.t('screens.settings.dashboard'),
218
-                            i18n.t('screens.settings.dashboardSub')
219
-                        )}
220
-                    </List.Section>
221
-                </Card>
222
-                <Card style={{margin: 5}}>
223
-                    <Card.Title title="Proxiwash"/>
224
-                    <List.Section>
225
-                        <List.Item
226
-                            title={i18n.t('screens.settings.proxiwashNotifReminder')}
227
-                            description={i18n.t('screens.settings.proxiwashNotifReminderSub')}
228
-                            left={props => <List.Icon {...props} icon="washing-machine"/>}
229
-                            opened={true}
230
-                        />
231
-                        <View style={{marginLeft: 30}}>
232
-                            {this.getProxiwashNotifPicker()}
233
-                        </View>
234
-                    </List.Section>
235
-                </Card>
236
-                <Card style={{margin: 5}}>
237
-                    <Card.Title title={i18n.t('screens.settings.information')}/>
238
-                    <List.Section>
239
-                        {this.state.isDebugUnlocked
240
-                            ? this.getNavigateItem(
241
-                                "debug",
242
-                                "bug-check",
243
-                                i18n.t('screens.debug.title'),
244
-                                ""
245
-                            )
246
-                            : null}
247
-                        {this.getNavigateItem(
248
-                            "about",
249
-                            "information",
250
-                            i18n.t('screens.about.title'),
251
-                            i18n.t('screens.about.buttonDesc'),
252
-                            this.unlockDebugMode,
253
-                        )}
254
-                        {this.getNavigateItem(
255
-                            "feedback",
256
-                            "comment-quote",
257
-                            i18n.t('screens.feedback.homeButtonTitle'),
258
-                            i18n.t('screens.feedback.homeButtonSubtitle'),
259
-                        )}
260
-                    </List.Section>
261
-                </Card>
262
-            </CollapsibleScrollView>
263
-        );
264
-    }
287
+            <View style={{marginLeft: 30}}>
288
+              {this.getProxiwashNotifPicker()}
289
+            </View>
290
+          </List.Section>
291
+        </Card>
292
+        <Card style={{margin: 5}}>
293
+          <Card.Title title={i18n.t('screens.settings.information')} />
294
+          <List.Section>
295
+            {isDebugUnlocked
296
+              ? this.getNavigateItem(
297
+                  'debug',
298
+                  'bug-check',
299
+                  i18n.t('screens.debug.title'),
300
+                  '',
301
+                )
302
+              : null}
303
+            {this.getNavigateItem(
304
+              'about',
305
+              'information',
306
+              i18n.t('screens.about.title'),
307
+              i18n.t('screens.about.buttonDesc'),
308
+              this.unlockDebugMode,
309
+            )}
310
+            {this.getNavigateItem(
311
+              'feedback',
312
+              'comment-quote',
313
+              i18n.t('screens.feedback.homeButtonTitle'),
314
+              i18n.t('screens.feedback.homeButtonSubtitle'),
315
+            )}
316
+          </List.Section>
317
+        </Card>
318
+      </CollapsibleScrollView>
319
+    );
320
+  }
265 321
 }
266 322
 
267 323
 export default withTheme(SettingsScreen);

Loading…
Cancel
Save