Improved profile display

screens/Amicale/ProfileScreen.js

@@ -1,20 +1,19 @@
 import * as React from 'react';
-import {View} from "react-native";
-import {Text, withTheme} from 'react-native-paper';
+import {ScrollView, StyleSheet} from "react-native";
+import {Avatar, Button, Card, Divider, List, withTheme} from 'react-native-paper';
 import AuthenticatedScreen from "../../components/AuthenticatedScreen";
+import {openBrowser} from "../../utils/WebBrowser";
 
 type Props = {
     navigation: Object,
     theme: Object,
 }
 
-type State = {
-}
+type State = {}
 
 class ProfileScreen extends React.Component<Props, State> {
 
-    state = {
-    };
+    state = {};
 
     colors: Object;
 
@@ -24,14 +23,84 @@ class ProfileScreen extends React.Component<Props, State> {
     }
 
     getScreen(data: Object) {
-
+        console.log(data);
         return (
-            <View>
-                <Text>{data.first_name} {Math.random()}</Text>
-            </View>
+            <ScrollView>
+                <Card style={styles.card}>
+                    <Card.Title
+                        title={data.first_name + ' ' + data.last_name}
+                        subtitle={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(data.birthday)}
+                                left={props => <List.Icon {...props} icon="cake-variant"/>}
+                            />
+                            <List.Item
+                                title={this.getFieldValue(data.phone)}
+                                left={props => <List.Icon {...props} icon="phone"/>}
+                            />
+                            <List.Item
+                                title={this.getFieldValue(data.email)}
+                                left={props => <List.Icon {...props} icon="email"/>}
+                            />
+                            <List.Item
+                                title={this.getFieldValue(data.branch)}
+                                left={props => <List.Icon {...props} icon="school"/>}
+                            />
+                        </List.Section>
+                        <Divider/>
+                        <Card.Actions>
+                            <Button
+                                icon="account-edit"
+                                mode="contained"
+                                onPress={() => openBrowser(data.link, this.colors.primary)}
+                                style={styles.editButton}>
+                                EDITER INFOS
+                            </Button>
+                        </Card.Actions>
+                    </Card.Content>
+                </Card>
+                <Card style={styles.card}>
+                    <Card.Content>
+                        <List.Section>
+                            <List.Subheader>ETAT COTISATION</List.Subheader>
+                            {this.getMembershipItem(data.validity)}
+                        </List.Section>
+                    </Card.Content>
+                </Card>
+            </ScrollView>
         )
     }
 
+    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É';
+    }
+
     render() {
         return (
             <AuthenticatedScreen
@@ -41,7 +110,19 @@ class ProfileScreen extends React.Component<Props, State> {
             />
         );
     }
-
 }
 
+const styles = StyleSheet.create({
+    card: {
+        margin: 10,
+    },
+    icon: {
+        backgroundColor: 'transparent'
+    },
+    editButton: {
+        marginLeft: 'auto'
+    }
+
+});
+
 export default withTheme(ProfileScreen);