Created a loading dialog component to handle async requests

This commit is contained in:
Arnaud Vergnet 2020-04-07 00:27:32 +02:00
parent 0b85b1630c
commit b2891ddeea
4 changed files with 167 additions and 82 deletions

View file

@ -1,9 +1,9 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {ActivityIndicator, Button, Dialog, Paragraph, Portal, withTheme} from 'react-native-paper';
import ConnectionManager from "../../managers/ConnectionManager";
import i18n from 'i18n-js'; import i18n from 'i18n-js';
import LoadingConfirmDialog from "../Custom/LoadingConfirmDialog";
import ConnectionManager from "../../managers/ConnectionManager";
type Props = { type Props = {
navigation: Object, navigation: Object,
@ -11,73 +11,35 @@ type Props = {
onDismiss: Function, onDismiss: Function,
} }
type State = { class LogoutDialog extends React.PureComponent<Props> {
loading: boolean,
}
class LogoutDialog extends React.PureComponent<Props, State> { onClickAccept = async () => {
return new Promise((resolve, reject) => {
colors: Object;
state = {
loading: false,
};
constructor(props) {
super(props);
this.colors = props.theme.colors;
}
onClickAccept = () => {
this.setState({loading: true});
ConnectionManager.getInstance().disconnect() ConnectionManager.getInstance().disconnect()
.then(() => { .then(() => {
this.props.onDismiss();
this.setState({loading: false});
this.props.navigation.reset({ this.props.navigation.reset({
index: 0, index: 0,
routes: [{name: 'Main'}], routes: [{name: 'Main'}],
}); });
});
};
onDismiss = () => {
if (!this.state.loading)
this.props.onDismiss(); this.props.onDismiss();
resolve();
});
});
}; };
render() { render() {
return ( return (
<Portal> <LoadingConfirmDialog
<Dialog {...this.props}
visible={this.props.visible} visible={this.props.visible}
onDismiss={this.onDismiss}> onDismiss={this.props.onDismiss}
<Dialog.Title> onAccept={this.onClickAccept}
{this.state.loading title={i18n.t("dialog.disconnect.title")}
? i18n.t("dialog.disconnect.titleLoading") titleLoading={i18n.t("dialog.disconnect.titleLoading")}
: i18n.t("dialog.disconnect.title")} message={i18n.t("dialog.disconnect.message")}
</Dialog.Title> />
<Dialog.Content>
{this.state.loading
? <ActivityIndicator
animating={true}
size={'large'}
color={this.colors.primary}/>
: <Paragraph>{i18n.t("dialog.disconnect.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>
); );
} }
} }
export default withTheme(LogoutDialog); export default LogoutDialog;

View file

@ -0,0 +1,74 @@
import * as React from 'react';
import {ActivityIndicator, Button, Dialog, Paragraph, Portal} from 'react-native-paper';
import i18n from "i18n-js";
type Props = {
visible: boolean,
onDismiss: Function,
onAccept: Function, // async function to be executed
title: string,
titleLoading: string,
message: string,
}
type State = {
loading: boolean,
}
class LoadingConfirmDialog extends React.PureComponent<Props, State> {
state = {
loading: false,
};
onClickAccept = () => {
this.setState({loading: true});
this.props.onAccept()
.then(() => {
//Wait for fade out animations to finish before hiding loading
setTimeout(() => {
this.setState({loading: false})
}, 200);
});
};
onDismiss = () => {
if (!this.state.loading)
this.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>
);
}
}
export default LoadingConfirmDialog;

View file

@ -182,16 +182,31 @@ export default class ConnectionManager {
return valid; return valid;
} }
async authenticatedRequest(path: string) { generatePostArguments(keys: Array<string>, values: Array<string>) {
let data = {};
for (let i = 0; i < keys.length; i++) {
data[keys[i]] = values[i];
}
return data;
}
async authenticatedRequest(path: string, keys: Array<string>, values: Array<any>) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
if (this.getToken() !== null) { if (this.getToken() !== null) {
let data = {};
if (keys !== undefined && values !== undefined && keys.length === values.length)
data = this.generatePostArguments(keys, values);
console.log(data);
fetch(API_ENDPOINT + path, { fetch(API_ENDPOINT + path, {
method: 'POST', method: 'POST',
headers: new Headers({ headers: new Headers({
'Accept': 'application/json', 'Accept': 'application/json',
'Content-Type': 'application/json', 'Content-Type': 'application/json',
}), }),
body: JSON.stringify({token: this.getToken()}) body: JSON.stringify({
token: this.getToken(),
...data
})
}).then(async (response) => response.json()) }).then(async (response) => response.json())
.then((response: response_format) => { .then((response: response_format) => {
console.log(response); console.log(response);

View file

@ -1,7 +1,7 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {FlatList, StyleSheet} from "react-native"; import {FlatList, StyleSheet, View} from "react-native";
import { import {
ActivityIndicator, ActivityIndicator,
Avatar, Avatar,
@ -16,19 +16,16 @@ import {
} from 'react-native-paper'; } from 'react-native-paper';
import AuthenticatedScreen from "../../components/Amicale/AuthenticatedScreen"; import AuthenticatedScreen from "../../components/Amicale/AuthenticatedScreen";
import {getTimeOnlyString, stringToDate} from "../../utils/Planning"; import {getTimeOnlyString, stringToDate} from "../../utils/Planning";
import LoadingConfirmDialog from "../../components/Custom/LoadingConfirmDialog";
import ConnectionManager from "../../managers/ConnectionManager";
const ICON_AMICALE = require('../../../assets/amicale.png'); const ICON_AMICALE = require('../../../assets/amicale.png');
type Props = {
navigation: Object,
theme: Object,
}
const FAKE_DATE = { const FAKE_DATE = {
"date_begin": "2020-04-06 21:50", "date_begin": "2020-04-06 21:50",
"date_end": "2020-04-06 21:50", "date_end": "2020-04-07 23:50",
"date_result_begin": "2020-04-06 21:50", "date_result_begin": "2020-04-07 21:50",
"date_result_end": "2020-04-06 21:50", "date_result_end": "2020-04-07 21:50",
}; };
const FAKE_DATE2 = { const FAKE_DATE2 = {
@ -67,14 +64,21 @@ const FAKE_TEAMS2 = {
], ],
}; };
type Props = {
navigation: Object,
theme: Object,
}
type State = { type State = {
selectedTeam: string, selectedTeam: string,
voteDialogVisible: boolean,
} }
class VoteScreen extends React.Component<Props, State> { class VoteScreen extends React.Component<Props, State> {
state = { state = {
selectedTeam: "none", selectedTeam: "none",
voteDialogVisible: false,
}; };
colors: Object; colors: Object;
@ -120,18 +124,48 @@ class VoteScreen extends React.Component<Props, State> {
} }
this.datesString = data[1]; this.datesString = data[1];
this.generateDateObject(); this.generateDateObject();
console.log(this.teams);
console.log(this.datesString);
return ( return (
//$FlowFixMe <View>
{/*$FlowFixMe*/}
<FlatList <FlatList
data={this.mainFlatListData} data={this.mainFlatListData}
extraData={this.state.selectedTeam} extraData={this.state.selectedTeam}
renderItem={this.mainRenderItem} renderItem={this.mainRenderItem}
/> />
<LoadingConfirmDialog
{...this.props}
visible={this.state.voteDialogVisible}
onDismiss={this.onVoteDialogDismiss}
onAccept={this.onVoteDialogAccept}
title={"VOTE?"}
titleLoading={"SENDING VOTE..."}
message={"SURE?"}
/>
</View>
); );
}; };
onVoteDialogDismiss = () => this.setState({voteDialogVisible: false});
showVoteDialog = () => this.setState({voteDialogVisible: true});
onVoteDialogAccept = async () => {
return new Promise((resolve, reject) => {
ConnectionManager.getInstance().authenticatedRequest(
"elections/vote",
["vote"],
[parseInt(this.state.selectedTeam)])
.then(() => {
this.onVoteDialogDismiss();
resolve();
})
.catch(() => {
this.onVoteDialogDismiss();
resolve();
});
});
};
generateDateObject() { generateDateObject() {
this.dates = { this.dates = {
date_begin: stringToDate(this.datesString.date_begin), date_begin: stringToDate(this.datesString.date_begin),
@ -208,7 +242,7 @@ class VoteScreen extends React.Component<Props, State> {
}; };
onVotePress = () => { onVotePress = () => {
console.log("vote sent"); this.showVoteDialog();
}; };
voteKeyExtractor = (item: Object) => item.id.toString(); voteKeyExtractor = (item: Object) => item.id.toString();