fixed nextjs hydration issue

finic-ai · Aug 7, 2024 · 4e09901 · 4e09901
1 parent be363d8
commit 4e09901
Show file tree

Hide file tree

Showing 8 changed files with 267 additions and 265 deletions.
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -3,29 +3,20 @@
 import { Inter } from "next/font/google";
 import "./globals.css";
 import {ReactFlowProvider} from "@xyflow/react"
-import React, { useEffect } from "react";
-import { useAuth } from "@/hooks/useAuth";
+import React, { useEffect, useState } from "react";
+import { useAuth, UserStateProvider, supabase } from "@/hooks/useAuth";
+import { useLocalStorage } from "@/hooks/useLocalStorage";
 import { Auth } from "@supabase/auth-ui-react";
 import { ThemeSupa } from "@supabase/auth-ui-shared";
 
 const inter = Inter({ subsets: ["latin"] });
 
 export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
-  const { useLocalStorage, UserStateProvider, supabase } = useAuth();
-  const [session, setSession] = useLocalStorage("session", null);
-
-  useEffect(() => {
-    supabase.auth.getSession().then(({ data: { session } }: any) => {
-      setSession(session);
-    });
-
-    // const {
-    //   data: { subscription }
-    // } = supabase.auth.onAuthStateChange((_event: any, session: any) => {
-    //   setSession(session);
-    // });
+  const { session, setSession } = useAuth();
+  const [mounted, setMounted] = useState(false);
 
-    // return () => subscription.unsubscribe();
+  useEffect(() => {
+    setMounted(true)
   }, []);
 
   const renderAuth = () => {
@@ -53,6 +44,16 @@ export default function RootLayout({ children }: Readonly<{ children: React.Reac
     );
   }
 
+  const renderLoading = () => {
+    return (
+      <div className="min-h-screen bg-gray-100 flex items-center justify-center">
+        <div className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 w-full max-w-md">
+          <p>Loading...</p>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <html lang="en">
       <head>
@@ -61,7 +62,7 @@ export default function RootLayout({ children }: Readonly<{ children: React.Reac
         <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet"/>
       </head>
       <body>
-        {session ? renderApp() : renderAuth()}
+        {mounted ? (session ? renderApp() : renderAuth()) : renderLoading()}
       </body>
     </html>
   );

diff --git a/frontend/src/app/workflow/index.tsx b/frontend/src/app/workflow/index.tsx
@@ -6,7 +6,7 @@ import {
   type NodeTypes
 } from "@xyflow/react";
 import * as SubframeCore from "@subframe/core";
-import { EditorTopBar } from "@/subframe/components/EditorTopBar";
+import { EditorTopBar } from "@/components/TopBar";
 import { SidebarTile } from "@/subframe/components/SidebarTile";
 import { SidebarButton } from "@/subframe/components/SidebarButton";
 

diff --git a/frontend/src/app/workflow/settings/index.tsx b/frontend/src/app/workflow/settings/index.tsx
@@ -6,7 +6,7 @@ import {
   type NodeTypes
 } from "@xyflow/react";
 import * as SubframeCore from "@subframe/core";
-import { EditorTopBar } from "@/subframe/components/EditorTopBar";
+import { EditorTopBar } from "@/components/TopBar";
 import { SidebarTile } from "@/subframe/components/SidebarTile";
 import { SidebarButton } from "@/subframe/components/SidebarButton";
 import { ToggleGroup } from "@/subframe/components/ToggleGroup";

diff --git a/frontend/src/components/TopBar/EditorTopBar.tsx b/frontend/src/components/TopBar/EditorTopBar.tsx
@@ -0,0 +1,88 @@
+"use client";
+/*
+ * Documentation:
+ * Editor Top Bar — https://app.subframe.com/0bc1b5ae3457/library?component=Editor+Top+Bar_278120cd-e892-4089-8e83-d99890aa0e63
+ * Toggle Group — https://app.subframe.com/0bc1b5ae3457/library?component=Toggle+Group_2026f10a-e3cc-4c89-80da-a7259acae3b7
+ * Breadcrumbs — https://app.subframe.com/0bc1b5ae3457/library?component=Breadcrumbs_8898334b-a66f-4ee8-8bd1-afcfa8e37cc0
+ * Avatar — https://app.subframe.com/0bc1b5ae3457/library?component=Avatar_bec25ae6-5010-4485-b46b-cf79e3943ab2
+ * Icon Button — https://app.subframe.com/0bc1b5ae3457/library?component=Icon+Button_af9405b1-8c54-4e01-9786-5aad308224f6
+ * Dropdown Menu — https://app.subframe.com/0bc1b5ae3457/library?component=Dropdown+Menu_99951515-459b-4286-919e-a89e7549b43b
+ * Button — https://app.subframe.com/0bc1b5ae3457/library?component=Button_3b777358-b86b-40af-9327-891efc6826fe
+ */
+
+import React from "react";
+import * as SubframeCore from "@subframe/core";
+import { ToggleGroup } from "../../subframe/components/ToggleGroup";
+import { Breadcrumbs } from "../../subframe/components/Breadcrumbs";
+import { Avatar } from "../../subframe/components/Avatar";
+import { IconButton } from "../../subframe/components/IconButton";
+import { DropdownMenu } from "../../subframe/components/DropdownMenu";
+import { Button } from "../../subframe/components/Button";
+import { useAuth } from "@/hooks/useAuth";
+
+interface EditorTopBarProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+}
+export default function EditorTopBar({ className, ...otherProps }: EditorTopBarProps) {
+  const { logOut } = useAuth();
+  return (
+    <div className={`flex w-full items-center gap-2 border-b border-solid border-neutral-border bg-default-background pt-3 pr-4 pb-3 pl-4 ${className}`}>
+      <div className="flex grow shrink-0 basis-0 items-center gap-4">
+        <img
+          className="h-6 flex-none"
+          src="https://res.cloudinary.com/subframe/image/upload/v1711417507/shared/y2rsnhq3mex4auk54aye.png"
+        />
+        <ToggleGroup>
+          <ToggleGroup.Item icon={null} value="2f498b92">
+            Editor
+          </ToggleGroup.Item>
+          <ToggleGroup.Item icon={null} value="b1b04b29">
+            Preview
+          </ToggleGroup.Item>
+        </ToggleGroup>
+      </div>
+      <div className="flex grow shrink-0 basis-0 flex-col items-center justify-center gap-2 self-stretch">
+        <Breadcrumbs>
+          <Breadcrumbs.Item>Your drafts</Breadcrumbs.Item>
+          <Breadcrumbs.Divider />
+          <Breadcrumbs.Item active={true}>New Project</Breadcrumbs.Item>
+        </Breadcrumbs>
+      </div>
+      <div className="flex grow shrink-0 basis-0 items-center justify-end gap-2 self-stretch">
+        <Avatar
+          size="small"
+          image="https://res.cloudinary.com/subframe/image/upload/v1711417507/shared/fychrij7dzl8wgq2zjq9.avif"
+        >
+          AB
+        </Avatar>
+        <IconButton icon="FeatherSearch" />
+        <SubframeCore.DropdownMenu.Root>
+          <SubframeCore.DropdownMenu.Trigger asChild={true}>
+            <IconButton icon="FeatherMoreHorizontal" />
+          </SubframeCore.DropdownMenu.Trigger>
+          <SubframeCore.DropdownMenu.Portal>
+            <SubframeCore.DropdownMenu.Content
+              side="bottom"
+              align="end"
+              sideOffset={4}
+              asChild={true}
+            >
+              <DropdownMenu>
+                <DropdownMenu.DropdownItem icon="FeatherFile">
+                  Save draft
+                </DropdownMenu.DropdownItem>
+                <DropdownMenu.DropdownItem icon="FeatherWrench">
+                  Advanced settings
+                </DropdownMenu.DropdownItem>
+                <DropdownMenu.DropdownItem icon="FeatherTrash">
+                  Delete
+                </DropdownMenu.DropdownItem>
+              </DropdownMenu>
+            </SubframeCore.DropdownMenu.Content>
+          </SubframeCore.DropdownMenu.Portal>
+        </SubframeCore.DropdownMenu.Root>
+        <Button onClick={() => logOut()}>Publish</Button>
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/src/components/TopBar/index.tsx b/frontend/src/components/TopBar/index.tsx
@@ -0,0 +1 @@
+export { default as EditorTopBar } from "./EditorTopBar";
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as EditorTopBar } from "./EditorTopBar";