Skip to content

feat: parameter from cont to page and add newer link for pagination #105

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dahlia merged 4 commits into from
Feb 9, 2025
+42 −8
Merged

feat: parameter from cont to page and add newer link for pagination #105

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d4d2da3
feat: parameter from cont to page and add newer link for pagination
yamanoku Feb 8, 2025
ba8e0de
fix: Use a count query to count the number of rows without fetching a…
yamanoku Feb 8, 2025
f67384f
https://github.com/fedify-dev/hollo/pull/105 changelog
dahlia Feb 9, 2025
6ae3232
Merge branch 'main' into feature/rename-cont-to-page
dahlia Feb 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 34 additions & 8 deletions src/pages/profile/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { and, desc, eq, lte, or } from "drizzle-orm";
import { and, desc, eq, or } from "drizzle-orm";
import { Hono } from "hono";
import xss from "xss";
import { Layout } from "../../components/Layout.tsx";
Expand Down Expand Up @@ -26,7 +26,7 @@ const profile = new Hono();

profile.route("/:id{[-a-f0-9]+}", profilePost);

const WINDOW = 30;
const PAGE_SIZE = 30;

profile.get<"/:handle">(async (c) => {
let handle = c.req.param("handle");
Expand All @@ -39,14 +39,35 @@ profile.get<"/:handle">(async (c) => {
const contStr = c.req.query("cont");
const cont = contStr == null || contStr.trim() === "" ? undefined : contStr;
if (cont != null && !isUuid(cont)) return c.notFound();
const pageStr = c.req.query("page");
if (
pageStr !== undefined &&
(Number.isNaN(Number.parseInt(pageStr)) || Number.parseInt(pageStr) < 1)
) {
return c.notFound();
}
const page =
pageStr !== undefined && !Number.isNaN(Number.parseInt(pageStr))
? Number.parseInt(pageStr)
: 1;
const totalPosts = await db.query.posts.findMany({
where: and(
eq(posts.accountId, owner.id),
or(eq(posts.visibility, "public"), eq(posts.visibility, "unlisted")),
),
});
const maxPage = Math.ceil(totalPosts.length / PAGE_SIZE);
if (page > maxPage) {
return c.notFound();
}
Copy link
Contributor Author

@yamanoku yamanoku Feb 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Error that occurs when ?page exceeds the total number of pages.

404 not founds screenshots

Copy link
Member

@dahlia dahlia Feb 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's fair enough.

const postList = await db.query.posts.findMany({
where: and(
eq(posts.accountId, owner.id),
or(eq(posts.visibility, "public"), eq(posts.visibility, "unlisted")),
...(cont == null ? [] : [lte(posts.id, cont)]),
),
orderBy: desc(posts.id),
limit: WINDOW + 1,
limit: PAGE_SIZE,
offset: (page - 1) * PAGE_SIZE,
with: {
account: true,
media: true,
Expand Down Expand Up @@ -133,12 +154,13 @@ profile.get<"/:handle">(async (c) => {
const atomUrl = new URL(c.req.url);
atomUrl.pathname += "/atom.xml";
atomUrl.search = "";
const newerUrl = page > 1 ? `?page=${page - 1}` : undefined;
const olderUrl =
postList.length > WINDOW ? `?cont=${postList[WINDOW].id}` : undefined;
postList.length === PAGE_SIZE ? `?page=${page + 1}` : undefined;
return c.html(
<ProfilePage
accountOwner={owner}
posts={postList.slice(0, WINDOW)}
posts={postList.slice(0, PAGE_SIZE)}
pinnedPosts={pinnedPostList
.map((p) => p.post)
.filter(
Expand All @@ -147,6 +169,7 @@ profile.get<"/:handle">(async (c) => {
featuredTags={featuredTagList}
atomUrl={atomUrl.href}
olderUrl={olderUrl}
newerUrl={newerUrl}
/>,
);
});
Expand Down Expand Up @@ -224,6 +247,7 @@ interface ProfilePageProps {
readonly featuredTags: FeaturedTag[];
readonly atomUrl: string;
readonly olderUrl?: string;
readonly newerUrl?: string;
}

function ProfilePage({
Expand All @@ -233,6 +257,7 @@ function ProfilePage({
featuredTags,
atomUrl,
olderUrl,
newerUrl,
}: ProfilePageProps) {
return (
<Layout
Expand Down Expand Up @@ -267,8 +292,9 @@ function ProfilePage({
{posts.map((post) => (
<PostView post={post} />
))}
<div style="text-align: right;">
{olderUrl && <a href={olderUrl}>Older &rarr;</a>}
<div style={{ display: "flex", justifyContent: "space-between" }}>
<div>{newerUrl && <a href={newerUrl}>&larr; Newer</a>}</div>
<div>{olderUrl && <a href={olderUrl}>Older &rarr;</a>}</div>
</div>
</Layout>
);
Expand Down