Created filtering by tag feature

src/short-urls/SearchBar.js

@@ -2,6 +2,7 @@ import searchIcon from '@fortawesome/fontawesome-free-solid/faSearch';
 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 './SearchBar.scss';
 import { pick } from 'ramda';
@@ -14,22 +15,41 @@ export class SearchBar extends React.Component {
   timer = null;
 
   render() {
+    const { listShortUrls, shortUrlsListParams } = this.props;
+    const selectedTag = shortUrlsListParams.tags ? shortUrlsListParams.tags[0] : '';
+
     return (
-      <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 class="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>
+
+        {selectedTag && (
+          <h4 className="search-bar__selected-tag mt-2">
+            <small>Filtering by tag:</small>
+            &nbsp;
+            <Tag
+              text={selectedTag}
+              clearable
+              onClose={() => listShortUrls({ ...shortUrlsListParams, tags: undefined })}
+            />
+          </h4>
+        )}
       </div>
     );
   }