Updated tags list, allowing to click on a tag to show the list filtered by that tag

src/short-urls/SearchBar.js

@@ -44,16 +44,19 @@ export class SearchBar extends React.Component {
           <h4 className="search-bar__selected-tag mt-2">
             <FontAwesomeIcon icon={tagsIcon} className="search-bar__tags-icon" />
             &nbsp;
-            {selectedTags.map(tag => <Tag
-              text={tag}
-              clearable
-              onClose={() => listShortUrls(
-                {
-                  ...shortUrlsListParams,
-                  tags: selectedTags.filter(selectedTag => selectedTag !== tag)
-                }
-              )}
-            />)}
+            {selectedTags.map(tag => (
+              <Tag
+                key={tag}
+                text={tag}
+                clearable
+                onClose={() => listShortUrls(
+                  {
+                    ...shortUrlsListParams,
+                    tags: selectedTags.filter(selectedTag => selectedTag !== tag)
+                  }
+                )}
+              />
+            ))}
           </h4>
         )}
       </div>

src/short-urls/ShortUrlsList.js

@@ -8,6 +8,7 @@ import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from
 import { ShortUrlsRow } from './helpers/ShortUrlsRow'
 import { listShortUrls } from './reducers/shortUrlsList'
 import './ShortUrlsList.scss'
+import qs from 'qs';
 
 const SORTABLE_FIELDS = {
   dateCreated: 'Created at',
@@ -64,8 +65,10 @@ export class ShortUrlsList extends React.Component {
   }
 
   componentDidMount() {
-    const { match: { params } } = this.props;
-    this.refreshList({ page: params.page });
+    const { match: { params }, location } = this.props;
+    const query = qs.parse(location.search, { ignoreQueryPrefix: true });
+
+    this.refreshList({ page: params.page, tags: query.tag ? [query.tag] : [] });
   }
 
   renderShortUrls() {

src/short-urls/helpers/ShortUrlsRow.js

@@ -15,9 +15,13 @@ export class ShortUrlsRow extends React.Component {
 
     const { refreshList, shortUrlsListParams } = this.props;
     const selectedTags = shortUrlsListParams.tags || [];
-    return tags.map(
-      tag => <Tag key={tag} text={tag} onClick={() => refreshList({tags: [ ...selectedTags, tag ] })} />
-    );
+    return tags.map(tag => (
+      <Tag
+        key={tag}
+        text={tag}
+        onClick={() => refreshList({ tags: [ ...selectedTags, tag ] })}
+      />
+    ));
   }
 
   render() {

src/tags/TagCard.js

@@ -7,6 +7,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import ColorGenerator, { colorGeneratorType } from '../utils/ColorGenerator';
 import './TagCard.scss';
+import { Link } from 'react-router-dom';
 
 const propTypes = {
   tag: PropTypes.string,
@@ -20,7 +21,7 @@ export default class TagCard extends React.Component {
   state = { isDeleteModalOpen: false, isEditModalOpen: false };
 
   render() {
-    const { tag, colorGenerator } = this.props;
+    const { tag, colorGenerator, currentServerId } = this.props;
     const toggleDelete = () =>
       this.setState({ isDeleteModalOpen: !this.state.isDeleteModalOpen });
 
@@ -41,7 +42,9 @@ export default class TagCard extends React.Component {
               style={{backgroundColor: colorGenerator.getColorForKey(tag)}}
               className="tag-card__tag-bullet"
             />
-            {tag}
+            <Link to={`/server/${currentServerId}/list-short-urls/1?tag=${tag}`}>
+              {tag}
+            </Link>
           </h5>
         </CardBody>
 

src/tags/TagsList.js

@@ -16,7 +16,7 @@ export class TagsList extends React.Component {
   }
 
   renderContent() {
-    const { tagsList } = this.props;
+    const { tagsList, match } = this.props;
     if (tagsList.loading) {
       return <MuttedMessage marginSize={0}>Loading...</MuttedMessage>
     }
@@ -40,7 +40,13 @@ export class TagsList extends React.Component {
       <React.Fragment>
         {tagsGroups.map((group, index) => (
           <div key={index} className="col-md-6 col-xl-3">
-            {group.map(tag => <TagCard tag={tag} key={tag}/>)}
+            {group.map(tag => (
+              <TagCard
+                key={tag}
+                tag={tag}
+                currentServerId={match.params.serverId}
+              />
+            ))}
           </div>
         ))}
       </React.Fragment>