Merge pull request #20 from leapfrogtechnology/LFG-183

Lfg 183: Detail screen view populated

Author: nishanbajracharya

app/screens/contact/contact.js

@@ -7,6 +7,7 @@ import {
   ActivityIndicator,
   LayoutAnimation,
  } from 'react-native';
+ 
 import Swiper from 'react-native-swiper'; 
 import Search from 'react-native-search-box';
 import ParallaxScrollView from 'react-native-parallax-scroll-view';

app/screens/contact/contactCell/contactCell.js

@@ -94,7 +94,7 @@ import placeHolderImage from './../../../../assets/images/default.png';
         <View style={ style.mainContainer }>
           <View style={style.imageContainer}>
             <ProgressiveImage source={{uri: this.props.avatarUrl}} thumbnail={placeHolderImage} style={style.contactImage} />
-            {/* <Image source={placeHolderImage} style={style.contactImage}/> */}
+            {/* <Image source={{uri: this.props.avatarUrl}} style={style.contactImage}/> */}
           </View>
           <View style={style.titleContainer}>
             <View style={style.titleSubContainer}>

app/screens/profile/profile.js

@@ -4,6 +4,7 @@ import {
   Text,
   Image,
   FlatList,
+  LayoutAnimation,
   TouchableOpacity,
   ActivityIndicator,
  } from 'react-native';
@@ -27,8 +28,8 @@ import style, { AVATAR_SIZE, STICKY_HEADER_HEIGHT, DOT_MARGIN, PARALLAX_HEADER_H
 const PHONE_NUMBER = 0
 const ADDRESS = 1
 const EMAIL = 2
-const DEPARTMENT = 3
-const DOB = 4
+const DOB = 3
+const GITHUB = 4
 const SKYPE = 5
 
 const CANCEL_INDEX = 0
@@ -40,6 +41,10 @@ class ProfileScreen extends Component {
     super(props);
   }
 
+  componentDidMount() {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);    
+  }
+
   _logout = () => {
     // TODO: Clear all data
     this.props.logout();
@@ -83,10 +88,10 @@ class ProfileScreen extends Component {
           <View key="parallax-header" style={ style.parallaxHeader }>
             <Image style={ style.avatar } source={{uri: 'https://pbs.twimg.com/profile_images/2694242404/5b0619220a92d391534b0cd89bf5adc1_400x400.jpeg'}}/>
             <Text style={ style.sectionSpeakerText }>
-              { this.data.department.name || '' }
+            { this.data.firstName } { this.data.lastName }
             </Text>
             <Text style={ style.sectionTitleText }>
-              { this.data.department.name || '' }
+              { this.data.department.name }
             </Text>
           </View>
         )}
@@ -98,38 +103,41 @@ class ProfileScreen extends Component {
   _renderItems = (item, index) => {
     switch (index) {
       case PHONE_NUMBER: return this._renderPhoneCell();
-      case ADDRESS: return this._renderTextCell('Address', '');
-      case EMAIL: return this._renderTextCell('Email', this.data.username || '');
-      case DEPARTMENT: return this._renderTextCell('Department', '');
-      case DOB: return this._renderTextCell('Dob', '');
-      case SKYPE: return this._renderTextCell('Skype ID', '');
+      case ADDRESS: return this._renderTextCell('Address', this.data.address.temporaryAddress || '-');
+      case EMAIL: return this._renderTextCell('E-mail', this.data.username || '-');
+      case DOB: return this._renderTextCell('DOB', this.data.dateofBirth || '-');
+      case GITHUB: return this._renderTextCell('Github ID', this.data.contact.githubId || '-');
+      case SKYPE: return this._renderTextCell('Skype ID', this.data.contact.skypeId || '-');
       case LOGOUT: return this._renderLougoutCell();
     }
   }
 
   _renderPhoneCell = () => {
     return (
-      <View style={style.phoneCell}>
-        <View style={style.nameTextContainer}>
-          <Text style={style.titleText}>{ this.data.firstName || '' } {this.data.lastName || ''}</Text>
-        </View>
-        <View style={style.phoneMessageContainer}>
-          <TouchableOpacity style={style.phoneButton} onPress={() => Communications.phonecall('0123456789', true)}>
-            <Image source={callImage} style={style.phoneAndMessageButtonImage}/>
-          </TouchableOpacity>
-          <TouchableOpacity style={style.messageButton} onPress={() => Communications.text('0123456789')}>
-            <Image source={messageImage} style={style.phoneAndMessageButtonImage}/>
-          </TouchableOpacity>
+      <View style={[style.phoneCell, style.cell]}>
+        <View style={style.numberTextContainer}>
+          <Text style={style.dataText}>{ this.data.contact.mobilePhone }</Text>
+          <Text style={style.titleText}>Phone Number</Text>
         </View>
+        { !this.props.data.fromProfileTab &&
+          <View style={style.phoneMessageContainer}>
+            <TouchableOpacity style={style.phoneButton} onPress={() => Communications.phonecall(this.data.contact.mobilePhone, true)}>
+              <Image source={callImage} style={style.phoneAndMessageButtonImage}/>
+            </TouchableOpacity>
+            <TouchableOpacity style={style.messageButton} onPress={() => Communications.text(this.data.contact.mobilePhone)}>
+              <Image source={messageImage} style={style.phoneAndMessageButtonImage}/>
+            </TouchableOpacity>
+          </View>
+        }
       </View>
     );
   }
 
   _renderTextCell = (text, data) => {
     return (
-      <View style={style.simpleTextCell}>
-        <Text style={style.titleText}>{text}</Text>
+      <View style={[style.simpleTextCell, style.cell]}>
         <Text style={style.dataText}>{data}</Text>
+        <Text style={style.titleText}>{text}</Text>
       </View>
     );
   }

app/screens/profile/styles.js

@@ -70,7 +70,8 @@ const style = StyleSheet.create({
   parallaxHeader: {
     flex: 1,
     paddingTop: 80,    
-    alignItems: 'center',    
+    paddingHorizontal: 16,
+    alignItems: 'flex-start',    
     flexDirection: 'column',
   },
   avatar: {
@@ -92,31 +93,36 @@ const style = StyleSheet.create({
   listView: {
     // paddingHorizontal: 16,     
   },
+  cell: {
+    flex: 1,    
+    height: 60, 
+    paddingHorizontal: 16, 
+    paddingTop: 8,           
+  },
   phoneCell: {
-    flex: 1,
+    marginTop: 8,
     flexDirection: 'row',
-    paddingHorizontal: 16, 
-    paddingTop: 8,    
   },
-  nameTextContainer: {
+  numberTextContainer: {
     flex: 0.9,
-    justifyContent: 'center',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
   },
   titleText: {
-    flex: 0.5,    
-    fontSize: 18,
+    flex: 1,
+    marginVertical: 4,    
   },
   dataText: {
-    flex: 0.5,
-    textAlign: 'right',
+    flex: 1,
+    height: 40,
+    fontSize: 18,
   },
   phoneMessageContainer: {
     flex: 0.1,
     flexDirection: 'row',    
-    alignSelf: 'flex-end',
+    alignSelf: 'center',
     justifyContent: 'flex-end',
   },
-
   phoneAndMessageButtonImage: {
     width: 35,
     height: 35,
@@ -132,11 +138,8 @@ const style = StyleSheet.create({
     resizeMode: 'contain',
   },
   simpleTextCell: {
-    height: 44,
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 16,  
+    flexDirection: 'column',
+    alignItems: 'flex-start',
   },
   logoutButtonContainer: {
     flex: 1,