application-amicale/screens/Amicale/ProfileScreen.js

236 lines
6.9 KiB
JavaScript
Raw Normal View History

2020-03-31 14:21:01 +02:00
import * as React from 'react';
2020-03-31 21:10:13 +02:00
import {FlatList, StyleSheet} 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 ConnectionManager from "../../managers/ConnectionManager";
import HeaderButton from "../../components/HeaderButton";
2020-03-31 14:21:01 +02:00
type Props = {
navigation: Object,
theme: Object,
}
2020-03-31 19:36:02 +02:00
type State = {}
2020-03-31 14:21:01 +02:00
class ProfileScreen extends React.Component<Props, State> {
2020-03-31 19:36:02 +02:00
state = {};
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.onClickDisconnect = this.onClickDisconnect.bind(this);
this.flatListData = [
{id: 0},
{id: 1},
{id: 2},
]
}
componentDidMount() {
const rightButton = this.getHeaderButtons.bind(this);
this.props.navigation.setOptions({
headerRight: rightButton,
});
}
getHeaderButtons() {
return <HeaderButton icon={'logout'} onPress={this.onClickDisconnect}/>;
}
onClickDisconnect() {
ConnectionManager.getInstance().disconnect()
.then(() => {
this.props.navigation.reset({
index: 0,
routes: [{name: 'Main'}],
});
});
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 (
2020-03-31 21:10:13 +02:00
<FlatList
renderItem={item => this.getRenderItem(item)}
keyExtractor={item => item.id}
data={this.flatListData}
/>
2020-03-31 14:21:01 +02:00
)
}
2020-03-31 21:10:13 +02:00
getRenderItem({item}: Object) {
switch (item.id) {
case 0:
return this.getPersonalCard();
case 1:
return this.getClubCard();
case 2:
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>
<List.Subheader>INFORMATIONS PERSONNELLES</List.Subheader>
<List.Item
title={this.getFieldValue(this.data.birthday)}
left={props => <List.Icon {...props} icon="cake-variant"/>}
/>
<List.Item
title={this.getFieldValue(this.data.phone)}
left={props => <List.Icon {...props} icon="phone"/>}
/>
<List.Item
title={this.getFieldValue(this.data.email)}
left={props => <List.Icon {...props} icon="email"/>}
/>
<List.Item
title={this.getFieldValue(this.data.branch)}
left={props => <List.Icon {...props} icon="school"/>}
/>
</List.Section>
<Divider/>
<Card.Actions>
<Button
icon="account-edit"
mode="contained"
onPress={() => openBrowser(this.data.link, this.colors.primary)}
style={styles.editButton}>
EDITER INFOS
</Button>
</Card.Actions>
</Card.Content>
</Card>
);
}
getClubCard() {
return (
<Card style={styles.card}>
<Card.Title
title="CLUBS"
subtitle="LISTE DE VOS CLUBS"
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
title="ÉTAT COTISATION"
subtitle="CA PERMET D'ETRE COOL"
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
title={state ? 'PAYÉ' : 'NON PAYÉ'}
left={props => <List.Icon
{...props}
color={state ? this.colors.success : this.colors.danger}
icon={state ? 'check' : 'close'}
/>}
/>
);
}
getFieldValue(field: ?string) {
return field !== null
? field
: 'NON RENSEIGNÉ';
}
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);