mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-01-09 01:37:24 +03:00
Code Issues Projects Releases Packages Wiki Activity

Renamed SortingDropdown to OrderingDropdown, for consistency

Browse source
This commit is contained in:
Alejandro Celaya 2021-12-25 10:31:48 +01:00
parent 6213067f35
commit 994f31b7e5
14 changed files with 57 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/settings/ShortUrlsList.tsx
View file

@ -1,6 +1,6 @@
import { FC } from 'react';
import { FormGroup } from 'reactstrap';
import { SortingDropdown } from '../utils/SortingDropdown';
import { OrderingDropdown } from '../utils/OrderingDropdown';
import { SHORT_URLS_ORDERABLE_FIELDS } from '../short-urls/data';
import { SimpleCard } from '../utils/SimpleCard';
import { DEFAULT_SHORT_URLS_ORDERING, Settings, ShortUrlsListSettings } from './reducers/settings';
@ -14,7 +14,7 @@ export const ShortUrlsList: FC<ShortUrlsListProps> = ({ settings: { shortUrlsLis
<SimpleCard title="Short URLs list" className="h-100">
<FormGroup className="mb-0">
<label>Default ordering for short URLs list:</label>
<SortingDropdown
<OrderingDropdown
items={SHORT_URLS_ORDERABLE_FIELDS}
order={shortUrlsList?.defaultOrdering ?? DEFAULT_SHORT_URLS_ORDERING}
onChange={(field, dir) => setShortUrlsListSettings({ defaultOrdering: { field, dir } })}

4
src/settings/Tags.tsx
View file

@ -3,7 +3,7 @@ import { FormGroup } from 'reactstrap';
import { SimpleCard } from '../utils/SimpleCard';
import { TagsModeDropdown } from '../tags/TagsModeDropdown';
import { capitalize } from '../utils/utils';
import { SortingDropdown } from '../utils/SortingDropdown';
import { OrderingDropdown } from '../utils/OrderingDropdown';
import { TAGS_ORDERABLE_FIELDS } from '../tags/data/TagsListChildrenProps';
import { Settings, TagsSettings } from './reducers/settings';
@ -25,7 +25,7 @@ export const Tags: FC<TagsProps> = ({ settings: { tags }, setTagsSettings }) =>
</FormGroup>
<FormGroup className="mb-0">
<label>Default ordering for tags list:</label>
<SortingDropdown
<OrderingDropdown
items={TAGS_ORDERABLE_FIELDS}
order={tags?.defaultOrdering ?? {}}
onChange={(field, dir) => setTagsSettings({ ...tags, defaultOrdering: { field, dir } })}

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

@ -2,7 +2,7 @@ import { pipe } from 'ramda';
import { FC, useEffect, useMemo, useState } from 'react';
import { RouteComponentProps } from 'react-router';
import { Card } from 'reactstrap';
import { SortingDropdown } from '../utils/SortingDropdown';
import { OrderingDropdown } from '../utils/OrderingDropdown';
import { determineOrderDir, OrderDir } from '../utils/helpers/ordering';
import { getServerId, SelectedServer } from '../servers/data';
import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub';
@ -64,7 +64,7 @@ const ShortUrlsList = (ShortUrlsTable: FC<ShortUrlsTableProps>, SearchBar: FC) =
<>
<div className="mb-3"><SearchBar /></div>
<div className="d-block d-lg-none mb-3">
<SortingDropdown items={SHORT_URLS_ORDERABLE_FIELDS} order={order} onChange={handleOrderBy} />
<OrderingDropdown items={SHORT_URLS_ORDERABLE_FIELDS} order={order} onChange={handleOrderBy} />
</div>
<Card body className="pb-1">
<ShortUrlsTable

4
src/tags/TagsList.tsx
View file

@ -10,7 +10,7 @@ import { ShlinkApiError } from '../api/ShlinkApiError';
import { Topics } from '../mercure/helpers/Topics';
import { Settings, TagsMode } from '../settings/reducers/settings';
import { determineOrderDir, sortList } from '../utils/helpers/ordering';
import { SortingDropdown } from '../utils/SortingDropdown';
import { OrderingDropdown } from '../utils/OrderingDropdown';
import { TagsList as TagsListState } from './reducers/tagsList';
import {
TagsOrderableFields,
@ -93,7 +93,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
<OrderingDropdown
items={TAGS_ORDERABLE_FIELDS}
order={order}
onChange={(field, dir) => setOrder({ field, dir })}

8
src/utils/OrderingDropdown.scss Normal file
View file

@ -0,0 +1,8 @@
.ordering-dropdown__menu--link.ordering-dropdown__menu--link {
min-width: 11rem;
}
.ordering-dropdown__sort-icon {
margin: 3.5px 0 0;
float: right;
}

12
src/utils/SortingDropdown.tsx → src/utils/OrderingDropdown.tsx
View file

@ -4,9 +4,9 @@ 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, Order, OrderDir } from './helpers/ordering';
import './SortingDropdown.scss';
import './OrderingDropdown.scss';
export interface SortingDropdownProps<T extends string = string> {
export interface OrderingDropdownProps<T extends string = string> {
items: Record<T, string>;
order: Order<T>;
onChange: (orderField?: T, orderDir?: OrderDir) => void;
@ -14,8 +14,8 @@ export interface SortingDropdownProps<T extends string = string> {
right?: boolean;
}
export function SortingDropdown<T extends string = string>(
{ items, order, onChange, isButton = true, right = false }: SortingDropdownProps<T>,
export function OrderingDropdown<T extends string = string>(
{ items, order, onChange, isButton = true, right = false }: OrderingDropdownProps<T>,
) {
const handleItemClick = (fieldKey: T) => () => {
const newOrderDir = determineOrderDir(fieldKey, order.field, order.dir);
@ -36,7 +36,7 @@ export function SortingDropdown<T extends string = string>(
</DropdownToggle>
<DropdownMenu
right={right}
className={classNames('w-100', { 'sorting-dropdown__menu--link': !isButton })}
className={classNames('w-100', { 'ordering-dropdown__menu--link': !isButton })}
>
{toPairs(items).map(([ fieldKey, fieldValue ]) => (
<DropdownItem key={fieldKey} active={order.field === fieldKey} onClick={handleItemClick(fieldKey as T)}>
@ -44,7 +44,7 @@ export function SortingDropdown<T extends string = string>(
{order.field === fieldKey && (
<FontAwesomeIcon
icon={order.dir === 'ASC' ? sortAscIcon : sortDescIcon}
className="sorting-dropdown__sort-icon"
className="ordering-dropdown__sort-icon"
/>
)}
</DropdownItem>

8
src/utils/SortingDropdown.scss
View file

@ -1,8 +0,0 @@
.sorting-dropdown__menu--link.sorting-dropdown__menu--link {
min-width: 11rem;
}
.sorting-dropdown__sort-icon {
margin: 3.5px 0 0;
float: right;
}

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

@ -4,7 +4,7 @@ import { rangeOf } from '../../utils/utils';
import { Order } from '../../utils/helpers/ordering';
import SimplePaginator from '../../common/SimplePaginator';
import { roundTen } from '../../utils/helpers/numbers';
import { SortingDropdown } from '../../utils/SortingDropdown';
import { OrderingDropdown } from '../../utils/OrderingDropdown';
import PaginationDropdown from '../../utils/PaginationDropdown';
import { Stats, StatsRow } from '../types';
import { HorizontalBarChart, HorizontalBarChartProps } from './HorizontalBarChart';
@ -96,7 +96,7 @@ export const SortableBarChartCard: FC<SortableBarChartCardProps> = ({
<>
{title}
<div className="float-right">
<SortingDropdown
<OrderingDropdown
isButton={false}
right
items={sortingItems}

6
test/settings/ShortUrlsList.test.tsx
View file

@ -2,7 +2,7 @@ import { shallow, ShallowWrapper } from 'enzyme';
import { Mock } from 'ts-mockery';
import { DEFAULT_SHORT_URLS_ORDERING, Settings, ShortUrlsListSettings } from '../../src/settings/reducers/settings';
import { ShortUrlsList } from '../../src/settings/ShortUrlsList';
import { SortingDropdown } from '../../src/utils/SortingDropdown';
import { OrderingDropdown } from '../../src/utils/OrderingDropdown';
import { ShortUrlsOrder } from '../../src/short-urls/data';
describe('<ShortUrlsList />', () => {
@ -27,7 +27,7 @@ describe('<ShortUrlsList />', () => {
[{ defaultOrdering: { field: 'visits', dir: 'ASC' } as ShortUrlsOrder }, { field: 'visits', dir: 'ASC' }],
])('shows expected ordering', (shortUrlsList, expectedOrder) => {
const wrapper = createWrapper(shortUrlsList);
const dropdown = wrapper.find(SortingDropdown);
const dropdown = wrapper.find(OrderingDropdown);
expect(dropdown.prop('order')).toEqual(expectedOrder);
});
@ -39,7 +39,7 @@ describe('<ShortUrlsList />', () => {
[ 'title', 'DESC' ],
])('invokes setSettings when ordering changes', (field, dir) => {
const wrapper = createWrapper();
const dropdown = wrapper.find(SortingDropdown);
const dropdown = wrapper.find(OrderingDropdown);
expect(setSettings).not.toHaveBeenCalled();
dropdown.simulate('change', field, dir);

6
test/settings/Tags.test.tsx
View file

@ -4,7 +4,7 @@ import { FormGroup } from 'reactstrap';
import { Settings, TagsMode, TagsSettings } from '../../src/settings/reducers/settings';
import { TagsModeDropdown } from '../../src/tags/TagsModeDropdown';
import { Tags } from '../../src/settings/Tags';
import { SortingDropdown } from '../../src/utils/SortingDropdown';
import { OrderingDropdown } from '../../src/utils/OrderingDropdown';
import { TagsOrder } from '../../src/tags/data/TagsListChildrenProps';
describe('<Tags />', () => {
@ -60,7 +60,7 @@ describe('<Tags />', () => {
[{ defaultOrdering: { field: 'visits', dir: 'ASC' } as TagsOrder }, { field: 'visits', dir: 'ASC' }],
])('shows expected ordering', (tags, expectedOrder) => {
const wrapper = createWrapper(tags);
const dropdown = wrapper.find(SortingDropdown);
const dropdown = wrapper.find(OrderingDropdown);
expect(dropdown.prop('order')).toEqual(expectedOrder);
});
@ -72,7 +72,7 @@ describe('<Tags />', () => {
[ 'shortUrls', 'DESC' ],
])('invokes setTagsSettings when ordering changes', (field, dir) => {
const wrapper = createWrapper();
const dropdown = wrapper.find(SortingDropdown);
const dropdown = wrapper.find(OrderingDropdown);
expect(setTagsSettings).not.toHaveBeenCalled();
dropdown.simulate('change', field, dir);

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

@ -7,7 +7,7 @@ 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 { SortingDropdown } from '../../src/utils/SortingDropdown';
import { OrderingDropdown } from '../../src/utils/OrderingDropdown';
import Paginator from '../../src/short-urls/Paginator';
import { ReachableServer } from '../../src/servers/data';
import { ShortUrlListRouteParams } from '../../src/short-urls/helpers/hooks';
@ -54,7 +54,7 @@ describe('<ShortUrlsList />', () => {
it('wraps expected components', () => {
expect(wrapper.find(ShortUrlsTable)).toHaveLength(1);
expect(wrapper.find(SortingDropdown)).toHaveLength(1);
expect(wrapper.find(OrderingDropdown)).toHaveLength(1);
expect(wrapper.find(Paginator)).toHaveLength(1);
expect(wrapper.find(SearchBar)).toHaveLength(1);
});
@ -80,39 +80,39 @@ describe('<ShortUrlsList />', () => {
expect(renderIcon('visits').props.currentOrder).toEqual({});
wrapper.find(SortingDropdown).simulate('change', 'visits');
wrapper.find(OrderingDropdown).simulate('change', 'visits');
expect(renderIcon('visits').props.currentOrder).toEqual({ field: 'visits' });
wrapper.find(SortingDropdown).simulate('change', 'visits', 'ASC');
wrapper.find(OrderingDropdown).simulate('change', '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(SortingDropdown).prop('order')).toEqual({});
expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({});
orderByColumn('visits')();
expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field: 'visits', dir: 'ASC' });
expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'visits', dir: 'ASC' });
orderByColumn('title')();
expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field: 'title', dir: 'ASC' });
expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'title', dir: 'ASC' });
orderByColumn('shortCode')();
expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field: 'shortCode', dir: 'ASC' });
expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'shortCode', dir: 'ASC' });
});
it('handles order through dropdown', () => {
expect(wrapper.find(SortingDropdown).prop('order')).toEqual({});
expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({});
wrapper.find(SortingDropdown).simulate('change', 'visits', 'ASC');
expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field: 'visits', dir: 'ASC' });
wrapper.find(OrderingDropdown).simulate('change', 'visits', 'ASC');
expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'visits', dir: 'ASC' });
wrapper.find(SortingDropdown).simulate('change', 'shortCode', 'DESC');
expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field: 'shortCode', dir: 'DESC' });
wrapper.find(OrderingDropdown).simulate('change', 'shortCode', 'DESC');
expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'shortCode', dir: 'DESC' });
wrapper.find(SortingDropdown).simulate('change', undefined, undefined);
expect(wrapper.find(SortingDropdown).prop('order')).toEqual({});
wrapper.find(OrderingDropdown).simulate('change', undefined, undefined);
expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({});
});
it.each([
@ -122,6 +122,6 @@ describe('<ShortUrlsList />', () => {
])('has expected initial ordering', (initialOrderBy, field, dir) => {
const wrapper = createWrapper(initialOrderBy);
expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field, dir });
expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field, dir });
});
});

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

@ -10,7 +10,7 @@ import { TagsModeDropdown } from '../../src/tags/TagsModeDropdown';
import SearchField from '../../src/utils/SearchField';
import { Settings } from '../../src/settings/reducers/settings';
import { TagsOrderableFields } from '../../src/tags/data/TagsListChildrenProps';
import { SortingDropdown } from '../../src/utils/SortingDropdown';
import { OrderingDropdown } from '../../src/utils/OrderingDropdown';
describe('<TagsList />', () => {
let wrapper: ShallowWrapper;
@ -89,11 +89,11 @@ describe('<TagsList />', () => {
it('triggers ordering when sorting dropdown changes', () => {
const wrapper = createWrapper({ filteredTags: [] });
expect(wrapper.find(SortingDropdown).prop('order')).toEqual({});
wrapper.find(SortingDropdown).simulate('change', 'tag', 'DESC');
expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field: 'tag', dir: 'DESC' });
wrapper.find(SortingDropdown).simulate('change', 'visits', 'ASC');
expect(wrapper.find(SortingDropdown).prop('order')).toEqual({ field: 'visits', dir: 'ASC' });
expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({});
wrapper.find(OrderingDropdown).simulate('change', 'tag', 'DESC');
expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'tag', dir: 'DESC' });
wrapper.find(OrderingDropdown).simulate('change', 'visits', 'ASC');
expect(wrapper.find(OrderingDropdown).prop('order')).toEqual({ field: 'visits', dir: 'ASC' });
});
it('can update current order via orderByColumn from table component', () => {

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

@ -3,7 +3,7 @@ import { DropdownItem, DropdownToggle } from 'reactstrap';
import { identity, values } from 'ramda';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSortAmountDown as caretDownIcon } from '@fortawesome/free-solid-svg-icons';
import { SortingDropdown , SortingDropdownProps } from '../../src/utils/SortingDropdown';
import { OrderingDropdown, OrderingDropdownProps } from '../../src/utils/OrderingDropdown';
import { OrderDir } from '../../src/utils/helpers/ordering';
describe('<SortingDropdown />', () => {
@ -13,8 +13,8 @@ describe('<SortingDropdown />', () => {
bar: 'Bar',
baz: 'Hello World',
};
const createWrapper = (props: Partial<SortingDropdownProps> = {}) => {
wrapper = shallow(<SortingDropdown items={items} order={{}} onChange={identity} {...props} />);
const createWrapper = (props: Partial<OrderingDropdownProps> = {}) => {
wrapper = shallow(<OrderingDropdown items={items} order={{}} onChange={identity} {...props} />);
return wrapper;
};

4
test/visits/charts/SortableBarChartCard.test.tsx
View file

@ -1,6 +1,6 @@
import { shallow, ShallowWrapper } from 'enzyme';
import { range } from 'ramda';
import { SortingDropdown } from '../../../src/utils/SortingDropdown';
import { OrderingDropdown } from '../../../src/utils/OrderingDropdown';
import PaginationDropdown from '../../../src/utils/PaginationDropdown';
import { rangeOf } from '../../../src/utils/utils';
import { OrderDir } from '../../../src/utils/helpers/ordering';
@ -45,7 +45,7 @@ describe('<SortableBarChartCard />', () => {
beforeEach(() => {
const wrapper = createWrapper();
const dropdown = wrapper.renderProp('title' as never)().find(SortingDropdown);
const dropdown = wrapper.renderProp('title' as never)().find(OrderingDropdown);
assert = (sortName: string, sortDir: OrderDir, keys: string[], values: number[]) => {
dropdown.prop('onChange')(sortName, sortDir);