Merge pull request #959 from LiskHQ/950-show-delegates-addresses-info…

…-when-saving-to-localstorage

Use search value for saving into recent searches - Closes #950

src/components/autoSuggest/autoSuggest.css

@@ -45,6 +45,7 @@
   pointer-events: none;
   opacity: 0.5;
   padding: 0;
+  width: 100%;
 }
 
 .input {

src/components/autoSuggest/index.js

@@ -53,10 +53,10 @@ class AutoSuggest extends React.Component {
       default:
         break;
     }
-    saveSearch(id);
+    saveSearch(value, id);
     this.props.searchClearSuggestions();
 
-    if ([searchEntities.addresses, searchEntities.transactions].filter(entity =>
+    if (!value && [searchEntities.addresses, searchEntities.transactions].filter(entity =>
       entity === type).length > 0) {
       this.setState({ value: id });
     } else if (value) {
@@ -249,14 +249,15 @@ class AutoSuggest extends React.Component {
 
   getRecentSearchResults() {
     this.recentSearches = localJSONStorage.get('searches', [])
+      .filter(result => typeof result === 'object')
       .map((result, idx) => {
         let type = searchEntities.addresses;
-        if (result.match(regex.transactionId)) {
+        if (result.id.match(regex.transactionId)) {
           type = searchEntities.transactions;
         }
         return {
-          id: result,
-          valueLeft: result,
+          id: result.id,
+          valueLeft: result.searchTerm,
           valueRight: '',
           isSelected: idx === this.state.selectedIdx,
           type,
@@ -268,18 +269,23 @@ class AutoSuggest extends React.Component {
   render() {
     const { t } = this.props;
 
-    const placeholderValue = this.state.placeholder !== '' ?
-      this.state.placeholder : t('Search for delegate, Lisk ID, transaction ID');
+    let placeholderValue = '';
+    if (this.state.placeholder === '' && this.state.value === '') {
+      placeholderValue = t('Search for delegate, Lisk ID, transaction ID');
+    } else {
+      placeholderValue = this.state.placeholder;
+    }
 
     return (
       <div className={styles.wrapper}>
-        <input value={this.state.placeholder}
+        <input
+          value={placeholderValue}
+          onChange={() => {}}
           className={`${styles.placeholder} autosuggest-placeholder`}
           type='text'
           name='autosuggest-placeholder' />
         <Input type='text'
           id='autosuggest-input'
-          placeholder={placeholderValue}
           name='searchBarInput'
           value={this.state.value}
           innerRef={(el) => { this.inputRef = el; }}

src/components/autoSuggest/index.test.js

@@ -83,7 +83,10 @@ describe('AutoSuggest', () => {
   });
 
   it('should show recent searches when focusing on input and no search value has been entered yet', () => {
-    localStorageStub.withArgs('searches', []).returns(['111L', '111']);
+    localStorageStub.withArgs('searches', []).returns([
+      { id: '111L', searchTerm: 'pepe' },
+      { id: '111', searchTerm: '' },
+    ]);
     wrapper.setProps({
       results: {
         delegates: [],

src/components/autoSuggest/resultsList.js

@@ -11,7 +11,7 @@ class ResultsList extends React.Component {
         </li>
         {
           this.props.results.map(result =>
-            <li key={result.id}
+            <li key={`${result.id}-${result.valueLeft}`}
               onMouseDown={() => this.props.onMouseDown(result.id, result.type, result.valueLeft)}
               data-id={result.id}
               data-type={result.type}

src/components/search/keyAction.js

@@ -1,10 +1,15 @@
 import localJSONStorage from './../../utils/localJSONStorage';
 /* eslint-disable import/prefer-default-export */
-export const saveSearch = (search) => {
-  if (search.length === 0) return;
-  const validSearch = search.trim();
+export const saveSearch = (searchTerm, id) => {
+  if (searchTerm.length === 0) return;
+  const validSearch = searchTerm.trim();
 
   const recent = localJSONStorage.get('searches', []);
-  const updated = [validSearch].concat(recent.filter(term => term !== validSearch)).slice(0, 3);
+
+  const searchObj = {
+    searchTerm: validSearch,
+    id,
+  };
+  const updated = [searchObj].concat(recent.filter(term => typeof term === 'object' && term.searchTerm !== validSearch)).slice(0, 3);
   localJSONStorage.set('searches', updated);
 };

src/components/search/keyAction.test.js

@@ -12,23 +12,22 @@ describe('Search KeyAction', () => {
 
   it('saves the last 3 searches without duplicates', () => {
     const testValues = [
-      '811299173602533L',
-      '947273526752682L',
-      '',
-      '382923358293526L   ',
-      '947273526752682L',
+      { id: '811299173602533L', searchTerm: '811299173602533L' },
+      { id: '947273526752682L', searchTerm: '947273526752682L' },
+      { id: '', searchTerm: '' },
+      { id: '382923358293526L   ', searchTerm: '382923358293526L   ' },
+      { id: '947273526752682L   ', searchTerm: '947273526752682L' },
     ];
 
     const expectedOutcome = [
-      '947273526752682L',
-      '382923358293526L',
-      '811299173602533L',
+      { id: '947273526752682L   ', searchTerm: '947273526752682L' },
+      { id: '382923358293526L   ', searchTerm: '382923358293526L' },
+      { id: '811299173602533L', searchTerm: '811299173602533L' },
     ];
 
-    testValues.forEach((value) => {
-      saveSearch(value);
+    testValues.forEach((searchObj) => {
+      saveSearch(searchObj.searchTerm, searchObj.id);
     });
-
     expect(localJSONStorage.get('searches')).to.eql(expectedOutcome);
   });
 });