From 8578714c4a83514278286b0cf889e79b04ad3f38 Mon Sep 17 00:00:00 2001 From: Max Leiter Date: Thu, 1 Dec 2022 19:45:19 -0800 Subject: [PATCH] Fix SSG by moving auth from root layout --- client/app/(posts)/new/components/new.tsx | 2 +- client/app/(posts)/post/[id]/page.tsx | 28 ++++++++------ client/app/components/header/index.tsx | 27 ++++++-------- client/app/layout.tsx | 7 +--- client/app/root-layout-wrapper.tsx | 45 ++++++++++------------- 5 files changed, 49 insertions(+), 60 deletions(-) diff --git a/client/app/(posts)/new/components/new.tsx b/client/app/(posts)/new/components/new.tsx index 7b743389..d00f70b8 100644 --- a/client/app/(posts)/new/components/new.tsx +++ b/client/app/(posts)/new/components/new.tsx @@ -48,7 +48,7 @@ const Post = ({ const [expiresAt, setExpiresAt] = useState() const defaultDocs: Document[] = initialPost - ? initialPost.files?.map((doc) => ({ + ? initialPost.files?.map((doc: PostWithFiles["files"][0]) => ({ title: doc.title, content: doc.content, id: doc.id diff --git a/client/app/(posts)/post/[id]/page.tsx b/client/app/(posts)/post/[id]/page.tsx index 189d5d70..a786cef0 100644 --- a/client/app/(posts)/post/[id]/page.tsx +++ b/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" diff --git a/client/app/components/header/index.tsx b/client/app/components/header/index.tsx index b77e5f9b..93c3202d 100644 --- a/client/app/components/header/index.tsx +++ b/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" ? : ) : <>, + icon: resolvedTheme === "light" ? : , value: "theme" }) @@ -123,6 +118,7 @@ const Header = ({ signedIn = false, isAdmin = false }) => { value: "settings", href: "/settings" }, + ...defaultPages, { name: "Sign Out", icon: , @@ -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: , @@ -153,10 +149,9 @@ const Header = ({ signedIn = false, isAdmin = false }) => { icon: , value: "signup", href: "/signup" - }, - ...defaultPages + } ] - }, [isAdmin, isHydrated, resolvedTheme, signedIn, setTheme]) + }, [isAdmin, resolvedTheme, signedIn, setTheme]) // // TODO: this should not be necessary. // if (!clientHydrated) { diff --git a/client/app/layout.tsx b/client/app/layout.tsx index 47f1af1d..50c792e1 100644 --- a/client/app/layout.tsx +++ b/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 ( - + {children} diff --git a/client/app/root-layout-wrapper.tsx b/client/app/root-layout-wrapper.tsx index 422357ca..34d4690e 100644 --- a/client/app/root-layout-wrapper.tsx +++ b/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 ( - - - - -
- - {children} - - + + + + + +
+ + {children} + + + ) }