Fix SSG by moving auth from root layout
This commit is contained in:
parent
44a05f6456
commit
8578714c4a
5 changed files with 49 additions and 60 deletions
|
@ -48,7 +48,7 @@ const Post = ({
|
||||||
const [expiresAt, setExpiresAt] = useState<Date>()
|
const [expiresAt, setExpiresAt] = useState<Date>()
|
||||||
|
|
||||||
const defaultDocs: Document[] = initialPost
|
const defaultDocs: Document[] = initialPost
|
||||||
? initialPost.files?.map((doc) => ({
|
? initialPost.files?.map((doc: PostWithFiles["files"][0]) => ({
|
||||||
title: doc.title,
|
title: doc.title,
|
||||||
content: doc.content,
|
content: doc.content,
|
||||||
id: doc.id
|
id: doc.id
|
||||||
|
|
|
@ -8,19 +8,19 @@ export type PostProps = {
|
||||||
isProtected?: boolean
|
isProtected?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
// export async function generateStaticParams() {
|
export async function generateStaticParams() {
|
||||||
// const posts = await getAllPosts({
|
const posts = await getAllPosts({
|
||||||
// where: {
|
where: {
|
||||||
// visibility: {
|
visibility: {
|
||||||
// in: ["public", "unlisted"]
|
equals: "public"
|
||||||
// }
|
}
|
||||||
// }
|
}
|
||||||
// })
|
})
|
||||||
|
|
||||||
// return posts.map((post) => ({
|
return posts.map((post) => ({
|
||||||
// id: post.id
|
id: post.id
|
||||||
// }))
|
}))
|
||||||
// }
|
}
|
||||||
|
|
||||||
const getPost = async (id: string) => {
|
const getPost = async (id: string) => {
|
||||||
const post = await getPostById(id, {
|
const post = await getPostById(id, {
|
||||||
|
@ -32,6 +32,10 @@ const getPost = async (id: string) => {
|
||||||
return notFound()
|
return notFound()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (post.visibility === "public") {
|
||||||
|
return { post }
|
||||||
|
}
|
||||||
|
|
||||||
const user = await getCurrentUser()
|
const user = await getCurrentUser()
|
||||||
const isAuthorOrAdmin = user?.id === post?.authorId || user?.role === "admin"
|
const isAuthorOrAdmin = user?.id === post?.authorId || user?.role === "admin"
|
||||||
|
|
||||||
|
|
|
@ -4,7 +4,7 @@ import styles from "./header.module.css"
|
||||||
// import useUserData from "@lib/hooks/use-user-data"
|
// import useUserData from "@lib/hooks/use-user-data"
|
||||||
import Link from "@components/link"
|
import Link from "@components/link"
|
||||||
import { usePathname } from "next/navigation"
|
import { usePathname } from "next/navigation"
|
||||||
import { signOut } from "next-auth/react"
|
import { signOut, useSession } from "next-auth/react"
|
||||||
import Button from "@components/button"
|
import Button from "@components/button"
|
||||||
import clsx from "clsx"
|
import clsx from "clsx"
|
||||||
import { useTheme } from "@wits/next-themes"
|
import { useTheme } from "@wits/next-themes"
|
||||||
|
@ -22,9 +22,7 @@ import {
|
||||||
} from "react-feather"
|
} from "react-feather"
|
||||||
import * as DropdownMenu from "@radix-ui/react-dropdown-menu"
|
import * as DropdownMenu from "@radix-ui/react-dropdown-menu"
|
||||||
import buttonStyles from "@components/button/button.module.css"
|
import buttonStyles from "@components/button/button.module.css"
|
||||||
import ButtonGroup from "@components/button-group"
|
|
||||||
import { useEffect, useMemo, useState } from "react"
|
import { useEffect, useMemo, useState } from "react"
|
||||||
import Skeleton from "@components/skeleton"
|
|
||||||
|
|
||||||
type Tab = {
|
type Tab = {
|
||||||
name: string
|
name: string
|
||||||
|
@ -34,16 +32,13 @@ type Tab = {
|
||||||
href?: string
|
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()
|
const pathname = usePathname()
|
||||||
// wait to mount before rendering
|
|
||||||
const [isHydrated, setHydrated] = useState(false)
|
|
||||||
const { setTheme, resolvedTheme } = useTheme()
|
const { setTheme, resolvedTheme } = useTheme()
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setHydrated(true)
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
const getButton = (tab: Tab) => {
|
const getButton = (tab: Tab) => {
|
||||||
const isActive = pathname === tab.href
|
const isActive = pathname === tab.href
|
||||||
const activeStyle = isActive ? styles.active : ""
|
const activeStyle = isActive ? styles.active : ""
|
||||||
|
@ -99,7 +94,7 @@ const Header = ({ signedIn = false, isAdmin = false }) => {
|
||||||
onClick: function () {
|
onClick: function () {
|
||||||
setTheme(resolvedTheme === "light" ? "dark" : "light")
|
setTheme(resolvedTheme === "light" ? "dark" : "light")
|
||||||
},
|
},
|
||||||
icon: isHydrated ? (resolvedTheme === "light" ? <Moon /> : <Sun />) : <></>,
|
icon: resolvedTheme === "light" ? <Moon /> : <Sun />,
|
||||||
value: "theme"
|
value: "theme"
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -123,6 +118,7 @@ const Header = ({ signedIn = false, isAdmin = false }) => {
|
||||||
value: "settings",
|
value: "settings",
|
||||||
href: "/settings"
|
href: "/settings"
|
||||||
},
|
},
|
||||||
|
...defaultPages,
|
||||||
{
|
{
|
||||||
name: "Sign Out",
|
name: "Sign Out",
|
||||||
icon: <UserX />,
|
icon: <UserX />,
|
||||||
|
@ -131,8 +127,7 @@ const Header = ({ signedIn = false, isAdmin = false }) => {
|
||||||
signOut({
|
signOut({
|
||||||
callbackUrl: "/"
|
callbackUrl: "/"
|
||||||
})
|
})
|
||||||
},
|
}
|
||||||
...defaultPages
|
|
||||||
]
|
]
|
||||||
else
|
else
|
||||||
return [
|
return [
|
||||||
|
@ -142,6 +137,7 @@ const Header = ({ signedIn = false, isAdmin = false }) => {
|
||||||
value: "home",
|
value: "home",
|
||||||
href: "/"
|
href: "/"
|
||||||
},
|
},
|
||||||
|
...defaultPages,
|
||||||
{
|
{
|
||||||
name: "Sign in",
|
name: "Sign in",
|
||||||
icon: <User />,
|
icon: <User />,
|
||||||
|
@ -153,10 +149,9 @@ const Header = ({ signedIn = false, isAdmin = false }) => {
|
||||||
icon: <UserPlus />,
|
icon: <UserPlus />,
|
||||||
value: "signup",
|
value: "signup",
|
||||||
href: "/signup"
|
href: "/signup"
|
||||||
},
|
}
|
||||||
...defaultPages
|
|
||||||
]
|
]
|
||||||
}, [isAdmin, isHydrated, resolvedTheme, signedIn, setTheme])
|
}, [isAdmin, resolvedTheme, signedIn, setTheme])
|
||||||
|
|
||||||
// // TODO: this should not be necessary.
|
// // TODO: this should not be necessary.
|
||||||
// if (!clientHydrated) {
|
// if (!clientHydrated) {
|
||||||
|
|
|
@ -8,8 +8,6 @@ interface RootLayoutProps {
|
||||||
}
|
}
|
||||||
|
|
||||||
export default async function RootLayout({ children }: RootLayoutProps) {
|
export default async function RootLayout({ children }: RootLayoutProps) {
|
||||||
// TODO: this opts out of SSG
|
|
||||||
const session = await getSession()
|
|
||||||
return (
|
return (
|
||||||
<ServerThemeProvider
|
<ServerThemeProvider
|
||||||
enableSystem={true}
|
enableSystem={true}
|
||||||
|
@ -21,10 +19,7 @@ export default async function RootLayout({ children }: RootLayoutProps) {
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head />
|
<head />
|
||||||
<body>
|
<body>
|
||||||
<LayoutWrapper
|
<LayoutWrapper>
|
||||||
signedIn={Boolean(session?.user)}
|
|
||||||
isAdmin={session?.user.role === "admin"}
|
|
||||||
>
|
|
||||||
{children}
|
{children}
|
||||||
</LayoutWrapper>
|
</LayoutWrapper>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -5,32 +5,27 @@ import Page from "@components/page"
|
||||||
import { Toasts } from "@components/toasts"
|
import { Toasts } from "@components/toasts"
|
||||||
import * as RadixTooltip from "@radix-ui/react-tooltip"
|
import * as RadixTooltip from "@radix-ui/react-tooltip"
|
||||||
import { ThemeProvider } from "@wits/next-themes"
|
import { ThemeProvider } from "@wits/next-themes"
|
||||||
|
import { SessionProvider } from "next-auth/react"
|
||||||
|
|
||||||
export function LayoutWrapper({
|
export function LayoutWrapper({ children }: { children: React.ReactNode }) {
|
||||||
children,
|
|
||||||
signedIn,
|
|
||||||
isAdmin
|
|
||||||
}: {
|
|
||||||
children: React.ReactNode
|
|
||||||
signedIn?: boolean
|
|
||||||
isAdmin?: boolean
|
|
||||||
}) {
|
|
||||||
return (
|
return (
|
||||||
<RadixTooltip.Provider delayDuration={200}>
|
<SessionProvider>
|
||||||
<Toasts />
|
<RadixTooltip.Provider delayDuration={200}>
|
||||||
<Page>
|
<Toasts />
|
||||||
<ThemeProvider
|
<Page>
|
||||||
enableSystem={true}
|
<ThemeProvider
|
||||||
defaultTheme="dark"
|
enableSystem={true}
|
||||||
disableTransitionOnChange
|
defaultTheme="dark"
|
||||||
cookieName={"drift-theme"}
|
disableTransitionOnChange
|
||||||
attribute="data-theme"
|
cookieName={"drift-theme"}
|
||||||
enableColorScheme={true}
|
attribute="data-theme"
|
||||||
>
|
enableColorScheme={true}
|
||||||
<Header isAdmin={isAdmin} signedIn={signedIn} />
|
>
|
||||||
</ThemeProvider>
|
<Header />
|
||||||
{children}
|
</ThemeProvider>
|
||||||
</Page>
|
{children}
|
||||||
</RadixTooltip.Provider>
|
</Page>
|
||||||
|
</RadixTooltip.Provider>
|
||||||
|
</SessionProvider>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue