diff --git a/src/short-urls/ShortUrls.tsx b/src/short-urls/ShortUrls.tsx index d6dea6bc..13814837 100644 --- a/src/short-urls/ShortUrls.tsx +++ b/src/short-urls/ShortUrls.tsx @@ -1,12 +1,9 @@ import { FC, useEffect, useState } from 'react'; -import { Card } from 'reactstrap'; -import Paginator from './Paginator'; import { ShortUrlsListProps } from './ShortUrlsList'; const ShortUrls = (SearchBar: FC, ShortUrlsList: FC) => (props: ShortUrlsListProps) => { - const { match, shortUrlsList } = props; + const { match } = props; const { page = '1', serverId = '' } = match?.params ?? {}; - const { pagination } = shortUrlsList?.shortUrls ?? {}; const [ urlsListKey, setUrlsListKey ] = useState(`${serverId}_${page}`); // Using a key on a component makes react to create a new instance every time the key changes @@ -18,10 +15,7 @@ const ShortUrls = (SearchBar: FC, ShortUrlsList: FC) => (pro return ( <>
- - - - + ); }; diff --git a/src/short-urls/ShortUrlsList.tsx b/src/short-urls/ShortUrlsList.tsx index 86397f73..c92ec4c1 100644 --- a/src/short-urls/ShortUrlsList.tsx +++ b/src/short-urls/ShortUrlsList.tsx @@ -3,14 +3,16 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { head, keys, values } from 'ramda'; import { FC, useEffect, useState } from 'react'; import { RouteComponentProps } from 'react-router'; +import { Card } from 'reactstrap'; import SortingDropdown from '../utils/SortingDropdown'; import { determineOrderDir, OrderDir } from '../utils/utils'; -import { SelectedServer } from '../servers/data'; +import { isReachableServer, SelectedServer } from '../servers/data'; import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub'; import { parseQuery } from '../utils/helpers/query'; import { ShortUrlsList as ShortUrlsListState } from './reducers/shortUrlsList'; import { OrderableFields, ShortUrlsListParams, SORTABLE_FIELDS } from './reducers/shortUrlsListParams'; import { ShortUrlsTableProps } from './ShortUrlsTable'; +import Paginator from './Paginator'; import './ShortUrlsList.scss'; interface RouteParams { @@ -40,6 +42,7 @@ const ShortUrlsList = (ShortUrlsTable: FC) => boundToMercur orderField: orderBy && (head(keys(orderBy)) as OrderableFields), orderDir: orderBy && head(values(orderBy)), }); + const { pagination } = shortUrlsList?.shortUrls ?? {}; const refreshList = (extraParams: ShortUrlsListParams) => listShortUrls({ ...shortUrlsListParams, ...extraParams }); const handleOrderBy = (orderField?: OrderableFields, orderDir?: OrderDir) => { setOrder({ orderField, orderDir }); @@ -83,13 +86,16 @@ const ShortUrlsList = (ShortUrlsTable: FC) => boundToMercur onChange={handleOrderBy} /> - refreshList({ tags: [ ...shortUrlsListParams.tags ?? [], tag ] })} - /> + + refreshList({ tags: [ ...shortUrlsListParams.tags ?? [], tag ] })} + /> + + ); }, () => 'https://shlink.io/new-visit'); diff --git a/test/short-urls/ShortUrls.test.tsx b/test/short-urls/ShortUrls.test.tsx index c47ba0ce..f4caed88 100644 --- a/test/short-urls/ShortUrls.test.tsx +++ b/test/short-urls/ShortUrls.test.tsx @@ -1,7 +1,6 @@ import { shallow, ShallowWrapper } from 'enzyme'; import { Mock } from 'ts-mockery'; import shortUrlsCreator from '../../src/short-urls/ShortUrls'; -import Paginator from '../../src/short-urls/Paginator'; import { ShortUrlsListProps } from '../../src/short-urls/ShortUrlsList'; describe('', () => { @@ -18,9 +17,8 @@ describe('', () => { }); afterEach(() => wrapper.unmount()); - it('wraps a SearchBar, ShortUrlsList as Paginator', () => { + it('wraps a SearchBar and ShortUrlsList', () => { expect(wrapper.find(SearchBar)).toHaveLength(1); expect(wrapper.find(ShortUrlsList)).toHaveLength(1); - expect(wrapper.find(Paginator)).toHaveLength(1); }); });