Improve dialog components to match linter

src/components/Amicale/LogoutDialog.js

@@ -2,45 +2,46 @@
 
 import * as React from 'react';
 import i18n from 'i18n-js';
-import LoadingConfirmDialog from "../Dialogs/LoadingConfirmDialog";
-import ConnectionManager from "../../managers/ConnectionManager";
-import {StackNavigationProp} from "@react-navigation/stack";
+import {StackNavigationProp} from '@react-navigation/stack';
+import LoadingConfirmDialog from '../Dialogs/LoadingConfirmDialog';
+import ConnectionManager from '../../managers/ConnectionManager';
 
-type Props = {
-    navigation: StackNavigationProp,
-    visible: boolean,
-    onDismiss: () => void,
-}
+type PropsType = {
+  navigation: StackNavigationProp,
+  visible: boolean,
+  onDismiss: () => void,
+};
 
-class LogoutDialog extends React.PureComponent<Props> {
-
-    onClickAccept = async () => {
-        return new Promise((resolve) => {
-            ConnectionManager.getInstance().disconnect()
-                .then(() => {
-                    this.props.navigation.reset({
-                        index: 0,
-                        routes: [{name: 'main'}],
-                    });
-                    this.props.onDismiss();
-                    resolve();
-                });
+class LogoutDialog extends React.PureComponent<PropsType> {
+  onClickAccept = async (): Promise<void> => {
+    const {props} = this;
+    return new Promise((resolve: () => void) => {
+      ConnectionManager.getInstance()
+        .disconnect()
+        .then(() => {
+          props.navigation.reset({
+            index: 0,
+            routes: [{name: 'main'}],
+          });
+          props.onDismiss();
+          resolve();
         });
-    };
+    });
+  };
 
-    render() {
-        return (
-            <LoadingConfirmDialog
-                {...this.props}
-                visible={this.props.visible}
-                onDismiss={this.props.onDismiss}
-                onAccept={this.onClickAccept}
-                title={i18n.t("dialog.disconnect.title")}
-                titleLoading={i18n.t("dialog.disconnect.titleLoading")}
-                message={i18n.t("dialog.disconnect.message")}
-            />
-        );
-    }
+  render(): React.Node {
+    const {props} = this;
+    return (
+      <LoadingConfirmDialog
+        visible={props.visible}
+        onDismiss={props.onDismiss}
+        onAccept={this.onClickAccept}
+        title={i18n.t('dialog.disconnect.title')}
+        titleLoading={i18n.t('dialog.disconnect.titleLoading')}
+        message={i18n.t('dialog.disconnect.message')}
+      />
+    );
+  }
 }
 
 export default LogoutDialog;

src/components/Dialogs/AlertDialog.js

@@ -2,34 +2,32 @@
 
 import * as React from 'react';
 import {Button, Dialog, Paragraph, Portal} from 'react-native-paper';
-import i18n from "i18n-js";
+import i18n from 'i18n-js';
 
-type Props = {
-    visible: boolean,
-    onDismiss: () => void,
-    title: string,
-    message: string,
-}
+type PropsType = {
+  visible: boolean,
+  onDismiss: () => void,
+  title: string,
+  message: string,
+};
 
-class AlertDialog extends React.PureComponent<Props> {
-
-    render() {
-        return (
-            <Portal>
-                <Dialog
-                    visible={this.props.visible}
-                    onDismiss={this.props.onDismiss}>
-                    <Dialog.Title>{this.props.title}</Dialog.Title>
-                    <Dialog.Content>
-                        <Paragraph>{this.props.message}</Paragraph>
-                    </Dialog.Content>
-                    <Dialog.Actions>
-                        <Button onPress={this.props.onDismiss}>{i18n.t("dialog.ok")}</Button>
-                    </Dialog.Actions>
-                </Dialog>
-            </Portal>
-        );
-    }
+class AlertDialog extends React.PureComponent<PropsType> {
+  render(): React.Node {
+    const {props} = this;
+    return (
+      <Portal>
+        <Dialog visible={props.visible} onDismiss={props.onDismiss}>
+          <Dialog.Title>{props.title}</Dialog.Title>
+          <Dialog.Content>
+            <Paragraph>{props.message}</Paragraph>
+          </Dialog.Content>
+          <Dialog.Actions>
+            <Button onPress={props.onDismiss}>{i18n.t('dialog.ok')}</Button>
+          </Dialog.Actions>
+        </Dialog>
+      </Portal>
+    );
+  }
 }
 
 export default AlertDialog;

src/components/Dialogs/ErrorDialog.js

@@ -1,64 +1,71 @@
 // @flow
 
 import * as React from 'react';
-import i18n from "i18n-js";
-import {ERROR_TYPE} from "../../utils/WebData";
-import AlertDialog from "./AlertDialog";
+import i18n from 'i18n-js';
+import {ERROR_TYPE} from '../../utils/WebData';
+import AlertDialog from './AlertDialog';
 
-type Props = {
-    visible: boolean,
-    onDismiss: () => void,
-    errorCode: number,
-}
+type PropsType = {
+  visible: boolean,
+  onDismiss: () => void,
+  errorCode: number,
+};
 
-class ErrorDialog extends React.PureComponent<Props> {
+class ErrorDialog extends React.PureComponent<PropsType> {
+  title: string;
 
-    title: string;
-    message: string;
+  message: string;
 
-    generateMessage() {
-        this.title = i18n.t("errors.title");
-        switch (this.props.errorCode) {
-            case ERROR_TYPE.BAD_CREDENTIALS:
-                this.message = i18n.t("errors.badCredentials");
-                break;
-            case ERROR_TYPE.BAD_TOKEN:
-                this.message = i18n.t("errors.badToken");
-                break;
-            case ERROR_TYPE.NO_CONSENT:
-                this.message = i18n.t("errors.noConsent");
-                break;
-            case ERROR_TYPE.TOKEN_SAVE:
-                this.message = i18n.t("errors.tokenSave");
-                break;
-            case ERROR_TYPE.TOKEN_RETRIEVE:
-                this.message = i18n.t("errors.unknown");
-                break;
-            case ERROR_TYPE.BAD_INPUT:
-                this.message = i18n.t("errors.badInput");
-                break;
-            case ERROR_TYPE.FORBIDDEN:
-                this.message = i18n.t("errors.forbidden");
-                break;
-            case ERROR_TYPE.CONNECTION_ERROR:
-                this.message = i18n.t("errors.connectionError");
-                break;
-            case ERROR_TYPE.SERVER_ERROR:
-                this.message = i18n.t("errors.serverError");
-                break;
-            default:
-                this.message = i18n.t("errors.unknown");
-                break;
-        }
-        this.message += "\n\nCode " + this.props.errorCode;
+  generateMessage() {
+    const {props} = this;
+    this.title = i18n.t('errors.title');
+    switch (props.errorCode) {
+      case ERROR_TYPE.BAD_CREDENTIALS:
+        this.message = i18n.t('errors.badCredentials');
+        break;
+      case ERROR_TYPE.BAD_TOKEN:
+        this.message = i18n.t('errors.badToken');
+        break;
+      case ERROR_TYPE.NO_CONSENT:
+        this.message = i18n.t('errors.noConsent');
+        break;
+      case ERROR_TYPE.TOKEN_SAVE:
+        this.message = i18n.t('errors.tokenSave');
+        break;
+      case ERROR_TYPE.TOKEN_RETRIEVE:
+        this.message = i18n.t('errors.unknown');
+        break;
+      case ERROR_TYPE.BAD_INPUT:
+        this.message = i18n.t('errors.badInput');
+        break;
+      case ERROR_TYPE.FORBIDDEN:
+        this.message = i18n.t('errors.forbidden');
+        break;
+      case ERROR_TYPE.CONNECTION_ERROR:
+        this.message = i18n.t('errors.connectionError');
+        break;
+      case ERROR_TYPE.SERVER_ERROR:
+        this.message = i18n.t('errors.serverError');
+        break;
+      default:
+        this.message = i18n.t('errors.unknown');
+        break;
     }
+    this.message += `\n\nCode ${props.errorCode}`;
+  }
 
-    render() {
-        this.generateMessage();
-        return (
-            <AlertDialog {...this.props} title={this.title} message={this.message}/>
-        );
-    }
+  render(): React.Node {
+    this.generateMessage();
+    const {props} = this;
+    return (
+      <AlertDialog
+        visible={props.visible}
+        onDismiss={props.onDismiss}
+        title={this.title}
+        message={this.message}
+      />
+    );
+  }
 }
 
 export default ErrorDialog;

src/components/Dialogs/LoadingConfirmDialog.js

@@ -1,92 +1,106 @@
 // @flow
 
 import * as React from 'react';
-import {ActivityIndicator, Button, Dialog, Paragraph, Portal} from 'react-native-paper';
-import i18n from "i18n-js";
+import {
+  ActivityIndicator,
+  Button,
+  Dialog,
+  Paragraph,
+  Portal,
+} from 'react-native-paper';
+import i18n from 'i18n-js';
 
-type Props = {
-    visible: boolean,
-    onDismiss: () => void,
-    onAccept: () => Promise<void>, // async function to be executed
-    title: string,
-    titleLoading: string,
-    message: string,
-    startLoading: boolean,
-}
+type PropsType = {
+  visible: boolean,
+  onDismiss?: () => void,
+  onAccept?: () => Promise<void>, // async function to be executed
+  title?: string,
+  titleLoading?: string,
+  message?: string,
+  startLoading?: boolean,
+};
 
-type State = {
-    loading: boolean,
-}
+type StateType = {
+  loading: boolean,
+};
 
-class LoadingConfirmDialog extends React.PureComponent<Props, State> {
+class LoadingConfirmDialog extends React.PureComponent<PropsType, StateType> {
+  static defaultProps = {
+    onDismiss: () => {},
+    onAccept: (): Promise<void> => {
+      return Promise.resolve();
+    },
+    title: '',
+    titleLoading: '',
+    message: '',
+    startLoading: false,
+  };
 
-    static defaultProps = {
-        title: '',
-        message: '',
-        onDismiss: () => {},
-        onAccept: () => {return Promise.resolve()},
-        startLoading: false,
-    }
-
-    state = {
-        loading: this.props.startLoading,
+  constructor(props: PropsType) {
+    super(props);
+    this.state = {
+      loading:
+        props.startLoading != null
+          ? props.startLoading
+          : LoadingConfirmDialog.defaultProps.startLoading,
     };
+  }
 
-    /**
-     * Set the dialog into loading state and closes it when operation finishes
-     */
-    onClickAccept = () => {
-        this.setState({loading: true});
-        this.props.onAccept().then(this.hideLoading);
-    };
+  /**
+   * Set the dialog into loading state and closes it when operation finishes
+   */
+  onClickAccept = () => {
+    const {props} = this;
+    this.setState({loading: true});
+    if (props.onAccept != null) props.onAccept().then(this.hideLoading);
+  };
 
-    /**
-     * Waits for fade out animations to finish before hiding loading
-     * @returns {TimeoutID}
-     */
-    hideLoading = () => setTimeout(() => {
-        this.setState({loading: false})
+  /**
+   * Waits for fade out animations to finish before hiding loading
+   * @returns {TimeoutID}
+   */
+  hideLoading = (): TimeoutID =>
+    setTimeout(() => {
+      this.setState({loading: false});
     }, 200);
 
-    /**
-     * Hide the dialog if it is not loading
-     */
-    onDismiss = () => {
-        if (!this.state.loading)
-            this.props.onDismiss();
-    };
+  /**
+   * Hide the dialog if it is not loading
+   */
+  onDismiss = () => {
+    const {state, props} = this;
+    if (!state.loading && props.onDismiss != null) props.onDismiss();
+  };
 
-    render() {
-        return (
-            <Portal>
-                <Dialog
-                    visible={this.props.visible}
-                    onDismiss={this.onDismiss}>
-                    <Dialog.Title>
-                        {this.state.loading
-                            ? this.props.titleLoading
-                            : this.props.title}
-                    </Dialog.Title>
-                    <Dialog.Content>
-                        {this.state.loading
-                            ? <ActivityIndicator
-                                animating={true}
-                                size={'large'}/>
-                            : <Paragraph>{this.props.message}</Paragraph>
-                        }
-                    </Dialog.Content>
-                    {this.state.loading
-                        ? null
-                        : <Dialog.Actions>
-                            <Button onPress={this.onDismiss}
-                                    style={{marginRight: 10}}>{i18n.t("dialog.cancel")}</Button>
-                            <Button onPress={this.onClickAccept}>{i18n.t("dialog.yes")}</Button>
-                        </Dialog.Actions>
-                    }
-                </Dialog>
-            </Portal>
-        );
-    }
+  render(): React.Node {
+    const {state, props} = this;
+    return (
+      <Portal>
+        <Dialog visible={props.visible} onDismiss={this.onDismiss}>
+          <Dialog.Title>
+            {state.loading ? props.titleLoading : props.title}
+          </Dialog.Title>
+          <Dialog.Content>
+            {state.loading ? (
+              <ActivityIndicator animating size="large" />
+            ) : (
+              <Paragraph>{props.message}</Paragraph>
+            )}
+          </Dialog.Content>
+          {state.loading ? null : (
+            <Dialog.Actions>
+              <Button onPress={this.onDismiss} style={{marginRight: 10}}>
+                {i18n.t('dialog.cancel')}
+              </Button>
+              <Button onPress={this.onClickAccept}>
+                {i18n.t('dialog.yes')}
+              </Button>
+            </Dialog.Actions>
+          )}
+        </Dialog>
+      </Portal>
+    );
+  }
 }
 
 export default LoadingConfirmDialog;

src/components/Dialogs/OptionsDialog.js

@@ -2,55 +2,50 @@
 
 import * as React from 'react';
 import {Button, Dialog, Paragraph, Portal} from 'react-native-paper';
-import {FlatList} from "react-native";
+import {FlatList} from 'react-native';
 
-export type OptionsDialogButton = {
-    title: string,
-    onPress: () => void,
-}
+export type OptionsDialogButtonType = {
+  title: string,
+  onPress: () => void,
+};
 
-type Props = {
-    visible: boolean,
-    title: string,
-    message: string,
-    buttons: Array<OptionsDialogButton>,
-    onDismiss: () => void,
-}
+type PropsType = {
+  visible: boolean,
+  title: string,
+  message: string,
+  buttons: Array<OptionsDialogButtonType>,
+  onDismiss: () => void,
+};
 
-class OptionsDialog extends React.PureComponent<Props> {
+class OptionsDialog extends React.PureComponent<PropsType> {
+  getButtonRender = ({item}: {item: OptionsDialogButtonType}): React.Node => {
+    return <Button onPress={item.onPress}>{item.title}</Button>;
+  };
 
-    getButtonRender = ({item}: { item: OptionsDialogButton }) => {
-        return <Button
-            onPress={item.onPress}>
-            {item.title}
-        </Button>;
-    }
+  keyExtractor = (item: OptionsDialogButtonType): string => item.title;
 
-    keyExtractor = (item: OptionsDialogButton) => item.title;
-
-    render() {
-        return (
-            <Portal>
-                <Dialog
-                    visible={this.props.visible}
-                    onDismiss={this.props.onDismiss}>
-                    <Dialog.Title>{this.props.title}</Dialog.Title>
-                    <Dialog.Content>
-                        <Paragraph>{this.props.message}</Paragraph>
-                    </Dialog.Content>
-                    <Dialog.Actions>
-                        <FlatList
-                            data={this.props.buttons}
-                            renderItem={this.getButtonRender}
-                            keyExtractor={this.keyExtractor}
-                            horizontal={true}
-                            inverted={true}
-                        />
-                    </Dialog.Actions>
-                </Dialog>
-            </Portal>
-        );
-    }
+  render(): React.Node {
+    const {props} = this;
+    return (
+      <Portal>
+        <Dialog visible={props.visible} onDismiss={props.onDismiss}>
+          <Dialog.Title>{props.title}</Dialog.Title>
+          <Dialog.Content>
+            <Paragraph>{props.message}</Paragraph>
+          </Dialog.Content>
+          <Dialog.Actions>
+            <FlatList
+              data={props.buttons}
+              renderItem={this.getButtonRender}
+              keyExtractor={this.keyExtractor}
+              horizontal
+              inverted
+            />
+          </Dialog.Actions>
+        </Dialog>
+      </Portal>
+    );
+  }
 }
 
 export default OptionsDialog;