Created more components for the short URLs list

src/common/MenuLayout.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Route, Switch } from 'react-router-dom';
-import ShortUrlsList from '../short-urls/ShortUrlsList';
+import ShortUrls from '../short-urls/ShortUrls';
 import AsideMenu from './AsideMenu';
 
 export default function MenuLayout() {
@@ -11,7 +11,7 @@ export default function MenuLayout() {
         <Switch>
           <Route exact
                  path="/server/:serverId/list-short-urls/:page"
-                 component={ShortUrlsList}
+                 component={ShortUrls}
           />
         </Switch>
       </div>

src/short-urls/SearchBar.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import searchIcon from '@fortawesome/fontawesome-free-solid/faSearch';
+import FontAwesomeIcon from '@fortawesome/react-fontawesome';
+import './SearchBar.scss';
+
+export default class SearchBar extends React.Component {
+  render() {
+    return (
+      <div className="search-bar">
+        <input type="text" className="form-control form-control-lg search-bar__input" placeholder="Search..." />
+        <FontAwesomeIcon icon={searchIcon} className="search-bar__icon" />
+      </div>
+    );
+  }
+}

src/short-urls/SearchBar.scss

@@ -0,0 +1,15 @@
+@import "../utils/mixins/vertical-align";
+
+.search-bar {
+  position: relative;
+}
+
+.search-bar__input.search-bar__input {
+  padding-left: 40px;
+}
+
+.search-bar__icon {
+  @include vertical-align();
+  left: 15px;
+  color: #707581;
+}

src/short-urls/ShortUrls.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import SearchBar from './SearchBar';
+import ShortUrlsList from './ShortUrlsList';
+import './ShortUrls.scss';
+
+export default function ShortUrls(props) {
+  return (
+    <div className="short-urls-container">
+      <div className="form-group"><SearchBar /></div>
+      <ShortUrlsList {...props} />
+    </div>
+  );
+}

src/short-urls/ShortUrls.scss

@@ -0,0 +1,3 @@
+.short-urls-container {
+  padding: 30px 30px 30px 20px;
+}

src/short-urls/ShortUrlsList.js

@@ -1,9 +1,17 @@
 import React from 'react';
 import Moment from 'react-moment';
 import { connect } from 'react-redux';
+import { ButtonDropdown, DropdownItem, DropdownMenu, DropdownToggle } from 'reactstrap';
+import { isEmpty } from 'ramda';
+import pieChartIcon from '@fortawesome/fontawesome-free-solid/faChartPie';
+import pictureIcon from '@fortawesome/fontawesome-free-solid/faImage';
+import qrIcon from '@fortawesome/fontawesome-free-solid/faQrcode';
+import copyIcon from '@fortawesome/fontawesome-free-solid/faCopy';
+import menuIcon from '@fortawesome/fontawesome-free-solid/faEllipsisV';
+import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import Tag from '../utils/Tag';
 import { listShortUrls } from './reducers/shortUrlsList';
-import { isEmpty } from 'ramda';
+import './ShortUrlsList.scss';
 
 export class ShortUrlsList extends React.Component {
   componentDidMount() {
@@ -13,7 +21,7 @@ export class ShortUrlsList extends React.Component {
 
   render() {
     return (
-      <table className="table">
+      <table className="table table-striped table-hover">
         <thead>
           <tr>
             <th>Created at</th>
@@ -21,7 +29,7 @@ export class ShortUrlsList extends React.Component {
             <th>Original URL</th>
             <th>Tags</th>
             <th>Visits</th>
-            <th> - </th>
+            <th>&nbsp;</th>
           </tr>
         </thead>
         <tbody>
@@ -34,24 +42,11 @@ export class ShortUrlsList extends React.Component {
   renderShortUrls() {
     const { shortUrlsList, selectedServer } = this.props;
     if (isEmpty(shortUrlsList)) {
-      return <li><i>Loading...</i></li>;
+      return <tr><td colSpan="6" className="text-center">Loading...</td></tr>;
     }
 
     return shortUrlsList.map(shortUrl => (
-      <tr key={shortUrl.shortCode}>
+      <Row shortUrl={shortUrl} selectedServer={selectedServer} key={shortUrl.shortCode} />
-        <td className="nowrap"><Moment format="YYYY-MM-DD HH:mm" interval={0}>{shortUrl.dateCreated}</Moment></td>
-        <td>
-          <a href={`${selectedServer.url}/${shortUrl.shortCode}`} target="_blank">
-            {`${selectedServer.url}/${shortUrl.shortCode}`}
-          </a>
-        </td>
-        <td>
-          <a href={shortUrl.originalUrl} target="_blank">{shortUrl.originalUrl}</a>
-        </td>
-        <td>{ShortUrlsList.renderTags(shortUrl.tags)}</td>
-        <td>{shortUrl.visitsCount}</td>
-        <td></td>
-      </tr>
     ));
   }
 
@@ -64,6 +59,73 @@ export class ShortUrlsList extends React.Component {
   }
 }
 
+class Row extends React.Component {
+  state = { displayMenu: false };
+
+  render() {
+    const { shortUrl, selectedServer } = this.props;
+
+    return (
+      <tr onMouseEnter={() => this.setState({ displayMenu: true })}
+          onMouseLeave={() => this.setState({ displayMenu: false })}
+      >
+        <td className="nowrap short-urls-list__cell">
+          <Moment format="YYYY-MM-DD HH:mm" interval={0}>{shortUrl.dateCreated}</Moment>
+        </td>
+        <td className="short-urls-list__cell">
+          <a href={`${selectedServer.url}/${shortUrl.shortCode}`} target="_blank">
+            {`${selectedServer.url}/${shortUrl.shortCode}`}
+          </a>
+        </td>
+        <td className="short-urls-list__cell">
+          <a href={shortUrl.originalUrl} target="_blank">{shortUrl.originalUrl}</a>
+        </td>
+        <td className="short-urls-list__cell">{ShortUrlsList.renderTags(shortUrl.tags)}</td>
+        <td className="short-urls-list__cell text-right">{shortUrl.visitsCount}</td>
+        <td className="short-urls-list__cell">
+          <RowMenu display={this.state.displayMenu} />
+        </td>
+      </tr>
+    )
+  }
+}
+
+class RowMenu extends React.Component {
+  state = { isOpen: false };
+  toggle = () => this.setState({ isOpen: ! this.state.isOpen });
+
+  render () {
+    const determineClass = () => {
+      const baseClass = 'short-urls-list__dropdown-toggle';
+      return ! this.props.display ? `${baseClass} short-urls-list__dropdown-toggle--hidden` : baseClass;
+    };
+
+    return (
+      <ButtonDropdown toggle={this.toggle} isOpen={this.state.isOpen} direction="left">
+        <DropdownToggle color="white" size="sm" caret className={determineClass()}>
+          &nbsp;<FontAwesomeIcon icon={menuIcon} />&nbsp;
+        </DropdownToggle>
+        <DropdownMenu>
+          <DropdownItem>
+            <FontAwesomeIcon icon={pieChartIcon} /> &nbsp;Visit Stats
+          </DropdownItem>
+          <DropdownItem divider />
+          <DropdownItem>
+            <FontAwesomeIcon icon={pictureIcon} /> &nbsp;Preview
+          </DropdownItem>
+          <DropdownItem>
+            <FontAwesomeIcon icon={qrIcon} /> &nbsp;QR code
+          </DropdownItem>
+          <DropdownItem divider />
+          <DropdownItem>
+            <FontAwesomeIcon icon={copyIcon} /> &nbsp;Copy to clipboard
+          </DropdownItem>
+        </DropdownMenu>
+      </ButtonDropdown>
+    );
+  }
+}
+
 export default connect(state => ({
   shortUrlsList: state.shortUrlsList,
   selectedServer: state.selectedServer,

src/short-urls/ShortUrlsList.scss

@@ -0,0 +1,10 @@
+.short-urls-list__cell {
+  vertical-align: middle !important;
+}
+
+.short-urls-list__dropdown-toggle:before {
+  display: none !important;
+}
+.short-urls-list__dropdown-toggle--hidden {
+  visibility: hidden;
+}

src/utils/mixins/vertical-align.scss

@@ -0,0 +1,5 @@
+@mixin vertical-align {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}