forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-03-14 19:43:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Extracted ShortUrlsRow to its own module

Browse Source
This commit is contained in:
Alejandro Celaya
2018-07-28 09:18:55 +02:00
parent b734b4515b
commit ce22b7e8e9
4 changed files with 64 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/short-urls/ShortUrlsList.js
View File

@@ -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,