mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 09:30:31 +03:00
Ensured sorting dropdown for short URLs is not enclosed inside card
This commit is contained in:
parent
93b4de60f6
commit
e583eb2759
3 changed files with 17 additions and 19 deletions
|
@ -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>
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -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,13 +86,16 @@ const ShortUrlsList = (ShortUrlsTable: FC<ShortUrlsTableProps>) => boundToMercur
|
||||||
onChange={handleOrderBy}
|
onChange={handleOrderBy}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<ShortUrlsTable
|
<Card body className="pb-1">
|
||||||
orderByColumn={orderByColumn}
|
<ShortUrlsTable
|
||||||
renderOrderIcon={renderOrderIcon}
|
orderByColumn={orderByColumn}
|
||||||
selectedServer={selectedServer}
|
renderOrderIcon={renderOrderIcon}
|
||||||
shortUrlsList={shortUrlsList}
|
selectedServer={selectedServer}
|
||||||
onTagClick={(tag) => refreshList({ tags: [ ...shortUrlsListParams.tags ?? [], tag ] })}
|
shortUrlsList={shortUrlsList}
|
||||||
/>
|
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');
|
||||||
|
|
|
@ -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);
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue