Extracted SearchField from SearchBar component to its own component

src/short-urls/SearchBar.js

@@ -1,85 +1,43 @@
-import searchIcon from '@fortawesome/fontawesome-free-solid/faSearch';
 import tagsIcon from '@fortawesome/fontawesome-free-solid/faTags';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import React from 'react';
 import { connect } from 'react-redux';
 import Tag from '../utils/Tag';
 import { listShortUrls } from './reducers/shortUrlsList';
+import { isEmpty, pick } from 'ramda';
+import SearchField from '../utils/SearchField';
 import './SearchBar.scss';
-import { pick, isEmpty } from 'ramda';
 
-export class SearchBar extends React.Component {
+export function SearchBar({ listShortUrls, shortUrlsListParams }) {
-  state = {
+  const selectedTags = shortUrlsListParams.tags || [];
-    showClearBtn: false,
-    searchTerm: '',
-  };
-  timer = null;
 
-  render() {
+  return (
-    const { listShortUrls, shortUrlsListParams } = this.props;
+    <div className="serach-bar-container">
-    const selectedTags = shortUrlsListParams.tags || [];
+      <SearchField onChange={
+        searchTerm => listShortUrls({ ...shortUrlsListParams, searchTerm })
+      }/>
 
-    return (
+      {!isEmpty(selectedTags) && (
-      <div className="serach-bar-container">
+        <h4 className="search-bar__selected-tag mt-2">
-        <div className="search-bar">
+          <FontAwesomeIcon icon={tagsIcon} className="search-bar__tags-icon"/>
-          <input
+          &nbsp;
-            type="text"
+          {selectedTags.map(tag => (
-            className="form-control form-control-lg search-bar__input"
+            <Tag
-            placeholder="Search..."
+              key={tag}
-            onChange={e => this.searchTermChanged(e.target.value)}
+              text={tag}
-            value={this.state.searchTerm}
+              clearable
-          />
+              onClose={() => listShortUrls(
-          <FontAwesomeIcon icon={searchIcon} className="search-bar__icon" />
+                {
-          <div
+                  ...shortUrlsListParams,
-            className="close search-bar__close"
+                  tags: selectedTags.filter(selectedTag => selectedTag !== tag)
-            hidden={! this.state.showClearBtn}
+                }
-            onClick={() => this.searchTermChanged('')}
+              )}
-            id="search-bar__close"
+            />
-          >
+          ))}
-            &times;
+        </h4>
-          </div>
+      )}
-        </div>
+    </div>
-
+  );
-        {!isEmpty(selectedTags) && (
-          <h4 className="search-bar__selected-tag mt-2">
-            <FontAwesomeIcon icon={tagsIcon} className="search-bar__tags-icon" />
-            &nbsp;
-            {selectedTags.map(tag => (
-              <Tag
-                key={tag}
-                text={tag}
-                clearable
-                onClose={() => listShortUrls(
-                  {
-                    ...shortUrlsListParams,
-                    tags: selectedTags.filter(selectedTag => selectedTag !== tag)
-                  }
-                )}
-              />
-            ))}
-          </h4>
-        )}
-      </div>
-    );
-  }
-
-  searchTermChanged(searchTerm) {
-    this.setState({
-      showClearBtn: searchTerm !== '',
-      searchTerm: searchTerm,
-    });
-
-    const resetTimer = () => {
-      clearTimeout(this.timer);
-      this.timer = null;
-    };
-    resetTimer();
-
-    this.timer = setTimeout(() => {
-      this.props.listShortUrls({ ...this.props.shortUrlsListParams, searchTerm });
-      resetTimer();
-    }, 500);
-  }
 }
 
 export default connect(pick(['shortUrlsListParams']), { listShortUrls })(SearchBar);

src/short-urls/SearchBar.scss

@@ -1,25 +1,3 @@
-@import '../utils/mixins/vertical-align';
-
-.search-bar {
-  position: relative;
-}
-
-.search-bar__input.search-bar__input {
-  padding-left: 40px;
-  padding-right: 40px;
-}
-
-.search-bar__icon {
-  @include vertical-align();
-  left: 15px;
-  color: #707581;
-}
-
-.search-bar__close {
-  @include vertical-align();
-  right: 15px;
-}
-
 .search-bar__tags-icon {
   vertical-align: bottom;
 }

src/utils/SearchField.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import FontAwesomeIcon from '@fortawesome/react-fontawesome';
+import searchIcon from '@fortawesome/fontawesome-free-solid/faSearch';
+import PropTypes from 'prop-types';
+import './SearchField.scss';
+
+const propTypes = {
+  onChange: PropTypes.func.isRequired,
+};
+
+export default class SearchField extends React.Component {
+  state = { showClearBtn: false, searchTerm: '' };
+  timer = null;
+
+  searchTermChanged(searchTerm, timeout = 500) {
+    this.setState({
+      showClearBtn: searchTerm !== '',
+      searchTerm,
+    });
+
+    const resetTimer = () => {
+      clearTimeout(this.timer);
+      this.timer = null;
+    };
+    resetTimer();
+
+    this.timer = setTimeout(() => {
+      this.props.onChange(searchTerm);
+      resetTimer();
+    }, timeout);
+  }
+
+  render() {
+    return (
+      <div className="search-field">
+        <input
+          type="text"
+          className="form-control form-control-lg search-field__input"
+          placeholder="Search..."
+          onChange={e => this.searchTermChanged(e.target.value)}
+          value={this.state.searchTerm}
+        />
+        <FontAwesomeIcon icon={searchIcon} className="search-field__icon" />
+        <div
+          className="close search-field__close"
+          hidden={! this.state.showClearBtn}
+          onClick={() => this.searchTermChanged('', 0)}
+          id="search-field__close"
+        >
+          &times;
+        </div>
+      </div>
+    );
+  }
+}
+
+SearchField.propTypes = propTypes;

src/utils/SearchField.scss

@@ -0,0 +1,21 @@
+@import '../utils/mixins/vertical-align';
+
+.search-field {
+  position: relative;
+}
+
+.search-field__input.search-field__input {
+  padding-left: 40px;
+  padding-right: 40px;
+}
+
+.search-field__icon {
+  @include vertical-align();
+  left: 15px;
+  color: #707581;
+}
+
+.search-field__close {
+  @include vertical-align();
+  right: 15px;
+}