application-amicale/screens/Amicale/ProfileScreen.js

254 lines
7.4 KiB
JavaScript
Raw Normal View History

2020-03-31 14:21:01 +02:00
import * as React from 'react';
import {FlatList, StyleSheet, View} from "react-native";
2020-03-31 19:36:02 +02:00
import {Avatar, Button, Card, Divider, List, withTheme} from 'react-native-paper';
2020-03-31 14:21:01 +02:00
import AuthenticatedScreen from "../../components/AuthenticatedScreen";
2020-03-31 19:36:02 +02:00
import {openBrowser} from "../../utils/WebBrowser";
2020-03-31 21:10:13 +02:00
import HeaderButton from "../../components/HeaderButton";
2020-03-31 21:22:35 +02:00
import i18n from 'i18n-js';
import LogoutDialog from "../../components/LogoutDialog";
2020-03-31 14:21:01 +02:00
type Props = {
navigation: Object,
theme: Object,
}
type State = {
dialogVisible: boolean,
}
2020-03-31 14:21:01 +02:00
class ProfileScreen extends React.Component<Props, State> {
state = {
dialogVisible: false,
};
2020-03-31 14:21:01 +02:00
colors: Object;
2020-03-31 21:10:13 +02:00
data: Object;
flatListData: Array<Object>;
2020-03-31 14:21:01 +02:00
constructor(props) {
super(props);
this.colors = props.theme.colors;
2020-03-31 21:10:13 +02:00
this.flatListData = [
{id: '0'},
{id: '1'},
{id: '2'},
2020-03-31 21:10:13 +02:00
]
}
componentDidMount() {
const rightButton = this.getHeaderButtons.bind(this);
this.props.navigation.setOptions({
headerRight: rightButton,
});
}
showDisconnectDialog = () => this.setState({ dialogVisible: true });
2020-03-31 21:10:13 +02:00
hideDisconnectDialog = () => this.setState({ dialogVisible: false });
getHeaderButtons() {
return <HeaderButton icon={'logout'} onPress={this.showDisconnectDialog}/>;
2020-03-31 14:21:01 +02:00
}
getScreen(data: Object) {
2020-03-31 21:10:13 +02:00
this.data = data;
2020-03-31 14:21:01 +02:00
return (
<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>
2020-03-31 14:21:01 +02:00
)
}
2020-03-31 21:10:13 +02:00
getRenderItem({item}: Object) {
switch (item.id) {
case '0':
2020-03-31 21:10:13 +02:00
return this.getPersonalCard();
case '1':
2020-03-31 21:10:13 +02:00
return this.getClubCard();
case '2':
2020-03-31 21:10:13 +02:00
return this.getMembershipCar();
}
}
getPersonalCard() {
return (
<Card style={styles.card}>
<Card.Title
title={this.data.first_name + ' ' + this.data.last_name}
subtitle={this.data.email}
left={(props) => <Avatar.Icon
{...props}
icon="account"
color={this.colors.primary}
style={styles.icon}
/>}
/>
<Card.Content>
<Divider/>
<List.Section>
2020-03-31 21:22:35 +02:00
<List.Subheader>{i18n.t("profileScreen.personalInformation")}</List.Subheader>
{this.getPersonalListItem(this.data.birthday, "cake-variant")}
{this.getPersonalListItem(this.data.phone, "phone")}
{this.getPersonalListItem(this.data.email, "email")}
{this.getPersonalListItem(this.data.branch, "school")}
2020-03-31 21:10:13 +02:00
</List.Section>
<Divider/>
<Card.Actions>
<Button
icon="account-edit"
mode="contained"
onPress={() => openBrowser(this.data.link, this.colors.primary)}
style={styles.editButton}>
2020-03-31 21:22:35 +02:00
{i18n.t("profileScreen.editInformation")}
2020-03-31 21:10:13 +02:00
</Button>
</Card.Actions>
</Card.Content>
</Card>
);
}
getClubCard() {
return (
<Card style={styles.card}>
<Card.Title
2020-03-31 21:22:35 +02:00
title={i18n.t("profileScreen.clubs")}
subtitle={i18n.t("profileScreen.clubsSubtitle")}
2020-03-31 21:10:13 +02:00
left={(props) => <Avatar.Icon
{...props}
icon="account-group"
color={this.colors.primary}
style={styles.icon}
/>}
/>
<Card.Content>
<Divider/>
{this.getClubList(this.data.clubs)}
</Card.Content>
</Card>
);
}
getMembershipCar() {
return (
<Card style={styles.card}>
<Card.Title
2020-03-31 21:22:35 +02:00
title={i18n.t("profileScreen.membership")}
subtitle={i18n.t("profileScreen.membershipSubtitle")}
2020-03-31 21:10:13 +02:00
left={(props) => <Avatar.Icon
{...props}
icon="credit-card"
color={this.colors.primary}
style={styles.icon}
/>}
/>
<Card.Content>
<List.Section>
{this.getMembershipItem(this.data.validity)}
</List.Section>
</Card.Content>
</Card>
);
}
getClubList(list: Array<string>) {
let dataset = [];
for (let i = 0; i < list.length; i++) {
dataset.push({name: list[i]});
}
return (
<FlatList
renderItem={({item}) =>
<List.Item
title={item.name}
left={props => <List.Icon {...props} icon="chevron-right"/>}
/>
}
keyExtractor={item => item.name}
data={dataset}
/>
);
}
2020-03-31 19:36:02 +02:00
getMembershipItem(state: boolean) {
return (
<List.Item
2020-03-31 21:22:35 +02:00
title={state ? i18n.t("profileScreen.membershipPayed") : i18n.t("profileScreen.membershipNotPayed")}
2020-03-31 19:36:02 +02:00
left={props => <List.Icon
{...props}
color={state ? this.colors.success : this.colors.danger}
icon={state ? 'check' : 'close'}
/>}
/>
);
}
isFieldAvailable(field: ?string) {
return field !== null;
}
2020-03-31 19:36:02 +02:00
getFieldValue(field: ?string) {
return this.isFieldAvailable(field)
2020-03-31 19:36:02 +02:00
? field
2020-03-31 21:22:35 +02:00
: i18n.t("profileScreen.noData");
2020-03-31 19:36:02 +02:00
}
getFieldColor(field: ?string) {
return this.isFieldAvailable(field)
? this.colors.text
: this.colors.textDisabled;
}
getPersonalListItem(field: ?string, icon: string) {
return (
<List.Item
title={this.getFieldValue(field)}
left={props => <List.Icon
{...props}
icon={icon}
color={this.getFieldColor(field)}
/>}
titleStyle={{color: this.getFieldColor(field)}}
/>
);
}
2020-03-31 14:21:01 +02:00
render() {
return (
<AuthenticatedScreen
{...this.props}
link={'https://www.amicale-insat.fr/api/user/profile'}
2020-03-31 18:40:06 +02:00
renderFunction={(data) => this.getScreen(data)}
2020-03-31 14:21:01 +02:00
/>
);
}
}
2020-03-31 19:36:02 +02:00
const styles = StyleSheet.create({
card: {
margin: 10,
},
icon: {
backgroundColor: 'transparent'
},
editButton: {
marginLeft: 'auto'
}
});
2020-03-31 14:21:01 +02:00
export default withTheme(ProfileScreen);