Merge pull request #21 from leapfrogtechnology/LFG-184

Lfg 184: Search for a contact in the list
leapfrogtechnology · Dec 13, 2017 · 42838a2 · 42838a2
2 parents 06d8608 + 43421dd
commit 42838a2
Show file tree

Hide file tree

Showing 13 changed files with 184 additions and 175 deletions.
diff --git a/app/screens/contact/contact.js b/app/screens/contact/contact.js
@@ -12,13 +12,14 @@ import Swiper from 'react-native-swiper';
 import Search from 'react-native-search-box';
 import ParallaxScrollView from 'react-native-parallax-scroll-view';
 
-import * as util from 'App/utils/dataNormalization';
 import colors from 'App/config/colors';
 import ContactCell from './contactCell';
 import screens from 'App/constants/screens';
+import * as util from 'App/utils/dataNormalization';
+import SearchContactView from 'App/screens/searchContact';
 import { getWidth, getHeight } from 'App/utils/dimension';
+import { searchEmployeesOfName } from 'App/utils/dataNormalization';
 import style, { AVATAR_SIZE, STICKY_HEADER_HEIGHT, DOT_MARGIN, PARALLAX_HEADER_HEIGHT } from './styles';
-import { setInterval } from 'core-js/library/web/timers';
 
 const DEPARTMENT_LIST = [{
                             name: 'iOS', 
@@ -63,7 +64,9 @@ const DEPARTMENT_LIST = [{
     super(props);
 
     this.state = {
+      isSearching: false,      
       currentSwipeIndex: 0,
+      searchedEmployees: [],
     }
   }
 
@@ -84,50 +87,53 @@ const DEPARTMENT_LIST = [{
   componentDidMount() {
     // this._animateOnMount();
     LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
-
-    this.props.employees ? null : this.props.fetchEmployees()
+    if (!this.props.employees) { this.props.fetchEmployees() }
   }
 
-  _onSearchBarTextChange = () => {
-    console.log('bigno');
+  _onSearchBarTextChange = (text) => {
+    var employees = searchEmployeesOfName(this.props.employees, text);    
+    this.setState({ searchedEmployees: employees });    
   }
 
   _onSearchBarFocus = () => {
-    console.log('focus');    
+    this.setState({ isSearching: true });    
   }
 
-  _onSearch = () => {
-    console.log('search');        
+  _onReturnAction = () => {
+    // also cancels on done button action 
+    this._onSearchCancel();     
   }
 
   _onSearchCancel = () => {
-    console.log('cancel');
+    this.setState({ searchedEmployees: [] });
+    this.setState({ isSearching: false });    
   }
 
-  _onCellSelection = () => {
-    // this.props.navigator.push({
-    //   screen: screens.PROFILE_SCREEN.id,
-    //   animated: true,
-    //   overrideBackPress: true,
-    //   navigatorStyle: {
-    //     drawUnderNavBar: true,
-    //     navBarTranslucent: true,
-    //     navBarTransparent: true,
-    //     navBarTextColor: 'white',
-    //     navBarTransparency: 1,  
-    //     navBarButtonColor: 'white',                  
-    //     navBarLeftButtonColor: 'white',
-    //     navBarRightButtonColor: 'white',
-    //   },
-    //   title: '',
-    //   passProps: {
-    //     data: {
-    //       department: DEPARTMENT_LIST[this.state.currentSwipeIndex]          
-    //     }
-    //   }        
-    // });
+  _onCellSelection = (data) => {
+    this.props.navigator.push({
+      screen: screens.PROFILE_SCREEN.id,
+      animated: true,
+      overrideBackPress: true,
+      navigatorStyle: {
+        drawUnderNavBar: true,
+        navBarTranslucent: true,
+        navBarTransparent: true,
+        navBarTextColor: 'white',
+        navBarTransparency: 1,  
+        navBarButtonColor: 'white',                  
+        navBarLeftButtonColor: 'white',
+        navBarRightButtonColor: 'white',
+      },
+      title: '',
+      passProps: {
+        data: {
+          profile: data
+        }
+      }        
+    });
   }
 
+  /*
   _renderParallaxTableHeaderView = (data, index) => {
     // return (<View style={{width: 200, height: 200}}>asd</View>)
     return (
@@ -167,6 +173,7 @@ const DEPARTMENT_LIST = [{
       />
     );
   }
+  */
 
   _renderTableView = (employees, index) => {
     const { onScroll = () => {} } = this.props;    
@@ -209,11 +216,12 @@ const DEPARTMENT_LIST = [{
         ref={component => this.searchBar = component}
         backgroundColor={colors.LF_DARK_GRREEN}
         titleCancelColor='white'
-        onChangeText={this._onSearchBarTextChange}
-        onFocus={this._onSearchBarFocus}
-        afterSearch={this.onSearch}
-        afterCancel={this.onCancel}
+        onChangeText={(text) => this._onSearchBarTextChange(text)}
+        onFocus={() => this._onSearchBarFocus()}
+        afterSearch={() => this._onReturnAction()}
+        afterCancel={() => this._onSearchCancel()}
         keyboardDismissOnSubmit={true}
+        returnKeyType={'done'}
         blurOnSubmit={true}
       />
     )
@@ -243,6 +251,18 @@ const DEPARTMENT_LIST = [{
     )
   }
 
+  _renderSearchView = () => {
+    console.log('_renderSearchView')
+    return (
+      <View style={style.searchViewContainer}>
+        <SearchContactView
+          data={this.state.searchedEmployees}
+          onPress={this._onCellSelection}
+        />
+      </View>
+    )
+  }
+
   render() {
     // setInterval(() => {
     //   console.log('----_CONTACT', this.props.groupedEmp);      
@@ -255,7 +275,9 @@ const DEPARTMENT_LIST = [{
           { this._renderSearchBar() }
         </View>
         <View style={style.tableContainer}>
-          { this.props.employees ? this._renderSwiper() : this._renderActivityIndicator() }
+          { (!this.props.employees) && this._renderActivityIndicator() }
+          { (this.props.employees) && this._renderSwiper() }
+          { (this.state.isSearching) && this._renderSearchView() }
         </View>
       </View>
     );

diff --git a/app/screens/contact/contactCell/contactCell.js b/app/screens/contact/contactCell/contactCell.js
@@ -12,7 +12,6 @@ import Communications from 'react-native-communications';
 import style from './styles';
 import colors from 'App/config/colors';
 import screens from 'App/constants/screens';
-import ProgressiveImage from 'App/components/progressiveImage';
 
 import moreImage from './../../../../assets/images/more.png';
 import callImage from './../../../../assets/images/call.png';
@@ -29,30 +28,6 @@ import placeHolderImage from './../../../../assets/images/default.png';
     }
   }
 
-  _onCellSelection = () => {
-    this.props.navigator.push({
-      screen: screens.PROFILE_SCREEN.id,
-      animated: true,
-      overrideBackPress: true,
-      navigatorStyle: {
-        drawUnderNavBar: true,
-        navBarTranslucent: true,
-        navBarTransparent: true,
-        navBarTextColor: 'white',
-        navBarTransparency: 1,  
-        navBarButtonColor: 'white',                  
-        navBarLeftButtonColor: 'white',
-        navBarRightButtonColor: 'white',
-      },
-      title: '',
-      passProps: {
-        data: {
-          profile: this.props.data
-        }
-      }        
-    });
-  }
-
   _toggleButtonState = () => {
     this.setState((oldState) => {
       return { isMoreButtonPressed: !oldState.isMoreButtonPressed }
@@ -64,14 +39,22 @@ import placeHolderImage from './../../../../assets/images/default.png';
   }
 
   _callButtonPressed = (event) => {
-    console.log('call');
-    Communications.phonecall(this.props.data.contact.mobilePhone, true)
+    // console.log('call');
+    if (this.props.data.contact.mobilePhone) {
+      Communications.phonecall(this.props.data.contact.mobilePhone, true)
+    } else {
+      //show alert
+    }
     this._toggleButtonState();    
   }
 
   _messageButtonPressed = (event) => {
     console.log('message');
-    Communications.text(this.props.data.contact.mobilePhone)    
+    if (this.props.data.contact.mobilePhone) {      
+      Communications.text(this.props.data.contact.mobilePhone);    
+    } else {
+      //show alert
+    }
     this._toggleButtonState();    
   }
 
@@ -89,17 +72,22 @@ import placeHolderImage from './../../../../assets/images/default.png';
   }
 
   render() {
+  if (this.props.data === null) { return <View/> }
     return (
-      <TouchableHighlight onPress={() => this._onCellSelection()} underlayColor={colors.LIGHT_GRAY} activeOpacity={0.4}>
+      <TouchableHighlight onPress={() => this.props.onPress(this.props.data)} underlayColor={colors.LIGHT_GRAY} activeOpacity={0.4}>
         <View style={ style.mainContainer }>
           <View style={style.imageContainer}>
-            <ProgressiveImage source={{uri: this.props.avatarUrl}} thumbnail={placeHolderImage} style={style.contactImage} />
-            {/* <Image source={{uri: this.props.avatarUrl}} style={style.contactImage}/> */}
+            {
+              this.props.data.avatarUrl ? 
+              <Image source={{uri: this.props.data.avatarUrl}} style={style.contactImage}/>
+              :
+              <Image source={placeHolderImage} style={style.contactImage}/>
+            }
           </View>
           <View style={style.titleContainer}>
             <View style={style.titleSubContainer}>
               <Text style={style.titleLabel}>{this.props.data.firstName} {this.props.data.lastName}</Text>
-              <Text style={style.subTitleLabel}>{this.props.data.contact.mobilePhone}</Text>
+              <Text style={style.subTitleLabel}>{this.props.data.contact.mobilePhone || ''}</Text>
             </View>
           </View>
           <View style={style.buttonContainer}>

diff --git a/app/screens/contact/styles.js b/app/screens/contact/styles.js
@@ -105,6 +105,13 @@ const style = StyleSheet.create({
     color: 'white',    
     paddingVertical: 5
   },
+  searchViewContainer: {
+    position: 'absolute',
+    zIndex: 100,
+    width: getWidth(),
+    height: getHeight() - 120,
+    backgroundColor: 'white'
+  }
 
 });
 

diff --git a/app/screens/contactDetail/contactDetail.js b/app/screens/contactDetail/contactDetail.js
diff --git a/app/screens/contactDetail/index.js b/app/screens/contactDetail/index.js
diff --git a/app/screens/profile/profile.js b/app/screens/profile/profile.js
@@ -156,7 +156,7 @@ class ProfileScreen extends Component {
   }
 
   _renderTableView = () => {
-    var data = [{key: 'a'}, {key: 'b'}, {key: 'c'}, {key: 'd'}, {key: 'e'}, {key: 'f'}]
+    var data = [{key: '1'}, {key: '2'}, {key: '3'}, {key: '4'}, {key: '5'}, {key: '6'}]
     // this.props.data.fromProfileTab ? data.push({key: 'f'}) : null
     return (
       <FlatList

diff --git a/app/screens/searchContact/index.js b/app/screens/searchContact/index.js
@@ -0,0 +1,3 @@
+import SearchContactView from './searchContact';
+
+export default SearchContactView;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import SearchContactView from './searchContact';

		export default SearchContactView;