mirror of
https://github.com/withastro/astro.git
synced 2025-01-06 22:10:10 -05:00
Fix: Paginate adds unexpected trailing slash on index route (#6676)
* fix: remove unexpected trailing / on paginate * test: next and prev href * chore: changesset * fix: correct empty string to '/' for index route * edit: and typo Co-authored-by: Happydev <81974850+MoustaphaDev@users.noreply.github.com> * fix: tests not running! --------- Co-authored-by: Happydev <81974850+MoustaphaDev@users.noreply.github.com>
This commit is contained in:
parent
239b9a2fb8
commit
5e33c51a9c
4 changed files with 54 additions and 20 deletions
5
.changeset/eight-humans-push.md
Normal file
5
.changeset/eight-humans-push.md
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
---
|
||||||
|
'astro': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
Fix next and previous links for index routes when using pagination
|
|
@ -39,6 +39,21 @@ export function generatePaginateFunction(routeMatch: RouteData): PaginateFunctio
|
||||||
...additionalParams,
|
...additionalParams,
|
||||||
[paramName]: includesFirstPageNumber || pageNum > 1 ? String(pageNum) : undefined,
|
[paramName]: includesFirstPageNumber || pageNum > 1 ? String(pageNum) : undefined,
|
||||||
};
|
};
|
||||||
|
const current = correctIndexRoute(routeMatch.generate({ ...params }));
|
||||||
|
const next =
|
||||||
|
pageNum === lastPage
|
||||||
|
? undefined
|
||||||
|
: correctIndexRoute(routeMatch.generate({ ...params, page: String(pageNum + 1) }));
|
||||||
|
const prev =
|
||||||
|
pageNum === 1
|
||||||
|
? undefined
|
||||||
|
: correctIndexRoute(
|
||||||
|
routeMatch.generate({
|
||||||
|
...params,
|
||||||
|
page:
|
||||||
|
!includesFirstPageNumber && pageNum - 1 === 1 ? undefined : String(pageNum - 1),
|
||||||
|
})
|
||||||
|
);
|
||||||
return {
|
return {
|
||||||
params,
|
params,
|
||||||
props: {
|
props: {
|
||||||
|
@ -51,21 +66,7 @@ export function generatePaginateFunction(routeMatch: RouteData): PaginateFunctio
|
||||||
total: data.length,
|
total: data.length,
|
||||||
currentPage: pageNum,
|
currentPage: pageNum,
|
||||||
lastPage: lastPage,
|
lastPage: lastPage,
|
||||||
url: {
|
url: { current, next, prev },
|
||||||
current: routeMatch.generate({ ...params }),
|
|
||||||
next:
|
|
||||||
pageNum === lastPage
|
|
||||||
? undefined
|
|
||||||
: routeMatch.generate({ ...params, page: String(pageNum + 1) }),
|
|
||||||
prev:
|
|
||||||
pageNum === 1
|
|
||||||
? undefined
|
|
||||||
: routeMatch.generate({
|
|
||||||
...params,
|
|
||||||
page:
|
|
||||||
!includesFirstPageNumber && pageNum - 1 === 1 ? '' : String(pageNum - 1),
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
} as Page,
|
} as Page,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
@ -73,3 +74,13 @@ export function generatePaginateFunction(routeMatch: RouteData): PaginateFunctio
|
||||||
return result;
|
return result;
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function correctIndexRoute(route: string) {
|
||||||
|
// `routeMatch.generate` avoids appending `/`
|
||||||
|
// unless `trailingSlash: 'always'` is configured.
|
||||||
|
// This means an empty string is possible for the index route.
|
||||||
|
if (route === '') {
|
||||||
|
return '/';
|
||||||
|
}
|
||||||
|
return route;
|
||||||
|
}
|
||||||
|
|
|
@ -41,12 +41,28 @@ describe('Pagination', () => {
|
||||||
{ color: 'blue', p: '2' },
|
{ color: 'blue', p: '2' },
|
||||||
];
|
];
|
||||||
await Promise.all(
|
await Promise.all(
|
||||||
params.map(async ({ color, p }) => {
|
params.map(async ({ color, p }, idx) => {
|
||||||
const html = await fixture.readFile(`/posts/${color}/${p}/index.html`);
|
const html = await fixture.readFile(`/posts/${color}/${p}/index.html`);
|
||||||
const $ = cheerio.load(html);
|
const $ = cheerio.load(html);
|
||||||
expect($('#page-a').text()).to.equal(p);
|
expect($('#page-param').text()).to.equal(p);
|
||||||
expect($('#page-b').text()).to.equal(p);
|
expect($('#currentPage').text()).to.equal(p);
|
||||||
expect($('#filter').text()).to.equal(color);
|
expect($('#filter').text()).to.equal(color);
|
||||||
|
|
||||||
|
const prevHref = $('#prev').attr('href');
|
||||||
|
const nextHref = $('#next').attr('href');
|
||||||
|
|
||||||
|
if (color === 'red') {
|
||||||
|
expect(prevHref).to.be.undefined;
|
||||||
|
expect(nextHref).to.be.undefined;
|
||||||
|
}
|
||||||
|
if (color === 'blue' && p === '1') {
|
||||||
|
expect(prevHref).to.be.undefined;
|
||||||
|
expect(nextHref).to.equal('/posts/blue/2');
|
||||||
|
}
|
||||||
|
if (color === 'blue' && p === '2') {
|
||||||
|
expect(prevHref).to.equal('/posts/blue/1');
|
||||||
|
expect(nextHref).to.be.undefined;
|
||||||
|
}
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
|
@ -21,8 +21,10 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site);
|
||||||
<link rel="canonical" href={canonicalURL.href} />
|
<link rel="canonical" href={canonicalURL.href} />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="page-a">{params.page}</div>
|
<div id="page-param">{params.page}</div>
|
||||||
<div id="page-b">{page.currentPage}</div>
|
<div id="currentPage">{page.currentPage}</div>
|
||||||
<div id="filter">{filter}</div>
|
<div id="filter">{filter}</div>
|
||||||
|
<a href={page.url.prev} id="prev">Previous</a>
|
||||||
|
<a href={page.url.next} id="next">Next</a>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
Loading…
Reference in a new issue