2020-05-10 20:37:00 +03:00
|
|
|
import { UncontrolledTooltip } from 'reactstrap';
|
|
|
|
import { ExternalLink } from 'react-external-link';
|
2021-03-05 18:04:02 +03:00
|
|
|
import { ShortUrlDetail } from '../short-urls/reducers/shortUrlDetail';
|
2022-10-23 11:49:35 +03:00
|
|
|
import { Time } from '../utils/dates/Time';
|
2020-09-04 20:33:16 +03:00
|
|
|
import { ShortUrlVisits } from './reducers/shortUrlVisits';
|
2022-05-28 12:16:59 +03:00
|
|
|
import { VisitsHeader } from './VisitsHeader';
|
2020-05-10 20:37:00 +03:00
|
|
|
import './ShortUrlVisitsHeader.scss';
|
|
|
|
|
2020-09-04 20:33:16 +03:00
|
|
|
interface ShortUrlVisitsHeaderProps {
|
|
|
|
shortUrlDetail: ShortUrlDetail;
|
|
|
|
shortUrlVisits: ShortUrlVisits;
|
|
|
|
goBack: () => void;
|
|
|
|
}
|
2020-05-10 20:37:00 +03:00
|
|
|
|
2022-05-28 12:16:59 +03:00
|
|
|
export const ShortUrlVisitsHeader = ({ shortUrlDetail, shortUrlVisits, goBack }: ShortUrlVisitsHeaderProps) => {
|
2020-05-10 20:37:00 +03:00
|
|
|
const { shortUrl, loading } = shortUrlDetail;
|
|
|
|
const { visits } = shortUrlVisits;
|
2020-09-04 20:33:16 +03:00
|
|
|
const shortLink = shortUrl?.shortUrl ?? '';
|
|
|
|
const longLink = shortUrl?.longUrl ?? '';
|
2021-03-05 17:44:15 +03:00
|
|
|
const title = shortUrl?.title;
|
2020-05-10 20:37:00 +03:00
|
|
|
|
2022-03-26 14:17:42 +03:00
|
|
|
const renderDate = () => (!shortUrl ? <small>Loading...</small> : (
|
2020-05-10 20:37:00 +03:00
|
|
|
<span>
|
|
|
|
<b id="created" className="short-url-visits-header__created-at">
|
2021-06-24 21:13:06 +03:00
|
|
|
<Time date={shortUrl.dateCreated} relative />
|
2020-05-10 20:37:00 +03:00
|
|
|
</b>
|
|
|
|
<UncontrolledTooltip placement="bottom" target="created">
|
2021-06-24 21:13:06 +03:00
|
|
|
<Time date={shortUrl.dateCreated} />
|
2020-05-10 20:37:00 +03:00
|
|
|
</UncontrolledTooltip>
|
|
|
|
</span>
|
2022-03-26 14:17:42 +03:00
|
|
|
));
|
2021-06-24 21:13:06 +03:00
|
|
|
const visitsStatsTitle = <>Visits for <ExternalLink href={shortLink} /></>;
|
2020-05-10 20:37:00 +03:00
|
|
|
|
|
|
|
return (
|
|
|
|
<VisitsHeader title={visitsStatsTitle} goBack={goBack} visits={visits} shortUrl={shortUrl}>
|
|
|
|
<hr />
|
|
|
|
<div>Created: {renderDate()}</div>
|
2022-06-11 09:53:48 +03:00
|
|
|
<div className="long-url-container">
|
2021-03-05 17:44:15 +03:00
|
|
|
{`${title ? 'Title' : 'Long URL'}: `}
|
2020-05-10 20:37:00 +03:00
|
|
|
{loading && <small>Loading...</small>}
|
2021-03-05 17:44:15 +03:00
|
|
|
{!loading && <ExternalLink href={longLink}>{title ?? longLink}</ExternalLink>}
|
2020-05-10 20:37:00 +03:00
|
|
|
</div>
|
|
|
|
</VisitsHeader>
|
|
|
|
);
|
2020-05-10 20:49:58 +03:00
|
|
|
};
|