import preloader from '@fortawesome/fontawesome-free-solid/faCircleNotch'; import FontAwesomeIcon from '@fortawesome/react-fontawesome'; import { isEmpty, mapObjIndexed, pick } from 'ramda'; import React from 'react'; import { connect } from 'react-redux'; import { Card } from 'reactstrap'; import PropTypes from 'prop-types'; import DateInput from '../common/DateInput'; import MutedMessage from '../utils/MuttedMessage'; import { getShortUrlVisits, shortUrlVisitsType } from './reducers/shortUrlVisits'; import { processBrowserStats, processCountriesStats, processOsStats, processReferrersStats, } from './services/VisitsParser'; import { VisitsHeader } from './VisitsHeader'; import { GraphCard } from './GraphCard'; import { getShortUrlDetail, shortUrlDetailType } from './reducers/shortUrlDetail'; import './ShortUrlVisits.scss'; export class ShortUrlsVisitsComponent extends React.Component { static propTypes = { processOsStats: PropTypes.func, processBrowserStats: PropTypes.func, processCountriesStats: PropTypes.func, processReferrersStats: PropTypes.func, match: PropTypes.shape({ params: PropTypes.object, }), getShortUrlVisits: PropTypes.func, shortUrlVisits: shortUrlVisitsType, getShortUrlDetail: PropTypes.func, shortUrlDetail: shortUrlDetailType, }; static defaultProps = { processOsStats, processBrowserStats, processCountriesStats, processReferrersStats, }; state = { startDate: undefined, endDate: undefined }; loadVisits = () => { const { match: { params }, getShortUrlVisits } = this.props; getShortUrlVisits(params.shortCode, mapObjIndexed( (value) => value && value.format ? value.format('YYYY-MM-DD') : value, this.state )); }; componentDidMount() { const { match: { params }, getShortUrlDetail } = this.props; this.loadVisits(); getShortUrlDetail(params.shortCode); } render() { const { processOsStats, processBrowserStats, processCountriesStats, processReferrersStats, shortUrlVisits, shortUrlDetail, } = this.props; const renderVisitsContent = () => { const { visits, loading, error } = shortUrlVisits; if (loading) { return Loading...; } if (error) { return ( An error occurred while loading visits :( ); } if (isEmpty(visits)) { return There are no visits matching current filter :(; } return (
); }; return (
this.setState({ startDate: date }, () => this.loadVisits())} />
this.setState({ endDate: date }, () => this.loadVisits())} />
{renderVisitsContent()}
); } } const ShortUrlsVisits = connect( pick([ 'shortUrlVisits', 'shortUrlDetail' ]), { getShortUrlVisits, getShortUrlDetail } )(ShortUrlsVisitsComponent); export default ShortUrlsVisits;