mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 01:20:24 +03:00
Ensured regular data for a short URL is loaded if defined
This commit is contained in:
parent
13004f6d57
commit
0f34d473b9
3 changed files with 59 additions and 16 deletions
|
@ -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();
|
||||
|
|
|
@ -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">
|
||||
<header>
|
||||
<Card className="bg-light">
|
||||
<CardBody>
|
||||
<h2>Visit stats for <a target="_blank" href={shortUrl}>{shortUrl}</a></h2>
|
||||
<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:
|
||||
|
||||
{loading && <small>Loading...</small>}
|
||||
{!loading && renderCreated()}
|
||||
</div>}
|
||||
<div>
|
||||
Original URL:
|
||||
|
||||
{loading && <small>Loading...</small>}
|
||||
{!loading && <a target="_blank" href={shortUrl.longUrl}>{shortUrl.longUrl}</a>}
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</header>
|
||||
|
||||
<section>
|
||||
{renderContent()}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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 }));
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue