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

Moved logic to render sorting icon to tags list, as it's too specific

Browse source
This commit is contained in:
Alejandro Celaya 2021-11-06 11:11:09 +01:00
parent 7a2d0e5dee
commit e6737ff1f2
2 changed files with 9 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/tags/TagsList.tsx
View file

@ -1,8 +1,6 @@
import { FC, useEffect, useMemo, useState } from 'react'; import { FC, useEffect, useMemo, useState } from 'react';
import { Row } from 'reactstrap'; import { Row } from 'reactstrap';
import { pipe } from 'ramda'; import { pipe } from 'ramda';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCaretDown as caretDownIcon, faCaretUp as caretUpIcon } from '@fortawesome/free-solid-svg-icons';
import Message from '../utils/Message'; import Message from '../utils/Message';
import SearchField from '../utils/SearchField'; import SearchField from '../utils/SearchField';
import { SelectedServer } from '../servers/data'; import { SelectedServer } from '../servers/data';
@ -54,8 +52,6 @@ const TagsList = (TagsCards: FC<TagsListChildrenProps>, TagsTable: FC<TagsTableP
const orderByColumn = (field: OrderableFields) => const orderByColumn = (field: OrderableFields) =>
() => setOrder({ field, dir: determineOrderDir(field, order.field, order.dir) }); () => setOrder({ field, dir: determineOrderDir(field, order.field, order.dir) });
const renderOrderIcon = (field: OrderableFields) => order.dir && order.field === field &&
<FontAwesomeIcon icon={order.dir === 'ASC' ? caretUpIcon : caretDownIcon} className="ml-1" />;
const renderContent = () => { const renderContent = () => {
if (tagsList.error) { if (tagsList.error) {
@ -76,8 +72,8 @@ const TagsList = (TagsCards: FC<TagsListChildrenProps>, TagsTable: FC<TagsTableP
<TagsTable <TagsTable
sortedTags={sortedTags} sortedTags={sortedTags}
selectedServer={selectedServer} selectedServer={selectedServer}
currentOrder={order}
orderByColumn={orderByColumn} orderByColumn={orderByColumn}
renderOrderIcon={renderOrderIcon}
/> />
); );
}; };

12
src/tags/TagsTable.tsx
View file

@ -1,23 +1,25 @@
import { FC, ReactNode, useEffect, useRef } from 'react'; import { FC, useEffect, useRef } from 'react';
import { splitEvery } from 'ramda'; import { splitEvery } from 'ramda';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCaretDown as caretDownIcon, faCaretUp as caretUpIcon } from '@fortawesome/free-solid-svg-icons';
import { RouteChildrenProps } from 'react-router'; import { RouteChildrenProps } from 'react-router';
import { SimpleCard } from '../utils/SimpleCard'; import { SimpleCard } from '../utils/SimpleCard';
import SimplePaginator from '../common/SimplePaginator'; import SimplePaginator from '../common/SimplePaginator';
import { useQueryState } from '../utils/helpers/hooks'; import { useQueryState } from '../utils/helpers/hooks';
import { parseQuery } from '../utils/helpers/query'; import { parseQuery } from '../utils/helpers/query';
import { OrderableFields, TagsListChildrenProps } from './data/TagsListChildrenProps'; import { OrderableFields, TagsListChildrenProps, TagsOrder } from './data/TagsListChildrenProps';
import { TagsTableRowProps } from './TagsTableRow'; import { TagsTableRowProps } from './TagsTableRow';
import './TagsTable.scss'; import './TagsTable.scss';
export interface TagsTableProps extends TagsListChildrenProps { export interface TagsTableProps extends TagsListChildrenProps {
orderByColumn: (field: OrderableFields) => () => void; orderByColumn: (field: OrderableFields) => () => void;
renderOrderIcon: (field: OrderableFields) => ReactNode; currentOrder: TagsOrder;
} }
const TAGS_PER_PAGE = 20; // TODO Allow customizing this value in settings const TAGS_PER_PAGE = 20; // TODO Allow customizing this value in settings
export const TagsTable = (TagsTableRow: FC<TagsTableRowProps>) => ( export const TagsTable = (TagsTableRow: FC<TagsTableRowProps>) => (
{ sortedTags, selectedServer, location, orderByColumn, renderOrderIcon }: TagsTableProps & RouteChildrenProps, { sortedTags, selectedServer, location, orderByColumn, currentOrder }: TagsTableProps & RouteChildrenProps,
) => { ) => {
const isFirstLoad = useRef(true); const isFirstLoad = useRef(true);
const { page: pageFromQuery = 1 } = parseQuery<{ page?: number | string }>(location.search); const { page: pageFromQuery = 1 } = parseQuery<{ page?: number | string }>(location.search);
@ -25,6 +27,8 @@ export const TagsTable = (TagsTableRow: FC<TagsTableRowProps>) => (
const pages = splitEvery(TAGS_PER_PAGE, sortedTags); const pages = splitEvery(TAGS_PER_PAGE, sortedTags);
const showPaginator = pages.length > 1; const showPaginator = pages.length > 1;
const currentPage = pages[page - 1] ?? []; const currentPage = pages[page - 1] ?? [];
const renderOrderIcon = (field: OrderableFields) => currentOrder.dir && currentOrder.field === field &&
<FontAwesomeIcon icon={currentOrder.dir === 'ASC' ? caretUpIcon : caretDownIcon} className="ml-1" />;
useEffect(() => { useEffect(() => {
!isFirstLoad.current && setPage(1); !isFirstLoad.current && setPage(1);