fga-eps-mds#164 - Refactoring profile screen.

Co-authored-by: ThalissonMelo <[email protected]> Co-authored-by: Ronyell <[email protected]>
Ronyell · Apr 19, 2018 · 32dc93c · 32dc93c
1 parent 2f9d629
commit 32dc93c
Show file tree

Hide file tree

Showing 3 changed files with 116 additions and 134 deletions.
diff --git a/src/Styles/ProfileStyles.js b/src/Styles/ProfileStyles.js
@@ -0,0 +1,51 @@
+import { StyleSheet } from 'react-native';
+
+
+export const styles = StyleSheet.create({
+    field: {
+      backgroundColor: '#FAFAFA',
+      paddingVertical: 4,
+      borderWidth: 1,
+      borderRadius: 7,
+      borderColor: 'gray',
+      marginHorizontal: 15,
+      marginBottom: 15,
+      marginTop: 15,
+      justifyContent: 'flex-start',
+      paddingLeft: 2,
+      paddingRight: 4,
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+
+    profileInfoScreen: {
+      flex: 1,
+    },
+
+    buttonContainer: {
+      paddingVertical: 10,
+      borderWidth: 1,
+      borderRadius: 7,
+      marginHorizontal: 15,
+      marginTop: 30,
+      marginBottom: 20,
+      backgroundColor: '#FF9500',
+      justifyContent: 'flex-end',
+    },
+
+    buttonText: {
+      textAlign: 'center',
+      color: '#FFF',
+    },
+
+    infoProfileBox: {
+      backgroundColor: 'white',
+      marginBottom: 9,
+      flex: 6,
+      flexDirection: 'column',
+    },
+
+    icon: {
+      margin: 7,
+    },
+  });
diff --git a/src/constants/profileInformations.js b/src/constants/profileInformations.js
@@ -0,0 +1,39 @@
+export const PROFILE_FIELDS = [
+    {
+      icon: 'face',
+      label: 'Nome:'
+    },
+    {
+      icon: 'person',
+      label: 'CPF:'
+    },
+    {
+      icon: 'phone',
+      label: 'Telefone:'
+    },
+    {
+      icon: 'email',
+      label: 'Email:'
+    },
+    {
+      icon: 'card-travel',
+      label: 'Cargo:'
+    },
+    {
+      icon: 'supervisor-account',
+      label: 'Tipo de Conselheiro:'
+    },
+    {
+      icon: 'people',
+      label: 'Segmento:'
+    },
+    {
+      icon: 'location-city',
+      label: 'CAE:'
+    },
+    {
+      icon: 'domain',
+      label: 'Tipo do CAE:'
+    },
+  ]
+
diff --git a/src/screens/ProfileInfoScreen.js b/src/screens/ProfileInfoScreen.js
@@ -6,90 +6,9 @@ import { MaterialIcons, FontAwesome } from '@expo/vector-icons';
 import Header from '../components/Header';
 import Button from '../components/Button';
 import { backHandlerPopToMain } from '../NavigationFunctions';
+import { PROFILE_FIELDS } from '../constants/profileInformations';
+import { styles } from '../Styles/ProfileStyles';
 
-const styles = StyleSheet.create({
-  field: {
-    backgroundColor: '#FAFAFA',
-    paddingVertical: 4,
-    borderWidth: 1,
-    borderRadius: 7,
-    borderColor: 'gray',
-    marginHorizontal: 15,
-    marginBottom: 15,
-    marginTop: 15,
-    justifyContent: 'flex-start',
-    paddingLeft: 2,
-    paddingRight: 4,
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-
-  profileInfoScreen: {
-    flex: 1,
-  },
-
-  buttonContainer: {
-    paddingVertical: 10,
-    borderWidth: 1,
-    borderRadius: 7,
-    marginHorizontal: 15,
-    marginTop: 30,
-    marginBottom: 20,
-    backgroundColor: '#FF9500',
-    justifyContent: 'flex-end',
-  },
-
-  buttonText: {
-    textAlign: 'center',
-    color: '#FFF',
-  },
-
-  infoProfileBox: {
-    backgroundColor: 'white',
-    marginBottom: 9,
-    flex: 6,
-    flexDirection: 'column',
-  },
-
-  icon: {
-    margin: 7,
-  },
-});
-
-const profileInformations = {
-  icons: [
-    'face',
-    'person',
-    'phone',
-    'email',
-    'card-travel',
-    'supervisor-account',
-    'people',
-    'location-city',
-    'domain',
-  ],
-  labels: [
-   'Nome:',
-   'CPF:',
-   'Telefone:',
-   'Email:',
-   'Cargo:',
-   'Tipo de Conselheiro:',
-   'Segmento:',
-   'CAE:',
-   'Tipo do CAE:',
-  ],
-  informations: [
-    this.props.counselor.name,
-    this.props.counselor.profile.cpf,
-    this.props.counselor.profile.phone,
-    this.props.counselor.email,
-    'Cargo',
-    this.props.counselor.profile.segment,
-    this.props.counselor.profile.CAE,
-    this.props.counselor.profile.CAE_Type,
-  ]
-}
 
 export default class ProfileInfoScreen extends React.Component {
   componentWillMount() {
@@ -102,22 +21,24 @@ export default class ProfileInfoScreen extends React.Component {
 
   verifyCharge() {
     if (this.props.counselor.profile.isPresident) {
-      return (
-        <View key="is_president" style={styles.field}>
-          <FontAwesome name="suitcase" style={styles.icon} size={32} color="black" />
-          <Text>Cargo: Presidente</Text>
-        </View>
-      );
+      return "Presidente";
     }
-
-    return (
-      <View key="is_counselor" style={styles.field}>
-        <FontAwesome name="suitcase" style={styles.icon} size={32} color="black" />
-        <Text>Cargo: Conselheiro </Text>
-      </View>
-    );
+      return "Conselheiro";
   }
+
   render() {
+    informations = [
+      this.props.counselor.name,
+      this.props.counselor.profile.cpf,
+      this.props.counselor.profile.phone,
+      this.props.counselor.email,
+      this.verifyCharge(),
+      this.props.counselor.profile.counselorType,
+      this.props.counselor.profile.segment,
+      this.props.counselor.profile.CAE,
+      this.props.counselor.profile.CAE_Type
+    ]
+
     return (
       <View style={styles.profileInfoScreen}>
         <Header
@@ -126,44 +47,15 @@ export default class ProfileInfoScreen extends React.Component {
         />
         <View style={styles.infoProfileBox}>
           <ScrollView>
-            <View style={styles.field}>
-              <MaterialIcons name="face" style={styles.icon} size={32} color="black" />
-              <Text>Nome: {this.props.counselor.name}</Text>
-            </View>
-            <View style={styles.field}>
-              <FontAwesome name="user-circle" style={styles.icon} size={32} color="black" />
-              <Text>CPF: {this.props.counselor.profile.cpf}</Text>
-            </View>
-            <View style={styles.field}>
-              <MaterialIcons name="phone" style={styles.icon} size={32} color="black" />
-              <Text>Telefone: {this.props.counselor.profile.phone}</Text>
-            </View>
-            <View style={styles.field}>
-              <MaterialIcons name="email" style={styles.icon} size={32} color="black" />
-              <Text>Email: {this.props.counselor.email}</Text>
-            </View>
-            {this.verifyCharge()}
-            <View style={styles.field}>
-              <MaterialIcons
-                name="supervisor-account"
-                style={styles.icon}
-                size={32}
-                color="black"
-              />
-              <Text>Tipo do Conselheiro: {this.props.counselor.profile.counselorType}</Text>
-            </View>
-            <View style={styles.field}>
-              <MaterialIcons name="people" style={styles.icon} size={32} color="black" />
-              <Text>Segmento: {this.props.counselor.profile.segment}</Text>
-            </View>
-            <View style={styles.field}>
-              <MaterialIcons name="location-city" style={styles.icon} size={32} color="black" />
-              <Text>CAE: {this.props.counselor.profile.CAE}</Text>
-            </View>
-            <View style={styles.field}>
-              <MaterialIcons name="domain" style={styles.icon} size={32} color="black" />
-              <Text>Tipo do CAE: {this.props.counselor.profile.CAE_Type}</Text>
-            </View>
+            {
+              PROFILE_FIELDS.map((item, index) => (
+              <View style={styles.field}>
+                <MaterialIcons name={item.icon} style={styles.icon} size={32} color="black" />
+                <Text>{item.label} {informations[index]}</Text>
+              </View>
+              )
+            )
+            }
           </ScrollView>
           <Button
             key="updateInfoButton"