feat: add load older/newer note button (add pagination to timeline)

app/components/loadMoreNote.module.css

@@ -0,0 +1,12 @@
+.loadMoreNote {
+  text-align: center;
+
+  div {
+    border: solid #000;
+    border-width: 0.5px 0;
+  }
+
+  div:hover {
+    background-color: #f4f4f6;
+  }
+}

app/components/loadMoreNote.tsx

@@ -0,0 +1,31 @@
+import { TimelineButton } from "~/components/timelineButton";
+import style from "./loadMoreNote.module.css";
+
+export interface LoadMoreNoteButtonProps {
+  type: "newer" | "older";
+  noteID: string;
+}
+
+export const LoadMoreNoteButton = (props: LoadMoreNoteButtonProps) => {
+  if (props.type === "newer") {
+    return (
+      <div className={style.loadMoreNote}>
+        <TimelineButton
+          link={`?after_id=${props.noteID}#`}
+          linkText="Load newer notes"
+        />
+      </div>
+    );
+  } else if (props.type === "older") {
+    return (
+      <div className={style.loadMoreNote}>
+        <TimelineButton
+          link={`?before_id=${props.noteID}#`}
+          linkText="Load older notes"
+        />
+      </div>
+    );
+  } else {
+    throw new Error("Invalid props");
+  }
+};

app/components/timelineButton.tsx

@@ -0,0 +1,16 @@
+import { Link } from "@remix-run/react";
+
+export interface TimelineButtonProps {
+  link: string;
+  linkText: string;
+}
+
+export const TimelineButton = ({ link, linkText }: TimelineButtonProps) => {
+  return (
+    <Link to={link}>
+      <div>
+        <p>{linkText}</p>
+      </div>
+    </Link>
+  );
+};

app/lib/account.ts

@@ -33,10 +33,16 @@ export const account = async (
 
 export const accountTimeline = async (
   id: string,
-  token: string | undefined
+  token: string | undefined,
+  beforeID?: string
 ): Promise<TimelineResponse[] | { error: string }> => {
   try {
-    const res = await fetch(`http://localhost:3000/timeline/accounts/${id}`, {
+    const url = new URL(`http://localhost:3000/timeline/accounts/${id}`);
+    if (beforeID) {
+      url.searchParams.append("before_id", beforeID);
+    }
+
+    const res = await fetch(url, {
       headers: {
         Authorization: `Bearer ${token}`,
       },

app/lib/timeline.ts

@@ -21,10 +21,16 @@ export interface TimelineResponse {
 }
 
 export const fetchHomeTimeline = async (
-  token: string
+  token: string,
+  beforeID?: string
 ): Promise<{ notes: TimelineResponse[] } | { error: string }> => {
   try {
-    const timelineRes = await fetch("http://localhost:3000/timeline/home", {
+    const url = new URL("http://localhost:3000/timeline/home");
+    if (beforeID) {
+      url.searchParams.append("before_id", beforeID);
+    }
+
+    const timelineRes = await fetch(url, {
       headers: {
         authorization: `Bearer ${token}`,
       },

app/routes/accounts.$id.tsx

@@ -1,5 +1,6 @@
 import { LoaderFunctionArgs } from "@remix-run/cloudflare";
 import { MetaFunction, useLoaderData } from "@remix-run/react";
+import { LoadMoreNoteButton } from "~/components/loadMoreNote";
 import { Note, NoteProps } from "~/components/note";
 import { account, AccountResponse, accountTimeline } from "~/lib/account";
 import { accountCookie } from "~/lib/login";
@@ -23,7 +24,14 @@ export const loader = async ({
     return { error: accountRes.error };
   }
 
-  const timelineRes = await accountTimeline(accountRes.id, token);
+  const query = new URL(request.url).searchParams;
+  const beforeID = query.get("before_id") ?? undefined;
+  const afterID = query.get("after_id") ?? undefined;
+  if (beforeID && afterID) {
+    throw new Error("before_id and after_id cannot be used together");
+  }
+
+  const timelineRes = await accountTimeline(accountRes.id, token, beforeID);
   if ("error" in timelineRes) {
     return { error: timelineRes.error };
   }
@@ -104,9 +112,21 @@ interface AccountTimelineProps {
 const AccountTimeline = ({ notes }: AccountTimelineProps) => {
   return (
     <div>
+      <div>
+        <LoadMoreNoteButton type="newer" noteID={notes[0].id} />
+      </div>
+
       {notes.map((note) => {
         return <Note key={note.id} {...note} />;
       })}
+
+      <div>
+        {notes.length < 20 ? (
+          <></>
+        ) : (
+          <LoadMoreNoteButton type="older" noteID={notes.at(-1)!.id} />
+        )}
+      </div>
     </div>
   );
 };

app/routes/timeline.tsx

@@ -4,6 +4,7 @@ import {
   TypedResponse,
 } from "@remix-run/cloudflare";
 import { MetaFunction, useLoaderData } from "@remix-run/react";
+import { LoadMoreNoteButton } from "~/components/loadMoreNote";
 import { Note } from "~/components/note";
 import { PostForm } from "~/components/postForm";
 import { accountCookie } from "~/lib/login";
@@ -34,7 +35,9 @@ export const loader = async ({
     return { error: parsedToken.message };
   }
 
-  const res = await fetchHomeTimeline(cookie);
+  const query = new URL(request.url).searchParams;
+  const beforeID = query.get("before_id") ?? undefined;
+  const res = await fetchHomeTimeline(cookie, beforeID);
   if ("error" in res) {
     return res;
   }
@@ -57,6 +60,9 @@ export default function Timeline() {
   return (
     <div className={styles.noteContainer}>
       <PostForm />
+
+      <LoadMoreNoteButton type="newer" noteID={loaderData.notes[0].id} />
+
       {loaderData ? (
         loaderData.notes.map((note) => {
           const author = {
@@ -69,20 +75,27 @@ export default function Timeline() {
             reactedBy: reaction.reacted_by,
           }));
           return (
-            <Note
-              key={note.id}
-              id={note.id}
-              author={author}
-              content={note.content}
-              contentsWarningComment={note.contents_warning_comment}
-              reactions={reactions}
-              loggedInAccountID={loaderData.loggedInAccount.id}
-            />
+            <div key={note.id}>
+              <Note
+                id={note.id}
+                author={author}
+                content={note.content}
+                contentsWarningComment={note.contents_warning_comment}
+                reactions={reactions}
+                loggedInAccountID={loaderData.loggedInAccount.id}
+              />
+            </div>
           );
         })
       ) : (
         <div></div>
       )}
+
+      {loaderData.notes.length < 20 ? (
+        <></>
+      ) : (
+        <LoadMoreNoteButton type="older" noteID={loaderData.notes.at(-1)!.id} />
+      )}
     </div>
   );
 }