2022-12-22 20:39:09 +03:00
|
|
|
import { FC, useEffect, useRef } from 'react';
|
2020-08-30 10:59:14 +03:00
|
|
|
import { ExternalLink } from 'react-external-link';
|
2022-05-28 12:16:59 +03:00
|
|
|
import { ColorGenerator } from '../../utils/services/ColorGenerator';
|
2022-05-29 13:18:21 +03:00
|
|
|
import { TimeoutToggle } from '../../utils/helpers/hooks';
|
2020-08-30 10:59:14 +03:00
|
|
|
import { SelectedServer } from '../../servers/data';
|
2021-01-24 19:37:31 +03:00
|
|
|
import { CopyToClipboardIcon } from '../../utils/CopyToClipboardIcon';
|
2020-08-30 10:59:14 +03:00
|
|
|
import { ShortUrl } from '../data';
|
2022-10-23 11:49:35 +03:00
|
|
|
import { Time } from '../../utils/dates/Time';
|
2022-12-22 20:39:09 +03:00
|
|
|
import { Settings } from '../../settings/reducers/settings';
|
2022-05-28 12:16:59 +03:00
|
|
|
import { ShortUrlVisitsCount } from './ShortUrlVisitsCount';
|
2022-12-18 15:17:49 +03:00
|
|
|
import { ShortUrlsRowMenuType } from './ShortUrlsRowMenu';
|
|
|
|
import { Tags } from './Tags';
|
2022-12-18 21:26:30 +03:00
|
|
|
import { ShortUrlStatus } from './ShortUrlStatus';
|
2022-12-23 22:00:59 +03:00
|
|
|
import { useShortUrlsQuery } from './hooks';
|
2020-08-30 10:59:14 +03:00
|
|
|
import './ShortUrlsRow.scss';
|
|
|
|
|
2022-12-18 12:12:34 +03:00
|
|
|
interface ShortUrlsRowProps {
|
2020-12-20 11:09:22 +03:00
|
|
|
onTagClick?: (tag: string) => void;
|
2020-08-30 10:59:14 +03:00
|
|
|
selectedServer: SelectedServer;
|
|
|
|
shortUrl: ShortUrl;
|
|
|
|
}
|
|
|
|
|
2022-12-22 20:39:09 +03:00
|
|
|
interface ShortUrlsRowConnectProps extends ShortUrlsRowProps {
|
|
|
|
settings: Settings;
|
|
|
|
}
|
|
|
|
|
|
|
|
export type ShortUrlsRowType = FC<ShortUrlsRowProps>;
|
|
|
|
|
2022-05-28 12:16:59 +03:00
|
|
|
export const ShortUrlsRow = (
|
2022-12-18 15:17:49 +03:00
|
|
|
ShortUrlsRowMenu: ShortUrlsRowMenuType,
|
2020-08-30 10:59:14 +03:00
|
|
|
colorGenerator: ColorGenerator,
|
2022-05-29 13:18:21 +03:00
|
|
|
useTimeoutToggle: TimeoutToggle,
|
2022-12-22 20:39:09 +03:00
|
|
|
) => ({ shortUrl, selectedServer, onTagClick, settings }: ShortUrlsRowConnectProps) => {
|
2022-05-29 13:18:21 +03:00
|
|
|
const [copiedToClipboard, setCopiedToClipboard] = useTimeoutToggle();
|
|
|
|
const [active, setActive] = useTimeoutToggle(false, 500);
|
2020-08-30 10:59:14 +03:00
|
|
|
const isFirstRun = useRef(true);
|
2022-12-23 22:00:59 +03:00
|
|
|
const [{ excludeBots }] = useShortUrlsQuery();
|
2022-12-22 20:39:09 +03:00
|
|
|
const { visits } = settings;
|
2022-12-23 22:00:59 +03:00
|
|
|
const doExcludeBots = excludeBots ?? visits?.excludeBots;
|
2020-08-30 10:59:14 +03:00
|
|
|
|
|
|
|
useEffect(() => {
|
2022-11-25 20:34:21 +03:00
|
|
|
!isFirstRun.current && setActive();
|
|
|
|
isFirstRun.current = false;
|
2022-12-22 20:39:09 +03:00
|
|
|
}, [shortUrl.visitsSummary?.total, shortUrl.visitsSummary?.nonBots, shortUrl.visitsCount]);
|
2020-08-30 10:59:14 +03:00
|
|
|
|
|
|
|
return (
|
2021-08-22 11:46:47 +03:00
|
|
|
<tr className="responsive-table__row">
|
|
|
|
<td className="indivisible short-urls-row__cell responsive-table__cell" data-th="Created at">
|
2021-06-24 21:13:06 +03:00
|
|
|
<Time date={shortUrl.dateCreated} />
|
2020-08-30 10:59:14 +03:00
|
|
|
</td>
|
2021-08-22 11:46:47 +03:00
|
|
|
<td className="responsive-table__cell short-urls-row__cell" data-th="Short URL">
|
2022-12-18 15:17:49 +03:00
|
|
|
<span className="position-relative short-urls-row__cell--indivisible">
|
2022-11-25 20:34:21 +03:00
|
|
|
<span className="short-urls-row__short-url-wrapper">
|
|
|
|
<ExternalLink href={shortUrl.shortUrl} />
|
|
|
|
</span>
|
2021-01-24 19:37:31 +03:00
|
|
|
<CopyToClipboardIcon text={shortUrl.shortUrl} onCopy={setCopiedToClipboard} />
|
2022-03-06 12:58:30 +03:00
|
|
|
<span className="badge bg-warning text-black short-urls-row__copy-hint" hidden={!copiedToClipboard}>
|
2020-08-30 10:59:14 +03:00
|
|
|
Copied short URL!
|
|
|
|
</span>
|
|
|
|
</span>
|
|
|
|
</td>
|
2022-11-25 20:34:21 +03:00
|
|
|
<td
|
|
|
|
className="responsive-table__cell short-urls-row__cell short-urls-row__cell--break"
|
|
|
|
data-th={`${shortUrl.title ? 'Title' : 'Long URL'}`}
|
|
|
|
>
|
2021-03-05 16:20:49 +03:00
|
|
|
<ExternalLink href={shortUrl.longUrl}>{shortUrl.title ?? shortUrl.longUrl}</ExternalLink>
|
2020-08-30 10:59:14 +03:00
|
|
|
</td>
|
2021-03-05 16:20:49 +03:00
|
|
|
{shortUrl.title && (
|
2021-08-22 11:46:47 +03:00
|
|
|
<td className="short-urls-row__cell responsive-table__cell short-urls-row__cell--break d-lg-none" data-th="Long URL">
|
2021-03-05 16:20:49 +03:00
|
|
|
<ExternalLink href={shortUrl.longUrl} />
|
|
|
|
</td>
|
|
|
|
)}
|
2022-12-18 15:17:49 +03:00
|
|
|
<td className="responsive-table__cell short-urls-row__cell" data-th="Tags">
|
2022-12-18 15:29:39 +03:00
|
|
|
<Tags tags={shortUrl.tags} colorGenerator={colorGenerator} onTagClick={onTagClick} />
|
2022-12-18 15:17:49 +03:00
|
|
|
</td>
|
2022-03-05 18:08:30 +03:00
|
|
|
<td className="responsive-table__cell short-urls-row__cell text-lg-end" data-th="Visits">
|
2020-08-30 10:59:14 +03:00
|
|
|
<ShortUrlVisitsCount
|
2022-12-22 20:39:09 +03:00
|
|
|
visitsCount={(
|
2022-12-23 22:00:59 +03:00
|
|
|
doExcludeBots ? shortUrl.visitsSummary?.nonBots : shortUrl.visitsSummary?.total
|
2022-12-22 20:39:09 +03:00
|
|
|
) ?? shortUrl.visitsCount}
|
2020-08-30 10:59:14 +03:00
|
|
|
shortUrl={shortUrl}
|
|
|
|
selectedServer={selectedServer}
|
|
|
|
active={active}
|
|
|
|
/>
|
|
|
|
</td>
|
2022-12-19 21:40:04 +03:00
|
|
|
<td className="responsive-table__cell short-urls-row__cell" data-th="Status">
|
|
|
|
<ShortUrlStatus shortUrl={shortUrl} />
|
|
|
|
</td>
|
2021-08-22 11:46:47 +03:00
|
|
|
<td className="responsive-table__cell short-urls-row__cell">
|
2020-08-30 10:59:14 +03:00
|
|
|
<ShortUrlsRowMenu selectedServer={selectedServer} shortUrl={shortUrl} />
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
);
|
|
|
|
};
|