Merge pull request #1 from team-plain/p-7885-thread-list-page

P-7885 thread list page

Author: DLeyland

app/page.module.css

@@ -1,8 +1,14 @@
 .main {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 32px;
   align-items: center;
-  padding: 6rem;
+  padding: 2rem;
   min-height: 100vh;
 }
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}

app/page.tsx

@@ -1,48 +1,48 @@
 import Navigation from "@/components/navigation";
 import styles from "./page.module.css";
-import { PlainClient } from "@team-plain/typescript-sdk";
+import { plainClient } from "@/utils/plainClient";
+import { ThreadRow } from "@/components/threadRow";
+import { PaginationControls } from "@/components/paginationControls";
 
 export const fetchCache = "force-no-store";
 
-const apiKey = process.env.PLAIN_API_KEY;
-if (!apiKey) {
-	throw new Error("Please set the `PLAIN_API_KEY` environment variable");
-}
-
-export const client = new PlainClient({
-	apiKey,
-});
+// When adapting this example get the tenant id as part of auth or fetch it afterwards
+const TENANT_EXTERNAL_ID = "abcd1234";
 
 export default async function Home({
-	params,
-	searchParams,
+  searchParams,
 }: {
-	params: { slug: string };
-	searchParams: { [key: string]: string | string[] | undefined };
+  searchParams: { [key: string]: string | undefined };
 }) {
-	const threads = await client.getThreads({
-		filters: {
-			// customerIds: ["c_01J28ZQKJX9CVRXVHBMAXNSV5G"],
-			tenantIdentifiers: [{ tenantId: "te_01J299SM3E25EJHT7JKYS6G7K5" }],
-		},
-	});
-
-	console.log(threads.data?.threads.length);
+  const threads = await plainClient.getThreads({
+    filters: {
+      // If you want to only allow customers to view threads they have raised then you can filter by customerIds instead.
+      // Note that if you provide multiple filters they are combined with AND rather than OR.
+      //   customerIds: ["c_01J28ZQKJX9CVRXVHBMAXNSV5G"],
+      tenantIdentifiers: [{ externalId: TENANT_EXTERNAL_ID }],
+    },
+    after: searchParams.after as string | undefined,
+    before: searchParams.before as string | undefined,
+  });
 
-	return (
-		<>
-			<Navigation title="Plain Headless Portal example" />
-			<main className={styles.main}>
-				<div>
-					{threads.data?.threads.map((thread) => {
-						return (
-							<div key={`thread-row-${thread.id}`}>
-								<a href={`/thread/${thread.id}`}>{thread.title}</a>
-							</div>
-						);
-					})}
-				</div>
-			</main>
-		</>
-	);
+  return (
+    <>
+      <Navigation title="Plain Headless Portal example" />
+      <main className={styles.main}>
+        <h2>Support requests</h2>
+        {threads.data && (
+          <>
+            <div className={styles.list}>
+              {threads.data?.threads.map((thread) => {
+                return (
+                  <ThreadRow thread={thread} key={`thread-row-${thread.id}`} />
+                );
+              })}
+            </div>
+            <PaginationControls pageInfo={threads.data.pageInfo} />
+          </>
+        )}
+      </main>
+    </>
+  );
 }

app/thread/[threadId]/page.tsx

@@ -115,9 +115,6 @@ export default async function ThreadPage({
 		},
 	})
 		.then((res) => res.json())
-		.catch((err) => {
-			console.log(err);
-		});
 
 	const thread = data.data.thread;
 	const timelineEntries = thread.timelineEntries;

components/navigation.tsx

@@ -1,19 +1,19 @@
 import styles from "./navigation.module.css";
 
 export default function Navigation({
-	hasBackButton = false,
-	title,
+  hasBackButton = false,
+  title,
 }: {
-	hasBackButton?: boolean;
-	title: string;
+  hasBackButton?: boolean;
+  title: string;
 }) {
-	return (
-		<nav
-			className={styles.nav}
-			style={{ justifyContent: hasBackButton ? "flex-start" : "center" }}
-		>
-			{hasBackButton && <a href="/">&lt; Go back</a>}
-			<h1>{title}</h1>
-		</nav>
-	);
+  return (
+    <nav
+      className={styles.nav}
+      style={{ justifyContent: hasBackButton ? "flex-start" : "center" }}
+    >
+      {hasBackButton && <a href="/">&lt; Go back</a>}
+      <h1>{title}</h1>
+    </nav>
+  );
 }

components/paginationControls.module.css

@@ -0,0 +1,4 @@
+.pageWrapper {
+    display: flex;
+    gap: 8px
+}

components/paginationControls.tsx

@@ -0,0 +1,37 @@
+"use client";
+import { PageInfoPartsFragment } from "@team-plain/typescript-sdk";
+import { usePathname, useRouter } from "next/navigation";
+import styles from "./paginationControls.module.css";
+
+export function PaginationControls({
+  pageInfo,
+}: {
+  pageInfo: PageInfoPartsFragment;
+}) {
+  const router = useRouter();
+  const pathname = usePathname();
+  return (
+    <div className={styles.pageWrapper}>
+      <button
+        onClick={() => {
+          if (pageInfo.startCursor) {
+            router.push(`${pathname}?before=${pageInfo.startCursor}`);
+          }
+        }}
+        disabled={!pageInfo.hasPreviousPage}
+      >
+        Previous page
+      </button>
+      <button
+        onClick={() => {
+          if (pageInfo.endCursor) {
+            router.push(`${pathname}?after=${pageInfo.endCursor}`);
+          }
+        }}
+        disabled={!pageInfo.hasNextPage}
+      >
+        Next page
+      </button>
+    </div>
+  );
+}

components/threadRow.module.css

@@ -0,0 +1,5 @@
+.row {
+    display: flex;
+    gap: 16px;
+    align-items: 'center';
+}

components/threadRow.tsx

@@ -0,0 +1,13 @@
+import { plainClient } from "@/utils/plainClient";
+import { ThreadPartsFragment } from "@team-plain/typescript-sdk";
+import styles from './threadRow.module.css';
+
+export async function ThreadRow({ thread }: { thread: ThreadPartsFragment }) {
+    const customer = await plainClient.getCustomerById({ customerId: thread.customer.id });
+
+    return (
+        <a className={styles.row} href={`/thread/${thread.id}`}>
+            <div>{customer.data?.fullName}</div><div><h3>{thread.title}</h3><div>{thread.previewText}</div></div>
+        </a>
+    )
+}

utils/createdBy.ts

@@ -0,0 +1,10 @@
+import { PlainClient } from "@team-plain/typescript-sdk";
+
+const apiKey = process.env.PLAIN_API_KEY;
+if (!apiKey) {
+	throw new Error("Please set the `PLAIN_API_KEY` environment variable");
+}
+
+export const plainClient = new PlainClient({
+	apiKey,
+});