lpitault/application-amicale
1
0
Fork 0
forked from vergnet/application-amicale
Code Issues Pull requests Releases Wiki Activity

Improve dialog components to match linter

Browse source
This commit is contained in:
Arnaud Vergnet 2020-08-03 16:28:03 +02:00
parent 3629c5730a
commit 925bded69b
5 changed files with 248 additions and 233 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
src/components/Amicale/LogoutDialog.js
View file

@ -2,42 +2,43 @@
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 = {
type PropsType = {
navigation: StackNavigationProp,
visible: boolean,
onDismiss: () => void,
}
};
class LogoutDialog extends React.PureComponent<Props> {
onClickAccept = async () => {
return new Promise((resolve) => {
ConnectionManager.getInstance().disconnect()
class LogoutDialog extends React.PureComponent<PropsType> {
onClickAccept = async (): Promise<void> => {
const {props} = this;
return new Promise((resolve: () => void) => {
ConnectionManager.getInstance()
.disconnect()
.then(() => {
this.props.navigation.reset({
props.navigation.reset({
index: 0,
routes: [{name: 'main'}],
});
this.props.onDismiss();
props.onDismiss();
resolve();
});
});
};
render() {
render(): React.Node {
const {props} = this;
return (
<LoadingConfirmDialog
{...this.props}
visible={this.props.visible}
onDismiss={this.props.onDismiss}
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")}
title={i18n.t('dialog.disconnect.title')}
titleLoading={i18n.t('dialog.disconnect.titleLoading')}
message={i18n.t('dialog.disconnect.message')}
/>
);
}

22
src/components/Dialogs/AlertDialog.js
View file

@ -2,29 +2,27 @@
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 = {
type PropsType = {
visible: boolean,
onDismiss: () => void,
title: string,
message: string,
}
};
class AlertDialog extends React.PureComponent<Props> {
render() {
class AlertDialog extends React.PureComponent<PropsType> {
render(): React.Node {
const {props} = this;
return (
<Portal>
<Dialog
visible={this.props.visible}
onDismiss={this.props.onDismiss}>
<Dialog.Title>{this.props.title}</Dialog.Title>
<Dialog visible={props.visible} onDismiss={props.onDismiss}>
<Dialog.Title>{props.title}</Dialog.Title>
<Dialog.Content>
<Paragraph>{this.props.message}</Paragraph>
<Paragraph>{props.message}</Paragraph>
</Dialog.Content>
<Dialog.Actions>
<Button onPress={this.props.onDismiss}>{i18n.t("dialog.ok")}</Button>
<Button onPress={props.onDismiss}>{i18n.t('dialog.ok')}</Button>
</Dialog.Actions>
</Dialog>
</Portal>

51
src/components/Dialogs/ErrorDialog.js
View file

@ -1,62 +1,69 @@
// @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 = {
type PropsType = {
visible: boolean,
onDismiss: () => void,
errorCode: number,
}
class ErrorDialog extends React.PureComponent<Props> {
};
class ErrorDialog extends React.PureComponent<PropsType> {
title: string;
message: string;
generateMessage() {
this.title = i18n.t("errors.title");
switch (this.props.errorCode) {
const {props} = this;
this.title = i18n.t('errors.title');
switch (props.errorCode) {
case ERROR_TYPE.BAD_CREDENTIALS:
this.message = i18n.t("errors.badCredentials");
this.message = i18n.t('errors.badCredentials');
break;
case ERROR_TYPE.BAD_TOKEN:
this.message = i18n.t("errors.badToken");
this.message = i18n.t('errors.badToken');
break;
case ERROR_TYPE.NO_CONSENT:
this.message = i18n.t("errors.noConsent");
this.message = i18n.t('errors.noConsent');
break;
case ERROR_TYPE.TOKEN_SAVE:
this.message = i18n.t("errors.tokenSave");
this.message = i18n.t('errors.tokenSave');
break;
case ERROR_TYPE.TOKEN_RETRIEVE:
this.message = i18n.t("errors.unknown");
this.message = i18n.t('errors.unknown');
break;
case ERROR_TYPE.BAD_INPUT:
this.message = i18n.t("errors.badInput");
this.message = i18n.t('errors.badInput');
break;
case ERROR_TYPE.FORBIDDEN:
this.message = i18n.t("errors.forbidden");
this.message = i18n.t('errors.forbidden');
break;
case ERROR_TYPE.CONNECTION_ERROR:
this.message = i18n.t("errors.connectionError");
this.message = i18n.t('errors.connectionError');
break;
case ERROR_TYPE.SERVER_ERROR:
this.message = i18n.t("errors.serverError");
this.message = i18n.t('errors.serverError');
break;
default:
this.message = i18n.t("errors.unknown");
this.message = i18n.t('errors.unknown');
break;
}
this.message += "\n\nCode " + this.props.errorCode;
this.message += `\n\nCode ${props.errorCode}`;
}
render() {
render(): React.Node {
this.generateMessage();
const {props} = this;
return (
<AlertDialog {...this.props} title={this.title} message={this.message}/>
<AlertDialog
visible={props.visible}
onDismiss={props.onDismiss}
title={this.title}
message={this.message}
/>
);
}
}

106
src/components/Dialogs/LoadingConfirmDialog.js
View file

@ -1,88 +1,102 @@
// @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 = {
type PropsType = {
visible: boolean,
onDismiss: () => void,
onAccept: () => Promise<void>, // async function to be executed
title: string,
titleLoading: string,
message: string,
startLoading: boolean,
}
onDismiss?: () => void,
onAccept?: () => Promise<void>, // async function to be executed
title?: string,
titleLoading?: string,
message?: string,
startLoading?: boolean,
};
type State = {
type StateType = {
loading: boolean,
}
class LoadingConfirmDialog extends React.PureComponent<Props, State> {
};
class LoadingConfirmDialog extends React.PureComponent<PropsType, StateType> {
static defaultProps = {
title: '',
message: '',
onDismiss: () => {},
onAccept: () => {return Promise.resolve()},
onAccept: (): Promise<void> => {
return Promise.resolve();
},
title: '',
titleLoading: '',
message: '',
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 = () => {
const {props} = this;
this.setState({loading: true});
this.props.onAccept().then(this.hideLoading);
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})
hideLoading = (): TimeoutID =>
setTimeout(() => {
this.setState({loading: false});
}, 200);
/**
* Hide the dialog if it is not loading
*/
onDismiss = () => {
if (!this.state.loading)
this.props.onDismiss();
const {state, props} = this;
if (!state.loading && props.onDismiss != null) props.onDismiss();
};
render() {
render(): React.Node {
const {state, props} = this;
return (
<Portal>
<Dialog
visible={this.props.visible}
onDismiss={this.onDismiss}>
<Dialog visible={props.visible} onDismiss={this.onDismiss}>
<Dialog.Title>
{this.state.loading
? this.props.titleLoading
: this.props.title}
{state.loading ? props.titleLoading : props.title}
</Dialog.Title>
<Dialog.Content>
{this.state.loading
? <ActivityIndicator
animating={true}
size={'large'}/>
: <Paragraph>{this.props.message}</Paragraph>
}
{state.loading ? (
<ActivityIndicator animating size="large" />
) : (
<Paragraph>{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>
{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>
);

43
src/components/Dialogs/OptionsDialog.js
View file

@ -2,49 +2,44 @@
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 = {
export type OptionsDialogButtonType = {
title: string,
onPress: () => void,
}
};
type Props = {
type PropsType = {
visible: boolean,
title: string,
message: string,
buttons: Array<OptionsDialogButton>,
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() {
render(): React.Node {
const {props} = this;
return (
<Portal>
<Dialog
visible={this.props.visible}
onDismiss={this.props.onDismiss}>
<Dialog.Title>{this.props.title}</Dialog.Title>
<Dialog visible={props.visible} onDismiss={props.onDismiss}>
<Dialog.Title>{props.title}</Dialog.Title>
<Dialog.Content>
<Paragraph>{this.props.message}</Paragraph>
<Paragraph>{props.message}</Paragraph>
</Dialog.Content>
<Dialog.Actions>
<FlatList
data={this.props.buttons}
data={props.buttons}
renderItem={this.getButtonRender}
keyExtractor={this.keyExtractor}
horizontal={true}
inverted={true}
horizontal
inverted
/>
</Dialog.Actions>
</Dialog>