Merge pull request #563 from lbryio/search-uri-bar-fix

fix typing in uri bar on search page

app/src/component/uriBar/index.js

@@ -5,6 +5,7 @@ import {
   selectSearchValue,
   selectSearchSuggestions
 } from 'lbry-redux';
+import { selectCurrentRoute } from 'redux/selectors/drawer';
 import UriBar from './view';
 
 const select = state => {
@@ -13,6 +14,7 @@ const select = state => {
   return {
     ...searchState,
     query: selectSearchValue(state),
+    currentRoute: selectCurrentRoute(state),
     suggestions: selectSearchSuggestions(state)
   };
 };

app/src/component/uriBar/view.js

@@ -3,6 +3,7 @@ import React from 'react';
 import { SEARCH_TYPES, isNameValid, isURIValid, normalizeURI } from 'lbry-redux';
 import { FlatList, Keyboard, TextInput, View } from 'react-native';
 import { navigateToUri } from 'utils/helper';
+import Constants from 'constants';
 import UriBarItem from './internal/uri-bar-item';
 import NavigationButton from 'component/navigationButton';
 import discoverStyle from 'styles/discover';
@@ -26,6 +27,15 @@ class UriBar extends React.PureComponent {
     }
   }
 
+  componentWillReceiveProps(nextProps) {
+    const { currentRoute, query } = nextProps;
+    const { currentRoute: prevRoute } = this.props;
+
+    if (Constants.DRAWER_ROUTE_SEARCH === currentRoute && currentRoute !== prevRoute) {
+      this.setState({ currentValue: query, inputText: query });
+    }
+  }
+
   constructor(props) {
     super(props);
     this.state = {
@@ -33,6 +43,7 @@ class UriBar extends React.PureComponent {
       currentValue: null,
       inputText: null,
       focused: false,
+      currentValueSet: false,
       // TODO: Add a setting to enable / disable direct search?
       directSearch: true
     };
@@ -122,10 +133,14 @@ class UriBar extends React.PureComponent {
     }
   }
 
+  onSearchPageBlurred() {
+    this.setState({ currenValueSet: false });
+  }
+
   render() {
-    const { navigation, suggestions, query, searchView, value  } = this.props;
-    if (value && this.state.currentValue === null) {
-      this.setState({ currentValue: value });
+    const { navigation, suggestions, query, value  } = this.props;
+    if (!this.state.currentValue) {
+      this.setState({ currentValue: value, currentValueSet: true });
     }
 
     let style = [uriBarStyle.overlay];
@@ -150,7 +165,7 @@ class UriBar extends React.PureComponent {
                      underlineColorAndroid={'transparent'}
                      numberOfLines={1}
                      clearButtonMode={'while-editing'}
-                     value={searchView ? query : this.state.currentValue}
+                     value={this.state.currentValue}
                      returnKeyType={'go'}
                      inlineImageLeft={'baseline_search_black_24'}
                      inlineImagePadding={16}

app/src/page/search/view.js

@@ -97,8 +97,7 @@ class SearchPage extends React.PureComponent {
       <View style={searchStyle.container}>
         <UriBar value={query}
                 navigation={navigation}
-                onSearchSubmitted={this.handleSearchSubmitted}
-                searchView={true} />
+                onSearchSubmitted={this.handleSearchSubmitted} />
         {isSearching &&
           <View style={searchStyle.busyContainer}>
             <ActivityIndicator size="large" color={Colors.LbryGreen} style={searchStyle.loading} />

app/src/styles/search.js

@@ -16,7 +16,6 @@ const searchStyle = StyleSheet.create({
     justifyContent: 'center'
   },
   scrollPadding: {
-    flex: 1,
     paddingBottom: 16
   },
   resultItem: {
@@ -28,6 +27,7 @@ const searchStyle = StyleSheet.create({
     marginRight: 8
   },
   featuredResultItem: {
+    flex: 1,
     flexDirection: 'row',
     justifyContent: 'space-between',
     paddingTop: 8,
@@ -52,6 +52,7 @@ const searchStyle = StyleSheet.create({
   noResultsText: {
     fontFamily: 'Inter-UI-Regular',
     fontSize: 16,
+    marginTop: 16,
     marginLeft: 16,
     marginRight: 16
   },