Fix paging for too large page numbers (#2097)

On some pages with pagination, the user is led to believe that no data is available if a page with page number which it too high is accessed. However, since we show the page number to the outside and the user can access it through the URL, we must also provide appropriate handling. The underlying data can change and so can the number of pages. Now, if a bookmark was saved from an older version, the link should still lead to a destination.
This commit is contained in:
Florian Scholdei
2022-08-02 10:30:07 +02:00
committed by GitHub
parent 27dbcbf28d
commit 6c82142643
12 changed files with 189 additions and 154 deletions

View File

@@ -22,46 +22,34 @@
* SOFTWARE.
*/
import React, { FC } from "react";
import { useRouteMatch } from "react-router-dom";
import { Redirect, useRouteMatch } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { Branch, ChangesetCollection, Repository } from "@scm-manager/ui-types";
import { useChangesets } from "@scm-manager/ui-api";
import { Branch, Repository } from "@scm-manager/ui-types";
import {
ChangesetList,
ErrorNotification,
LinkPaginator,
Loading,
Notification,
urls
urls,
} from "@scm-manager/ui-components";
import { useChangesets } from "@scm-manager/ui-api";
type Props = {
repository: Repository;
branch?: Branch;
};
type ChangesetProps = Props & {
error: Error | null;
isLoading: boolean;
data?: ChangesetCollection;
};
export const usePage = () => {
const match = useRouteMatch();
return urls.getPageFromMatch(match);
};
const Changesets: FC<Props> = ({ repository, branch }) => {
const page = usePage();
const { isLoading, error, data } = useChangesets(repository, { branch, page: page - 1 });
return <ChangesetsPanel repository={repository} branch={branch} error={error} isLoading={isLoading} data={data} />;
type Props = {
repository: Repository;
branch?: Branch;
url: string;
};
export const ChangesetsPanel: FC<ChangesetProps> = ({ repository, error, isLoading, data }) => {
const [t] = useTranslation("repos");
const Changesets: FC<Props> = ({ repository, branch, url }) => {
const page = usePage();
const { isLoading, error, data } = useChangesets(repository, { branch, page: page - 1 });
const [t] = useTranslation("repos");
const changesets = data?._embedded?.changesets;
if (error) {
@@ -72,7 +60,11 @@ export const ChangesetsPanel: FC<ChangesetProps> = ({ repository, error, isLoadi
return <Loading />;
}
if (!changesets || changesets.length === 0) {
if (data && data.pageTotal < page && page > 1) {
return <Redirect to={`${urls.unescapeUrlForRoute(url)}/${data.pageTotal}`} />;
}
if (!data || !changesets || changesets.length === 0) {
return <Notification type="info">{t("changesets.noChangesets")}</Notification>;
}
@@ -82,7 +74,7 @@ export const ChangesetsPanel: FC<ChangesetProps> = ({ repository, error, isLoadi
<ChangesetList repository={repository} changesets={changesets} />
</div>
<div className="panel-footer">
<LinkPaginator page={page} collection={data} />
<LinkPaginator collection={data} page={page} />
</div>
</div>
);