From ee6193ace8b53fe2da77a8e195c21f6ba71fc415 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sat, 4 Aug 2018 17:07:44 +0200
Subject: [PATCH] Added support to filter by multiple tags

---
 src/short-urls/SearchBar.js            | 21 +++++++++++++--------
 src/short-urls/ShortUrlsList.js        |  3 ++-
 src/short-urls/helpers/ShortUrlsRow.js |  7 +++++--
 3 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/short-urls/SearchBar.js b/src/short-urls/SearchBar.js
index be30125c..5feaf65a 100644
--- a/src/short-urls/SearchBar.js
+++ b/src/short-urls/SearchBar.js
@@ -5,7 +5,7 @@ import { connect } from 'react-redux';
 import Tag from '../utils/Tag';
 import { listShortUrls } from './reducers/shortUrlsList';
 import './SearchBar.scss';
-import { pick } from 'ramda';
+import { pick, isEmpty } from 'ramda';
 
 export class SearchBar extends React.Component {
   state = {
@@ -16,7 +16,7 @@ export class SearchBar extends React.Component {
 
   render() {
     const { listShortUrls, shortUrlsListParams } = this.props;
-    const selectedTag = shortUrlsListParams.tags ? shortUrlsListParams.tags[0] : '';
+    const selectedTags = shortUrlsListParams.tags || [];
 
     return (
       <div className="serach-bar-container">
@@ -39,15 +39,20 @@ export class SearchBar extends React.Component {
           </div>
         </div>
 
-        {selectedTag && (
+        {!isEmpty(selectedTags) && (
           <h4 className="search-bar__selected-tag mt-2">
-            <small>Filtering by tag:</small>
+            <small>Filtering by tags:</small>
             &nbsp;
-            <Tag
-              text={selectedTag}
+            {selectedTags.map(tag => <Tag
+              text={tag}
               clearable
-              onClose={() => listShortUrls({ ...shortUrlsListParams, tags: undefined })}
-            />
+              onClose={() => listShortUrls(
+                {
+                  ...shortUrlsListParams,
+                  tags: selectedTags.filter(selectedTag => selectedTag !== tag)
+                }
+              )}
+            />)}
           </h4>
         )}
       </div>
diff --git a/src/short-urls/ShortUrlsList.js b/src/short-urls/ShortUrlsList.js
index 0683c72a..6be4ad2a 100644
--- a/src/short-urls/ShortUrlsList.js
+++ b/src/short-urls/ShortUrlsList.js
@@ -94,7 +94,7 @@ export class ShortUrlsList extends React.Component {
   }
 
   renderShortUrls() {
-    const { shortUrlsList, selectedServer, loading, error } = this.props;
+    const { shortUrlsList, selectedServer, loading, error, shortUrlsListParams } = this.props;
     if (error) {
       return <tr><td colSpan="6" className="text-center table-danger">Something went wrong while loading short URLs :(</td></tr>;
     }
@@ -113,6 +113,7 @@ export class ShortUrlsList extends React.Component {
         selectedServer={selectedServer}
         key={shortUrl.shortCode}
         refreshList={this.refreshList}
+        shortUrlsListParams={shortUrlsListParams}
       />
     ));
   }
diff --git a/src/short-urls/helpers/ShortUrlsRow.js b/src/short-urls/helpers/ShortUrlsRow.js
index d2bef438..f7953f56 100644
--- a/src/short-urls/helpers/ShortUrlsRow.js
+++ b/src/short-urls/helpers/ShortUrlsRow.js
@@ -13,8 +13,11 @@ export class ShortUrlsRow extends React.Component {
       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] })} />);
+    const { refreshList, shortUrlsListParams } = this.props;
+    const selectedTags = shortUrlsListParams.tags || [];
+    return tags.map(
+      tag => <Tag key={tag} text={tag} onClick={() => refreshList({tags: [ ...selectedTags, tag ] })} />
+    );
   }
 
   render() {