import { UncontrolledTooltip } from 'reactstrap'; import Moment from 'react-moment'; import { ExternalLink } from 'react-external-link'; import { ShortUrlDetail } from '../short-urls/reducers/shortUrlDetail'; import { ShortUrlVisits } from './reducers/shortUrlVisits'; import VisitsHeader from './VisitsHeader'; import './ShortUrlVisitsHeader.scss'; interface ShortUrlVisitsHeaderProps { shortUrlDetail: ShortUrlDetail; shortUrlVisits: ShortUrlVisits; goBack: () => void; } const ShortUrlVisitsHeader = ({ shortUrlDetail, shortUrlVisits, goBack }: ShortUrlVisitsHeaderProps) => { const { shortUrl, loading } = shortUrlDetail; const { visits } = shortUrlVisits; const shortLink = shortUrl?.shortUrl ?? ''; const longLink = shortUrl?.longUrl ?? ''; const title = shortUrl?.title; const renderDate = () => !shortUrl ? Loading... : ( {shortUrl.dateCreated} {shortUrl.dateCreated} ); const visitsStatsTitle = ( <> Visits for > ); return ( Created: {renderDate()} {`${title ? 'Title' : 'Long URL'}: `} {loading && Loading...} {!loading && {title ?? longLink}} ); }; export default ShortUrlVisitsHeader;