From bbeaf01319128e4954d850cf929de31fb3efa99e Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Wed, 1 Aug 2018 19:04:58 +0200
Subject: [PATCH] Created filtering by tag feature

---
 src/short-urls/SearchBar.js              | 48 +++++++++++++++++-------
 src/short-urls/ShortUrlsList.js          | 19 ++++------
 src/short-urls/helpers/ShortUrlsRow.js   | 24 ++++++++----
 src/short-urls/helpers/ShortUrlsRow.scss |  2 +-
 src/utils/Tag.js                         | 32 +++++++++-------
 src/utils/Tag.scss                       | 14 +++++++
 6 files changed, 92 insertions(+), 47 deletions(-)

diff --git a/src/short-urls/SearchBar.js b/src/short-urls/SearchBar.js
index 7524214f..693d233d 100644
--- a/src/short-urls/SearchBar.js
+++ b/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>
     );
   }
diff --git a/src/short-urls/ShortUrlsList.js b/src/short-urls/ShortUrlsList.js
index 1bd00332..0683c72a 100644
--- a/src/short-urls/ShortUrlsList.js
+++ b/src/short-urls/ShortUrlsList.js
@@ -1,14 +1,12 @@
 import caretDownIcon from '@fortawesome/fontawesome-free-solid/faCaretDown';
 import caretUpIcon from '@fortawesome/fontawesome-free-solid/faCaretUp';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
-import { isEmpty } from 'ramda';
+import { isEmpty, pick } from 'ramda';
 import React from 'react';
 import { connect } from 'react-redux';
-import Tag from '../utils/Tag';
 import { ShortUrlsRow } from './helpers/ShortUrlsRow';
 import { listShortUrls } from './reducers/shortUrlsList';
 import './ShortUrlsList.scss';
-import { pick } from 'ramda';
 
 export class ShortUrlsList extends React.Component {
   refreshList = extraParams => {
@@ -110,17 +108,14 @@ export class ShortUrlsList extends React.Component {
     }
 
     return shortUrlsList.map(shortUrl => (
-      <ShortUrlsRow shortUrl={shortUrl} selectedServer={selectedServer} key={shortUrl.shortCode} />
+      <ShortUrlsRow
+        shortUrl={shortUrl}
+        selectedServer={selectedServer}
+        key={shortUrl.shortCode}
+        refreshList={this.refreshList}
+      />
     ));
   }
-
-  static renderTags(tags) {
-    if (isEmpty(tags)) {
-      return <i className="nowrap"><small>No tags</small></i>;
-    }
-
-    return tags.map(tag => <Tag text={tag} />);
-  }
 }
 
 export default connect(pick(['selectedServer', 'shortUrlsListParams']), { listShortUrls })(ShortUrlsList);
diff --git a/src/short-urls/helpers/ShortUrlsRow.js b/src/short-urls/helpers/ShortUrlsRow.js
index 5c5fafa1..d2bef438 100644
--- a/src/short-urls/helpers/ShortUrlsRow.js
+++ b/src/short-urls/helpers/ShortUrlsRow.js
@@ -1,12 +1,22 @@
+import { isEmpty } from 'ramda';
 import React from 'react';
 import Moment from 'react-moment';
-import { ShortUrlsList } from '../ShortUrlsList';
+import Tag from '../../utils/Tag';
+import './ShortUrlsRow.scss';
 import { ShortUrlsRowMenu } from './ShortUrlsRowMenu';
-import './ShortUrlsRow.scss'
 
 export class ShortUrlsRow extends React.Component {
   state = { displayMenu: false, copiedToClipboard: false };
 
+  renderTags(tags) {
+    if (isEmpty(tags)) {
+      return <i className="nowrap"><small>No tags</small></i>;
+    }
+
+    const { refreshList } = this.props;
+    return tags.map(tag => <Tag key={tag} text={tag} onClick={() => refreshList({ tags: [tag] })} />);
+  }
+
   render() {
     const { shortUrl, selectedServer } = this.props;
     const completeShortUrl = !selectedServer ? shortUrl.shortCode : `${selectedServer.url}/${shortUrl.shortCode}`;
@@ -22,18 +32,18 @@ export class ShortUrlsRow extends React.Component {
         <td className="short-urls-row__cell">
           <a href={completeShortUrl} target="_blank">{completeShortUrl}</a>
         </td>
-        <td className="short-urls-row__cell short-urls-row__cell--relative">
+        <td className="short-urls-row__cell">
           <a href={shortUrl.originalUrl} target="_blank">{shortUrl.originalUrl}</a>
+        </td>
+        <td className="short-urls-row__cell">{this.renderTags(shortUrl.tags)}</td>
+        <td className="short-urls-row__cell text-right">{shortUrl.visitsCount}</td>
+        <td className="short-urls-row__cell short-urls-row__cell--relative">
           <small
             className="badge badge-warning short-urls-row__copy-hint"
             hidden={!this.state.copiedToClipboard}
           >
             Copied short URL!
           </small>
-        </td>
-        <td className="short-urls-row__cell">{ShortUrlsList.renderTags(shortUrl.tags)}</td>
-        <td className="short-urls-row__cell text-right">{shortUrl.visitsCount}</td>
-        <td className="short-urls-row__cell">
           <ShortUrlsRowMenu
             display={this.state.displayMenu}
             shortUrl={completeShortUrl}
diff --git a/src/short-urls/helpers/ShortUrlsRow.scss b/src/short-urls/helpers/ShortUrlsRow.scss
index 0a1dbcb7..3e7e4a0d 100644
--- a/src/short-urls/helpers/ShortUrlsRow.scss
+++ b/src/short-urls/helpers/ShortUrlsRow.scss
@@ -10,5 +10,5 @@
 
 .short-urls-row__copy-hint {
   @include vertical-align();
-  right: 10px;
+  right: 100%;
 }
diff --git a/src/utils/Tag.js b/src/utils/Tag.js
index 0dceb0df..f6a49c44 100644
--- a/src/utils/Tag.js
+++ b/src/utils/Tag.js
@@ -2,21 +2,27 @@ import React from 'react';
 import ColorGenerator from '../utils/ColorGenerator';
 import './Tag.scss';
 
-export default class Tag extends React.Component {
-  constructor(props) {
-    super(props);
-    this.colorGenerator = props.ColorGenerator;
-  }
-
-  render() {
-    return (
-      <span className="badge tag" style={{ backgroundColor: this.colorGenerator.getColorForKey(this.props.text) }}>
-        {this.props.text}
-      </span>
-    );
+export default function Tag (
+  {
+    colorGenerator,
+    text,
+    clearable,
+    onClick = () => ({}),
+    onClose = () => ({})
   }
+) {
+  return (
+    <span
+      className="badge tag"
+      style={{ backgroundColor: colorGenerator.getColorForKey(text), cursor: clearable ? 'auto' : 'pointer' }}
+      onClick={onClick}
+    >
+      {text}
+      {clearable && <span className="close tag__close-selected-tag" onClick={onClose}>&times;</span>}
+    </span>
+  );
 }
 
 Tag.defaultProps = {
-  ColorGenerator
+  colorGenerator: ColorGenerator
 };
diff --git a/src/utils/Tag.scss b/src/utils/Tag.scss
index 2c7a1f73..24a838e3 100644
--- a/src/utils/Tag.scss
+++ b/src/utils/Tag.scss
@@ -1,7 +1,21 @@
 .tag {
   color: #fff;
+  cursor: pointer;
 }
 
 .tag:not(:last-child) {
   margin-right: 3px;
 }
+
+.tag__close-selected-tag.tag__close-selected-tag {
+  font-size: inherit;
+  color: inherit;
+  opacity: 1;
+  cursor: pointer;
+  margin-left: 5px;
+}
+
+.tag__close-selected-tag.tag__close-selected-tag:hover {
+  color: inherit;
+  opacity: 1;
+}