mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 01:20:24 +03:00
Ensured proper amount of visits is displayed on short URLs based on config
This commit is contained in:
parent
2859ba6cd2
commit
5942cd6fcf
3 changed files with 34 additions and 12 deletions
|
@ -1,4 +1,4 @@
|
|||
import { useEffect, useRef } from 'react';
|
||||
import { FC, useEffect, useRef } from 'react';
|
||||
import { ExternalLink } from 'react-external-link';
|
||||
import { ColorGenerator } from '../../utils/services/ColorGenerator';
|
||||
import { TimeoutToggle } from '../../utils/helpers/hooks';
|
||||
|
@ -6,6 +6,7 @@ import { SelectedServer } from '../../servers/data';
|
|||
import { CopyToClipboardIcon } from '../../utils/CopyToClipboardIcon';
|
||||
import { ShortUrl } from '../data';
|
||||
import { Time } from '../../utils/dates/Time';
|
||||
import { Settings } from '../../settings/reducers/settings';
|
||||
import { ShortUrlVisitsCount } from './ShortUrlVisitsCount';
|
||||
import { ShortUrlsRowMenuType } from './ShortUrlsRowMenu';
|
||||
import { Tags } from './Tags';
|
||||
|
@ -18,19 +19,26 @@ interface ShortUrlsRowProps {
|
|||
shortUrl: ShortUrl;
|
||||
}
|
||||
|
||||
interface ShortUrlsRowConnectProps extends ShortUrlsRowProps {
|
||||
settings: Settings;
|
||||
}
|
||||
|
||||
export type ShortUrlsRowType = FC<ShortUrlsRowProps>;
|
||||
|
||||
export const ShortUrlsRow = (
|
||||
ShortUrlsRowMenu: ShortUrlsRowMenuType,
|
||||
colorGenerator: ColorGenerator,
|
||||
useTimeoutToggle: TimeoutToggle,
|
||||
) => ({ shortUrl, selectedServer, onTagClick }: ShortUrlsRowProps) => {
|
||||
) => ({ shortUrl, selectedServer, onTagClick, settings }: ShortUrlsRowConnectProps) => {
|
||||
const [copiedToClipboard, setCopiedToClipboard] = useTimeoutToggle();
|
||||
const [active, setActive] = useTimeoutToggle(false, 500);
|
||||
const isFirstRun = useRef(true);
|
||||
const { visits } = settings;
|
||||
|
||||
useEffect(() => {
|
||||
!isFirstRun.current && setActive();
|
||||
isFirstRun.current = false;
|
||||
}, [shortUrl.visitsCount]);
|
||||
}, [shortUrl.visitsSummary?.total, shortUrl.visitsSummary?.nonBots, shortUrl.visitsCount]);
|
||||
|
||||
return (
|
||||
<tr className="responsive-table__row">
|
||||
|
@ -64,7 +72,9 @@ export const ShortUrlsRow = (
|
|||
</td>
|
||||
<td className="responsive-table__cell short-urls-row__cell text-lg-end" data-th="Visits">
|
||||
<ShortUrlVisitsCount
|
||||
visitsCount={shortUrl.visitsSummary?.total ?? shortUrl.visitsCount}
|
||||
visitsCount={(
|
||||
visits?.excludeBots ? shortUrl.visitsSummary?.nonBots : shortUrl.visitsSummary?.total
|
||||
) ?? shortUrl.visitsCount}
|
||||
shortUrl={shortUrl}
|
||||
selectedServer={selectedServer}
|
||||
active={active}
|
||||
|
@ -79,5 +89,3 @@ export const ShortUrlsRow = (
|
|||
</tr>
|
||||
);
|
||||
};
|
||||
|
||||
export type ShortUrlsRowType = ReturnType<typeof ShortUrlsRow>;
|
||||
|
|
|
@ -28,7 +28,10 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
|
|||
));
|
||||
|
||||
bottle.serviceFactory('ShortUrlsTable', ShortUrlsTable, 'ShortUrlsRow');
|
||||
|
||||
bottle.serviceFactory('ShortUrlsRow', ShortUrlsRow, 'ShortUrlsRowMenu', 'ColorGenerator', 'useTimeoutToggle');
|
||||
bottle.decorator('ShortUrlsRow', connect(['settings']));
|
||||
|
||||
bottle.serviceFactory('ShortUrlsRowMenu', ShortUrlsRowMenu, 'DeleteShortUrlModal', 'QrCodeModal');
|
||||
bottle.serviceFactory('CreateShortUrlResult', CreateShortUrlResult, 'useTimeoutToggle');
|
||||
bottle.serviceFactory('ShortUrlForm', ShortUrlForm, 'TagsSelector', 'DomainSelector');
|
||||
|
|
|
@ -5,12 +5,20 @@ import { addDays, formatISO, subDays } from 'date-fns';
|
|||
import { ShortUrlsRow as createShortUrlsRow } from '../../../src/short-urls/helpers/ShortUrlsRow';
|
||||
import { TimeoutToggle } from '../../../src/utils/helpers/hooks';
|
||||
import { ShortUrl, ShortUrlMeta } from '../../../src/short-urls/data';
|
||||
import { Settings } from '../../../src/settings/reducers/settings';
|
||||
import { ReachableServer } from '../../../src/servers/data';
|
||||
import { parseDate, now } from '../../../src/utils/helpers/date';
|
||||
import { renderWithEvents } from '../../__helpers__/setUpTest';
|
||||
import { OptionalString } from '../../../src/utils/utils';
|
||||
import { colorGeneratorMock } from '../../utils/services/__mocks__/ColorGenerator.mock';
|
||||
|
||||
interface SetUpOptions {
|
||||
title?: OptionalString;
|
||||
tags?: string[];
|
||||
meta?: ShortUrlMeta;
|
||||
settings?: Partial<Settings>;
|
||||
}
|
||||
|
||||
describe('<ShortUrlsRow />', () => {
|
||||
const timeoutToggle = jest.fn(() => true);
|
||||
const useTimeoutToggle = jest.fn(() => [false, timeoutToggle]) as TimeoutToggle;
|
||||
|
@ -35,15 +43,14 @@ describe('<ShortUrlsRow />', () => {
|
|||
},
|
||||
};
|
||||
const ShortUrlsRow = createShortUrlsRow(() => <span>ShortUrlsRowMenu</span>, colorGeneratorMock, useTimeoutToggle);
|
||||
const setUp = (
|
||||
{ title, tags = [], meta = {} }: { title?: OptionalString; tags?: string[]; meta?: ShortUrlMeta } = {},
|
||||
) => renderWithEvents(
|
||||
const setUp = ({ title, tags = [], meta = {}, settings = {} }: SetUpOptions = {}) => renderWithEvents(
|
||||
<table>
|
||||
<tbody>
|
||||
<ShortUrlsRow
|
||||
selectedServer={server}
|
||||
shortUrl={{ ...shortUrl, title, tags, meta: { ...shortUrl.meta, ...meta } }}
|
||||
onTagClick={() => null}
|
||||
settings={Mock.of<Settings>(settings)}
|
||||
/>
|
||||
</tbody>
|
||||
</table>,
|
||||
|
@ -97,9 +104,13 @@ describe('<ShortUrlsRow />', () => {
|
|||
expectedContents.forEach((content) => expect(cell).toHaveTextContent(content));
|
||||
});
|
||||
|
||||
it('renders visits count in fifth row', () => {
|
||||
setUp();
|
||||
expect(screen.getAllByRole('cell')[4]).toHaveTextContent(`${shortUrl.visitsCount}`);
|
||||
it.each([
|
||||
[{}, shortUrl.visitsSummary?.total],
|
||||
[Mock.of<Settings>({ visits: { excludeBots: false } }), shortUrl.visitsSummary?.total],
|
||||
[Mock.of<Settings>({ visits: { excludeBots: true } }), shortUrl.visitsSummary?.nonBots],
|
||||
])('renders visits count in fifth row', (settings, expectedAmount) => {
|
||||
setUp({ settings });
|
||||
expect(screen.getAllByRole('cell')[4]).toHaveTextContent(`${expectedAmount}`);
|
||||
});
|
||||
|
||||
it('updates state when copied to clipboard', async () => {
|
||||
|
|
Loading…
Reference in a new issue