Created filtering by tag feature

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}

src/short-urls/helpers/ShortUrlsRow.scss

@@ -10,5 +10,5 @@
 
 .short-urls-row__copy-hint {
   @include vertical-align();
-  right: 10px;
+  right: 100%;
 }