mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 17:40:23 +03:00
Code Issues Projects Releases Packages Wiki Activity

Ensured sorting dropdown for short URLs is not enclosed inside card

Browse source
This commit is contained in:
Alejandro Celaya 2020-12-25 11:15:49 +01:00
parent 93b4de60f6
commit e583eb2759
3 changed files with 17 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/short-urls/ShortUrls.tsx
View file

@ -1,12 +1,9 @@
import { FC, useEffect, useState } from 'react'; import { FC, useEffect, useState } from 'react';
import { Card } from 'reactstrap';
import Paginator from './Paginator';
import { ShortUrlsListProps } from './ShortUrlsList'; import { ShortUrlsListProps } from './ShortUrlsList';
const ShortUrls = (SearchBar: FC, ShortUrlsList: FC<ShortUrlsListProps>) => (props: ShortUrlsListProps) => { const ShortUrls = (SearchBar: FC, ShortUrlsList: FC<ShortUrlsListProps>) => (props: ShortUrlsListProps) => {
const { match, shortUrlsList } = props; const { match } = props;
const { page = '1', serverId = '' } = match?.params ?? {}; const { page = '1', serverId = '' } = match?.params ?? {};
const { pagination } = shortUrlsList?.shortUrls ?? {};
const [ urlsListKey, setUrlsListKey ] = useState(`${serverId}_${page}`); const [ urlsListKey, setUrlsListKey ] = useState(`${serverId}_${page}`);
// Using a key on a component makes react to create a new instance every time the key changes // 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<ShortUrlsListProps>) => (pro
return ( return (
<> <>
<div className="form-group"><SearchBar /></div> <div className="form-group"><SearchBar /></div>
<Card body className="pb-1">
<ShortUrlsList {...props} key={urlsListKey} /> <ShortUrlsList {...props} key={urlsListKey} />
<Paginator paginator={pagination} serverId={serverId} />
</Card>
</> </>
); );
}; };

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

@ -3,14 +3,16 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { head, keys, values } from 'ramda'; import { head, keys, values } from 'ramda';
import { FC, useEffect, useState } from 'react'; import { FC, useEffect, useState } from 'react';
import { RouteComponentProps } from 'react-router'; import { RouteComponentProps } from 'react-router';
import { Card } from 'reactstrap';
import SortingDropdown from '../utils/SortingDropdown'; import SortingDropdown from '../utils/SortingDropdown';
import { determineOrderDir, OrderDir } from '../utils/utils'; import { determineOrderDir, OrderDir } from '../utils/utils';
import { SelectedServer } from '../servers/data'; import { isReachableServer, SelectedServer } from '../servers/data';
import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub'; import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub';
import { parseQuery } from '../utils/helpers/query'; import { parseQuery } from '../utils/helpers/query';
import { ShortUrlsList as ShortUrlsListState } from './reducers/shortUrlsList'; import { ShortUrlsList as ShortUrlsListState } from './reducers/shortUrlsList';
import { OrderableFields, ShortUrlsListParams, SORTABLE_FIELDS } from './reducers/shortUrlsListParams'; import { OrderableFields, ShortUrlsListParams, SORTABLE_FIELDS } from './reducers/shortUrlsListParams';
import { ShortUrlsTableProps } from './ShortUrlsTable'; import { ShortUrlsTableProps } from './ShortUrlsTable';
import Paginator from './Paginator';
import './ShortUrlsList.scss'; import './ShortUrlsList.scss';
interface RouteParams { interface RouteParams {
@ -40,6 +42,7 @@ const ShortUrlsList = (ShortUrlsTable: FC<ShortUrlsTableProps>) => boundToMercur
orderField: orderBy && (head(keys(orderBy)) as OrderableFields), orderField: orderBy && (head(keys(orderBy)) as OrderableFields),
orderDir: orderBy && head(values(orderBy)), orderDir: orderBy && head(values(orderBy)),
}); });
const { pagination } = shortUrlsList?.shortUrls ?? {};
const refreshList = (extraParams: ShortUrlsListParams) => listShortUrls({ ...shortUrlsListParams, ...extraParams }); const refreshList = (extraParams: ShortUrlsListParams) => listShortUrls({ ...shortUrlsListParams, ...extraParams });
const handleOrderBy = (orderField?: OrderableFields, orderDir?: OrderDir) => { const handleOrderBy = (orderField?: OrderableFields, orderDir?: OrderDir) => {
setOrder({ orderField, orderDir }); setOrder({ orderField, orderDir });
@ -83,6 +86,7 @@ const ShortUrlsList = (ShortUrlsTable: FC<ShortUrlsTableProps>) => boundToMercur
onChange={handleOrderBy} onChange={handleOrderBy}
/> />
</div> </div>
<Card body className="pb-1">
<ShortUrlsTable <ShortUrlsTable
orderByColumn={orderByColumn} orderByColumn={orderByColumn}
renderOrderIcon={renderOrderIcon} renderOrderIcon={renderOrderIcon}
@ -90,6 +94,8 @@ const ShortUrlsList = (ShortUrlsTable: FC<ShortUrlsTableProps>) => boundToMercur
shortUrlsList={shortUrlsList} shortUrlsList={shortUrlsList}
onTagClick={(tag) => refreshList({ tags: [ ...shortUrlsListParams.tags ?? [], tag ] })} onTagClick={(tag) => refreshList({ tags: [ ...shortUrlsListParams.tags ?? [], tag ] })}
/> />
<Paginator paginator={pagination} serverId={isReachableServer(selectedServer) ? selectedServer.id : ''} />
</Card>
</> </>
); );
}, () => 'https://shlink.io/new-visit'); }, () => 'https://shlink.io/new-visit');

4
test/short-urls/ShortUrls.test.tsx
View file

@ -1,7 +1,6 @@
import { shallow, ShallowWrapper } from 'enzyme'; import { shallow, ShallowWrapper } from 'enzyme';
import { Mock } from 'ts-mockery'; import { Mock } from 'ts-mockery';
import shortUrlsCreator from '../../src/short-urls/ShortUrls'; import shortUrlsCreator from '../../src/short-urls/ShortUrls';
import Paginator from '../../src/short-urls/Paginator';
import { ShortUrlsListProps } from '../../src/short-urls/ShortUrlsList'; import { ShortUrlsListProps } from '../../src/short-urls/ShortUrlsList';
describe('<ShortUrls />', () => { describe('<ShortUrls />', () => {
@ -18,9 +17,8 @@ describe('<ShortUrls />', () => {
}); });
afterEach(() => wrapper.unmount()); 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(SearchBar)).toHaveLength(1);
expect(wrapper.find(ShortUrlsList)).toHaveLength(1); expect(wrapper.find(ShortUrlsList)).toHaveLength(1);
expect(wrapper.find(Paginator)).toHaveLength(1);
}); });
}); });