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

Ensured regular data for a short URL is loaded if defined

Browse source
This commit is contained in:
Alejandro Celaya 2018-07-30 21:34:06 +02:00
parent 13004f6d57
commit 0f34d473b9
3 changed files with 59 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/api/ShlinkApiClient.js
View file

@ -39,6 +39,11 @@ export class ShlinkApiClient {
.then(resp => resp.data.visits.data)
.catch(e => this._handleAuthError(e, this.getShortUrlVisits, [shortCode, dates]));
getShortUrl = shortCode =>
this._performRequest(`/short-codes/${shortCode}`, 'GET')
.then(resp => resp.data)
.catch(e => this._handleAuthError(e, this.getShortUrl, [shortCode]));
_performRequest = async (url, method = 'GET', params = {}, data = {}) => {
if (isEmpty(this._token)) {
this._token = await this._authenticate();

54
src/short-urls/ShortUrlVisits.js
View file

@ -1,8 +1,9 @@
import React from 'react';
import { Doughnut, HorizontalBar } from 'react-chartjs-2';
import Moment from 'react-moment';
import { connect } from 'react-redux';
import { pick } from 'ramda';
import { Card, CardBody, CardHeader } from 'reactstrap';
import { Card, CardBody, CardHeader, UncontrolledTooltip } from 'reactstrap';
import { getShortUrlVisits } from './reducers/shortUrlVisits';
import VisitsParser from '../visits/services/VisitsParser';
import preloader from '@fortawesome/fontawesome-free-solid/faCircleNotch';
@ -17,9 +18,14 @@ export class ShortUrlsVisits extends React.Component {
}
render() {
const { match: { params }, selectedServer, visitsParser, shortUrlVisits: { visits, loading, error } } = this.props;
const {
match: { params },
selectedServer,
visitsParser,
shortUrlVisits: { visits, loading, error, shortUrl }
} = this.props;
const serverUrl = selectedServer ? selectedServer.url : '';
const shortUrl = `${serverUrl}/${params.shortCode}`;
const shortLink = `${serverUrl}/${params.shortCode}`;
const generateGraphData = (stats, label, isBarChart) => ({
labels: Object.keys(stats),
datasets: [
@ -72,15 +78,45 @@ export class ShortUrlsVisits extends React.Component {
);
};
const renderCreated = () =>
<span>
<b id="created"><Moment fromNow>{shortUrl.dateCreated}</Moment></b>
<UncontrolledTooltip placement="bottom" target="created">
<Moment format="YYYY-MM-DD HH:mm">{shortUrl.dateCreated}</Moment>
</UncontrolledTooltip>
</span>;
return (
<div className="short-urls-container">
<Card className="bg-light">
<CardBody>
<h2>Visit stats for <a target="_blank" href={shortUrl}>{shortUrl}</a></h2>
</CardBody>
</Card>
<header>
<Card className="bg-light">
<CardBody>
<h2>
{
shortUrl.visitsCount &&
<span className="badge badge-primary float-right">Visits: {shortUrl.visitsCount}</span>
}
Visit stats for <a target="_blank" href={shortLink}>{shortLink}</a>
</h2>
<hr />
{shortUrl.dateCreated && <div>
Created:
&nbsp;
{loading && <small>Loading...</small>}
{!loading && renderCreated()}
</div>}
<div>
Original URL:
&nbsp;
{loading && <small>Loading...</small>}
{!loading && <a target="_blank" href={shortUrl.longUrl}>{shortUrl.longUrl}</a>}
</div>
</CardBody>
</Card>
</header>
{renderContent()}
<section>
{renderContent()}
</section>
</div>
);
}

16
src/short-urls/reducers/shortUrlVisits.js
View file

@ -5,6 +5,7 @@ const GET_SHORT_URL_VISITS_ERROR = 'shlink/shortUrlVisits/GET_SHORT_URL_VISITS_E
const GET_SHORT_URL_VISITS = 'shlink/shortUrlVisits/GET_SHORT_URL_VISITS';
const initialState = {
shortUrl: {},
visits: [],
loading: false,
error: false
@ -25,6 +26,7 @@ export default function dispatch (state = initialState, action) {
};
case GET_SHORT_URL_VISITS:
return {
shortUrl: action.shortUrl,
visits: action.visits,
loading: false,
error: false
@ -34,13 +36,13 @@ export default function dispatch (state = initialState, action) {
}
}
export const getShortUrlVisits = (shortCode, dates) => async dispatch => {
export const getShortUrlVisits = (shortCode, dates) => dispatch => {
dispatch({ type: GET_SHORT_URL_VISITS_START });
try {
const visits = await ShlinkApiClient.getShortUrlVisits(shortCode, dates);
dispatch({ visits, type: GET_SHORT_URL_VISITS });
} catch (e) {
dispatch({ type: GET_SHORT_URL_VISITS_ERROR });
}
Promise.all([
ShlinkApiClient.getShortUrlVisits(shortCode, dates),
ShlinkApiClient.getShortUrl(shortCode)
])
.then(([visits, shortUrl]) => dispatch({ visits, shortUrl, type: GET_SHORT_URL_VISITS }))
.catch(() => dispatch({ type: GET_SHORT_URL_VISITS_ERROR }));
};