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} - - - {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} + + + {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; +}