forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-03-03 22:31:52 +00:00
Code Issues Packages Projects Releases 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
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[];