Browse Source

Improve dialog components to match linter

Arnaud Vergnet 3 years ago
parent
commit
925bded69b

+ 36
- 35
src/components/Amicale/LogoutDialog.js View File

@@ -2,45 +2,46 @@
2 2
 
3 3
 import * as React from 'react';
4 4
 import i18n from 'i18n-js';
5
-import LoadingConfirmDialog from "../Dialogs/LoadingConfirmDialog";
6
-import ConnectionManager from "../../managers/ConnectionManager";
7
-import {StackNavigationProp} from "@react-navigation/stack";
5
+import {StackNavigationProp} from '@react-navigation/stack';
6
+import LoadingConfirmDialog from '../Dialogs/LoadingConfirmDialog';
7
+import ConnectionManager from '../../managers/ConnectionManager';
8 8
 
9
-type Props = {
10
-    navigation: StackNavigationProp,
11
-    visible: boolean,
12
-    onDismiss: () => void,
13
-}
14
-
15
-class LogoutDialog extends React.PureComponent<Props> {
9
+type PropsType = {
10
+  navigation: StackNavigationProp,
11
+  visible: boolean,
12
+  onDismiss: () => void,
13
+};
16 14
 
17
-    onClickAccept = async () => {
18
-        return new Promise((resolve) => {
19
-            ConnectionManager.getInstance().disconnect()
20
-                .then(() => {
21
-                    this.props.navigation.reset({
22
-                        index: 0,
23
-                        routes: [{name: 'main'}],
24
-                    });
25
-                    this.props.onDismiss();
26
-                    resolve();
27
-                });
15
+class LogoutDialog extends React.PureComponent<PropsType> {
16
+  onClickAccept = async (): Promise<void> => {
17
+    const {props} = this;
18
+    return new Promise((resolve: () => void) => {
19
+      ConnectionManager.getInstance()
20
+        .disconnect()
21
+        .then(() => {
22
+          props.navigation.reset({
23
+            index: 0,
24
+            routes: [{name: 'main'}],
25
+          });
26
+          props.onDismiss();
27
+          resolve();
28 28
         });
29
-    };
29
+    });
30
+  };
30 31
 
31
-    render() {
32
-        return (
33
-            <LoadingConfirmDialog
34
-                {...this.props}
35
-                visible={this.props.visible}
36
-                onDismiss={this.props.onDismiss}
37
-                onAccept={this.onClickAccept}
38
-                title={i18n.t("dialog.disconnect.title")}
39
-                titleLoading={i18n.t("dialog.disconnect.titleLoading")}
40
-                message={i18n.t("dialog.disconnect.message")}
41
-            />
42
-        );
43
-    }
32
+  render(): React.Node {
33
+    const {props} = this;
34
+    return (
35
+      <LoadingConfirmDialog
36
+        visible={props.visible}
37
+        onDismiss={props.onDismiss}
38
+        onAccept={this.onClickAccept}
39
+        title={i18n.t('dialog.disconnect.title')}
40
+        titleLoading={i18n.t('dialog.disconnect.titleLoading')}
41
+        message={i18n.t('dialog.disconnect.message')}
42
+      />
43
+    );
44
+  }
44 45
 }
45 46
 
46 47
 export default LogoutDialog;

+ 24
- 26
src/components/Dialogs/AlertDialog.js View File

@@ -2,34 +2,32 @@
2 2
 
3 3
 import * as React from 'react';
4 4
 import {Button, Dialog, Paragraph, Portal} from 'react-native-paper';
5
-import i18n from "i18n-js";
5
+import i18n from 'i18n-js';
6 6
 
7
-type Props = {
8
-    visible: boolean,
9
-    onDismiss: () => void,
10
-    title: string,
11
-    message: string,
12
-}
13
-
14
-class AlertDialog extends React.PureComponent<Props> {
7
+type PropsType = {
8
+  visible: boolean,
9
+  onDismiss: () => void,
10
+  title: string,
11
+  message: string,
12
+};
15 13
 
16
-    render() {
17
-        return (
18
-            <Portal>
19
-                <Dialog
20
-                    visible={this.props.visible}
21
-                    onDismiss={this.props.onDismiss}>
22
-                    <Dialog.Title>{this.props.title}</Dialog.Title>
23
-                    <Dialog.Content>
24
-                        <Paragraph>{this.props.message}</Paragraph>
25
-                    </Dialog.Content>
26
-                    <Dialog.Actions>
27
-                        <Button onPress={this.props.onDismiss}>{i18n.t("dialog.ok")}</Button>
28
-                    </Dialog.Actions>
29
-                </Dialog>
30
-            </Portal>
31
-        );
32
-    }
14
+class AlertDialog extends React.PureComponent<PropsType> {
15
+  render(): React.Node {
16
+    const {props} = this;
17
+    return (
18
+      <Portal>
19
+        <Dialog visible={props.visible} onDismiss={props.onDismiss}>
20
+          <Dialog.Title>{props.title}</Dialog.Title>
21
+          <Dialog.Content>
22
+            <Paragraph>{props.message}</Paragraph>
23
+          </Dialog.Content>
24
+          <Dialog.Actions>
25
+            <Button onPress={props.onDismiss}>{i18n.t('dialog.ok')}</Button>
26
+          </Dialog.Actions>
27
+        </Dialog>
28
+      </Portal>
29
+    );
30
+  }
33 31
 }
34 32
 
35 33
 export default AlertDialog;

+ 59
- 52
src/components/Dialogs/ErrorDialog.js View File

@@ -1,64 +1,71 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import i18n from "i18n-js";
5
-import {ERROR_TYPE} from "../../utils/WebData";
6
-import AlertDialog from "./AlertDialog";
4
+import i18n from 'i18n-js';
5
+import {ERROR_TYPE} from '../../utils/WebData';
6
+import AlertDialog from './AlertDialog';
7 7
 
8
-type Props = {
9
-    visible: boolean,
10
-    onDismiss: () => void,
11
-    errorCode: number,
12
-}
8
+type PropsType = {
9
+  visible: boolean,
10
+  onDismiss: () => void,
11
+  errorCode: number,
12
+};
13 13
 
14
-class ErrorDialog extends React.PureComponent<Props> {
14
+class ErrorDialog extends React.PureComponent<PropsType> {
15
+  title: string;
15 16
 
16
-    title: string;
17
-    message: string;
17
+  message: string;
18 18
 
19
-    generateMessage() {
20
-        this.title = i18n.t("errors.title");
21
-        switch (this.props.errorCode) {
22
-            case ERROR_TYPE.BAD_CREDENTIALS:
23
-                this.message = i18n.t("errors.badCredentials");
24
-                break;
25
-            case ERROR_TYPE.BAD_TOKEN:
26
-                this.message = i18n.t("errors.badToken");
27
-                break;
28
-            case ERROR_TYPE.NO_CONSENT:
29
-                this.message = i18n.t("errors.noConsent");
30
-                break;
31
-            case ERROR_TYPE.TOKEN_SAVE:
32
-                this.message = i18n.t("errors.tokenSave");
33
-                break;
34
-            case ERROR_TYPE.TOKEN_RETRIEVE:
35
-                this.message = i18n.t("errors.unknown");
36
-                break;
37
-            case ERROR_TYPE.BAD_INPUT:
38
-                this.message = i18n.t("errors.badInput");
39
-                break;
40
-            case ERROR_TYPE.FORBIDDEN:
41
-                this.message = i18n.t("errors.forbidden");
42
-                break;
43
-            case ERROR_TYPE.CONNECTION_ERROR:
44
-                this.message = i18n.t("errors.connectionError");
45
-                break;
46
-            case ERROR_TYPE.SERVER_ERROR:
47
-                this.message = i18n.t("errors.serverError");
48
-                break;
49
-            default:
50
-                this.message = i18n.t("errors.unknown");
51
-                break;
52
-        }
53
-        this.message += "\n\nCode " + this.props.errorCode;
19
+  generateMessage() {
20
+    const {props} = this;
21
+    this.title = i18n.t('errors.title');
22
+    switch (props.errorCode) {
23
+      case ERROR_TYPE.BAD_CREDENTIALS:
24
+        this.message = i18n.t('errors.badCredentials');
25
+        break;
26
+      case ERROR_TYPE.BAD_TOKEN:
27
+        this.message = i18n.t('errors.badToken');
28
+        break;
29
+      case ERROR_TYPE.NO_CONSENT:
30
+        this.message = i18n.t('errors.noConsent');
31
+        break;
32
+      case ERROR_TYPE.TOKEN_SAVE:
33
+        this.message = i18n.t('errors.tokenSave');
34
+        break;
35
+      case ERROR_TYPE.TOKEN_RETRIEVE:
36
+        this.message = i18n.t('errors.unknown');
37
+        break;
38
+      case ERROR_TYPE.BAD_INPUT:
39
+        this.message = i18n.t('errors.badInput');
40
+        break;
41
+      case ERROR_TYPE.FORBIDDEN:
42
+        this.message = i18n.t('errors.forbidden');
43
+        break;
44
+      case ERROR_TYPE.CONNECTION_ERROR:
45
+        this.message = i18n.t('errors.connectionError');
46
+        break;
47
+      case ERROR_TYPE.SERVER_ERROR:
48
+        this.message = i18n.t('errors.serverError');
49
+        break;
50
+      default:
51
+        this.message = i18n.t('errors.unknown');
52
+        break;
54 53
     }
54
+    this.message += `\n\nCode ${props.errorCode}`;
55
+  }
55 56
 
56
-    render() {
57
-        this.generateMessage();
58
-        return (
59
-            <AlertDialog {...this.props} title={this.title} message={this.message}/>
60
-        );
61
-    }
57
+  render(): React.Node {
58
+    this.generateMessage();
59
+    const {props} = this;
60
+    return (
61
+      <AlertDialog
62
+        visible={props.visible}
63
+        onDismiss={props.onDismiss}
64
+        title={this.title}
65
+        message={this.message}
66
+      />
67
+    );
68
+  }
62 69
 }
63 70
 
64 71
 export default ErrorDialog;

+ 90
- 76
src/components/Dialogs/LoadingConfirmDialog.js View File

@@ -1,92 +1,106 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {ActivityIndicator, Button, Dialog, Paragraph, Portal} from 'react-native-paper';
5
-import i18n from "i18n-js";
4
+import {
5
+  ActivityIndicator,
6
+  Button,
7
+  Dialog,
8
+  Paragraph,
9
+  Portal,
10
+} from 'react-native-paper';
11
+import i18n from 'i18n-js';
6 12
 
7
-type Props = {
8
-    visible: boolean,
9
-    onDismiss: () => void,
10
-    onAccept: () => Promise<void>, // async function to be executed
11
-    title: string,
12
-    titleLoading: string,
13
-    message: string,
14
-    startLoading: boolean,
15
-}
16
-
17
-type State = {
18
-    loading: boolean,
19
-}
13
+type PropsType = {
14
+  visible: boolean,
15
+  onDismiss?: () => void,
16
+  onAccept?: () => Promise<void>, // async function to be executed
17
+  title?: string,
18
+  titleLoading?: string,
19
+  message?: string,
20
+  startLoading?: boolean,
21
+};
20 22
 
21
-class LoadingConfirmDialog extends React.PureComponent<Props, State> {
23
+type StateType = {
24
+  loading: boolean,
25
+};
22 26
 
23
-    static defaultProps = {
24
-        title: '',
25
-        message: '',
26
-        onDismiss: () => {},
27
-        onAccept: () => {return Promise.resolve()},
28
-        startLoading: false,
29
-    }
27
+class LoadingConfirmDialog extends React.PureComponent<PropsType, StateType> {
28
+  static defaultProps = {
29
+    onDismiss: () => {},
30
+    onAccept: (): Promise<void> => {
31
+      return Promise.resolve();
32
+    },
33
+    title: '',
34
+    titleLoading: '',
35
+    message: '',
36
+    startLoading: false,
37
+  };
30 38
 
31
-    state = {
32
-        loading: this.props.startLoading,
39
+  constructor(props: PropsType) {
40
+    super(props);
41
+    this.state = {
42
+      loading:
43
+        props.startLoading != null
44
+          ? props.startLoading
45
+          : LoadingConfirmDialog.defaultProps.startLoading,
33 46
     };
47
+  }
34 48
 
35
-    /**
36
-     * Set the dialog into loading state and closes it when operation finishes
37
-     */
38
-    onClickAccept = () => {
39
-        this.setState({loading: true});
40
-        this.props.onAccept().then(this.hideLoading);
41
-    };
49
+  /**
50
+   * Set the dialog into loading state and closes it when operation finishes
51
+   */
52
+  onClickAccept = () => {
53
+    const {props} = this;
54
+    this.setState({loading: true});
55
+    if (props.onAccept != null) props.onAccept().then(this.hideLoading);
56
+  };
42 57
 
43
-    /**
44
-     * Waits for fade out animations to finish before hiding loading
45
-     * @returns {TimeoutID}
46
-     */
47
-    hideLoading = () => setTimeout(() => {
48
-        this.setState({loading: false})
58
+  /**
59
+   * Waits for fade out animations to finish before hiding loading
60
+   * @returns {TimeoutID}
61
+   */
62
+  hideLoading = (): TimeoutID =>
63
+    setTimeout(() => {
64
+      this.setState({loading: false});
49 65
     }, 200);
50 66
 
51
-    /**
52
-     * Hide the dialog if it is not loading
53
-     */
54
-    onDismiss = () => {
55
-        if (!this.state.loading)
56
-            this.props.onDismiss();
57
-    };
67
+  /**
68
+   * Hide the dialog if it is not loading
69
+   */
70
+  onDismiss = () => {
71
+    const {state, props} = this;
72
+    if (!state.loading && props.onDismiss != null) props.onDismiss();
73
+  };
58 74
 
59
-    render() {
60
-        return (
61
-            <Portal>
62
-                <Dialog
63
-                    visible={this.props.visible}
64
-                    onDismiss={this.onDismiss}>
65
-                    <Dialog.Title>
66
-                        {this.state.loading
67
-                            ? this.props.titleLoading
68
-                            : this.props.title}
69
-                    </Dialog.Title>
70
-                    <Dialog.Content>
71
-                        {this.state.loading
72
-                            ? <ActivityIndicator
73
-                                animating={true}
74
-                                size={'large'}/>
75
-                            : <Paragraph>{this.props.message}</Paragraph>
76
-                        }
77
-                    </Dialog.Content>
78
-                    {this.state.loading
79
-                        ? null
80
-                        : <Dialog.Actions>
81
-                            <Button onPress={this.onDismiss}
82
-                                    style={{marginRight: 10}}>{i18n.t("dialog.cancel")}</Button>
83
-                            <Button onPress={this.onClickAccept}>{i18n.t("dialog.yes")}</Button>
84
-                        </Dialog.Actions>
85
-                    }
86
-                </Dialog>
87
-            </Portal>
88
-        );
89
-    }
75
+  render(): React.Node {
76
+    const {state, props} = this;
77
+    return (
78
+      <Portal>
79
+        <Dialog visible={props.visible} onDismiss={this.onDismiss}>
80
+          <Dialog.Title>
81
+            {state.loading ? props.titleLoading : props.title}
82
+          </Dialog.Title>
83
+          <Dialog.Content>
84
+            {state.loading ? (
85
+              <ActivityIndicator animating size="large" />
86
+            ) : (
87
+              <Paragraph>{props.message}</Paragraph>
88
+            )}
89
+          </Dialog.Content>
90
+          {state.loading ? null : (
91
+            <Dialog.Actions>
92
+              <Button onPress={this.onDismiss} style={{marginRight: 10}}>
93
+                {i18n.t('dialog.cancel')}
94
+              </Button>
95
+              <Button onPress={this.onClickAccept}>
96
+                {i18n.t('dialog.yes')}
97
+              </Button>
98
+            </Dialog.Actions>
99
+          )}
100
+        </Dialog>
101
+      </Portal>
102
+    );
103
+  }
90 104
 }
91 105
 
92 106
 export default LoadingConfirmDialog;

+ 44
- 49
src/components/Dialogs/OptionsDialog.js View File

@@ -2,55 +2,50 @@
2 2
 
3 3
 import * as React from 'react';
4 4
 import {Button, Dialog, Paragraph, Portal} from 'react-native-paper';
5
-import {FlatList} from "react-native";
6
-
7
-export type OptionsDialogButton = {
8
-    title: string,
9
-    onPress: () => void,
10
-}
11
-
12
-type Props = {
13
-    visible: boolean,
14
-    title: string,
15
-    message: string,
16
-    buttons: Array<OptionsDialogButton>,
17
-    onDismiss: () => void,
18
-}
19
-
20
-class OptionsDialog extends React.PureComponent<Props> {
21
-
22
-    getButtonRender = ({item}: { item: OptionsDialogButton }) => {
23
-        return <Button
24
-            onPress={item.onPress}>
25
-            {item.title}
26
-        </Button>;
27
-    }
28
-
29
-    keyExtractor = (item: OptionsDialogButton) => item.title;
30
-
31
-    render() {
32
-        return (
33
-            <Portal>
34
-                <Dialog
35
-                    visible={this.props.visible}
36
-                    onDismiss={this.props.onDismiss}>
37
-                    <Dialog.Title>{this.props.title}</Dialog.Title>
38
-                    <Dialog.Content>
39
-                        <Paragraph>{this.props.message}</Paragraph>
40
-                    </Dialog.Content>
41
-                    <Dialog.Actions>
42
-                        <FlatList
43
-                            data={this.props.buttons}
44
-                            renderItem={this.getButtonRender}
45
-                            keyExtractor={this.keyExtractor}
46
-                            horizontal={true}
47
-                            inverted={true}
48
-                        />
49
-                    </Dialog.Actions>
50
-                </Dialog>
51
-            </Portal>
52
-        );
53
-    }
5
+import {FlatList} from 'react-native';
6
+
7
+export type OptionsDialogButtonType = {
8
+  title: string,
9
+  onPress: () => void,
10
+};
11
+
12
+type PropsType = {
13
+  visible: boolean,
14
+  title: string,
15
+  message: string,
16
+  buttons: Array<OptionsDialogButtonType>,
17
+  onDismiss: () => void,
18
+};
19
+
20
+class OptionsDialog extends React.PureComponent<PropsType> {
21
+  getButtonRender = ({item}: {item: OptionsDialogButtonType}): React.Node => {
22
+    return <Button onPress={item.onPress}>{item.title}</Button>;
23
+  };
24
+
25
+  keyExtractor = (item: OptionsDialogButtonType): string => item.title;
26
+
27
+  render(): React.Node {
28
+    const {props} = this;
29
+    return (
30
+      <Portal>
31
+        <Dialog visible={props.visible} onDismiss={props.onDismiss}>
32
+          <Dialog.Title>{props.title}</Dialog.Title>
33
+          <Dialog.Content>
34
+            <Paragraph>{props.message}</Paragraph>
35
+          </Dialog.Content>
36
+          <Dialog.Actions>
37
+            <FlatList
38
+              data={props.buttons}
39
+              renderItem={this.getButtonRender}
40
+              keyExtractor={this.keyExtractor}
41
+              horizontal
42
+              inverted
43
+            />
44
+          </Dialog.Actions>
45
+        </Dialog>
46
+      </Portal>
47
+    );
48
+  }
54 49
 }
55 50
 
56 51
 export default OptionsDialog;

Loading…
Cancel
Save