Ensured proper amount of visits is displayed on short URLs based on config

src/short-urls/helpers/ShortUrlsRow.tsx

@@ -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>;

src/short-urls/services/provideServices.ts

@@ -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');

test/short-urls/helpers/ShortUrlsRow.test.tsx

@@ -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 = (
+  const setUp = ({ title, tags = [], meta = {}, settings = {} }: SetUpOptions = {}) => renderWithEvents(
-    { title, tags = [], meta = {} }: { title?: OptionalString; tags?: string[]; meta?: ShortUrlMeta } = {},
-  ) => 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', () => {
+  it.each([
-    setUp();
+    [{}, shortUrl.visitsSummary?.total],
-    expect(screen.getAllByRole('cell')[4]).toHaveTextContent(`${shortUrl.visitsCount}`);
+    [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 () => {