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

Moved short URL ordering dropdown to ShortUrlsFilteringBar to simplify positioning

Browse source
This commit is contained in:
Alejandro Celaya 2022-03-13 10:32:27 +01:00
parent 18f952f4fc
commit ef8db5e2cd
4 changed files with 51 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/short-urls/ShortUrlsFilteringBar.tsx
View file

@ -15,18 +15,23 @@ import { supportsAllTagsFiltering } from '../utils/helpers/features';
import { SelectedServer } from '../servers/data';
import { TooltipToggleSwitch } from '../utils/TooltipToggleSwitch';
import { ExportBtn } from '../utils/ExportBtn';
import { OrderDir } from '../utils/helpers/ordering';
import { OrderingDropdown } from '../utils/OrderingDropdown';
import { useShortUrlsQuery } from './helpers/hooks';
import { SHORT_URLS_ORDERABLE_FIELDS, ShortUrlsOrder, ShortUrlsOrderableFields } from './data';
import './ShortUrlsFilteringBar.scss';
export interface ShortUrlsFilteringProps {
selectedServer: SelectedServer;
order: ShortUrlsOrder;
handleOrderBy: (orderField?: ShortUrlsOrderableFields, orderDir?: OrderDir) => void;
className?: string;
}
const dateOrNull = (date?: string) => date ? parseISO(date) : null;
const ShortUrlsFilteringBar = (colorGenerator: ColorGenerator): FC<ShortUrlsFilteringProps> => (
{ selectedServer, className },
{ selectedServer, className, order, handleOrderBy },
) => {
const [{ search, tags, startDate, endDate, tagsMode = 'any' }, toFirstPage ] = useShortUrlsQuery();
const selectedTags = tags?.split(',') ?? [];
@ -73,7 +78,7 @@ const ShortUrlsFilteringBar = (colorGenerator: ColorGenerator): FC<ShortUrlsFilt
</Row>
{selectedTags.length > 0 && (
<h4 className="mt-3">
<h4 className="my-3">
{canChangeTagsMode && selectedTags.length > 1 && (
<div className="float-end ms-2 mt-1">
<TooltipToggleSwitch
@ -90,6 +95,10 @@ const ShortUrlsFilteringBar = (colorGenerator: ColorGenerator): FC<ShortUrlsFilt
<Tag colorGenerator={colorGenerator} key={tag} text={tag} clearable onClose={() => removeTag(tag)} />)}
</h4>
)}
<div className="d-block d-lg-none mb-3">
<OrderingDropdown items={SHORT_URLS_ORDERABLE_FIELDS} order={order} onChange={handleOrderBy} />
</div>
</div>
);
};

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

@ -2,7 +2,6 @@ import { pipe } from 'ramda';
import { FC, useEffect, useMemo, useState } from 'react';
import { Card } from 'reactstrap';
import { useLocation, useParams } from 'react-router-dom';
import { OrderingDropdown } from '../utils/OrderingDropdown';
import { determineOrderDir, OrderDir } from '../utils/helpers/ordering';
import { getServerId, SelectedServer } from '../servers/data';
import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub';
@ -14,7 +13,7 @@ import { ShortUrlsList as ShortUrlsListState } from './reducers/shortUrlsList';
import { ShortUrlsTableProps } from './ShortUrlsTable';
import Paginator from './Paginator';
import { useShortUrlsQuery } from './helpers/hooks';
import { ShortUrlsOrderableFields, SHORT_URLS_ORDERABLE_FIELDS } from './data';
import { ShortUrlsOrderableFields } from './data';
import { ShortUrlsFilteringProps } from './ShortUrlsFilteringBar';
interface ShortUrlsListProps {
@ -65,10 +64,12 @@ const ShortUrlsList = (
return (
<>
<ShortUrlsFilteringBar selectedServer={selectedServer} className="mb-3" />
<div className="d-block d-lg-none mb-3">
<OrderingDropdown items={SHORT_URLS_ORDERABLE_FIELDS} order={actualOrderBy} onChange={handleOrderBy} />
</div>
<ShortUrlsFilteringBar
selectedServer={selectedServer}
order={actualOrderBy}
handleOrderBy={handleOrderBy}
className="mb-3"
/>
<Card body className="pb-1">
<ShortUrlsTable
selectedServer={selectedServer}

28
test/short-urls/ShortUrlsFilteringBar.test.tsx
View file

@ -9,6 +9,7 @@ import { DateRangeSelector } from '../../src/utils/dates/DateRangeSelector';
import ColorGenerator from '../../src/utils/services/ColorGenerator';
import { ReachableServer, SelectedServer } from '../../src/servers/data';
import { TooltipToggleSwitch } from '../../src/utils/TooltipToggleSwitch';
import { OrderingDropdown } from '../../src/utils/OrderingDropdown';
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
@ -21,12 +22,19 @@ describe('<ShortUrlsFilteringBar />', () => {
let wrapper: ShallowWrapper;
const ShortUrlsFilteringBar = filteringBarCreator(Mock.all<ColorGenerator>());
const navigate = jest.fn();
const handleOrderBy = jest.fn();
const now = new Date();
const createWrapper = (search = '', selectedServer?: SelectedServer) => {
(useLocation as any).mockReturnValue({ search });
(useNavigate as any).mockReturnValue(navigate);
wrapper = shallow(<ShortUrlsFilteringBar selectedServer={selectedServer ?? Mock.all<SelectedServer>()} />);
wrapper = shallow(
<ShortUrlsFilteringBar
selectedServer={selectedServer ?? Mock.all<SelectedServer>()}
order={{}}
handleOrderBy={handleOrderBy}
/>,
);
return wrapper;
};
@ -34,11 +42,12 @@ describe('<ShortUrlsFilteringBar />', () => {
afterEach(jest.clearAllMocks);
afterEach(() => wrapper?.unmount());
it('renders some children components SearchField', () => {
it('renders expected children components', () => {
const wrapper = createWrapper();
expect(wrapper.find(SearchField)).toHaveLength(1);
expect(wrapper.find(DateRangeSelector)).toHaveLength(1);
expect(wrapper.find(OrderingDropdown)).toHaveLength(1);
});
it.each([
@ -127,4 +136,19 @@ describe('<ShortUrlsFilteringBar />', () => {
toggle.simulate('change');
expect(navigate).toHaveBeenCalledWith(expect.stringContaining(expectedRedirectTagsMode));
});
it('handles order through dropdown', () => {
const wrapper = createWrapper();
expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({});
wrapper.find(OrderingDropdown).simulate('change', 'visits', 'ASC');
expect(handleOrderBy).toHaveBeenCalledWith('visits', 'ASC');
wrapper.find(OrderingDropdown).simulate('change', 'shortCode', 'DESC');
expect(handleOrderBy).toHaveBeenCalledWith('shortCode', 'DESC');
wrapper.find(OrderingDropdown).simulate('change', undefined, undefined);
expect(handleOrderBy).toHaveBeenCalledWith(undefined, undefined);
});
});

29
test/short-urls/ShortUrlsList.test.tsx
View file

@ -6,7 +6,6 @@ import shortUrlsListCreator from '../../src/short-urls/ShortUrlsList';
import { ShortUrlsOrderableFields, ShortUrl, ShortUrlsOrder } from '../../src/short-urls/data';
import { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub';
import { ShortUrlsList as ShortUrlsListModel } from '../../src/short-urls/reducers/shortUrlsList';
import { OrderingDropdown } from '../../src/utils/OrderingDropdown';
import Paginator from '../../src/short-urls/Paginator';
import { ReachableServer } from '../../src/servers/data';
import { Settings } from '../../src/settings/reducers/settings';
@ -58,7 +57,6 @@ describe('<ShortUrlsList />', () => {
it('wraps expected components', () => {
expect(wrapper.find(ShortUrlsTable)).toHaveLength(1);
expect(wrapper.find(OrderingDropdown)).toHaveLength(1);
expect(wrapper.find(Paginator)).toHaveLength(1);
expect(wrapper.find(ShortUrlsFilteringBar)).toHaveLength(1);
});
@ -84,39 +82,26 @@ describe('<ShortUrlsList />', () => {
expect(renderIcon('visits').props.currentOrder).toEqual({});
wrapper.find(OrderingDropdown).simulate('change', 'visits');
(wrapper.find(ShortUrlsFilteringBar).prop('handleOrderBy') as Function)('visits');
expect(renderIcon('visits').props.currentOrder).toEqual({ field: 'visits' });
wrapper.find(OrderingDropdown).simulate('change', 'visits', 'ASC');
(wrapper.find(ShortUrlsFilteringBar).prop('handleOrderBy') as Function)('visits', 'ASC');
expect(renderIcon('visits').props.currentOrder).toEqual({ field: 'visits', dir: 'ASC' });
});
it('handles order through table', () => {
const orderByColumn: (field: ShortUrlsOrderableFields) => Function = wrapper.find(ShortUrlsTable).prop('orderByColumn');
expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({});
expect(wrapper.find(ShortUrlsFilteringBar).prop('order')).toEqual({});
orderByColumn('visits')();
expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'visits', dir: 'ASC' });
expect(wrapper.find(ShortUrlsFilteringBar).prop('order')).toEqual({ field: 'visits', dir: 'ASC' });
orderByColumn('title')();
expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'title', dir: 'ASC' });
expect(wrapper.find(ShortUrlsFilteringBar).prop('order')).toEqual({ field: 'title', dir: 'ASC' });
orderByColumn('shortCode')();
expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'shortCode', dir: 'ASC' });
});
it('handles order through dropdown', () => {
expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({});
wrapper.find(OrderingDropdown).simulate('change', 'visits', 'ASC');
expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'visits', dir: 'ASC' });
wrapper.find(OrderingDropdown).simulate('change', 'shortCode', 'DESC');
expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'shortCode', dir: 'DESC' });
wrapper.find(OrderingDropdown).simulate('change', undefined, undefined);
expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({});
expect(wrapper.find(ShortUrlsFilteringBar).prop('order')).toEqual({ field: 'shortCode', dir: 'ASC' });
});
it.each([
@ -126,6 +111,6 @@ describe('<ShortUrlsList />', () => {
])('has expected initial ordering', (initialOrderBy, field, dir) => {
const wrapper = createWrapper(initialOrderBy);
expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field, dir });
expect(wrapper.find(ShortUrlsFilteringBar).prop('order')).toEqual({ field, dir });
});
});