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