From 843c12128542909292a4219527546fad20b4c900 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sun, 19 Aug 2018 20:29:23 +0200
Subject: [PATCH] Extracted SearchField from SearchBar component to its own
 component

---
 src/short-urls/SearchBar.js   | 102 ++++++++++------------------------
 src/short-urls/SearchBar.scss |  22 --------
 src/utils/SearchField.js      |  57 +++++++++++++++++++
 src/utils/SearchField.scss    |  21 +++++++
 4 files changed, 108 insertions(+), 94 deletions(-)
 create mode 100644 src/utils/SearchField.js
 create mode 100644 src/utils/SearchField.scss

diff --git a/src/short-urls/SearchBar.js b/src/short-urls/SearchBar.js
index 9e5e75f7..ed7eb3f2 100644
--- a/src/short-urls/SearchBar.js
+++ b/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 {
-  state = {
-    showClearBtn: false,
-    searchTerm: '',
-  };
-  timer = null;
+export function SearchBar({ listShortUrls, shortUrlsListParams }) {
+  const selectedTags = shortUrlsListParams.tags || [];
 
-  render() {
-    const { listShortUrls, shortUrlsListParams } = this.props;
-    const selectedTags = shortUrlsListParams.tags || [];
+  return (
+    <div className="serach-bar-container">
+      <SearchField onChange={
+        searchTerm => listShortUrls({ ...shortUrlsListParams, searchTerm })
+      }/>
 
-    return (
-      <div className="serach-bar-container">
-        <div className="search-bar">
-          <input
-            type="text"
-            className="form-control form-control-lg search-bar__input"
-            placeholder="Search..."
-            onChange={e => this.searchTermChanged(e.target.value)}
-            value={this.state.searchTerm}
-          />
-          <FontAwesomeIcon icon={searchIcon} className="search-bar__icon" />
-          <div
-            className="close search-bar__close"
-            hidden={! this.state.showClearBtn}
-            onClick={() => this.searchTermChanged('')}
-            id="search-bar__close"
-          >
-            &times;
-          </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);
-  }
+      {!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>
+  );
 }
 
 export default connect(pick(['shortUrlsListParams']), { listShortUrls })(SearchBar);
diff --git a/src/short-urls/SearchBar.scss b/src/short-urls/SearchBar.scss
index eb4f37f9..3a3c64c1 100644
--- a/src/short-urls/SearchBar.scss
+++ b/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;
 }
diff --git a/src/utils/SearchField.js b/src/utils/SearchField.js
new file mode 100644
index 00000000..77a569b9
--- /dev/null
+++ b/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;
diff --git a/src/utils/SearchField.scss b/src/utils/SearchField.scss
new file mode 100644
index 00000000..74107ebf
--- /dev/null
+++ b/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;
+}