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",