A bit of data/styling

Author: Elise Bach

app/page.module.css

@@ -2,7 +2,6 @@
   display: flex;
   flex-direction: column;
   gap: 16px;
-  /* justify-content: ; */
   align-items: center;
   padding: 6rem;
   min-height: 100vh;

app/page.tsx

@@ -5,41 +5,41 @@ 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");
+	throw new Error("Please set the `PLAIN_API_KEY` environment variable");
 }
 
 const client = new PlainClient({
-  apiKey,
+	apiKey,
 });
 
 export default async function Home({
-  params,
-  searchParams,
+	params,
+	searchParams,
 }: {
-  params: { slug: string };
-  searchParams: { [key: string]: string | string[] | undefined };
+	params: { slug: string };
+	searchParams: { [key: string]: string | string[] | undefined };
 }) {
-  const threads = await client.getThreads({
-    filters: {
-      // customerIds: ["c_01J28ZQKJX9CVRXVHBMAXNSV5G"],
-      tenantIdentifiers: [{ tenantId: "te_01J299SM3E25EJHT7JKYS6G7K5" }],
-    },
-  });
+	const threads = await client.getThreads({
+		filters: {
+			// customerIds: ["c_01J28ZQKJX9CVRXVHBMAXNSV5G"],
+			tenantIdentifiers: [{ tenantId: "te_01J299SM3E25EJHT7JKYS6G7K5" }],
+		},
+	});
 
-  console.log(threads.data?.threads.length);
+	console.log(threads.data?.threads.length);
 
-  return (
-    <main className={styles.main}>
-      <h1>Hello</h1>
-      <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 (
+		<main className={styles.main}>
+			<h1>Plain Headless Portal</h1>
+			<div>
+				{threads.data?.threads.map((thread) => {
+					return (
+						<div key={`thread-row-${thread.id}`}>
+							<a href={`/thread/${thread.id}`}>{thread.title}</a>
+						</div>
+					);
+				})}
+			</div>
+		</main>
+	);
 }

app/thread/[threadId]/page.module.css

@@ -0,0 +1,14 @@
+.main {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  align-items: center;
+  padding: 6rem;
+  min-height: 100vh;
+}
+
+.message {
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  padding: 12px;
+}

app/thread/[threadId]/page.tsx

@@ -1,14 +1,16 @@
+import styles from "./page.module.css";
+
 export default async function ThreadPage({
-  params,
+	params,
 }: {
-  params: { threadId: string };
+	params: { threadId: string };
 }) {
-  const data = await fetch("https://core-api.uk.plain.com/graphql/v1", {
-    method: "POST",
-    body: JSON.stringify({
-      query: `{ 
-      
+	const data = await fetch("https://core-api.uk.plain.com/graphql/v1", {
+		method: "POST",
+		body: JSON.stringify({
+			query: `{ 
         thread(threadId: "th_01J299WQGA3VNQ4FDECV7JK6MC") {
+            title
             timelineEntries {
                 edges {
                     node {
@@ -41,29 +43,54 @@ export default async function ThreadPage({
                                 components {
                                     __typename
                                     ... on ComponentText {
-                                    text
+                                      text
                                     }
                                 }
                             }
                         }
                     }
                 }
             }
-        } 
-      
-      
+        }   
       }`,
-    }),
-    headers: {
-      "Content-Type": "application/json",
-      "Plain-Workspace-Id": "w_01J28VHKDK5PV3DJSZAA01XGAN",
-      Authorization:
-        "Bearer GIT_HISTORY_OVERWRITTEN",
-    },
-  })
-    .then((res) => res.json())
-    .catch((err) => {
-      console.log(err);
-    });
-  return <div>{JSON.stringify(data, null, 2)}</div>;
+		}),
+		headers: {
+			"Content-Type": "application/json",
+			"Plain-Workspace-Id": "w_01J28VHKDK5PV3DJSZAA01XGAN",
+			Authorization:
+				"Bearer GIT_HISTORY_OVERWRITTEN",
+		},
+	})
+		.then((res) => res.json())
+		.catch((err) => {
+			console.log(err);
+		});
+
+	const thread = data.data.thread;
+	const timelineEntries = thread.timelineEntries;
+	console.log(thread);
+
+	return (
+		<main className={styles.main}>
+			<h1>{thread.title}</h1>
+			<div className={styles.message}>
+				{timelineEntries.edges.map((entry) => {
+					console.log("ENTRY", entry);
+					return (
+						<div key={entry.node.id}>
+							{entry.node.entry.components.map((component, idx) => {
+								if (component.__typename === "ComponentText") {
+									return (
+										<div key={`comp_${component.text}`}>{component.text}</div>
+									);
+								}
+
+								return <div key={`comp_${idx}`}>TODO</div>;
+							})}
+						</div>
+					);
+				})}
+			</div>
+		</main>
+	);
 }