Browse Source

Update dialogs to use TypeScript

Arnaud Vergnet 3 years ago
parent
commit
98518c46b6

src/components/Dialogs/AlertDialog.js → src/components/Dialogs/AlertDialog.tsx View File

@@ -17,36 +17,31 @@
17 17
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
18 18
  */
19 19
 
20
-// @flow
21
-
22 20
 import * as React from 'react';
23 21
 import {Button, Dialog, Paragraph, Portal} from 'react-native-paper';
24 22
 import i18n from 'i18n-js';
25 23
 
26 24
 type PropsType = {
27
-  visible: boolean,
28
-  onDismiss: () => void,
29
-  title: string | React.Node,
30
-  message: string | React.Node,
25
+  visible: boolean;
26
+  onDismiss: () => void;
27
+  title: string | React.ReactNode;
28
+  message: string | React.ReactNode;
31 29
 };
32 30
 
33
-class AlertDialog extends React.PureComponent<PropsType> {
34
-  render(): React.Node {
35
-    const {props} = this;
36
-    return (
37
-      <Portal>
38
-        <Dialog visible={props.visible} onDismiss={props.onDismiss}>
39
-          <Dialog.Title>{props.title}</Dialog.Title>
40
-          <Dialog.Content>
41
-            <Paragraph>{props.message}</Paragraph>
42
-          </Dialog.Content>
43
-          <Dialog.Actions>
44
-            <Button onPress={props.onDismiss}>{i18n.t('dialog.ok')}</Button>
45
-          </Dialog.Actions>
46
-        </Dialog>
47
-      </Portal>
48
-    );
49
-  }
31
+function AlertDialog(props: PropsType) {
32
+  return (
33
+    <Portal>
34
+      <Dialog visible={props.visible} onDismiss={props.onDismiss}>
35
+        <Dialog.Title>{props.title}</Dialog.Title>
36
+        <Dialog.Content>
37
+          <Paragraph>{props.message}</Paragraph>
38
+        </Dialog.Content>
39
+        <Dialog.Actions>
40
+          <Button onPress={props.onDismiss}>{i18n.t('dialog.ok')}</Button>
41
+        </Dialog.Actions>
42
+      </Dialog>
43
+    </Portal>
44
+  );
50 45
 }
51 46
 
52 47
 export default AlertDialog;

+ 0
- 90
src/components/Dialogs/ErrorDialog.js View File

@@ -1,90 +0,0 @@
1
-/*
2
- * Copyright (c) 2019 - 2020 Arnaud Vergnet.
3
- *
4
- * This file is part of Campus INSAT.
5
- *
6
- * Campus INSAT is free software: you can redistribute it and/or modify
7
- *  it under the terms of the GNU General Public License as published by
8
- * the Free Software Foundation, either version 3 of the License, or
9
- * (at your option) any later version.
10
- *
11
- * Campus INSAT is distributed in the hope that it will be useful,
12
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
13
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
14
- * GNU General Public License for more details.
15
- *
16
- * You should have received a copy of the GNU General Public License
17
- * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
18
- */
19
-
20
-// @flow
21
-
22
-import * as React from 'react';
23
-import i18n from 'i18n-js';
24
-import {ERROR_TYPE} from '../../utils/WebData';
25
-import AlertDialog from './AlertDialog';
26
-
27
-type PropsType = {
28
-  visible: boolean,
29
-  onDismiss: () => void,
30
-  errorCode: number,
31
-};
32
-
33
-class ErrorDialog extends React.PureComponent<PropsType> {
34
-  title: string;
35
-
36
-  message: string;
37
-
38
-  generateMessage() {
39
-    const {props} = this;
40
-    this.title = i18n.t('errors.title');
41
-    switch (props.errorCode) {
42
-      case ERROR_TYPE.BAD_CREDENTIALS:
43
-        this.message = i18n.t('errors.badCredentials');
44
-        break;
45
-      case ERROR_TYPE.BAD_TOKEN:
46
-        this.message = i18n.t('errors.badToken');
47
-        break;
48
-      case ERROR_TYPE.NO_CONSENT:
49
-        this.message = i18n.t('errors.noConsent');
50
-        break;
51
-      case ERROR_TYPE.TOKEN_SAVE:
52
-        this.message = i18n.t('errors.tokenSave');
53
-        break;
54
-      case ERROR_TYPE.TOKEN_RETRIEVE:
55
-        this.message = i18n.t('errors.unknown');
56
-        break;
57
-      case ERROR_TYPE.BAD_INPUT:
58
-        this.message = i18n.t('errors.badInput');
59
-        break;
60
-      case ERROR_TYPE.FORBIDDEN:
61
-        this.message = i18n.t('errors.forbidden');
62
-        break;
63
-      case ERROR_TYPE.CONNECTION_ERROR:
64
-        this.message = i18n.t('errors.connectionError');
65
-        break;
66
-      case ERROR_TYPE.SERVER_ERROR:
67
-        this.message = i18n.t('errors.serverError');
68
-        break;
69
-      default:
70
-        this.message = i18n.t('errors.unknown');
71
-        break;
72
-    }
73
-    this.message += `\n\nCode ${props.errorCode}`;
74
-  }
75
-
76
-  render(): React.Node {
77
-    this.generateMessage();
78
-    const {props} = this;
79
-    return (
80
-      <AlertDialog
81
-        visible={props.visible}
82
-        onDismiss={props.onDismiss}
83
-        title={this.title}
84
-        message={this.message}
85
-      />
86
-    );
87
-  }
88
-}
89
-
90
-export default ErrorDialog;

+ 80
- 0
src/components/Dialogs/ErrorDialog.tsx View File

@@ -0,0 +1,80 @@
1
+/*
2
+ * Copyright (c) 2019 - 2020 Arnaud Vergnet.
3
+ *
4
+ * This file is part of Campus INSAT.
5
+ *
6
+ * Campus INSAT is free software: you can redistribute it and/or modify
7
+ *  it under the terms of the GNU General Public License as published by
8
+ * the Free Software Foundation, either version 3 of the License, or
9
+ * (at your option) any later version.
10
+ *
11
+ * Campus INSAT is distributed in the hope that it will be useful,
12
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
13
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
14
+ * GNU General Public License for more details.
15
+ *
16
+ * You should have received a copy of the GNU General Public License
17
+ * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
18
+ */
19
+
20
+import * as React from 'react';
21
+import i18n from 'i18n-js';
22
+import {ERROR_TYPE} from '../../utils/WebData';
23
+import AlertDialog from './AlertDialog';
24
+
25
+type PropsType = {
26
+  visible: boolean;
27
+  onDismiss: () => void;
28
+  errorCode: number;
29
+};
30
+
31
+function ErrorDialog(props: PropsType) {
32
+  let title: string;
33
+  let message: string;
34
+
35
+  title = i18n.t('errors.title');
36
+  switch (props.errorCode) {
37
+    case ERROR_TYPE.BAD_CREDENTIALS:
38
+      message = i18n.t('errors.badCredentials');
39
+      break;
40
+    case ERROR_TYPE.BAD_TOKEN:
41
+      message = i18n.t('errors.badToken');
42
+      break;
43
+    case ERROR_TYPE.NO_CONSENT:
44
+      message = i18n.t('errors.noConsent');
45
+      break;
46
+    case ERROR_TYPE.TOKEN_SAVE:
47
+      message = i18n.t('errors.tokenSave');
48
+      break;
49
+    case ERROR_TYPE.TOKEN_RETRIEVE:
50
+      message = i18n.t('errors.unknown');
51
+      break;
52
+    case ERROR_TYPE.BAD_INPUT:
53
+      message = i18n.t('errors.badInput');
54
+      break;
55
+    case ERROR_TYPE.FORBIDDEN:
56
+      message = i18n.t('errors.forbidden');
57
+      break;
58
+    case ERROR_TYPE.CONNECTION_ERROR:
59
+      message = i18n.t('errors.connectionError');
60
+      break;
61
+    case ERROR_TYPE.SERVER_ERROR:
62
+      message = i18n.t('errors.serverError');
63
+      break;
64
+    default:
65
+      message = i18n.t('errors.unknown');
66
+      break;
67
+  }
68
+  message += `\n\nCode ${props.errorCode}`;
69
+
70
+  return (
71
+    <AlertDialog
72
+      visible={props.visible}
73
+      onDismiss={props.onDismiss}
74
+      title={title}
75
+      message={message}
76
+    />
77
+  );
78
+}
79
+
80
+export default ErrorDialog;

src/components/Dialogs/LoadingConfirmDialog.js → src/components/Dialogs/LoadingConfirmDialog.tsx View File

@@ -17,8 +17,6 @@
17 17
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
18 18
  */
19 19
 
20
-// @flow
21
-
22 20
 import * as React from 'react';
23 21
 import {
24 22
   ActivityIndicator,
@@ -30,20 +28,23 @@ import {
30 28
 import i18n from 'i18n-js';
31 29
 
32 30
 type PropsType = {
33
-  visible: boolean,
34
-  onDismiss?: () => void,
35
-  onAccept?: () => Promise<void>, // async function to be executed
36
-  title?: string,
37
-  titleLoading?: string,
38
-  message?: string,
39
-  startLoading?: boolean,
31
+  visible: boolean;
32
+  onDismiss?: () => void;
33
+  onAccept?: () => Promise<void>; // async function to be executed
34
+  title?: string;
35
+  titleLoading?: string;
36
+  message?: string;
37
+  startLoading?: boolean;
40 38
 };
41 39
 
42 40
 type StateType = {
43
-  loading: boolean,
41
+  loading: boolean;
44 42
 };
45 43
 
46
-class LoadingConfirmDialog extends React.PureComponent<PropsType, StateType> {
44
+export default class LoadingConfirmDialog extends React.PureComponent<
45
+  PropsType,
46
+  StateType
47
+> {
47 48
   static defaultProps = {
48 49
     onDismiss: () => {},
49 50
     onAccept: (): Promise<void> => {
@@ -71,14 +72,16 @@ class LoadingConfirmDialog extends React.PureComponent<PropsType, StateType> {
71 72
   onClickAccept = () => {
72 73
     const {props} = this;
73 74
     this.setState({loading: true});
74
-    if (props.onAccept != null) props.onAccept().then(this.hideLoading);
75
+    if (props.onAccept != null) {
76
+      props.onAccept().then(this.hideLoading);
77
+    }
75 78
   };
76 79
 
77 80
   /**
78 81
    * Waits for fade out animations to finish before hiding loading
79
-   * @returns {TimeoutID}
82
+   * @returns {NodeJS.Timeout}
80 83
    */
81
-  hideLoading = (): TimeoutID =>
84
+  hideLoading = (): NodeJS.Timeout =>
82 85
     setTimeout(() => {
83 86
       this.setState({loading: false});
84 87
     }, 200);
@@ -88,10 +91,12 @@ class LoadingConfirmDialog extends React.PureComponent<PropsType, StateType> {
88 91
    */
89 92
   onDismiss = () => {
90 93
     const {state, props} = this;
91
-    if (!state.loading && props.onDismiss != null) props.onDismiss();
94
+    if (!state.loading && props.onDismiss != null) {
95
+      props.onDismiss();
96
+    }
92 97
   };
93 98
 
94
-  render(): React.Node {
99
+  render() {
95 100
     const {state, props} = this;
96 101
     return (
97 102
       <Portal>
@@ -121,5 +126,3 @@ class LoadingConfirmDialog extends React.PureComponent<PropsType, StateType> {
121 126
     );
122 127
   }
123 128
 }
124
-
125
-export default LoadingConfirmDialog;

src/components/Dialogs/OptionsDialog.js → src/components/Dialogs/OptionsDialog.tsx View File

@@ -17,28 +17,26 @@
17 17
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
18 18
  */
19 19
 
20
-// @flow
21
-
22 20
 import * as React from 'react';
23 21
 import {Button, Dialog, Paragraph, Portal} from 'react-native-paper';
24 22
 import {FlatList} from 'react-native';
25 23
 
26 24
 export type OptionsDialogButtonType = {
27
-  title: string,
28
-  icon?: string,
29
-  onPress: () => void,
25
+  title: string;
26
+  icon?: string;
27
+  onPress: () => void;
30 28
 };
31 29
 
32 30
 type PropsType = {
33
-  visible: boolean,
34
-  title: string,
35
-  message: string,
36
-  buttons: Array<OptionsDialogButtonType>,
37
-  onDismiss: () => void,
31
+  visible: boolean;
32
+  title: string;
33
+  message: string;
34
+  buttons: Array<OptionsDialogButtonType>;
35
+  onDismiss: () => void;
38 36
 };
39 37
 
40
-class OptionsDialog extends React.PureComponent<PropsType> {
41
-  getButtonRender = ({item}: {item: OptionsDialogButtonType}): React.Node => {
38
+function OptionsDialog(props: PropsType) {
39
+  const getButtonRender = ({item}: {item: OptionsDialogButtonType}) => {
42 40
     return (
43 41
       <Button onPress={item.onPress} icon={item.icon}>
44 42
         {item.title}
@@ -46,35 +44,32 @@ class OptionsDialog extends React.PureComponent<PropsType> {
46 44
     );
47 45
   };
48 46
 
49
-  keyExtractor = (item: OptionsDialogButtonType): string => {
47
+  const keyExtractor = (item: OptionsDialogButtonType): string => {
50 48
     if (item.icon != null) {
51 49
       return item.title + item.icon;
52 50
     }
53 51
     return item.title;
54 52
   };
55 53
 
56
-  render(): React.Node {
57
-    const {props} = this;
58
-    return (
59
-      <Portal>
60
-        <Dialog visible={props.visible} onDismiss={props.onDismiss}>
61
-          <Dialog.Title>{props.title}</Dialog.Title>
62
-          <Dialog.Content>
63
-            <Paragraph>{props.message}</Paragraph>
64
-          </Dialog.Content>
65
-          <Dialog.Actions>
66
-            <FlatList
67
-              data={props.buttons}
68
-              renderItem={this.getButtonRender}
69
-              keyExtractor={this.keyExtractor}
70
-              horizontal
71
-              inverted
72
-            />
73
-          </Dialog.Actions>
74
-        </Dialog>
75
-      </Portal>
76
-    );
77
-  }
54
+  return (
55
+    <Portal>
56
+      <Dialog visible={props.visible} onDismiss={props.onDismiss}>
57
+        <Dialog.Title>{props.title}</Dialog.Title>
58
+        <Dialog.Content>
59
+          <Paragraph>{props.message}</Paragraph>
60
+        </Dialog.Content>
61
+        <Dialog.Actions>
62
+          <FlatList
63
+            data={props.buttons}
64
+            renderItem={getButtonRender}
65
+            keyExtractor={keyExtractor}
66
+            horizontal
67
+            inverted
68
+          />
69
+        </Dialog.Actions>
70
+      </Dialog>
71
+    </Portal>
72
+  );
78 73
 }
79 74
 
80 75
 export default OptionsDialog;

Loading…
Cancel
Save