diff --git a/app/components/UI/UrlAutocomplete/index.js b/app/components/UI/UrlAutocomplete/index.js index 03f05bac182..d38c634e929 100644 --- a/app/components/UI/UrlAutocomplete/index.js +++ b/app/components/UI/UrlAutocomplete/index.js @@ -14,6 +14,10 @@ import WebsiteIcon from '../WebsiteIcon'; import { fontStyles } from '../../../styles/common'; import { getHost } from '../../../util/browser'; import { ThemeContext, mockTheme } from '../../../util/theme'; +import { strings } from '../../../../locales/i18n'; + +const MAX_RECENTS = 5; +const ORDERED_CATEGORIES = ['recents', 'favorites', 'sites']; const createStyles = (colors) => StyleSheet.create({ @@ -36,6 +40,12 @@ const createStyles = (colors) => color: colors.text.default, ...fontStyles.normal, }, + category: { + fontSize: 16, + color: colors.text.default, + ...fontStyles.bold, + margin: 10, + }, url: { fontSize: 12, color: colors.text.alternative, @@ -83,6 +93,10 @@ class UrlAutocomplete extends PureComponent { * An array of visited urls and names */ browserHistory: PropTypes.array, + /** + * An array of bookmarks + */ + bookmarks: PropTypes.array, }; state = { @@ -90,20 +104,11 @@ class UrlAutocomplete extends PureComponent { }; componentDidMount() { - const allUrls = [...this.props.browserHistory, ...dappUrlList]; - const singleUrlList = []; - const singleUrls = []; - for (let i = 0; i < allUrls.length; i++) { - const el = allUrls[i]; - if (!singleUrlList.includes(el.url)) { - singleUrlList.push(el.url); - singleUrls.push(el); - } - } + const allUrls = dappUrlList; - this.fuse = new Fuse(singleUrls, { + this.fuse = new Fuse(allUrls, { shouldSort: true, - threshold: 0.45, + threshold: 0.4, location: 0, distance: 100, maxPatternLength: 32, @@ -131,7 +136,7 @@ class UrlAutocomplete extends PureComponent { } else { this.updateResults([]); } - }, 500); + }, 50); } } @@ -180,18 +185,22 @@ class UrlAutocomplete extends PureComponent { const colors = this.context.colors || mockTheme.colors; const styles = createStyles(colors); - if (!this.props.input || this.props.input.length < 2) - return ( - - - - - - ); - if (this.state.results.length === 0) { + let results = []; + if (!this.props.input || this.props.input.length === 0) { + results = [ + ...this.props.browserHistory.slice(-MAX_RECENTS).reverse().map(i => ({...i, type: 'recents'})), + ...this.props.bookmarks.map(i => ({...i, type: 'favorites'})), + ] + } else { + results = this.state.results.map(i => ({...i, type: 'sites'})); + } + + const resultsByCategory = results.reduce((acc, i) => { + acc[i.type] = [...acc[i.type] || [], i]; + return acc; + }, {}); + + if (results.length === 0) { return ( ); } + + const categoriesWithResults = ORDERED_CATEGORIES.filter(category => resultsByCategory[category]?.length > 0); + return ( - {this.state.results.slice(0, 3).map((r) => { - const { url, name } = r; - const onPress = () => { - this.props.onSubmit(url); - }; - return this.renderUrlOption(url, name, onPress); - })} + { + categoriesWithResults.map(category => { + return ( + + {strings(`autocomplete.${category}`)} + {resultsByCategory[category].map((r) => { + const { url, name } = r; + const onPress = () => { + this.props.onSubmit(url); + }; + return this.renderUrlOption(url, name, onPress); + })} + + ) + }) + } ({ browserHistory: state.browser.history, + bookmarks: state.bookmarks, }); UrlAutocomplete.contextType = ThemeContext; diff --git a/app/components/Views/BrowserUrlModal/styles.ts b/app/components/Views/BrowserUrlModal/styles.ts index 5a7724c7e58..06c7fd71ebf 100644 --- a/app/components/Views/BrowserUrlModal/styles.ts +++ b/app/components/Views/BrowserUrlModal/styles.ts @@ -19,7 +19,7 @@ export const createStyles = (colors: any) => flexDirection: 'row', paddingTop: Device.isAndroid() ? 10 : Device.isIphoneX() ? 50 : 27, paddingHorizontal: 10, - height: Device.isAndroid() ? 59 : Device.isIphoneX() ? 87 : 65, + height: Device.isAndroid() ? 69 : Device.isIphoneX() ? 97 : 75, backgroundColor: colors.background.default, }, clearButton: { paddingHorizontal: 12, justifyContent: 'center' }, @@ -46,9 +46,10 @@ export const createStyles = (colors: any) => } as any, searchWrapper: { flexDirection: 'row', - borderRadius: 30, - backgroundColor: colors.background.alternative, - height: Device.isAndroid() ? 40 : 30, + borderRadius: 8, + borderWidth: 1, + borderColor: colors.border.default, + height: Device.isAndroid() ? 50 : 40, flex: 1, }, }); diff --git a/locales/languages/en.json b/locales/languages/en.json index 92fd2de6c3c..d3682fd954c 100644 --- a/locales/languages/en.json +++ b/locales/languages/en.json @@ -48,7 +48,10 @@ "connector": "at" }, "autocomplete": { - "placeholder": "Search or Type URL" + "placeholder": "Search by site or address", + "recents": "Recents", + "favorites": "Favorites", + "sites": "Sites" }, "navigation": { "back": "Back",