Merge pull request #953 from LiskHQ/946-autosuggest-should-redirect-p…

…roperly-when-no-results

Redirect to valid entity results page when no autosuggestion result used - Closes #946

src/components/autoSuggest/index.js

@@ -9,6 +9,7 @@ import keyCodes from './../../constants/keyCodes';
 import localJSONStorage from './../../utils/localJSONStorage';
 import regex from './../../utils/regex';
 import { saveSearch } from './../search/keyAction';
+import { searchEntities } from './../../constants/search';
 
 class AutoSuggest extends React.Component {
   constructor(props) {
@@ -27,7 +28,7 @@ class AutoSuggest extends React.Component {
 
   componentWillReceiveProps(nextProps) {
     this.selectedRow = null;
-    const resultsLength = ['delegates', 'addresses', 'transactions'].reduce((total, resultKey) =>
+    const resultsLength = Object.keys(searchEntities).reduce((total, resultKey) =>
       total + nextProps.results[resultKey].length, 0);
     let placeholder = '';
     let selectedIdx = -1;
@@ -41,11 +42,11 @@ class AutoSuggest extends React.Component {
   onResultClick(id, type, value) {
     let urlSearch;
     switch (type) {
-      case 'addresses':
-      case 'delegates':
+      case searchEntities.addresses:
+      case searchEntities.delegates:
         urlSearch = `${routes.accounts.pathPrefix}${routes.accounts.path}/${id}`;
         break;
-      case 'transactions':
+      case searchEntities.transactions:
         urlSearch = `${routes.transactions.pathPrefix}${routes.transactions.path}/${id}`;
         break;
       /* istanbul ignore next */
@@ -55,7 +56,7 @@ class AutoSuggest extends React.Component {
     saveSearch(id);
     this.props.searchClearSuggestions();
 
-    if (['addresses', 'transactions'].filter(entity =>
+    if ([searchEntities.addresses, searchEntities.transactions].filter(entity =>
       entity === type).length > 0) {
       this.setState({ value: id });
     } else if (value) {
@@ -81,8 +82,18 @@ class AutoSuggest extends React.Component {
   }
 
   submitAnySearch() {
-    this.inputRef.blur();
-    this.props.history.push(`${routes.searchResult.pathPrefix}${routes.searchResult.path}/${encodeURIComponent(this.state.value)}`);
+    let searchType = null;
+    if (this.state.value.match(regex.address)) {
+      searchType = searchEntities.addresses;
+    } else if (this.state.value.match(regex.transactionId)) {
+      searchType = searchEntities.transactions;
+    }
+
+    if (!searchType) {
+      this.props.history.push(`${routes.searchResult.pathPrefix}${routes.searchResult.path}/${encodeURIComponent(this.state.value)}`);
+      return;
+    }
+    this.onResultClick(this.state.value, searchType, this.state.value);
   }
 
   search(searchTerm) {
@@ -211,7 +222,7 @@ class AutoSuggest extends React.Component {
       valueLeft: delegate.username,
       valueRight: delegate.rank,
       isSelected: idx === this.state.selectedIdx,
-      type: 'delegates',
+      type: searchEntities.delegates,
     }));
   }
 
@@ -221,7 +232,7 @@ class AutoSuggest extends React.Component {
       valueLeft: account.address,
       valueRight: <span><LiskAmount val={account.balance}/> LSK</span>,
       isSelected: this.props.results.delegates.length + idx === this.state.selectedIdx,
-      type: 'addresses',
+      type: searchEntities.addresses,
     }));
   }
 
@@ -232,16 +243,16 @@ class AutoSuggest extends React.Component {
       valueRight: transaction.height,
       isSelected: this.props.results.delegates.length +
       this.props.results.addresses.length + idx === this.state.selectedIdx,
-      type: 'transactions',
+      type: searchEntities.transactions,
     }));
   }
 
   getRecentSearchResults() {
     this.recentSearches = localJSONStorage.get('searches', [])
       .map((result, idx) => {
-        let type = 'addresses';
+        let type = searchEntities.addresses;
         if (result.match(regex.transactionId)) {
-          type = 'transactions';
+          type = searchEntities.transactions;
         }
         return {
           id: result,
@@ -289,7 +300,7 @@ class AutoSuggest extends React.Component {
         </Input>
         <div className={`${styles.autoSuggest} ${this.state.show ? styles.show : ''} autosuggest-dropdown`}>
           <ResultsList
-            key='delegates'
+            key={searchEntities.delegates}
             results={this.getDelegatesResults()}
             header={{
               titleLeft: t('Delegate'),
@@ -299,7 +310,7 @@ class AutoSuggest extends React.Component {
             setSelectedRow={this.setSelectedRow.bind(this)}
           />
           <ResultsList
-            key='addresses'
+            key={searchEntities.addresses}
             results={this.getAddressesResults()}
             header={{
               titleLeft: t('Address'),
@@ -309,7 +320,7 @@ class AutoSuggest extends React.Component {
             setSelectedRow={this.setSelectedRow.bind(this)}
           />
           <ResultsList
-            key='transactions'
+            key={searchEntities.transactions}
             results={this.getTransactionsResults()}
             header={{
               titleLeft: t('Transaction'),

src/components/autoSuggest/index.test.js

@@ -156,6 +156,27 @@ describe('AutoSuggest', () => {
       .calledWith(`${routes.searchResult.pathPrefix}${routes.searchResult.path}/notExistingDelegate`);
   });
 
+  it('should redirect to entity result page when not yet suggestions and pattern matching', () => {
+    wrapper.setProps({
+      results: {
+        delegates: [],
+        addresses: [],
+        transactions: [],
+      },
+    });
+    wrapper.update();
+    const autosuggestInput = wrapper.find('.autosuggest-input').find('input').first();
+    autosuggestInput.simulate('change', { target: { value: '123' } });
+    autosuggestInput.simulate('keyDown', {
+      keyCode: keyCodes.enter,
+      which: keyCodes.enter,
+    });
+    expect(saveSearchSpy).to.have.been.calledWith();
+    expect(submitSearchAnythingSpy).to.have.been.calledWith();
+    expect(props.history.push).to.have.been
+      .calledWith(`${routes.transactions.pathPrefix}${routes.transactions.path}/123`);
+  });
+
   it('should update placeholder on events {arrowUp/arrowDown} and redirect to entity page on keyboard event {tab}', () => {
     const autosuggestInput = wrapper.find('.autosuggest-input').find('input').first();
 

src/constants/search.js

@@ -0,0 +1,6 @@
+// eslint-disable-next-line import/prefer-default-export
+export const searchEntities = {
+  delegates: 'delegates',
+  addresses: 'addresses',
+  transactions: 'transactions',
+};