add URI bar suggestions setting. reorganise settings page

package-lock.json

@@ -5640,8 +5640,8 @@
             }
         },
         "lbry-redux": {
-            "version": "github:lbryio/lbry-redux#7ec72a737bcd336f000c5f5085891643110298c3",
-            "from": "github:lbryio/lbry-redux#7ec72a737bcd336f000c5f5085891643110298c3",
+            "version": "github:lbryio/lbry-redux#4c4f926ee2cd77d750df0a95fad669257aa31ae7",
+            "from": "github:lbryio/lbry-redux#4c4f926ee2cd77d750df0a95fad669257aa31ae7",
             "requires": {
                 "proxy-polyfill": "0.1.6",
                 "reselect": "^3.0.0",

package.json

@@ -12,7 +12,7 @@
         "base-64": "^0.1.0",
         "@expo/vector-icons": "^8.1.0",
         "gfycat-style-urls": "^1.0.3",
-        "lbry-redux": "lbryio/lbry-redux#7ec72a737bcd336f000c5f5085891643110298c3",
+        "lbry-redux": "lbryio/lbry-redux#4c4f926ee2cd77d750df0a95fad669257aa31ae7",
         "lbryinc": "lbryio/lbryinc#c55a2c98ab92c72149c824ee5906aed4404fd89b",
         "lodash": ">=4.17.11",
         "merge": ">=1.2.1",

src/component/uriBar/index.js

@@ -4,8 +4,10 @@ import {
   selectSearchState as selectSearch,
   selectSearchValue,
   selectSearchSuggestions,
+  SETTINGS,
 } from 'lbry-redux';
 import { selectCurrentRoute } from 'redux/selectors/drawer';
+import { makeSelectClientSetting } from 'redux/selectors/settings';
 import UriBar from './view';
 
 const select = state => {
@@ -16,6 +18,7 @@ const select = state => {
     query: selectSearchValue(state),
     currentRoute: selectCurrentRoute(state),
     suggestions: selectSearchSuggestions(state),
+    showUriBarSuggestions: makeSelectClientSetting(SETTINGS.SHOW_URI_BAR_SUGGESTIONS)(state),
   };
 };
 

src/component/uriBar/internal/uri-bar-item.js

@@ -20,6 +20,10 @@ class UriBarItem extends React.PureComponent {
         icon = <Icon name="search" size={18} />;
         break;
 
+      case SEARCH_TYPES.TAG:
+        icon = <Icon name="hashtag" size={18} />;
+        break;
+
       case SEARCH_TYPES.FILE:
       default:
         icon = <Icon name="file" size={18} />;
@@ -37,6 +41,7 @@ class UriBarItem extends React.PureComponent {
             {type === SEARCH_TYPES.SEARCH && `Search for '${value}'`}
             {type === SEARCH_TYPES.CHANNEL && `View the @${shorthand} channel`}
             {type === SEARCH_TYPES.FILE && `View content at ${value}`}
+            {type === SEARCH_TYPES.TAG && `Explore the '${value}' tag`}
           </Text>
         </View>
       </TouchableOpacity>

src/component/uriBar/view.js

@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import { SEARCH_TYPES, isNameValid, isURIValid, normalizeURI } from 'lbry-redux';
-import { FlatList, Keyboard, Text, TextInput, TouchableOpacity, View } from 'react-native';
+import { Dimensions, FlatList, Keyboard, Text, TextInput, TouchableOpacity, View } from 'react-native';
 import { navigateToUri, transformUrl } from 'utils/helper';
 import Constants from 'constants'; // eslint-disable-line node/no-deprecated-api
 import UriBarItem from './internal/uri-bar-item';
@@ -14,6 +14,8 @@ class UriBar extends React.PureComponent {
 
   textInput = null;
 
+  keyboardDidShowListener = null;
+
   keyboardDidHideListener = null;
 
   state = {
@@ -21,17 +23,19 @@ class UriBar extends React.PureComponent {
     currentValue: null,
     inputText: null,
     focused: false,
-
-    // TODO: Add a setting to enable / disable direct search?
-    directSearch: true,
+    keyboardHeight: 0,
   };
 
   componentDidMount() {
+    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
     this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
     this.setSelection();
   }
 
   componentWillUnmount() {
+    if (this.keyboardDidShowListener) {
+      this.keyboardDidShowListener.remove();
+    }
     if (this.keyboardDidHideListener) {
       this.keyboardDidHideListener.remove();
     }
@@ -49,16 +53,18 @@ class UriBar extends React.PureComponent {
   handleChangeText = text => {
     const newValue = text || '';
     clearTimeout(this.state.changeTextTimeout);
-    const { updateSearchQuery, onSearchSubmitted, navigation } = this.props;
+    const { updateSearchQuery, onSearchSubmitted, showUriBarSuggestions, navigation } = this.props;
 
-    let timeout = setTimeout(() => {
+    updateSearchQuery(text);
+
+    let timeout = -1;
+    if (!showUriBarSuggestions) {
+      timeout = setTimeout(() => {
         if (text.trim().length === 0) {
           // don't do anything if the text is empty
           return;
         }
 
-      updateSearchQuery(text);
-
         if (!text.startsWith('lbry://')) {
           // not a URI input, so this is a search, perform a direct search
           if (onSearchSubmitted) {
@@ -68,6 +74,7 @@ class UriBar extends React.PureComponent {
           }
         }
       }, UriBar.INPUT_TIMEOUT);
+    }
     this.setState({ inputText: newValue, currentValue: newValue, changeTextTimeout: timeout });
   };
 
@@ -86,18 +93,34 @@ class UriBar extends React.PureComponent {
         return;
       }
 
-      navigation.navigate({ routeName: 'Search', key: 'searchPage', params: { searchQuery: value } });
+      navigation.navigate({
+        routeName: Constants.DRAWER_ROUTE_SEARCH,
+        key: 'searchPage',
+        params: { searchQuery: value },
+      });
+    } else if (SEARCH_TYPES.TAG === type) {
+      navigation.navigate({
+        routeName: Constants.DRAWER_ROUTE_TAG,
+        key: 'tagPage',
+        params: {
+          tag: value.toLowerCase(),
+        },
+      });
     } else {
       const uri = normalizeURI(value);
       navigateToUri(navigation, uri);
     }
   };
 
+  _keyboardDidShow = evt => {
+    this.setState({ keyboardHeight: evt.endCoordinates.height });
+  };
+
   _keyboardDidHide = () => {
     if (this.textInput) {
       this.textInput.blur();
     }
-    this.setState({ focused: false });
+    this.setState({ focused: false, keyboardHeight: 0 });
   };
 
   setSelection() {
@@ -152,16 +175,18 @@ class UriBar extends React.PureComponent {
       selectedItemCount,
       selectionMode,
       suggestions,
+      showUriBarSuggestions,
       value,
     } = this.props;
     if (this.state.currentValue === null) {
       this.setState({ currentValue: value });
     }
 
-    let style = [uriBarStyle.overlay, belowOverlay ? null : uriBarStyle.overlayElevated];
-
-    // TODO: Add optional setting to enable URI / search bar suggestions
-    /* if (this.state.focused) { style.push(uriBarStyle.inFocus); } */
+    let style = [
+      uriBarStyle.overlay,
+      belowOverlay ? null : uriBarStyle.overlayElevated,
+      this.state.focused && showUriBarSuggestions ? uriBarStyle.inFocus : null,
+    ];
 
     // TODO: selectionModeActions should be dynamically created / specified
     return (
@@ -248,21 +273,22 @@ class UriBar extends React.PureComponent {
               onSubmitEditing={this.handleSubmitEditing}
             />
           )}
-          {this.state.focused && !this.state.directSearch && (
-            <View style={uriBarStyle.suggestions}>
+        </View>
+        {this.state.focused && showUriBarSuggestions && (
           <FlatList
-                style={uriBarStyle.suggestionList}
+            style={[
+              uriBarStyle.suggestions,
+              { height: Dimensions.get('window').height - this.state.keyboardHeight - 60 },
+            ]}
             data={suggestions}
             keyboardShouldPersistTaps={'handled'}
-                keyExtractor={(item, value) => item.value}
+            keyExtractor={(item, value) => `${item.value}-${item.type}`}
             renderItem={({ item }) => (
               <UriBarItem item={item} navigation={navigation} onPress={() => this.handleItemPress(item)} />
             )}
           />
-            </View>
         )}
       </View>
-      </View>
     );
   }
 }

src/page/settings/index.js

@@ -4,7 +4,7 @@ import { doPushDrawerStack, doPopDrawerStack, doSetPlayerVisible } from 'redux/a
 import { doSetClientSetting } from 'redux/actions/settings';
 import { selectCurrentRoute, selectDrawerStack } from 'redux/selectors/drawer';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
-import Constants from 'constants';
+import Constants from 'constants'; // eslint-disable-line node/no-deprecated-api
 import SettingsPage from './view';
 
 const select = state => ({
@@ -13,6 +13,7 @@ const select = state => ({
   drawerStack: selectDrawerStack(state),
   keepDaemonRunning: makeSelectClientSetting(SETTINGS.KEEP_DAEMON_RUNNING)(state),
   showNsfw: makeSelectClientSetting(SETTINGS.SHOW_NSFW)(state),
+  showUriBarSuggestions: makeSelectClientSetting(SETTINGS.SHOW_URI_BAR_SUGGESTIONS)(state),
 });
 
 const perform = dispatch => ({

src/page/settings/view.js

@@ -51,6 +51,7 @@ class SettingsPage extends React.PureComponent {
       navigation,
       popDrawerStack,
       showNsfw,
+      showUriBarSuggestions,
       setClientSetting,
     } = this.props;
 
@@ -62,6 +63,7 @@ class SettingsPage extends React.PureComponent {
       <View style={settingsStyle.container}>
         <PageHeader title={'Settings'} onBackPressed={() => navigateBack(navigation, drawerStack, popDrawerStack)} />
         <ScrollView style={settingsStyle.scrollContainer}>
+          <Text style={settingsStyle.sectionTitle}>Content</Text>
           <View style={settingsStyle.row}>
             <View style={settingsStyle.switchText}>
               <Text style={settingsStyle.label}>Enable background media playback</Text>
@@ -86,6 +88,22 @@ class SettingsPage extends React.PureComponent {
             </View>
           </View>
 
+          <View style={settingsStyle.sectionDivider} />
+          <Text style={settingsStyle.sectionTitle}>Search</Text>
+          <View style={settingsStyle.row}>
+            <View style={settingsStyle.switchText}>
+              <Text style={settingsStyle.label}>Show URL suggestions</Text>
+            </View>
+            <View style={settingsStyle.switchContainer}>
+              <Switch
+                value={showUriBarSuggestions}
+                onValueChange={value => setClientSetting(SETTINGS.SHOW_URI_BAR_SUGGESTIONS, value)}
+              />
+            </View>
+          </View>
+
+          <View style={settingsStyle.sectionDivider} />
+          <Text style={settingsStyle.sectionTitle}>Other</Text>
           <View style={settingsStyle.row}>
             <View style={settingsStyle.switchText}>
               <Text style={settingsStyle.label}>Keep the daemon background service running after closing the app</Text>

src/styles/settings.js

@@ -39,6 +39,14 @@ const settingsStyle = StyleSheet.create({
     fontFamily: 'Inter-UI-Regular',
     lineHeight: 18,
   },
+  sectionTitle: {
+    fontFamily: 'Inter-UI-Regular',
+    fontSize: 20,
+    marginBottom: 4,
+  },
+  sectionDivider: {
+    marginTop: 24,
+  },
 });
 
 export default settingsStyle;

src/styles/uriBar.js

@@ -36,7 +36,7 @@ const uriBarStyle = StyleSheet.create({
   },
   overlay: {
     position: 'absolute',
-    backgroundColor: 'transparent',
+    backgroundColor: 'red',
     top: 0,
     width: '100%',
     zIndex: 200,
@@ -54,9 +54,10 @@ const uriBarStyle = StyleSheet.create({
   item: {
     flexDirection: 'row',
     alignItems: 'center',
-    padding: 12,
-    paddingTop: 8,
-    paddingBottom: 8,
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingTop: 12,
+    paddingBottom: 12,
   },
   itemContent: {
     marginLeft: 12,