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

Updated sorting dropdown to accept an order object instead of two individual props

Browse source
This commit is contained in:
Alejandro Celaya 2021-11-06 12:26:20 +01:00
parent 7169c6e083
commit ee826458be
7 changed files with 41 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -67,12 +67,7 @@ const ShortUrlsList = (ShortUrlsTable: FC<ShortUrlsTableProps>) => boundToMercur
return (
<>
<div className="d-block d-lg-none mb-3">
<SortingDropdown
items={SORTABLE_FIELDS}
orderField={order.field}
orderDir={order.dir}
onChange={handleOrderBy}
/>
<SortingDropdown items={SORTABLE_FIELDS} order={order} onChange={handleOrderBy} />
</div>
<Card body className="pb-1">
<ShortUrlsTable

14
src/tags/TagsList.tsx
View file

@ -55,8 +55,11 @@ const TagsList = (TagsCards: FC<TagsListChildrenProps>, TagsTable: FC<TagsTableP
);
}
const orderByColumn = (field: OrderableFields) =>
() => setOrder({ field, dir: determineOrderDir(field, order.field, order.dir) });
const orderByColumn = (field: OrderableFields) => () => {
const dir = determineOrderDir(field, order.field, order.dir);
setOrder({ field: dir ? field : undefined, dir });
};
const renderContent = () => {
if (tagsList.filteredTags.length < 1) {
@ -85,12 +88,7 @@ const TagsList = (TagsCards: FC<TagsListChildrenProps>, TagsTable: FC<TagsTableP
<TagsModeDropdown mode={mode} onChange={setMode} />
</div>
<div className="col-lg-6 mt-3 mt-lg-0">
<SortingDropdown
items={SORTABLE_FIELDS}
orderField={order.field}
orderDir={order.dir}
onChange={(field, dir) => setOrder({ field, dir })}
/>
<SortingDropdown items={SORTABLE_FIELDS} order={order} onChange={(field, dir) => setOrder({ field, dir })} />
</div>
</Row>
{renderContent()}

21
src/utils/SortingDropdown.tsx
View file

@ -3,23 +3,22 @@ import { toPairs } from 'ramda';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSortAmountUp as sortAscIcon, faSortAmountDown as sortDescIcon } from '@fortawesome/free-solid-svg-icons';
import classNames from 'classnames';
import { determineOrderDir, OrderDir } from './helpers/ordering';
import { determineOrderDir, Order, OrderDir } from './helpers/ordering';
import './SortingDropdown.scss';
export interface SortingDropdownProps<T extends string = string> {
items: Record<T, string>;
orderField?: T;
orderDir?: OrderDir;
order: Order<T>;
onChange: (orderField?: T, orderDir?: OrderDir) => void;
isButton?: boolean;
right?: boolean;
}
export default function SortingDropdown<T extends string = string>(
{ items, orderField, orderDir, onChange, isButton = true, right = false }: SortingDropdownProps<T>,
{ items, order, onChange, isButton = true, right = false }: SortingDropdownProps<T>,
) {
const handleItemClick = (fieldKey: T) => () => {
const newOrderDir = determineOrderDir(fieldKey, orderField, orderDir);
const newOrderDir = determineOrderDir(fieldKey, order.field, order.dir);
onChange(newOrderDir ? fieldKey : undefined, newOrderDir);
};
@ -32,26 +31,26 @@ export default function SortingDropdown<T extends string = string>(
className={classNames({ 'dropdown-btn__toggle btn-block': isButton, 'btn-sm p-0': !isButton })}
>
{!isButton && <>Order by</>}
{isButton && !orderField && <>Order by...</>}
{isButton && orderField && `Order by: "${items[orderField]}" - "${orderDir ?? 'DESC'}"`}
{isButton && !order.field && <>Order by...</>}
{isButton && order.field && `Order by: "${items[order.field]}" - "${order.dir ?? 'DESC'}"`}
</DropdownToggle>
<DropdownMenu
right={right}
className={classNames('w-100', { 'sorting-dropdown__menu--link': !isButton })}
>
{toPairs(items).map(([ fieldKey, fieldValue ]) => (
<DropdownItem key={fieldKey} active={orderField === fieldKey} onClick={handleItemClick(fieldKey as T)}>
<DropdownItem key={fieldKey} active={order.field === fieldKey} onClick={handleItemClick(fieldKey as T)}>
{fieldValue}
{orderField === fieldKey && (
{order.field === fieldKey && (
<FontAwesomeIcon
icon={orderDir === 'ASC' ? sortAscIcon : sortDescIcon}
icon={order.dir === 'ASC' ? sortAscIcon : sortDescIcon}
className="sorting-dropdown__sort-icon"
/>
)}
</DropdownItem>
))}
<DropdownItem divider />
<DropdownItem disabled={!orderField} onClick={() => onChange()}>
<DropdownItem disabled={!order.field} onClick={() => onChange()}>
<i>Clear selection</i>
</DropdownItem>
</DropdownMenu>

20
src/visits/charts/SortableBarChartCard.tsx
View file

@ -1,7 +1,7 @@
import { FC, useState } from 'react';
import { fromPairs, pipe, reverse, sortBy, splitEvery, toLower, toPairs, type, zipObj } from 'ramda';
import { rangeOf } from '../../utils/utils';
import { OrderDir } from '../../utils/helpers/ordering';
import { Order } from '../../utils/helpers/ordering';
import SimplePaginator from '../../common/SimplePaginator';
import { roundTen } from '../../utils/helpers/numbers';
import SortingDropdown from '../../utils/SortingDropdown';
@ -30,24 +30,21 @@ export const SortableBarChartCard: FC<SortableBarChartCardProps> = ({
withPagination = true,
...rest
}) => {
const [ order, setOrder ] = useState<{ orderField?: string; orderDir?: OrderDir }>({
orderField: undefined,
orderDir: undefined,
});
const [ order, setOrder ] = useState<Order<string>>({});
const [ currentPage, setCurrentPage ] = useState(1);
const [ itemsPerPage, setItemsPerPage ] = useState(50);
const getSortedPairsForStats = (stats: Stats, sortingItems: Record<string, string>) => {
const pairs = toPairs(stats);
const sortedPairs = !order.orderField ? pairs : sortBy(
const sortedPairs = !order.field ? pairs : sortBy(
pipe<StatsRow, string | number, string | number>(
order.orderField === Object.keys(sortingItems)[0] ? pickKeyFromPair : pickValueFromPair,
order.field === Object.keys(sortingItems)[0] ? pickKeyFromPair : pickValueFromPair,
toLowerIfString,
),
pairs,
);
return !order.orderDir || order.orderDir === 'ASC' ? sortedPairs : reverse(sortedPairs);
return !order.dir || order.dir === 'ASC' ? sortedPairs : reverse(sortedPairs);
};
const determineCurrentPagePairs = (pages: StatsRow[][]): StatsRow[] => {
const page = pages[currentPage - 1];
@ -103,10 +100,9 @@ export const SortableBarChartCard: FC<SortableBarChartCardProps> = ({
isButton={false}
right
items={sortingItems}
orderField={order.orderField}
orderDir={order.orderDir}
onChange={(orderField, orderDir) => {
setOrder({ orderField, orderDir });
order={order}
onChange={(field, dir) => {
setOrder({ field, dir });
setCurrentPage(1);
}}
/>

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

@ -108,23 +108,16 @@ describe('<ShortUrlsList />', () => {
});
it('handles order by through dropdown', () => {
expect(wrapper.find(SortingDropdown).prop('orderField')).not.toBeDefined();
expect(wrapper.find(SortingDropdown).prop('orderDir')).not.toBeDefined();
expect(wrapper.find(SortingDropdown).prop('order')).toEqual({});
wrapper.find(SortingDropdown).simulate('change', 'visits', 'ASC');
expect(wrapper.find(SortingDropdown).prop('orderField')).toEqual('visits');
expect(wrapper.find(SortingDropdown).prop('orderDir')).toEqual('ASC');
expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field: 'visits', dir: 'ASC' });
wrapper.find(SortingDropdown).simulate('change', 'shortCode', 'DESC');
expect(wrapper.find(SortingDropdown).prop('orderField')).toEqual('shortCode');
expect(wrapper.find(SortingDropdown).prop('orderDir')).toEqual('DESC');
expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field: 'shortCode', dir: 'DESC' });
wrapper.find(SortingDropdown).simulate('change', undefined, undefined);
expect(wrapper.find(SortingDropdown).prop('orderField')).toEqual(undefined);
expect(wrapper.find(SortingDropdown).prop('orderDir')).toEqual(undefined);
expect(wrapper.find(SortingDropdown).prop('order')).toEqual({});
expect(listShortUrlsMock).toHaveBeenCalledTimes(3);
expect(listShortUrlsMock).toHaveBeenNthCalledWith(1, expect.objectContaining({
@ -140,10 +133,9 @@ describe('<ShortUrlsList />', () => {
[ Mock.of<OrderBy>({ visits: 'ASC' }), 'visits', 'ASC' ],
[ Mock.of<OrderBy>({ title: 'DESC' }), 'title', 'DESC' ],
[ Mock.of<OrderBy>(), undefined, undefined ],
])('has expected initial ordering', (initialOrderBy, expectedField, expectedDir) => {
])('has expected initial ordering', (initialOrderBy, field, dir) => {
const wrapper = createWrapper(initialOrderBy);
expect(wrapper.find(SortingDropdown).prop('orderField')).toEqual(expectedField);
expect(wrapper.find(SortingDropdown).prop('orderDir')).toEqual(expectedDir);
expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field, dir });
});
});

9
test/tags/TagsList.test.tsx
View file

@ -89,14 +89,11 @@ describe('<TagsList />', () => {
it('triggers ordering when sorting dropdown changes', () => {
const wrapper = createWrapper({ filteredTags: [] });
expect(wrapper.find(SortingDropdown).prop('orderField')).not.toBeDefined();
expect(wrapper.find(SortingDropdown).prop('orderDir')).not.toBeDefined();
expect(wrapper.find(SortingDropdown).prop('order')).toEqual({});
wrapper.find(SortingDropdown).simulate('change', 'tag', 'DESC');
expect(wrapper.find(SortingDropdown).prop('orderField')).toEqual('tag');
expect(wrapper.find(SortingDropdown).prop('orderDir')).toEqual('DESC');
expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field: 'tag', dir: 'DESC' });
wrapper.find(SortingDropdown).simulate('change', 'visits', 'ASC');
expect(wrapper.find(SortingDropdown).prop('orderField')).toEqual('visits');
expect(wrapper.find(SortingDropdown).prop('orderDir')).toEqual('ASC');
expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field: 'visits', dir: 'ASC' });
});
it('can update current order via orderByColumn from table component', () => {

14
test/utils/SortingDropdown.test.tsx
View file

@ -14,7 +14,7 @@ describe('<SortingDropdown />', () => {
baz: 'Hello World',
};
const createWrapper = (props: Partial<SortingDropdownProps> = {}) => {
wrapper = shallow(<SortingDropdown items={items} onChange={identity} {...props} />);
wrapper = shallow(<SortingDropdown items={items} order={{}} onChange={identity} {...props} />);
return wrapper;
};
@ -34,7 +34,7 @@ describe('<SortingDropdown />', () => {
});
it('properly marks selected field as active with proper icon', () => {
const wrapper = createWrapper({ orderField: 'bar', orderDir: 'DESC' });
const wrapper = createWrapper({ order: { field: 'bar', dir: 'DESC' } });
const activeItem = wrapper.find('DropdownItem[active=true]');
const activeItemIcon = activeItem.first().find(FontAwesomeIcon);
@ -55,7 +55,7 @@ describe('<SortingDropdown />', () => {
it('triggers change function when item is clicked and an order field was provided', () => {
const onChange = jest.fn();
const wrapper = createWrapper({ onChange, orderField: 'baz', orderDir: 'ASC' });
const wrapper = createWrapper({ onChange, order: { field: 'baz', dir: 'ASC' } });
const firstItem = wrapper.find(DropdownItem).first();
firstItem.simulate('click');
@ -66,7 +66,7 @@ describe('<SortingDropdown />', () => {
it('updates order dir when already selected item is clicked', () => {
const onChange = jest.fn();
const wrapper = createWrapper({ onChange, orderField: 'foo', orderDir: 'ASC' });
const wrapper = createWrapper({ onChange, order: { field: 'foo', dir: 'ASC' } });
const firstItem = wrapper.find(DropdownItem).first();
firstItem.simulate('click');
@ -79,14 +79,14 @@ describe('<SortingDropdown />', () => {
[{ isButton: false }, <>Order by</> ],
[{ isButton: true }, <>Order by...</> ],
[
{ isButton: true, orderField: 'foo', orderDir: 'ASC' as OrderDir },
{ isButton: true, order: { field: 'foo', dir: 'ASC' as OrderDir } },
'Order by: "Foo" - "ASC"',
],
[
{ isButton: true, orderField: 'baz', orderDir: 'DESC' as OrderDir },
{ isButton: true, order: { field: 'baz', dir: 'DESC' as OrderDir } },
'Order by: "Hello World" - "DESC"',
],
[{ isButton: true, orderField: 'baz' }, 'Order by: "Hello World" - "DESC"' ],
[{ isButton: true, order: { field: 'baz' } }, 'Order by: "Hello World" - "DESC"' ],
])('displays expected text in toggle', (props, expectedText) => {
const wrapper = createWrapper(props);
const toggle = wrapper.find(DropdownToggle);