shlinkio / shlink-web-client

import React, { useRef } from 'react';

import PropTypes from 'prop-types';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';

import { UncontrolledTooltip } from 'reactstrap';

import classNames from 'classnames';

import { serverType } from '../../servers/prop-types';

import { prettify } from '../../utils/helpers/numbers';

import { shortUrlType } from '../reducers/shortUrlsList';

import VisitStatsLink from './VisitStatsLink';

import './ShortUrlVisitsCount.scss';

const propTypes = {

  visitsCount: PropTypes.number.isRequired,

  shortUrl: shortUrlType,

  selectedServer: serverType,

  active: PropTypes.bool,

};

const ShortUrlVisitsCount = ({ visitsCount, shortUrl, selectedServer, active = false }) => {

  const maxVisits = shortUrl && shortUrl.meta && shortUrl.meta.maxVisits;

  const visitsLink = (

    <VisitStatsLink selectedServer={selectedServer} shortUrl={shortUrl}>

      <strong

        className={classNames('short-url-visits-count__amount', { 'short-url-visits-count__amount--big': active })}

      >

        {prettify(visitsCount)}

      </strong>

    </VisitStatsLink>

  );

  if (!maxVisits) {

    return visitsLink;

  }

  const prettifiedMaxVisits = prettify(maxVisits);

  const tooltipRef = useRef();

  return (

    <React.Fragment>

      <span className="indivisible">

        {visitsLink}

        <small

          className="short-urls-visits-count__max-visits-control"

          ref={(el) => {

            tooltipRef.current = el;

          }}

        >

          {' '}/ {prettifiedMaxVisits}{' '}

          <sup>

            <FontAwesomeIcon icon={infoIcon} />

          </sup>

        </small>

      </span>

      <UncontrolledTooltip target={() => tooltipRef.current} placement="bottom">

        This short URL will not accept more than <b>{prettifiedMaxVisits}</b> visits.

      </UncontrolledTooltip>

    </React.Fragment>

  );

};

ShortUrlVisitsCount.propTypes = propTypes;

export default ShortUrlVisitsCount;