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

Renamed constants holding orderable fields for short URLs and tags

Browse source
This commit is contained in:
Alejandro Celaya 2021-12-25 10:24:37 +01:00
parent 2bf5f276f5
commit 76fb45c97e
11 changed files with 41 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/settings/ShortUrlsList.tsx
View file

@ -1,7 +1,7 @@
import { FC } from 'react';
import { FormGroup } from 'reactstrap';
import SortingDropdown from '../utils/SortingDropdown';
import { SORTABLE_FIELDS } from '../short-urls/data';
import { SHORT_URLS_ORDERABLE_FIELDS } from '../short-urls/data';
import { SimpleCard } from '../utils/SimpleCard';
import { DEFAULT_SHORT_URLS_ORDERING, Settings, ShortUrlsListSettings } from './reducers/settings';
@ -15,7 +15,7 @@ export const ShortUrlsList: FC<ShortUrlsListProps> = ({ settings: { shortUrlsLis
<FormGroup className="mb-0">
<label>Default ordering for short URLs list:</label>
<SortingDropdown
items={SORTABLE_FIELDS}
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

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

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

@ -14,7 +14,7 @@ import { ShortUrlsList as ShortUrlsListState } from './reducers/shortUrlsList';
import { ShortUrlsTableProps } from './ShortUrlsTable';
import Paginator from './Paginator';
import { ShortUrlListRouteParams, useShortUrlsQuery } from './helpers/hooks';
import { OrderableFields, ShortUrlsOrder, SORTABLE_FIELDS } from './data';
import { ShortUrlsOrderableFields, ShortUrlsOrder, SHORT_URLS_ORDERABLE_FIELDS } from './data';
interface ShortUrlsListProps extends RouteComponentProps<ShortUrlListRouteParams> {
selectedServer: SelectedServer;
@ -39,10 +39,10 @@ const ShortUrlsList = (ShortUrlsTable: FC<ShortUrlsTableProps>, SearchBar: FC) =
const selectedTags = useMemo(() => tags?.split(',') ?? [], [ tags ]);
const { pagination } = shortUrlsList?.shortUrls ?? {};
const handleOrderBy = (field?: OrderableFields, dir?: OrderDir) => setOrder({ field, dir });
const orderByColumn = (field: OrderableFields) => () =>
const handleOrderBy = (field?: ShortUrlsOrderableFields, dir?: OrderDir) => setOrder({ field, dir });
const orderByColumn = (field: ShortUrlsOrderableFields) => () =>
handleOrderBy(field, determineOrderDir(field, order.field, order.dir));
const renderOrderIcon = (field: OrderableFields) => <TableOrderIcon currentOrder={order} field={field} />;
const renderOrderIcon = (field: ShortUrlsOrderableFields) => <TableOrderIcon currentOrder={order} field={field} />;
const addTag = pipe(
(newTag: string) => [ ...new Set([ ...selectedTags, newTag ]) ].join(','),
(tags) => toFirstPage({ tags }),
@ -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={SORTABLE_FIELDS} order={order} onChange={handleOrderBy} />
<SortingDropdown items={SHORT_URLS_ORDERABLE_FIELDS} order={order} onChange={handleOrderBy} />
</div>
<Card body className="pb-1">
<ShortUrlsTable

6
src/short-urls/ShortUrlsTable.tsx
View file

@ -5,12 +5,12 @@ import { SelectedServer } from '../servers/data';
import { supportsShortUrlTitle } from '../utils/helpers/features';
import { ShortUrlsList as ShortUrlsListState } from './reducers/shortUrlsList';
import { ShortUrlsRowProps } from './helpers/ShortUrlsRow';
import { OrderableFields } from './data';
import { ShortUrlsOrderableFields } from './data';
import './ShortUrlsTable.scss';
export interface ShortUrlsTableProps {
orderByColumn?: (column: OrderableFields) => () => void;
renderOrderIcon?: (column: OrderableFields) => ReactNode;
orderByColumn?: (column: ShortUrlsOrderableFields) => () => void;
renderOrderIcon?: (column: ShortUrlsOrderableFields) => ReactNode;
shortUrlsList: ShortUrlsListState;
selectedServer: SelectedServer;
onTagClick?: (tag: string) => void;

6
src/short-urls/data/index.ts
View file

@ -52,7 +52,7 @@ export interface ShortUrlIdentifier {
domain: OptionalString;
}
export const SORTABLE_FIELDS = {
export const SHORT_URLS_ORDERABLE_FIELDS = {
dateCreated: 'Created at',
shortCode: 'Short URL',
longUrl: 'Long URL',
@ -60,6 +60,6 @@ export const SORTABLE_FIELDS = {
visits: 'Visits',
};
export type OrderableFields = keyof typeof SORTABLE_FIELDS;
export type ShortUrlsOrderableFields = keyof typeof SHORT_URLS_ORDERABLE_FIELDS;
export type ShortUrlsOrder = Order<OrderableFields>;
export type ShortUrlsOrder = Order<ShortUrlsOrderableFields>;

15
src/tags/TagsList.tsx
View file

@ -12,7 +12,12 @@ import { Settings, TagsMode } from '../settings/reducers/settings';
import { determineOrderDir, sortList } from '../utils/helpers/ordering';
import SortingDropdown from '../utils/SortingDropdown';
import { TagsList as TagsListState } from './reducers/tagsList';
import { OrderableFields, SORTABLE_FIELDS, TagsListChildrenProps, TagsOrder } from './data/TagsListChildrenProps';
import {
TagsOrderableFields,
TAGS_ORDERABLE_FIELDS,
TagsListChildrenProps,
TagsOrder,
} from './data/TagsListChildrenProps';
import { TagsModeDropdown } from './TagsModeDropdown';
import { NormalizedTag } from './data';
import { TagsTableProps } from './TagsTable';
@ -55,7 +60,7 @@ const TagsList = (TagsCards: FC<TagsListChildrenProps>, TagsTable: FC<TagsTableP
);
}
const orderByColumn = (field: OrderableFields) => () => {
const orderByColumn = (field: TagsOrderableFields) => () => {
const dir = determineOrderDir(field, order.field, order.dir);
setOrder({ field: dir ? field : undefined, dir });
@ -88,7 +93,11 @@ 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} order={order} onChange={(field, dir) => setOrder({ field, dir })} />
<SortingDropdown
items={TAGS_ORDERABLE_FIELDS}
order={order}
onChange={(field, dir) => setOrder({ field, dir })}
/>
</div>
</Row>
{renderContent()}

4
src/tags/TagsTable.tsx
View file

@ -6,12 +6,12 @@ import SimplePaginator from '../common/SimplePaginator';
import { useQueryState } from '../utils/helpers/hooks';
import { parseQuery } from '../utils/helpers/query';
import { TableOrderIcon } from '../utils/table/TableOrderIcon';
import { OrderableFields, TagsListChildrenProps, TagsOrder } from './data/TagsListChildrenProps';
import { TagsOrderableFields, TagsListChildrenProps, TagsOrder } from './data/TagsListChildrenProps';
import { TagsTableRowProps } from './TagsTableRow';
import './TagsTable.scss';
export interface TagsTableProps extends TagsListChildrenProps {
orderByColumn: (field: OrderableFields) => () => void;
orderByColumn: (field: TagsOrderableFields) => () => void;
currentOrder: TagsOrder;
}

6
src/tags/data/TagsListChildrenProps.ts
View file

@ -2,15 +2,15 @@ import { SelectedServer } from '../../servers/data';
import { Order } from '../../utils/helpers/ordering';
import { NormalizedTag } from './index';
export const SORTABLE_FIELDS = {
export const TAGS_ORDERABLE_FIELDS = {
tag: 'Tag',
shortUrls: 'Short URLs',
visits: 'Visits',
};
export type OrderableFields = keyof typeof SORTABLE_FIELDS;
export type TagsOrderableFields = keyof typeof TAGS_ORDERABLE_FIELDS;
export type TagsOrder = Order<OrderableFields>;
export type TagsOrder = Order<TagsOrderableFields>;
export interface TagsListChildrenProps {
sortedTags: NormalizedTag[];

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

@ -4,7 +4,7 @@ import { Mock } from 'ts-mockery';
import { History, Location } from 'history';
import { match } from 'react-router';
import shortUrlsListCreator from '../../src/short-urls/ShortUrlsList';
import { OrderableFields, ShortUrl, ShortUrlsOrder } from '../../src/short-urls/data';
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';
@ -75,8 +75,8 @@ describe('<ShortUrlsList />', () => {
});
it('invokes order icon rendering', () => {
const renderIcon = (field: OrderableFields) =>
(wrapper.find(ShortUrlsTable).prop('renderOrderIcon') as (field: OrderableFields) => ReactElement)(field);
const renderIcon = (field: ShortUrlsOrderableFields) =>
(wrapper.find(ShortUrlsTable).prop('renderOrderIcon') as (field: ShortUrlsOrderableFields) => ReactElement)(field);
expect(renderIcon('visits').props.currentOrder).toEqual({});
@ -88,7 +88,7 @@ describe('<ShortUrlsList />', () => {
});
it('handles order through table', () => {
const orderByColumn: (field: OrderableFields) => Function = wrapper.find(ShortUrlsTable).prop('orderByColumn');
const orderByColumn: (field: ShortUrlsOrderableFields) => Function = wrapper.find(ShortUrlsTable).prop('orderByColumn');
expect(wrapper.find(SortingDropdown).prop('order')).toEqual({});

6
test/short-urls/ShortUrlsTable.test.tsx
View file

@ -5,7 +5,7 @@ import { ShortUrlsTable as shortUrlsTableCreator } from '../../src/short-urls/Sh
import { ShortUrlsList } from '../../src/short-urls/reducers/shortUrlsList';
import { ReachableServer, SelectedServer } from '../../src/servers/data';
import { SemVer } from '../../src/utils/helpers/version';
import { OrderableFields, SORTABLE_FIELDS } from '../../src/short-urls/data';
import { ShortUrlsOrderableFields, SHORT_URLS_ORDERABLE_FIELDS } from '../../src/short-urls/data';
describe('<ShortUrlsTable />', () => {
let wrapper: ShallowWrapper;
@ -51,8 +51,8 @@ describe('<ShortUrlsTable />', () => {
.find('thead')
.find('tr')
.find('th')
.filterWhere((e) => e.text().includes(SORTABLE_FIELDS[orderableField as OrderableFields]));
const sortableFields = Object.keys(SORTABLE_FIELDS).filter((sortableField) => sortableField !== 'title');
.filterWhere((e) => e.text().includes(SHORT_URLS_ORDERABLE_FIELDS[orderableField as ShortUrlsOrderableFields]));
const sortableFields = Object.keys(SHORT_URLS_ORDERABLE_FIELDS).filter((sortableField) => sortableField !== 'title');
expect.assertions(sortableFields.length);
sortableFields.forEach((sortableField) => {

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

@ -9,7 +9,7 @@ import { Result } from '../../src/utils/Result';
import { TagsModeDropdown } from '../../src/tags/TagsModeDropdown';
import SearchField from '../../src/utils/SearchField';
import { Settings } from '../../src/settings/reducers/settings';
import { OrderableFields } from '../../src/tags/data/TagsListChildrenProps';
import { TagsOrderableFields } from '../../src/tags/data/TagsListChildrenProps';
import SortingDropdown from '../../src/utils/SortingDropdown';
describe('<TagsList />', () => {
@ -98,7 +98,7 @@ describe('<TagsList />', () => {
it('can update current order via orderByColumn from table component', () => {
const wrapper = createWrapper({ filteredTags: [ 'foo', 'bar' ], stats: {} });
const callOrderBy = (field: OrderableFields) => {
const callOrderBy = (field: TagsOrderableFields) => {
((wrapper.find(TagsTable).prop('orderByColumn') as Function)(field) as Function)();
};