Added login/logout icon on home

This commit is contained in:
Arnaud Vergnet 2020-04-22 11:12:24 +02:00
parent 3f945fca7a
commit c9b8a6e2ca
2 changed files with 45 additions and 11 deletions

View file

@ -6,15 +6,13 @@ import {HeaderButton, HeaderButtons} from 'react-navigation-header-buttons';
import {withTheme} from "react-native-paper"; import {withTheme} from "react-native-paper";
import * as Touchable from "react-native/Libraries/Components/Touchable/TouchableNativeFeedback.android"; import * as Touchable from "react-native/Libraries/Components/Touchable/TouchableNativeFeedback.android";
const MaterialHeaderButton = (props: Object) => ( const MaterialHeaderButton = (props: Object) => <HeaderButton
<HeaderButton
IconComponent={MaterialCommunityIcons} IconComponent={MaterialCommunityIcons}
iconSize={26} iconSize={26}
color={props.theme.colors.text} color={props.color != null ? props.color : props.theme.colors.text}
background={Touchable.Ripple(props.theme.colors.ripple, true)} background={Touchable.Ripple(props.theme.colors.ripple, true)}
{...props} {...props}
/> />;
);
const MaterialHeaderButtons = (props: Object) => { const MaterialHeaderButtons = (props: Object) => {
return ( return (

View file

@ -17,6 +17,9 @@ import AnimatedFAB from "../../components/Animations/AnimatedFAB";
import {StackNavigationProp} from "@react-navigation/stack"; import {StackNavigationProp} from "@react-navigation/stack";
import type {CustomTheme} from "../../managers/ThemeManager"; import type {CustomTheme} from "../../managers/ThemeManager";
import {View} from "react-native-animatable"; import {View} from "react-native-animatable";
import {HiddenItem} from "react-navigation-header-buttons";
import ConnectionManager from "../../managers/ConnectionManager";
import LogoutDialog from "../../components/Amicale/LogoutDialog";
// import DATA from "../dashboard_data.json"; // import DATA from "../dashboard_data.json";
@ -95,21 +98,32 @@ type Props = {
theme: CustomTheme, theme: CustomTheme,
} }
type State = {
dialogVisible: boolean,
}
/** /**
* Class defining the app's home screen * Class defining the app's home screen
*/ */
class HomeScreen extends React.Component<Props> { class HomeScreen extends React.Component<Props, State> {
colors: Object; colors: Object;
isLoggedIn: boolean | null;
fabRef: { current: null | AnimatedFAB }; fabRef: { current: null | AnimatedFAB };
currentNewFeed: Array<feedItem>; currentNewFeed: Array<feedItem>;
state = {
dialogVisible: false,
}
constructor(props) { constructor(props) {
super(props); super(props);
this.colors = props.theme.colors; this.colors = props.theme.colors;
this.fabRef = React.createRef(); this.fabRef = React.createRef();
this.currentNewFeed = []; this.currentNewFeed = [];
this.isLoggedIn = null;
} }
/** /**
@ -130,9 +144,12 @@ class HomeScreen extends React.Component<Props> {
} }
onScreenFocus = () => { onScreenFocus = () => {
if (ConnectionManager.getInstance().isLoggedIn() !== this.isLoggedIn) {
this.isLoggedIn = ConnectionManager.getInstance().isLoggedIn();
this.props.navigation.setOptions({ this.props.navigation.setOptions({
headerRight: this.getHeaderButton, headerRight: this.getHeaderButton,
}); });
}
// handle link open when home is not focused or created // handle link open when home is not focused or created
this.handleNavigationParams(); this.handleNavigationParams();
}; };
@ -148,14 +165,28 @@ class HomeScreen extends React.Component<Props> {
}; };
getHeaderButton = () => { getHeaderButton = () => {
let onPressLog = () => this.props.navigation.navigate("login");
let logIcon = "login";
let logColor = this.props.theme.colors.primary;
if (this.isLoggedIn) {
onPressLog = () => this.showDisconnectDialog();
logIcon = "logout";
logColor = this.props.theme.colors.text;
}
const onPressSettings = () => this.props.navigation.navigate("settings"); const onPressSettings = () => this.props.navigation.navigate("settings");
const onPressAbout = () => this.props.navigation.navigate("about"); const onPressAbout = () => this.props.navigation.navigate("about");
return <MaterialHeaderButtons> return <MaterialHeaderButtons>
<Item title="settings" iconName={"settings"} onPress={onPressSettings}/> <Item title="log" iconName={logIcon} color={logColor} onPress={onPressLog}/>
<Item title="information" iconName={"information"} onPress={onPressAbout}/> <HiddenItem title={i18n.t("screens.settings")} iconName={"settings"} onPress={onPressSettings}/>
<HiddenItem title={i18n.t("screens.about")} iconName={"information"} onPress={onPressAbout}/>
</MaterialHeaderButtons>; </MaterialHeaderButtons>;
}; };
showDisconnectDialog = () => this.setState({dialogVisible: true});
hideDisconnectDialog = () => this.setState({dialogVisible: false});
onProxiwashClick = () => { onProxiwashClick = () => {
this.props.navigation.navigate("proxiwash"); this.props.navigation.navigate("proxiwash");
}; };
@ -529,6 +560,11 @@ class HomeScreen extends React.Component<Props> {
icon="qrcode-scan" icon="qrcode-scan"
onPress={this.openScanner} onPress={this.openScanner}
/> />
<LogoutDialog
{...this.props}
visible={this.state.dialogVisible}
onDismiss={this.hideDisconnectDialog}
/>
</View> </View>
); );
} }