2021-12-24 15:14:13 +03:00
|
|
|
import { pipe } from 'ramda';
|
2021-11-09 01:41:17 +03:00
|
|
|
import { FC, useEffect, useMemo, useState } from 'react';
|
2020-09-04 20:05:41 +03:00
|
|
|
import { RouteComponentProps } from 'react-router';
|
2020-12-25 13:15:49 +03:00
|
|
|
import { Card } from 'reactstrap';
|
2021-12-25 12:31:48 +03:00
|
|
|
import { OrderingDropdown } from '../utils/OrderingDropdown';
|
2021-12-24 13:05:22 +03:00
|
|
|
import { determineOrderDir, OrderDir } from '../utils/helpers/ordering';
|
2021-10-17 14:43:37 +03:00
|
|
|
import { getServerId, SelectedServer } from '../servers/data';
|
2020-09-06 20:41:15 +03:00
|
|
|
import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub';
|
2021-02-28 12:12:30 +03:00
|
|
|
import { Topics } from '../mercure/helpers/Topics';
|
2021-11-07 00:34:29 +03:00
|
|
|
import { TableOrderIcon } from '../utils/table/TableOrderIcon';
|
2021-11-11 23:28:17 +03:00
|
|
|
import { ShlinkShortUrlsListParams } from '../api/types';
|
2021-12-24 15:14:13 +03:00
|
|
|
import { DEFAULT_SHORT_URLS_ORDERING, Settings } from '../settings/reducers/settings';
|
2020-08-30 20:45:17 +03:00
|
|
|
import { ShortUrlsList as ShortUrlsListState } from './reducers/shortUrlsList';
|
2020-12-07 13:17:19 +03:00
|
|
|
import { ShortUrlsTableProps } from './ShortUrlsTable';
|
2020-12-25 13:15:49 +03:00
|
|
|
import Paginator from './Paginator';
|
2021-11-09 01:41:17 +03:00
|
|
|
import { ShortUrlListRouteParams, useShortUrlsQuery } from './helpers/hooks';
|
2021-12-25 12:24:37 +03:00
|
|
|
import { ShortUrlsOrderableFields, ShortUrlsOrder, SHORT_URLS_ORDERABLE_FIELDS } from './data';
|
2020-08-30 20:45:17 +03:00
|
|
|
|
2021-11-09 01:41:17 +03:00
|
|
|
interface ShortUrlsListProps extends RouteComponentProps<ShortUrlListRouteParams> {
|
2020-08-30 20:45:17 +03:00
|
|
|
selectedServer: SelectedServer;
|
2020-12-07 13:17:19 +03:00
|
|
|
shortUrlsList: ShortUrlsListState;
|
2021-12-24 15:14:13 +03:00
|
|
|
listShortUrls: (params: ShlinkShortUrlsListParams) => void;
|
|
|
|
settings: Settings;
|
2020-08-30 20:45:17 +03:00
|
|
|
}
|
|
|
|
|
2021-11-09 01:41:17 +03:00
|
|
|
const ShortUrlsList = (ShortUrlsTable: FC<ShortUrlsTableProps>, SearchBar: FC) => boundToMercureHub(({
|
2020-08-30 20:45:17 +03:00
|
|
|
listShortUrls,
|
|
|
|
match,
|
|
|
|
location,
|
2021-11-09 01:41:17 +03:00
|
|
|
history,
|
2020-08-30 20:45:17 +03:00
|
|
|
shortUrlsList,
|
|
|
|
selectedServer,
|
2021-12-24 15:14:13 +03:00
|
|
|
settings,
|
2020-12-07 13:17:19 +03:00
|
|
|
}: ShortUrlsListProps) => {
|
2021-11-09 01:41:17 +03:00
|
|
|
const serverId = getServerId(selectedServer);
|
2021-12-24 16:15:28 +03:00
|
|
|
const initialOrderBy = settings.shortUrlsList?.defaultOrdering ?? DEFAULT_SHORT_URLS_ORDERING;
|
2021-12-24 15:14:13 +03:00
|
|
|
const [ order, setOrder ] = useState<ShortUrlsOrder>(initialOrderBy);
|
2021-11-11 00:25:56 +03:00
|
|
|
const [{ tags, search, startDate, endDate }, toFirstPage ] = useShortUrlsQuery({ history, match, location });
|
|
|
|
const selectedTags = useMemo(() => tags?.split(',') ?? [], [ tags ]);
|
2020-12-25 13:15:49 +03:00
|
|
|
const { pagination } = shortUrlsList?.shortUrls ?? {};
|
2021-11-09 01:41:17 +03:00
|
|
|
|
2021-12-25 12:24:37 +03:00
|
|
|
const handleOrderBy = (field?: ShortUrlsOrderableFields, dir?: OrderDir) => setOrder({ field, dir });
|
|
|
|
const orderByColumn = (field: ShortUrlsOrderableFields) => () =>
|
2021-11-01 15:41:16 +03:00
|
|
|
handleOrderBy(field, determineOrderDir(field, order.field, order.dir));
|
2021-12-25 12:24:37 +03:00
|
|
|
const renderOrderIcon = (field: ShortUrlsOrderableFields) => <TableOrderIcon currentOrder={order} field={field} />;
|
2021-11-09 01:41:17 +03:00
|
|
|
const addTag = pipe(
|
2021-11-11 00:25:56 +03:00
|
|
|
(newTag: string) => [ ...new Set([ ...selectedTags, newTag ]) ].join(','),
|
2021-11-09 01:41:17 +03:00
|
|
|
(tags) => toFirstPage({ tags }),
|
|
|
|
);
|
2020-08-30 20:45:17 +03:00
|
|
|
|
|
|
|
useEffect(() => {
|
2021-12-24 15:14:13 +03:00
|
|
|
listShortUrls({
|
|
|
|
page: match.params.page,
|
|
|
|
searchTerm: search,
|
|
|
|
tags: selectedTags,
|
|
|
|
itemsPerPage: undefined,
|
|
|
|
startDate,
|
|
|
|
endDate,
|
|
|
|
orderBy: order,
|
|
|
|
});
|
|
|
|
}, [ match.params.page, search, selectedTags, startDate, endDate, order ]);
|
2020-08-30 20:45:17 +03:00
|
|
|
|
|
|
|
return (
|
2020-11-14 00:44:26 +03:00
|
|
|
<>
|
2021-11-09 01:41:17 +03:00
|
|
|
<div className="mb-3"><SearchBar /></div>
|
2020-12-30 22:05:04 +03:00
|
|
|
<div className="d-block d-lg-none mb-3">
|
2021-12-25 12:31:48 +03:00
|
|
|
<OrderingDropdown items={SHORT_URLS_ORDERABLE_FIELDS} order={order} onChange={handleOrderBy} />
|
2020-08-30 20:45:17 +03:00
|
|
|
</div>
|
2020-12-25 13:15:49 +03:00
|
|
|
<Card body className="pb-1">
|
|
|
|
<ShortUrlsTable
|
|
|
|
selectedServer={selectedServer}
|
|
|
|
shortUrlsList={shortUrlsList}
|
2021-11-09 01:41:17 +03:00
|
|
|
orderByColumn={orderByColumn}
|
|
|
|
renderOrderIcon={renderOrderIcon}
|
|
|
|
onTagClick={addTag}
|
2020-12-25 13:15:49 +03:00
|
|
|
/>
|
2021-11-09 01:41:17 +03:00
|
|
|
<Paginator paginator={pagination} serverId={serverId} currentQueryString={location.search} />
|
2020-12-25 13:15:49 +03:00
|
|
|
</Card>
|
2020-11-14 00:44:26 +03:00
|
|
|
</>
|
2020-08-30 20:45:17 +03:00
|
|
|
);
|
2021-08-20 18:30:07 +03:00
|
|
|
}, () => [ Topics.visits ]);
|
2020-08-30 20:45:17 +03:00
|
|
|
|
|
|
|
export default ShortUrlsList;
|