Improved logout popup and fixed warnings

This commit is contained in:
Arnaud Vergnet 2020-04-01 13:01:28 +02:00
parent cff18d8256
commit f10242b187
3 changed files with 123 additions and 51 deletions

View file

@ -0,0 +1,76 @@
import * as React from 'react';
import {ActivityIndicator, Button, Dialog, Paragraph, Portal, withTheme} from 'react-native-paper';
import ConnectionManager from "../managers/ConnectionManager";
type Props = {
navigation: Object,
visible: boolean,
onDismiss: Function,
}
type State = {
loading: boolean,
}
class LogoutDialog extends React.PureComponent<Props, State> {
colors: Object;
state = {
loading: false,
};
constructor(props) {
super(props);
this.colors = props.theme.colors;
}
onClickAccept = () => {
this.setState({loading: true});
ConnectionManager.getInstance().disconnect()
.then(() => {
this.props.onDismiss();
this.setState({loading: false});
this.props.navigation.reset({
index: 0,
routes: [{name: 'Main'}],
});
});
};
onDismiss = () => {
if (!this.state.loading)
this.props.onDismiss();
};
render() {
return (
<Portal>
<Dialog
visible={this.props.visible}
onDismiss={this.onDismiss}>
<Dialog.Title>DISCONNECT</Dialog.Title>
<Dialog.Content>
{this.state.loading
? <ActivityIndicator
animating={true}
size={'large'}
color={this.colors.primary}/>
: <Paragraph>DISCONNECT?</Paragraph>
}
</Dialog.Content>
{this.state.loading
? null
: <Dialog.Actions>
<Button onPress={this.onClickAccept}>YES</Button>
<Button onPress={this.onDismiss}>NO</Button>
</Dialog.Actions>
}
</Dialog>
</Portal>
);
}
}
export default withTheme(LogoutDialog);

View file

@ -1,13 +1,14 @@
// @flow
import * as React from 'react';
import {Alert, Dimensions, FlatList, Image, Platform, StyleSheet, View} from 'react-native';
import {Dimensions, FlatList, Image, Platform, StyleSheet, View,} from 'react-native';
import i18n from "i18n-js";
import {openBrowser} from "../utils/WebBrowser";
import SidebarDivider from "./SidebarDivider";
import SidebarItem from "./SidebarItem";
import {TouchableRipple, withTheme} from "react-native-paper";
import ConnectionManager from "../managers/ConnectionManager";
import LogoutDialog from "./LogoutDialog";
const deviceWidth = Dimensions.get("window").width;
@ -20,6 +21,7 @@ type Props = {
type State = {
active: string,
isLoggedIn: boolean,
dialogVisible: boolean,
};
/**
@ -65,7 +67,7 @@ class SideBar extends React.PureComponent<Props, State> {
{
name: i18n.t('screens.logout'),
route: 'disconnect',
action: () => this.onClickDisconnect(),
action: this.showDisconnectDialog,
icon: "logout",
onlyWhenLoggedIn: true,
},
@ -149,31 +151,15 @@ class SideBar extends React.PureComponent<Props, State> {
this.state = {
active: 'Home',
isLoggedIn: false,
dialogVisible: false,
};
ConnectionManager.getInstance().isLoggedIn()
ConnectionManager.getInstance().isLoggedIn().then(data => undefined).catch(error => undefined);
}
onClickDisconnect() {
Alert.alert(
'DISCONNECT',
'DISCONNECT?',
[
{
text: 'YES', onPress: () => {
ConnectionManager.getInstance().disconnect()
.then(() => {
this.props.navigation.reset({
index: 0,
routes: [{name: 'Main'}],
});
});
}
},
{text: 'NO', undefined},
],
{cancelable: false},
);
}
showDisconnectDialog = () => this.setState({ dialogVisible: true });
hideDisconnectDialog = () => this.setState({ dialogVisible: false });
onLoginStateChange(isLoggedIn: boolean) {
this.setState({isLoggedIn: isLoggedIn});
@ -250,6 +236,11 @@ class SideBar extends React.PureComponent<Props, State> {
keyExtractor={this.listKeyExtractor}
renderItem={this.getRenderItem}
/>
<LogoutDialog
{...this.props}
visible={this.state.dialogVisible}
onDismiss={this.hideDisconnectDialog}
/>
</View>
);
}

View file

@ -1,22 +1,26 @@
import * as React from 'react';
import {FlatList, StyleSheet} from "react-native";
import {FlatList, StyleSheet, View} from "react-native";
import {Avatar, Button, Card, Divider, List, withTheme} from 'react-native-paper';
import AuthenticatedScreen from "../../components/AuthenticatedScreen";
import {openBrowser} from "../../utils/WebBrowser";
import ConnectionManager from "../../managers/ConnectionManager";
import HeaderButton from "../../components/HeaderButton";
import i18n from 'i18n-js';
import LogoutDialog from "../../components/LogoutDialog";
type Props = {
navigation: Object,
theme: Object,
}
type State = {}
type State = {
dialogVisible: boolean,
}
class ProfileScreen extends React.Component<Props, State> {
state = {};
state = {
dialogVisible: false,
};
colors: Object;
@ -27,11 +31,10 @@ class ProfileScreen extends React.Component<Props, State> {
constructor(props) {
super(props);
this.colors = props.theme.colors;
this.onClickDisconnect = this.onClickDisconnect.bind(this);
this.flatListData = [
{id: 0},
{id: 1},
{id: 2},
{id: '0'},
{id: '1'},
{id: '2'},
]
}
@ -42,38 +45,40 @@ class ProfileScreen extends React.Component<Props, State> {
});
}
getHeaderButtons() {
return <HeaderButton icon={'logout'} onPress={this.onClickDisconnect}/>;
}
showDisconnectDialog = () => this.setState({ dialogVisible: true });
onClickDisconnect() {
ConnectionManager.getInstance().disconnect()
.then(() => {
this.props.navigation.reset({
index: 0,
routes: [{name: 'Main'}],
});
});
hideDisconnectDialog = () => this.setState({ dialogVisible: false });
getHeaderButtons() {
return <HeaderButton icon={'logout'} onPress={this.showDisconnectDialog}/>;
}
getScreen(data: Object) {
this.data = data;
return (
<FlatList
renderItem={item => this.getRenderItem(item)}
keyExtractor={item => item.id}
data={this.flatListData}
/>
<View>
<FlatList
renderItem={item => this.getRenderItem(item)}
keyExtractor={item => item.id}
data={this.flatListData}
/>
<LogoutDialog
{...this.props}
visible={this.state.dialogVisible}
onDismiss={this.hideDisconnectDialog}
/>
</View>
)
}
getRenderItem({item}: Object) {
switch (item.id) {
case 0:
case '0':
return this.getPersonalCard();
case 1:
case '1':
return this.getClubCard();
case 2:
case '2':
return this.getMembershipCar();
}
}