mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-01-09 17:57:26 +03:00
Code Issues Projects Releases Packages Wiki Activity

Simplified onTagClick handling in ShortUrlsTable

Browse source
This commit is contained in:
Alejandro Celaya 2020-12-20 09:09:22 +01:00
parent 23da0328ec
commit fa949cde12
5 changed files with 10 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/servers/Overview.tsx
View file

@ -100,7 +100,7 @@ export const Overview = (
shortUrlsList={shortUrlsList} shortUrlsList={shortUrlsList}
selectedServer={selectedServer} selectedServer={selectedServer}
className="mb-0" 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> </CardBody>
</Card> </Card>

3
src/short-urls/ShortUrlsList.tsx
View file

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

11
src/short-urls/ShortUrlsTable.tsx
View file

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

10
src/short-urls/helpers/ShortUrlsRow.tsx
View file

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

4
test/short-urls/helpers/ShortUrlsRow.test.tsx
View file

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