diff --git a/CHANGELOG.md b/CHANGELOG.md index 7ac45fb2..958c0192 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,6 +16,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), * [#464](https://github.com/shlinkio/shlink-web-client/issues/464) Added support to download QR codes. This feature requires an unreleased version of Shlink, so it comes disabled, and will get enabled as soon as Shlink v2.9 is released. * [#469](https://github.com/shlinkio/shlink-web-client/issues/469) Added support `errorCorrection` in QR codes, when consuming Shlink 2.8 or higher. +* [#459](https://github.com/shlinkio/shlink-web-client/issues/459) Added new list mode to display tags. + + The mode is optional, and you can toggle between the classic cards mode or the new list mode whenever you want. + + You can also configure the default mode from settings. ### Changed * [#408](https://github.com/shlinkio/shlink-web-client/issues/408) Updated to Chart.js 3.5 diff --git a/src/tags/TagsTable.tsx b/src/tags/TagsTable.tsx index 2d00333c..2de68d44 100644 --- a/src/tags/TagsTable.tsx +++ b/src/tags/TagsTable.tsx @@ -1,4 +1,4 @@ -import { FC, useEffect } from 'react'; +import { FC, useEffect, useRef } from 'react'; import { splitEvery } from 'ramda'; import { RouteChildrenProps } from 'react-router'; import { SimpleCard } from '../utils/SimpleCard'; @@ -14,16 +14,21 @@ const TAGS_PER_PAGE = 20; // TODO Allow customizing this value in settings export const TagsTable = (colorGenerator: ColorGenerator, TagsTableRow: FC) => ( { tagsList, selectedServer, location }: TagsListChildrenProps & RouteChildrenProps, ) => { + const isFirstLoad = useRef(true); const { page: pageFromQuery = 1 } = parseQuery<{ page?: number | string }>(location.search); const [ page, setPage ] = useQueryState('page', Number(pageFromQuery)); - const sortedTags = tagsList.filteredTags; + const sortedTags = tagsList.filteredTags; // TODO Support sorting tags const pages = splitEvery(TAGS_PER_PAGE, sortedTags); const showPaginator = pages.length > 1; const currentPage = pages[page - 1] ?? []; useEffect(() => { - setPage(1); + !isFirstLoad.current && setPage(1); + isFirstLoad.current = false; }, [ tagsList.filteredTags ]); + useEffect(() => { + scrollTo(0, 0); + }, [ page ]); return (