Extracted ShortUrlsRow to its own module

src/short-urls/ShortUrlsList.js

@@ -3,10 +3,9 @@ import caretUpIcon from '@fortawesome/fontawesome-free-solid/faCaretUp';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import { isEmpty } from 'ramda';
 import React from 'react';
-import Moment from 'react-moment';
 import { connect } from 'react-redux';
 import Tag from '../utils/Tag';
-import { RowMenu } from './helpers/ShortUrlsRowMenu';
+import { Row } from './helpers/ShortUrlsRow';
 import { listShortUrls } from './reducers/shortUrlsList';
 import './ShortUrlsList.scss';
 
@@ -123,50 +122,6 @@ export class ShortUrlsList extends React.Component {
   }
 }
 
-class Row extends React.Component {
-  state = { displayMenu: false, copiedToClipboard: false };
-
-  render() {
-    const { shortUrl, selectedServer } = this.props;
-    const completeShortUrl = !selectedServer ? shortUrl.shortCode : `${selectedServer.url}/${shortUrl.shortCode}`;
-
-    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={completeShortUrl} target="_blank">{completeShortUrl}</a>
-        </td>
-        <td className="short-urls-list__cell short-urls-list__cell--relative">
-          <a href={shortUrl.originalUrl} target="_blank">{shortUrl.originalUrl}</a>
-          <small
-            className="badge badge-warning short-urls-list__copy-hint"
-            hidden={!this.state.copiedToClipboard}
-          >
-            Copied short URL!
-          </small>
-        </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}
-            shortUrl={completeShortUrl}
-            onCopyToClipboard={() => {
-              this.setState({ copiedToClipboard: true });
-              setTimeout(() => this.setState({ copiedToClipboard: false }), 2000);
-            }}
-          />
-        </td>
-      </tr>
-    )
-  }
-}
-
 export default connect(state => ({
   selectedServer: state.selectedServer,
   shortUrlsListParams: state.shortUrlsListParams,

src/short-urls/ShortUrlsList.scss

@@ -1,9 +1,3 @@
-@import "../utils/mixins/vertical-align";
-
-.short-urls-list__cell {
-  vertical-align: middle !important;
-}
-
 .short-urls-list__header--with-action {
   cursor: pointer;
 }
@@ -11,12 +5,3 @@
 .short-urls-list__header-icon {
   margin-right: 5px;
 }
-
-.short-urls-list__cell--relative {
-  position: relative;
-}
-
-.short-urls-list__copy-hint {
-  @include vertical-align();
-  right: 10px;
-}

src/short-urls/helpers/ShortUrlsRow.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import Moment from 'react-moment';
+import { ShortUrlsList } from '../ShortUrlsList';
+import { RowMenu } from './ShortUrlsRowMenu';
+import './ShortUrlsRow.scss'
+
+export class Row extends React.Component {
+  state = {displayMenu: false, copiedToClipboard: false};
+
+  render() {
+    const {shortUrl, selectedServer} = this.props;
+    const completeShortUrl = !selectedServer ? shortUrl.shortCode : `${selectedServer.url}/${shortUrl.shortCode}`;
+
+    return (
+      <tr
+        onMouseEnter={() => this.setState({displayMenu: true})}
+        onMouseLeave={() => this.setState({displayMenu: false})}
+      >
+        <td className="nowrap short-urls-row__cell">
+          <Moment format="YYYY-MM-DD HH:mm" interval={0}>{shortUrl.dateCreated}</Moment>
+        </td>
+        <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">
+          <a href={shortUrl.originalUrl} target="_blank">{shortUrl.originalUrl}</a>
+          <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">
+          <RowMenu
+            display={this.state.displayMenu}
+            shortUrl={completeShortUrl}
+            onCopyToClipboard={() => {
+              this.setState({copiedToClipboard: true});
+              setTimeout(() => this.setState({copiedToClipboard: false}), 2000);
+            }}
+          />
+        </td>
+      </tr>
+    );
+  }
+}

src/short-urls/helpers/ShortUrlsRow.scss

@@ -0,0 +1,14 @@
+@import "../../utils/mixins/vertical-align";
+
+.short-urls-row__cell {
+  vertical-align: middle !important;
+}
+
+.short-urls-row__cell--relative {
+  position: relative;
+}
+
+.short-urls-row__copy-hint {
+  @include vertical-align();
+  right: 10px;
+}