mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 01:20:24 +03:00
Code Issues Projects Releases Packages Wiki Activity

Improved visits page

Browse source
This commit is contained in:
Alejandro Celaya 2018-09-05 20:17:46 +02:00
parent f0b0fdf114
commit 3e63734e2b
2 changed files with 10 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/visits/ShortUrlVisits.js
View file

@ -110,7 +110,7 @@ export class ShortUrlsVisitsComponent extends React.Component {
return ( return (
<div className="shlink-container"> <div className="shlink-container">
<VisitsHeader shortUrlDetail={shortUrlDetail} shortLink={shortLink} /> <VisitsHeader shortUrlDetail={shortUrlDetail} shortUrlVisits={shortUrlVisits} shortLink={shortLink} />
<section className="mt-4"> <section className="mt-4">
<div className="row"> <div className="row">
@ -119,6 +119,7 @@ export class ShortUrlsVisitsComponent extends React.Component {
selected={this.state.startDate} selected={this.state.startDate}
placeholderText="Since" placeholderText="Since"
isClearable isClearable
maxDate={this.state.endDate}
onChange={(date) => this.setState({ startDate: date }, () => this.loadVisits())} onChange={(date) => this.setState({ startDate: date }, () => this.loadVisits())}
/> />
</div> </div>
@ -128,6 +129,7 @@ export class ShortUrlsVisitsComponent extends React.Component {
placeholderText="Until" placeholderText="Until"
isClearable isClearable
className="short-url-visits__date-input" className="short-url-visits__date-input"
minDate={this.state.startDate}
onChange={(date) => this.setState({ endDate: date }, () => this.loadVisits())} onChange={(date) => this.setState({ endDate: date }, () => this.loadVisits())}
/> />
</div> </div>

13
src/visits/VisitsHeader.js
View file

@ -5,14 +5,17 @@ import PropTypes from 'prop-types';
import ExternalLink from '../utils/ExternalLink'; import ExternalLink from '../utils/ExternalLink';
import './VisitsHeader.scss'; import './VisitsHeader.scss';
import { shortUrlDetailType } from './reducers/shortUrlDetail'; import { shortUrlDetailType } from './reducers/shortUrlDetail';
import { shortUrlVisitsType } from './reducers/shortUrlVisits';
const propTypes = { const propTypes = {
shortUrlDetail: shortUrlDetailType, shortUrlDetail: shortUrlDetailType.isRequired,
shortUrlVisits: shortUrlVisitsType.isRequired,
shortLink: PropTypes.string, shortLink: PropTypes.string,
}; };
export function VisitsHeader({ shortUrlDetail, shortLink }) { export function VisitsHeader({ shortUrlDetail, shortUrlVisits, shortLink }) {
const { shortUrl, loading } = shortUrlDetail; const { shortUrl, loading } = shortUrlDetail;
const { visits } = shortUrlVisits;
const renderDate = () => ( const renderDate = () => (
<span> <span>
<b id="created" className="visits-header__created-at"><Moment fromNow>{shortUrl.dateCreated}</Moment></b> <b id="created" className="visits-header__created-at"><Moment fromNow>{shortUrl.dateCreated}</Moment></b>
@ -26,8 +29,7 @@ export function VisitsHeader({ shortUrlDetail, shortLink }) {
<header> <header>
<Card className="bg-light" body> <Card className="bg-light" body>
<h2> <h2>
{shortUrl.visitsCount && <span className="badge badge-main float-right">Visits: {visits.length}</span>
<span className="badge badge-main float-right">Visits: {shortUrl.visitsCount}</span>}
Visit stats for <ExternalLink href={shortLink}>{shortLink}</ExternalLink> Visit stats for <ExternalLink href={shortLink}>{shortLink}</ExternalLink>
</h2> </h2>
<hr /> <hr />
@ -35,8 +37,7 @@ export function VisitsHeader({ shortUrlDetail, shortLink }) {
<div> <div>
Created: Created:
&nbsp; &nbsp;
{loading && <small>Loading...</small>} {renderDate()}
{!loading && renderDate()}
</div> </div>
)} )}
<div> <div>