Added support to filter by multiple tags

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>

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}
       />
     ));
   }

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() {