diff --git a/src/short-urls/helpers/ShortUrlVisitsCount.js b/src/short-urls/helpers/ShortUrlVisitsCount.js index b058868d..e33ae1c0 100644 --- a/src/short-urls/helpers/ShortUrlVisitsCount.js +++ b/src/short-urls/helpers/ShortUrlVisitsCount.js @@ -1,10 +1,11 @@ -import React from 'react'; +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'; @@ -23,7 +24,7 @@ const ShortUrlVisitsCount = ({ visitsCount, shortUrl, selectedServer, active = f - {visitsCount} + {prettify(visitsCount)} ); @@ -32,19 +33,27 @@ const ShortUrlVisitsCount = ({ visitsCount, shortUrl, selectedServer, active = f return visitsLink; } + const prettifiedMaxVisits = prettify(maxVisits); + const tooltipRef = useRef(); + return ( {visitsLink} - - {' '}/ {maxVisits}{' '} + { + tooltipRef.current = el; + }} + > + {' '}/ {prettifiedMaxVisits}{' '} - - This short URL will not accept more than {maxVisits} visits. + tooltipRef.current} placement="bottom"> + This short URL will not accept more than {prettifiedMaxVisits} visits. );