Fix SSG by moving auth from root layout

client/app/(posts)/new/components/new.tsx

@@ -48,7 +48,7 @@ const Post = ({
 	const [expiresAt, setExpiresAt] = useState<Date>()
 
 	const defaultDocs: Document[] = initialPost
-		? initialPost.files?.map((doc) => ({
+		? initialPost.files?.map((doc: PostWithFiles["files"][0]) => ({
 				title: doc.title,
 				content: doc.content,
 				id: doc.id

client/app/(posts)/post/[id]/page.tsx

@@ -8,19 +8,19 @@ export type PostProps = {
 	isProtected?: boolean
 }
 
-// export async function generateStaticParams() {
-// 	const posts = await getAllPosts({
-// 		 where: {
-// 			visibility: {
-// 				in: ["public", "unlisted"]
-// 			}
-// 		 }
-// 	})
+export async function generateStaticParams() {
+	const posts = await getAllPosts({
+		 where: {
+			visibility: {
+				equals: "public"
+			}
+		 }
+	})
 
-// 	return posts.map((post) => ({
-// 		id: post.id
-// 	}))
-// }
+	return posts.map((post) => ({
+		id: post.id
+	}))
+}
 
 const getPost = async (id: string) => {
 	const post = await getPostById(id, {
@@ -31,6 +31,10 @@ const getPost = async (id: string) => {
 	if (!post) {
 		return notFound()
 	}
+
+	if (post.visibility === "public") {
+		return { post }
+	}
 	
 	const user = await getCurrentUser()
 	const isAuthorOrAdmin = user?.id === post?.authorId || user?.role === "admin"

client/app/components/header/index.tsx

@@ -4,7 +4,7 @@ import styles from "./header.module.css"
 // import useUserData from "@lib/hooks/use-user-data"
 import Link from "@components/link"
 import { usePathname } from "next/navigation"
-import { signOut } from "next-auth/react"
+import { signOut, useSession } from "next-auth/react"
 import Button from "@components/button"
 import clsx from "clsx"
 import { useTheme } from "@wits/next-themes"
@@ -22,9 +22,7 @@ import {
 } from "react-feather"
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu"
 import buttonStyles from "@components/button/button.module.css"
-import ButtonGroup from "@components/button-group"
 import { useEffect, useMemo, useState } from "react"
-import Skeleton from "@components/skeleton"
 
 type Tab = {
 	name: string
@@ -34,16 +32,13 @@ type Tab = {
 	href?: string
 }
 
-const Header = ({ signedIn = false, isAdmin = false }) => {
+const Header = () => {
+	const session = useSession()
+	const signedIn = session?.status === "authenticated"
+	const isAdmin = session?.data?.user?.role === "admin"
 	const pathname = usePathname()
-	// wait to mount before rendering
-	const [isHydrated, setHydrated] = useState(false)
 	const { setTheme, resolvedTheme } = useTheme()
 
-	useEffect(() => {
-		setHydrated(true)
-	}, [])
-
 	const getButton = (tab: Tab) => {
 		const isActive = pathname === tab.href
 		const activeStyle = isActive ? styles.active : ""
@@ -99,7 +94,7 @@ const Header = ({ signedIn = false, isAdmin = false }) => {
 			onClick: function () {
 				setTheme(resolvedTheme === "light" ? "dark" : "light")
 			},
-			icon: isHydrated ? (resolvedTheme === "light" ? <Moon /> : <Sun />) : <></>,
+			icon: resolvedTheme === "light" ? <Moon /> : <Sun />,
 			value: "theme"
 		})
 
@@ -123,6 +118,7 @@ const Header = ({ signedIn = false, isAdmin = false }) => {
 					value: "settings",
 					href: "/settings"
 				},
+				...defaultPages,
 				{
 					name: "Sign Out",
 					icon: <UserX />,
@@ -131,8 +127,7 @@ const Header = ({ signedIn = false, isAdmin = false }) => {
 						signOut({
 							callbackUrl: "/"
 						})
-				},
-				...defaultPages
+				}
 			]
 		else
 			return [
@@ -142,6 +137,7 @@ const Header = ({ signedIn = false, isAdmin = false }) => {
 					value: "home",
 					href: "/"
 				},
+				...defaultPages,
 				{
 					name: "Sign in",
 					icon: <User />,
@@ -153,10 +149,9 @@ const Header = ({ signedIn = false, isAdmin = false }) => {
 					icon: <UserPlus />,
 					value: "signup",
 					href: "/signup"
-				},
-				...defaultPages
+				}
 			]
-	}, [isAdmin, isHydrated, resolvedTheme, signedIn, setTheme])
+	}, [isAdmin, resolvedTheme, signedIn, setTheme])
 
 	// // TODO: this should not be necessary.
 	// if (!clientHydrated) {

client/app/layout.tsx

@@ -8,8 +8,6 @@ interface RootLayoutProps {
 }
 
 export default async function RootLayout({ children }: RootLayoutProps) {
-	// TODO: this opts out of SSG
-	const session = await getSession()
 	return (
 		<ServerThemeProvider
 			enableSystem={true}
@@ -21,10 +19,7 @@ export default async function RootLayout({ children }: RootLayoutProps) {
 			<html lang="en">
 				<head />
 				<body>
-					<LayoutWrapper
-						signedIn={Boolean(session?.user)}
-						isAdmin={session?.user.role === "admin"}
-					>
+					<LayoutWrapper>
 						{children}
 					</LayoutWrapper>
 				</body>

client/app/root-layout-wrapper.tsx

@@ -5,32 +5,27 @@ import Page from "@components/page"
 import { Toasts } from "@components/toasts"
 import * as RadixTooltip from "@radix-ui/react-tooltip"
 import { ThemeProvider } from "@wits/next-themes"
+import { SessionProvider } from "next-auth/react"
 
-export function LayoutWrapper({
-	children,
-	signedIn,
-	isAdmin
-}: {
-	children: React.ReactNode
-	signedIn?: boolean
-	isAdmin?: boolean
-}) {
+export function LayoutWrapper({ children }: { children: React.ReactNode }) {
 	return (
-		<RadixTooltip.Provider delayDuration={200}>
-			<Toasts />
-			<Page>
-				<ThemeProvider
-					enableSystem={true}
-					defaultTheme="dark"
-					disableTransitionOnChange
-					cookieName={"drift-theme"}
-					attribute="data-theme"
-					enableColorScheme={true}
-				>
-					<Header isAdmin={isAdmin} signedIn={signedIn} />
-				</ThemeProvider>
-				{children}
-			</Page>
-		</RadixTooltip.Provider>
+		<SessionProvider>
+			<RadixTooltip.Provider delayDuration={200}>
+				<Toasts />
+				<Page>
+					<ThemeProvider
+						enableSystem={true}
+						defaultTheme="dark"
+						disableTransitionOnChange
+						cookieName={"drift-theme"}
+						attribute="data-theme"
+						enableColorScheme={true}
+					>
+						<Header />
+					</ThemeProvider>
+					{children}
+				</Page>
+			</RadixTooltip.Provider>
+		</SessionProvider>
 	)
 }