finalize major fixes

remove getserversession in layout to prevent auto ssr
timthedev07 · Dec 29, 2023 · ab32e02 · ab32e02
1 parent eff680b
commit ab32e02
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 27 deletions.
diff --git a/app/src/app/docs/layout.tsx b/app/src/app/docs/layout.tsx
@@ -1,29 +1,39 @@
-import { readdirSync } from "fs";
+import { readdir } from "fs/promises";
 import { join } from "path";
 import { IoDocumentText } from "react-icons/io5";
 import { getMetadata } from "../../lib/getMetadata";
 import { ListDisplay } from "./ListDisplay";
 
+export const dynamic = "force-static";
+export const dynamicParams = false;
+
 export const metadata = getMetadata({
   title: "Docs",
   pathName: "/docs",
   description: "Official documentation",
 });
 
-const DIR = "./src/app/docs";
+const DIR = "src/app/docs";
 
 const sharedPadding = "py-8 lg:py-12 xl:py-16";
 
-export default function MdxLayout({ children }: { children: React.ReactNode }) {
-  const firstLevel = readdirSync(join(process.cwd(), DIR)).filter(
+export default async function MdxLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const firstLevel = (await readdir(join(process.cwd(), DIR))).filter(
     (v) => !v.includes(".")
   );
-  const slugs = firstLevel.map((category) => ({
-    category,
-    pages: readdirSync(join(process.cwd(), DIR, category)).filter(
-      (v) => !v.includes(".")
-    ),
-  }));
+  const slugs = await Promise.all(
+    firstLevel.map(async (category) => ({
+      category,
+      pages: (
+        await readdir(join(process.cwd(), DIR, category))
+      ).filter((v) => !v.includes(".")),
+    }))
+  );
+  console.log(firstLevel, slugs);
 
   return (
     <div className="grid grid-cols-8">

diff --git a/app/src/app/layout.tsx b/app/src/app/layout.tsx
@@ -3,7 +3,6 @@ import { Roboto } from "next/font/google";
 import { AppLayout } from "../components/AppLayout";
 import { PageProgressBarProvider } from "../components/contexts/ProgressProvider";
 import SessionProvider from "../components/contexts/SessionProvider";
-import { getServerSession } from "../lib/authoptions";
 import { getMetadata } from "../lib/getMetadata";
 import { TRPCProvider } from "../trpc/Provider";
 import "./globals.css";
@@ -23,8 +22,6 @@ export default async function RootLayout({
 }: {
   children: React.ReactNode;
 }) {
-  const session = await getServerSession();
-
   return (
     <html
       lang="en"
@@ -37,10 +34,10 @@ export default async function RootLayout({
         />
       </head>
       <body className={inter.className}>
-        <SessionProvider session={session}>
+        <SessionProvider>
           <TRPCProvider>
             <PageProgressBarProvider>
-              <AppLayout session={session}>{children}</AppLayout>
+              <AppLayout>{children}</AppLayout>
             </PageProgressBarProvider>
           </TRPCProvider>
         </SessionProvider>

diff --git a/app/src/components/AppLayout.tsx b/app/src/components/AppLayout.tsx
@@ -1,26 +1,23 @@
 "use client";
 
-import { Session } from "next-auth";
 import { FC, ReactNode, useState } from "react";
 import { Footer } from "./basis/footer";
 import { Nav } from "./basis/nav";
 import { SideBar } from "./basis/sidebar";
 
 interface AppLayoutProps {
   children: ReactNode;
-  session: Session | null;
 }
 
 const barsBG = "bg-primary-bg";
 const barTransDuration = "duration-300";
 
-export const AppLayout: FC<AppLayoutProps> = ({ children, session }) => {
+export const AppLayout: FC<AppLayoutProps> = ({ children }) => {
   const [sidebarOpen, setSidebarOpen] = useState<boolean>(false);
 
   return (
     <div className="grid grid-cols-12 grid-rows-desktop overflow-hidden overflow-x-scroll h-screen w-full">
       <Nav
-        session={session}
         transDuration={barTransDuration}
         sidebarOpen={sidebarOpen}
         bg={barsBG}
@@ -32,7 +29,6 @@ export const AppLayout: FC<AppLayoutProps> = ({ children, session }) => {
         bg={barsBG}
         open={sidebarOpen}
         setOpen={setSidebarOpen}
-        session={session}
       />
       <div className="min-w-[570px] overflow-x-auto row-start-2 row-end-3 col-span-full overflow-y-auto">
         <main className="min-h-[90vh]">{children}</main>

diff --git a/app/src/components/basis/nav/index.tsx b/app/src/components/basis/nav/index.tsx
@@ -1,4 +1,5 @@
-import { Session } from "next-auth";
+"use session";
+import { useSession } from "next-auth/react";
 import Link from "next/link";
 import { FC } from "react";
 import { Hamburger } from "../../../svgs/sidebar/Hamburger";
@@ -13,7 +14,6 @@ interface NavProps {
   bg: string;
   sidebarOpen: boolean;
   transDuration: string;
-  session: Session | null;
 }
 
 export const Nav: FC<NavProps> = ({
@@ -22,9 +22,11 @@ export const Nav: FC<NavProps> = ({
   onHomeClick,
   sidebarOpen,
   transDuration,
-  session,
 }) => {
+  const { data: session } = useSession();
+
   const u = session?.user;
+
   return (
     <nav className={`${bg} ${className || ""} min-w-[570px] relative z-20`}>
       <div className="flex items-center justify-start gap-6 px-8 h-full">

diff --git a/app/src/components/basis/sidebar/index.tsx b/app/src/components/basis/sidebar/index.tsx
@@ -1,5 +1,4 @@
-import { type Session } from "next-auth";
-import { signIn, signOut } from "next-auth/react";
+import { signIn, signOut, useSession } from "next-auth/react";
 import { Dispatch, FC, SetStateAction } from "react";
 import { FaUserShield } from "react-icons/fa6";
 import { IoDocumentText } from "react-icons/io5";
@@ -17,7 +16,6 @@ interface SidebarProps {
   bg: string;
   transDuration: string;
   setOpen: Dispatch<SetStateAction<boolean>>;
-  session: Session | null;
 }
 
 const SidebarSep = () => {
@@ -29,8 +27,8 @@ export const SideBar: FC<SidebarProps> = ({
   bg,
   transDuration,
   setOpen,
-  session,
 }) => {
+  const { data: session } = useSession();
   const loggedIn = !!session?.user;
   const isMod = roleChecker(session?.user.roles || [], ["moderator"]);