Skip to content

Commit b8b18cc

Browse files
author
Elise Bach
committed
Added nav
1 parent 19ddc59 commit b8b18cc

File tree

5 files changed

+92
-43
lines changed

5 files changed

+92
-43
lines changed

‎app/layout.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,18 @@ import "./globals.css";
55
const inter = Inter({ subsets: ["latin"] });
66

77
export const metadata: Metadata = {
8-
title: "Create Next App",
9-
description: "Generated by create next app",
8+
title: "Create Next App",
9+
description: "Generated by create next app",
1010
};
1111

1212
export default function RootLayout({
13-
children,
13+
children,
1414
}: Readonly<{
15-
children: React.ReactNode;
15+
children: React.ReactNode;
1616
}>) {
17-
return (
18-
<html lang="en">
19-
<body className={inter.className}>{children}</body>
20-
</html>
21-
);
17+
return (
18+
<html lang="en">
19+
<body className={inter.className}>{children}</body>
20+
</html>
21+
);
2222
}

‎app/page.tsx‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import Navigation from "@/components/navigation";
12
import styles from "./page.module.css";
23
import { PlainClient } from "@team-plain/typescript-sdk";
34

@@ -29,17 +30,19 @@ export default async function Home({
2930
console.log(threads.data?.threads.length);
3031

3132
return (
32-
<main className={styles.main}>
33-
<h1>Plain Headless Portal</h1>
34-
<div>
35-
{threads.data?.threads.map((thread) => {
36-
return (
37-
<div key={`thread-row-${thread.id}`}>
38-
<a href={`/thread/${thread.id}`}>{thread.title}</a>
39-
</div>
40-
);
41-
})}
42-
</div>
43-
</main>
33+
<>
34+
<Navigation title="Plain Headless Portal example" />
35+
<main className={styles.main}>
36+
<div>
37+
{threads.data?.threads.map((thread) => {
38+
return (
39+
<div key={`thread-row-${thread.id}`}>
40+
<a href={`/thread/${thread.id}`}>{thread.title}</a>
41+
</div>
42+
);
43+
})}
44+
</div>
45+
</main>
46+
</>
4447
);
4548
}

‎app/thread/[threadId]/page.tsx‎

Lines changed: 30 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,16 @@
1+
import Navigation from "@/components/navigation";
12
import styles from "./page.module.css";
23

34
export default async function ThreadPage({
45
params,
56
}: {
67
params: { threadId: string };
78
}) {
9+
const apiKey = process.env.PLAIN_API_KEY;
10+
if (!apiKey) {
11+
throw new Error("Please set the `PLAIN_API_KEY` environment variable");
12+
}
13+
814
const data = await fetch("https://core-api.uk.plain.com/graphql/v1", {
915
method: "POST",
1016
body: JSON.stringify({
@@ -57,8 +63,7 @@ export default async function ThreadPage({
5763
headers: {
5864
"Content-Type": "application/json",
5965
"Plain-Workspace-Id": "w_01J28VHKDK5PV3DJSZAA01XGAN",
60-
Authorization:
61-
"Bearer GIT_HISTORY_OVERWRITTEN",
66+
Authorization: `Bearer ${process.env.PLAIN_API_KEY}`,
6267
},
6368
})
6469
.then((res) => res.json())
@@ -71,26 +76,29 @@ export default async function ThreadPage({
7176
console.log(thread);
7277

7378
return (
74-
<main className={styles.main}>
75-
<h1>{thread.title}</h1>
76-
<div className={styles.message}>
77-
{timelineEntries.edges.map((entry) => {
78-
console.log("ENTRY", entry);
79-
return (
80-
<div key={entry.node.id}>
81-
{entry.node.entry.components.map((component, idx) => {
82-
if (component.__typename === "ComponentText") {
83-
return (
84-
<div key={`comp_${component.text}`}>{component.text}</div>
85-
);
86-
}
79+
<>
80+
<Navigation hasBackButton title={thread.title} />
81+
<main className={styles.main}>
82+
<div className={styles.message}>
83+
{timelineEntries.edges.map((entry) => {
84+
console.log("ENTRY", entry);
85+
86+
return (
87+
<div key={entry.node.id}>
88+
{entry.node.entry.components.map((component, idx) => {
89+
if (component.__typename === "ComponentText") {
90+
return (
91+
<div key={`comp_${component.text}`}>{component.text}</div>
92+
);
93+
}
8794

88-
return <div key={`comp_${idx}`}>TODO</div>;
89-
})}
90-
</div>
91-
);
92-
})}
93-
</div>
94-
</main>
95+
return <div key={`comp_${idx}`}>TODO</div>;
96+
})}
97+
</div>
98+
);
99+
})}
100+
</div>
101+
</main>
102+
</>
95103
);
96104
}

‎components/navigation.module.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.nav {
2+
display: flex;
3+
align-items: center;
4+
gap: 16px;
5+
padding: 16px;
6+
border-bottom: 1px solid #eee;
7+
}

‎components/navigation.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import styles from "./navigation.module.css";
2+
import { PlainClient } from "@team-plain/typescript-sdk";
3+
4+
export const fetchCache = "force-no-store";
5+
6+
const apiKey = process.env.PLAIN_API_KEY;
7+
if (!apiKey) {
8+
throw new Error("Please set the `PLAIN_API_KEY` environment variable");
9+
}
10+
11+
const client = new PlainClient({
12+
apiKey,
13+
});
14+
15+
export default async function Navigation({
16+
hasBackButton = false,
17+
title,
18+
}: {
19+
hasBackButton?: boolean;
20+
title: string;
21+
}) {
22+
return (
23+
<nav
24+
className={styles.nav}
25+
style={{ justifyContent: hasBackButton ? "flex-start" : "center" }}
26+
>
27+
{hasBackButton && <a href="/"> &lt; Go back</a>}
28+
<h1>Plain Headless Portal Example</h1>
29+
</nav>
30+
);
31+
}

0 commit comments

Comments
 (0)