forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-04-11 17:16:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added extra info and new label to highlight disabled short URLs

Browse Source
This commit is contained in:
Alejandro Celaya
2022-12-18 13:17:49 +01:00
parent 90837546ab
commit 187fee46f4
10 changed files with 117 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/short-urls/helpers/ShortUrlsRow.tsx
View File

@@ -1,15 +1,16 @@
import { FC, useEffect, useRef } from 'react';
import { isEmpty } from 'ramda';
import { useEffect, useRef } from 'react';
import { ExternalLink } from 'react-external-link';
import { ColorGenerator } from '../../utils/services/ColorGenerator';
import { TimeoutToggle } from '../../utils/helpers/hooks';
import { Tag } from '../../tags/helpers/Tag';
import { SelectedServer } from '../../servers/data';
import { CopyToClipboardIcon } from '../../utils/CopyToClipboardIcon';
import { ShortUrl } from '../data';
import { Time } from '../../utils/dates/Time';
import { ShortUrlVisitsCount } from './ShortUrlVisitsCount';
import { ShortUrlsRowMenuProps } from './ShortUrlsRowMenu';
import { ShortUrlsRowMenuType } from './ShortUrlsRowMenu';
import { Tags } from './Tags';
import { shortUrlIsDisabled } from './index';
import { DisabledLabel } from './DisabledLabel';
import './ShortUrlsRow.scss';
interface ShortUrlsRowProps {
@@ -19,28 +20,14 @@ interface ShortUrlsRowProps {
}
export const ShortUrlsRow = (
ShortUrlsRowMenu: FC<ShortUrlsRowMenuProps>,
ShortUrlsRowMenu: ShortUrlsRowMenuType,
colorGenerator: ColorGenerator,
useTimeoutToggle: TimeoutToggle,
) => ({ shortUrl, selectedServer, onTagClick }: ShortUrlsRowProps) => {
const [copiedToClipboard, setCopiedToClipboard] = useTimeoutToggle();
const [active, setActive] = useTimeoutToggle(false, 500);
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}
onClick={() => onTagClick?.(tag)}
/>
));
};
const isDisabled = shortUrlIsDisabled(shortUrl);
useEffect(() => {
!isFirstRun.current && setActive();
@@ -53,7 +40,7 @@ export const ShortUrlsRow = (
<Time date={shortUrl.dateCreated} />
</td>
<td className="responsive-table__cell short-urls-row__cell" data-th="Short URL">
<span className="short-urls-row__cell--relative short-urls-row__cell--indivisible">
<span className="position-relative short-urls-row__cell--indivisible">
<span className="short-urls-row__short-url-wrapper">
<ExternalLink href={shortUrl.shortUrl} />
</span>
@@ -67,6 +54,11 @@ export const ShortUrlsRow = (
className="responsive-table__cell short-urls-row__cell short-urls-row__cell--break"
data-th={`${shortUrl.title ? 'Title' : 'Long URL'}`}
>
{isDisabled && (
<div className="float-end ms-2">
<DisabledLabel />
</div>
)}
<ExternalLink href={shortUrl.longUrl}>{shortUrl.title ?? shortUrl.longUrl}</ExternalLink>
</td>
{shortUrl.title && (
@@ -74,7 +66,9 @@ export const ShortUrlsRow = (
<ExternalLink href={shortUrl.longUrl} />
</td>
)}
<td className="responsive-table__cell short-urls-row__cell" data-th="Tags">{renderTags(shortUrl.tags)}</td>
<td className="responsive-table__cell short-urls-row__cell" data-th="Tags">
<Tags tags={shortUrl.tags} colorGenerator={colorGenerator} onTagClick={onTagClick} disabled={isDisabled} />
</td>
<td className="responsive-table__cell short-urls-row__cell text-lg-end" data-th="Visits">
<ShortUrlVisitsCount
visitsCount={shortUrl.visitsCount}