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

13
src/visits/VisitsHeader.js
View file

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