♻️ Rename recepient to selectedItem in AutoSuggest

LiskHQ · Aug 22, 2019 · a7d0ff5 · a7d0ff5
1 parent 7583d91
commit a7d0ff5
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 27 deletions.
diff --git a/src/components/send/form/bookmarkAutoSuggest.js b/src/components/send/form/bookmarkAutoSuggest.js
@@ -12,14 +12,15 @@ class BookmarkAutoSuggest extends React.Component {
     const {
       t, token, recipient, onSelectedAccount, validateBookmark, bookmarks, onInputChange,
     } = this.props;
+    const items = bookmarks[token];
     return (
       <AutoSuggest
         className="recipient"
         onChangeDelayed={validateBookmark}
-        items={bookmarks[token]}
+        items={items}
         onChange={onInputChange}
         placeholder={t('Insert public address or a name')}
-        recipient={recipient}
+        selectedItem={recipient}
         onSelectItem={onSelectedAccount}
         token={token}
         renderIcon={() => (
@@ -36,6 +37,7 @@ class BookmarkAutoSuggest extends React.Component {
             <span>{bookmark.address}</span>
           </React.Fragment>
         )}
+        matchProps={['address', 'title']}
       />
     );
   }

diff --git a/src/components/toolbox/autoSuggest/autoSuggest.test.js b/src/components/toolbox/autoSuggest/autoSuggest.test.js
@@ -35,7 +35,7 @@ describe('Recipient Input', () => {
       address: '12395L',
     }],
     placeholder: 'e.g. 1234523423L or John Doe',
-    recipient: {
+    selectedItem: {
       address: '',
       balance: '',
       error: false,
@@ -46,6 +46,7 @@ describe('Recipient Input', () => {
       value: '',
     },
     className: 'recipient',
+    matchProps: ['address', 'title'],
     // eslint-disable-next-line react/display-name
     renderItem: item => (
       <React.Fragment>
@@ -76,15 +77,15 @@ describe('Recipient Input', () => {
   });
 
   it('render properly when bookmard is selected', () => {
-    props.recipient.address = '12345L';
-    props.recipient.title = 'John Cena';
-    props.recipient.balance = '10';
+    props.selectedItem.address = '12345L';
+    props.selectedItem.title = 'John Cena';
+    props.selectedItem.balance = '10';
     wrapper = mount(<AutoSuggest {...props} />, options);
     expect(wrapper).toContainMatchingElement('AccountVisual');
   });
 
   it('should select an account from the available list', () => {
-    props.recipient.value = 'L';
+    props.selectedItem.value = 'L';
     wrapper = mount(<AutoSuggest {...props} />, options);
     expect(wrapper).toContainMatchingElement('.bookmark-list');
     expect(wrapper).toContainMatchingElements(3, 'li');

diff --git a/src/components/toolbox/autoSuggest/demo.js b/src/components/toolbox/autoSuggest/demo.js
@@ -39,7 +39,7 @@ export default class AutoSuggestDemo extends React.Component {
         <h2>AutoSuggest</h2>
         <DemoRenderer>
           <AutoSuggest
-            recipient={{
+            selectedItem={{
               address,
               value,
             }}
@@ -52,6 +52,7 @@ export default class AutoSuggestDemo extends React.Component {
               title: '#2',
               address: '7124124L',
             }]}
+            matchProps={['address', 'title']}
             onChangeDelayed={onChange}
             onChange={this.onChange}
             onSelectItem={this.onSelectItem}

diff --git a/src/components/toolbox/autoSuggest/index.js b/src/components/toolbox/autoSuggest/index.js
@@ -35,15 +35,15 @@ class AutoSuggest extends React.Component {
   }
 
   getFilterList() {
-    const { items, recipient } = this.props;
+    const { items, selectedItem, matchProps } = this.props;
 
-    if (recipient.value === '') return items;
+    if (selectedItem.value === '') return items;
 
-
-    return items
-      .filter(item =>
-        item.title.toLowerCase().includes(recipient.value.toLowerCase())
-        || item.address.toLowerCase().includes(recipient.value.toLowerCase()));
+    return items.filter(item => (
+      matchProps.find(prop => (
+        item[prop].toLowerCase().includes(selectedItem.value.toLowerCase())
+      ))
+    ));
   }
 
   resetListIndex() {
@@ -59,10 +59,10 @@ class AutoSuggest extends React.Component {
   onKeyPressDownOrUp(action) {
     const rowHeight = 44;
     const { dropdownIndex } = this.state;
-    const accountsLength = this.getFilterList().length;
+    const filteredItemsLength = this.getFilterList().length;
 
     // istanbul ignore else
-    if (action === 'down' && dropdownIndex < accountsLength - 1) {
+    if (action === 'down' && dropdownIndex < filteredItemsLength - 1) {
       if (dropdownIndex + 1 >= 4) {
         this.listContainerRef.scrollTop = this.listContainerRef.scrollTop + rowHeight;
       }
@@ -124,34 +124,33 @@ class AutoSuggest extends React.Component {
 
   render() {
     const {
-      recipient,
+      selectedItem,
       placeholder,
       renderItem,
       renderIcon,
       className,
     } = this.props;
     const { dropdownIndex } = this.state;
-    const selectedAccount = recipient.selected ? recipient.title : recipient.value;
 
     return (
       <Fragment>
         <span className={`${styles.recipientField} ${className}`}>
           <span className={styles.icon}>
-            {renderIcon(recipient)}
+            {renderIcon(selectedItem)}
           </span>
           <Input
             autoComplete="off"
-            className={`${styles.input} ${recipient.error ? 'error' : ''} ${className} bookmark`}
+            className={`${styles.input} ${selectedItem.error ? 'error' : ''} ${className} bookmark`}
             name={className}
-            value={selectedAccount}
+            value={selectedItem.selected ? selectedItem.title : selectedItem.value}
             placeholder={placeholder}
             onKeyDown={this.onHandleKeyPress}
             onChange={this.onChange}
           />
-          <Spinner className={`${styles.spinner} ${this.state.isLoading && recipient.value ? styles.show : styles.hide}`} />
+          <Spinner className={`${styles.spinner} ${this.state.isLoading && selectedItem.value ? styles.show : styles.hide}`} />
           <Icon
-            className={`${styles.status} ${!this.state.isLoading && recipient.value ? styles.show : styles.hide}`}
-            name={recipient.error ? 'alertIcon' : 'okIcon'}
+            className={`${styles.status} ${!this.state.isLoading && selectedItem.value ? styles.show : styles.hide}`}
+            name={selectedItem.error ? 'alertIcon' : 'okIcon'}
           />
           <div className={`${styles.bookmarkContainer}`}>
             <div ref={(node) => { this.listContainerRef = node; }}>
@@ -176,12 +175,12 @@ class AutoSuggest extends React.Component {
         </span>
 
         <Feedback
-          show={recipient.error || false}
+          show={selectedItem.error || false}
           status="error"
           className={styles.feedbackMessage}
           showIcon={false}
         >
-          {recipient.feedback}
+          {selectedItem.feedback}
         </Feedback>
       </Fragment>
     );
@@ -192,6 +191,7 @@ AutoSuggest.propTypes = {
   renderItem: PropTypes.func,
   renderIcon: PropTypes.func,
   className: PropTypes.string,
+  matchProps: PropTypes.array.isRequired,
 };
 
 AutoSuggest.defaultProps = {