Simplified onTagClick handling in ShortUrlsTable

src/servers/Overview.tsx

@@ -100,7 +100,7 @@ export const Overview = (
             shortUrlsList={shortUrlsList}
             selectedServer={selectedServer}
             className="mb-0"
-            refreshList={({ tags }) => tags?.[0] && history.push(`/server/${serverId}/list-short-urls/1?tag=${tags[0]}`)}
+            onTagClick={(tag) => history.push(`/server/${serverId}/list-short-urls/1?tag=${tag}`)}
           />
         </CardBody>
       </Card>

src/short-urls/ShortUrlsList.tsx

@@ -87,9 +87,8 @@ const ShortUrlsList = (ShortUrlsTable: FC<ShortUrlsTableProps>) => boundToMercur
         orderByColumn={orderByColumn}
         renderOrderIcon={renderOrderIcon}
         selectedServer={selectedServer}
-        refreshList={refreshList}
-        shortUrlsListParams={shortUrlsListParams}
         shortUrlsList={shortUrlsList}
+        onTagClick={(tag) => refreshList({ tags: [ ...shortUrlsListParams.tags ?? [], tag ] })}
       />
     </>
   );

src/short-urls/ShortUrlsTable.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import { SelectedServer } from '../servers/data';
 import { ShortUrlsList as ShortUrlsListState } from './reducers/shortUrlsList';
 import { ShortUrlsRowProps } from './helpers/ShortUrlsRow';
-import { OrderableFields, ShortUrlsListParams } from './reducers/shortUrlsListParams';
+import { OrderableFields } from './reducers/shortUrlsListParams';
 import './ShortUrlsTable.scss';
 
 export interface ShortUrlsTableProps {
@@ -12,8 +12,7 @@ export interface ShortUrlsTableProps {
   renderOrderIcon?: (column: OrderableFields) => ReactNode;
   shortUrlsList: ShortUrlsListState;
   selectedServer: SelectedServer;
-  refreshList?: (params: ShortUrlsListParams) => void;
-  shortUrlsListParams?: ShortUrlsListParams;
+  onTagClick?: (tag: string) => void;
   className?: string;
 }
 
@@ -21,8 +20,7 @@ export const ShortUrlsTable = (ShortUrlsRow: FC<ShortUrlsRowProps>) => ({
   orderByColumn,
   renderOrderIcon,
   shortUrlsList,
-  refreshList,
-  shortUrlsListParams,
+  onTagClick,
   selectedServer,
   className,
 }: ShortUrlsTableProps) => {
@@ -54,8 +52,7 @@ export const ShortUrlsTable = (ShortUrlsRow: FC<ShortUrlsRowProps>) => ({
         key={shortUrl.shortUrl}
         shortUrl={shortUrl}
         selectedServer={selectedServer}
-        refreshList={refreshList}
-        shortUrlsListParams={shortUrlsListParams}
+        onTagClick={onTagClick}
       />
     ));
   };

src/short-urls/helpers/ShortUrlsRow.tsx

@@ -5,7 +5,6 @@ import { ExternalLink } from 'react-external-link';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCopy as copyIcon } from '@fortawesome/free-regular-svg-icons';
 import CopyToClipboard from 'react-copy-to-clipboard';
-import { ShortUrlsListParams } from '../reducers/shortUrlsListParams';
 import ColorGenerator from '../../utils/services/ColorGenerator';
 import { StateFlagTimeout } from '../../utils/helpers/hooks';
 import Tag from '../../tags/helpers/Tag';
@@ -16,8 +15,7 @@ import { ShortUrlsRowMenuProps } from './ShortUrlsRowMenu';
 import './ShortUrlsRow.scss';
 
 export interface ShortUrlsRowProps {
-  refreshList?: (params: ShortUrlsListParams) => void;
-  shortUrlsListParams?: ShortUrlsListParams;
+  onTagClick?: (tag: string) => void;
   selectedServer: SelectedServer;
   shortUrl: ShortUrl;
 }
@@ -26,7 +24,7 @@ const ShortUrlsRow = (
   ShortUrlsRowMenu: FC<ShortUrlsRowMenuProps>,
   colorGenerator: ColorGenerator,
   useStateFlagTimeout: StateFlagTimeout,
-) => ({ shortUrl, selectedServer, refreshList, shortUrlsListParams }: ShortUrlsRowProps) => {
+) => ({ shortUrl, selectedServer, onTagClick }: ShortUrlsRowProps) => {
   const [ copiedToClipboard, setCopiedToClipboard ] = useStateFlagTimeout();
   const [ active, setActive ] = useStateFlagTimeout(false, 500);
   const isFirstRun = useRef(true);
@@ -36,14 +34,12 @@ const ShortUrlsRow = (
       return <i className="indivisible"><small>No tags</small></i>;
     }
 
-    const selectedTags = shortUrlsListParams?.tags ?? [];
-
     return tags.map((tag) => (
       <Tag
         colorGenerator={colorGenerator}
         key={tag}
         text={tag}
-        onClick={() => refreshList?.({ tags: [ ...selectedTags, tag ] })}
+        onClick={() => onTagClick?.(tag)}
       />
     ));
   };

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

@@ -43,9 +43,7 @@ describe('<ShortUrlsRow />', () => {
   beforeEach(() => {
     const ShortUrlsRow = createShortUrlsRow(ShortUrlsRowMenu, colorGenerator, useStateFlagTimeout);
 
-    wrapper = shallow(
-      <ShortUrlsRow shortUrlsListParams={{}} refreshList={mockFunction} selectedServer={server} shortUrl={shortUrl} />,
-    );
+    wrapper = shallow(<ShortUrlsRow selectedServer={server} shortUrl={shortUrl} onTagClick={mockFunction} />);
   });
   afterEach(() => wrapper.unmount());