diff --git a/src/short-urls/ShortUrlsList.js b/src/short-urls/ShortUrlsList.js
index e314da97..31263dec 100644
--- a/src/short-urls/ShortUrlsList.js
+++ b/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 (
-
this.setState({ displayMenu: true })}
- onMouseLeave={() => this.setState({ displayMenu: false })}
- >
-
- {shortUrl.dateCreated}
- |
-
- {completeShortUrl}
- |
-
- {shortUrl.originalUrl}
-
- Copied short URL!
-
- |
- {ShortUrlsList.renderTags(shortUrl.tags)} |
- {shortUrl.visitsCount} |
-
- {
- this.setState({ copiedToClipboard: true });
- setTimeout(() => this.setState({ copiedToClipboard: false }), 2000);
- }}
- />
- |
-
- )
- }
-}
-
export default connect(state => ({
selectedServer: state.selectedServer,
shortUrlsListParams: state.shortUrlsListParams,
diff --git a/src/short-urls/ShortUrlsList.scss b/src/short-urls/ShortUrlsList.scss
index ca359e1e..c1857d4e 100644
--- a/src/short-urls/ShortUrlsList.scss
+++ b/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;
-}
diff --git a/src/short-urls/helpers/ShortUrlsRow.js b/src/short-urls/helpers/ShortUrlsRow.js
new file mode 100644
index 00000000..67aadd84
--- /dev/null
+++ b/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 (
+ this.setState({displayMenu: true})}
+ onMouseLeave={() => this.setState({displayMenu: false})}
+ >
+
+ {shortUrl.dateCreated}
+ |
+
+ {completeShortUrl}
+ |
+
+ {shortUrl.originalUrl}
+
+ Copied short URL!
+
+ |
+ {ShortUrlsList.renderTags(shortUrl.tags)} |
+ {shortUrl.visitsCount} |
+
+ {
+ this.setState({copiedToClipboard: true});
+ setTimeout(() => this.setState({copiedToClipboard: false}), 2000);
+ }}
+ />
+ |
+
+ );
+ }
+}
diff --git a/src/short-urls/helpers/ShortUrlsRow.scss b/src/short-urls/helpers/ShortUrlsRow.scss
new file mode 100644
index 00000000..0a1dbcb7
--- /dev/null
+++ b/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;
+}