2020-11-14 00:44:26 +03:00
|
|
|
import { FC, useEffect, useRef } from 'react';
|
2021-06-24 21:13:06 +03:00
|
|
|
import { isEmpty } from 'ramda';
|
2020-08-30 10:59:14 +03:00
|
|
|
import { ExternalLink } from 'react-external-link';
|
|
|
|
import ColorGenerator from '../../utils/services/ColorGenerator';
|
|
|
|
import { StateFlagTimeout } from '../../utils/helpers/hooks';
|
|
|
|
import Tag from '../../tags/helpers/Tag';
|
|
|
|
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';
|
2021-06-24 21:13:06 +03:00
|
|
|
import { Time } from '../../utils/Time';
|
2020-08-30 10:59:14 +03:00
|
|
|
import ShortUrlVisitsCount from './ShortUrlVisitsCount';
|
|
|
|
import { ShortUrlsRowMenuProps } from './ShortUrlsRowMenu';
|
|
|
|
import './ShortUrlsRow.scss';
|
|
|
|
|
|
|
|
export 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;
|
|
|
|
}
|
|
|
|
|
|
|
|
const ShortUrlsRow = (
|
|
|
|
ShortUrlsRowMenu: FC<ShortUrlsRowMenuProps>,
|
|
|
|
colorGenerator: ColorGenerator,
|
|
|
|
useStateFlagTimeout: StateFlagTimeout,
|
2020-12-20 11:09:22 +03:00
|
|
|
) => ({ shortUrl, selectedServer, onTagClick }: ShortUrlsRowProps) => {
|
2022-03-26 14:17:42 +03:00
|
|
|
const [copiedToClipboard, setCopiedToClipboard] = useStateFlagTimeout();
|
|
|
|
const [active, setActive] = useStateFlagTimeout(false, 500);
|
2020-08-30 10:59:14 +03:00
|
|
|
const isFirstRun = useRef(true);
|
|
|
|
|
|
|
|
const renderTags = (tags: string[]) => {
|
|
|
|
if (isEmpty(tags)) {
|
|
|
|
return <i className="indivisible"><small>No tags</small></i>;
|
|
|
|
}
|
|
|
|
|
|
|
|
return tags.map((tag) => (
|
|
|
|
<Tag
|
|
|
|
colorGenerator={colorGenerator}
|
|
|
|
key={tag}
|
|
|
|
text={tag}
|
2020-12-20 11:09:22 +03:00
|
|
|
onClick={() => onTagClick?.(tag)}
|
2020-08-30 10:59:14 +03:00
|
|
|
/>
|
|
|
|
));
|
|
|
|
};
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
if (isFirstRun.current) {
|
|
|
|
isFirstRun.current = false;
|
|
|
|
} else {
|
|
|
|
setActive();
|
|
|
|
}
|
2022-03-26 14:17:42 +03:00
|
|
|
}, [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">
|
2020-08-30 10:59:14 +03:00
|
|
|
<span className="indivisible short-urls-row__cell--relative">
|
|
|
|
<ExternalLink href={shortUrl.shortUrl} />
|
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>
|
2021-08-22 11:46:47 +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>
|
|
|
|
)}
|
2021-08-22 11:46:47 +03:00
|
|
|
<td className="responsive-table__cell short-urls-row__cell" data-th="Tags">{renderTags(shortUrl.tags)}</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
|
|
|
|
visitsCount={shortUrl.visitsCount}
|
|
|
|
shortUrl={shortUrl}
|
|
|
|
selectedServer={selectedServer}
|
|
|
|
active={active}
|
|
|
|
/>
|
|
|
|
</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>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default ShortUrlsRow;
|