123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332 |
- // @flow
-
- import * as React from 'react';
- import {FlatList, StyleSheet, View} from "react-native";
- import {Avatar, Button, Card, Divider, List, withTheme} from 'react-native-paper';
- import AuthenticatedScreen from "../../components/Amicale/AuthenticatedScreen";
- import {openBrowser} from "../../utils/WebBrowser";
- import HeaderButton from "../../components/Custom/HeaderButton";
- import i18n from 'i18n-js';
- import LogoutDialog from "../../components/Amicale/LogoutDialog";
-
- type Props = {
- navigation: Object,
- theme: Object,
- }
-
- type State = {
- dialogVisible: boolean,
- }
-
- class ProfileScreen extends React.Component<Props, State> {
-
- state = {
- dialogVisible: false,
- };
-
- colors: Object;
-
- data: Object;
-
- flatListData: Array<Object>;
-
- constructor(props) {
- super(props);
- this.colors = props.theme.colors;
- this.flatListData = [
- {id: '0'},
- {id: '1'},
- {id: '2'},
- ]
- }
-
- componentDidMount() {
- this.props.navigation.setOptions({
- headerRight: this.getHeaderButton,
- });
- }
-
- showDisconnectDialog = () => this.setState({dialogVisible: true});
-
- hideDisconnectDialog = () => this.setState({dialogVisible: false});
-
- getHeaderButton = () => <HeaderButton icon={'logout'} onPress={this.showDisconnectDialog}/>;
-
- getScreen = (data: Object) => {
- this.data = data[0];
- return (
- <View>
- {/*$FlowFixMe*/}
- <FlatList
- renderItem={this.getRenderItem}
- data={this.flatListData}
- />
- <LogoutDialog
- {...this.props}
- visible={this.state.dialogVisible}
- onDismiss={this.hideDisconnectDialog}
- />
- </View>
- )
- };
-
- getRenderItem = ({item}: Object) => {
- switch (item.id) {
- case '0':
- return this.getPersonalCard();
- case '1':
- return this.getClubCard();
- default:
- return this.getMembershipCar();
- }
- };
-
- /**
- * Checks if the given field is available
- *
- * @param field The field to check
- * @return {boolean}
- */
- isFieldAvailable(field: ?string) {
- return field !== null;
- }
-
- /**
- * Gets the given field value.
- * If the field does not have a value, returns a placeholder text
- *
- * @param field The field to get the value from
- * @return {*}
- */
- getFieldValue(field: ?string) {
- return this.isFieldAvailable(field)
- ? field
- : i18n.t("profileScreen.noData");
- }
-
- /**
- * Gets the color depending on the value.
- *
- * @param field The field to get the color for
- * @return {*}
- */
- getFieldColor(field: ?string) {
- return this.isFieldAvailable(field)
- ? this.colors.text
- : this.colors.textDisabled;
- }
-
- /**
- * Gets a list item showing personal information
- *
- * @param field The field to display
- * @param icon The icon to use
- * @return {*}
- */
- 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)}}
- />
- );
- }
-
- /**
- * Gets a card containing user personal information
- *
- * @return {*}
- */
- 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>{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")}
- </List.Section>
- <Divider/>
- <Card.Actions>
- <Button
- icon="account-edit"
- mode="contained"
- onPress={() => openBrowser(this.data.link, this.colors.primary)}
- style={styles.editButton}>
- {i18n.t("profileScreen.editInformation")}
- </Button>
- </Card.Actions>
- </Card.Content>
- </Card>
- );
- }
-
- /**
- * Gets a cars containing clubs the user is part of
- *
- * @return {*}
- */
- getClubCard() {
- return (
- <Card style={styles.card}>
- <Card.Title
- title={i18n.t("profileScreen.clubs")}
- subtitle={i18n.t("profileScreen.clubsSubtitle")}
- 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>
- );
- }
-
- /**
- * Gets a card showing if the user has payed his membership
- *
- * @return {*}
- */
- getMembershipCar() {
- return (
- <Card style={styles.card}>
- <Card.Title
- title={i18n.t("profileScreen.membership")}
- subtitle={i18n.t("profileScreen.membershipSubtitle")}
- 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>
- );
- }
-
- /**
- * Gets the item showing if the user has payed his membership
- *
- * @return {*}
- */
- getMembershipItem(state: boolean) {
- return (
- <List.Item
- title={state ? i18n.t("profileScreen.membershipPayed") : i18n.t("profileScreen.membershipNotPayed")}
- left={props => <List.Icon
- {...props}
- color={state ? this.colors.success : this.colors.danger}
- icon={state ? 'check' : 'close'}
- />}
- />
- );
- }
-
- /**
- * Opens the club details screen for the club of given ID
- * @param id The club's id to open
- */
- openClubDetailsScreen(id: number) {
- this.props.navigation.navigate("club-information", {clubId: id});
- }
-
- /**
- * Gets a list item for the club list
- *
- * @param item The club to render
- * @return {*}
- */
- clubListItem = ({item}: Object) => {
- const onPress = () => this.openClubDetailsScreen(item.id);
- let description = i18n.t("profileScreen.isMember");
- let icon = (props) => <List.Icon {...props} icon="chevron-right"/>;
- if (item.is_manager) {
- description = i18n.t("profileScreen.isManager");
- icon = (props) => <List.Icon {...props} icon="star" color={this.colors.primary}/>;
- }
- return <List.Item
- title={item.name}
- description={description}
- left={icon}
- onPress={onPress}
- />;
- };
-
- clubKeyExtractor = (item: Object) => item.name;
-
- /**
- * Renders the list of clubs the user is part of
- *
- * @param list The club list
- * @return {*}
- */
- getClubList(list: Array<Object>) {
- return (
- //$FlowFixMe
- <FlatList
- renderItem={this.clubListItem}
- keyExtractor={this.clubKeyExtractor}
- data={list}
- />
- );
- }
-
- render() {
- return (
- <AuthenticatedScreen
- {...this.props}
- requests={[
- {
- link: 'user/profile',
- params: {},
- mandatory: true,
- }
- ]}
- renderFunction={this.getScreen}
- />
- );
- }
- }
-
- const styles = StyleSheet.create({
- card: {
- margin: 10,
- },
- icon: {
- backgroundColor: 'transparent'
- },
- editButton: {
- marginLeft: 'auto'
- }
-
- });
-
- export default withTheme(ProfileScreen);
|