FalkorDB · AviAvni · Aug 6, 2024 · Aug 6, 2024 · Aug 6, 2024 · Aug 6, 2024
diff --git a/app/components/ui/Avatar.tsx b/app/components/ui/Avatar.tsx
@@ -10,11 +10,15 @@ import {
     DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 import { Role } from "next-auth";
+import { useEffect } from "react";
 import Button from "./Button";
 
 export default function AvatarButton({ setUserStatus }: { setUserStatus: (status: Role) => void }) {
     const { data: session, status } = useSession()
-
+    useEffect(() => {
+        setUserStatus(session?.user.role || "Read-Only")
+    }, [session, setUserStatus])
+
     if (status === "unauthenticated" || !session) {
         return (
             <Button
@@ -26,7 +30,6 @@ export default function AvatarButton({ setUserStatus }: { setUserStatus: (status
         )
     }
 
-    setUserStatus(session.user.role)
 
     const { username } = session.user;
 

diff --git a/app/globals.css b/app/globals.css
@@ -26,6 +26,15 @@
 }
 
 @layer components {
+
+    .Page {
+        @apply h-full w-full flex flex-col bg-background;
+    }
+
+    .LandingPage {
+        background: linear-gradient(180deg, #EC806C 0%, #B66EBD 43.41%, #7568F2 100%);
+    }
+
     .LoginForm {
         background: linear-gradient(180deg, #EC806C 0%, #B66EBD 43.41%, #7568F2 100%);
         color: white;

diff --git a/app/graph/page.tsx b/app/graph/page.tsx
@@ -81,7 +81,7 @@ export default function Page() {
     }
 
     return (
-        <div className="h-full w-full flex flex-col">
+        <div className="Page">
             <Header onSetGraphName={setGraphName} />
             <div className="h-1 grow p-8 px-10 flex flex-col gap-8">
                 <Selector

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -21,7 +21,7 @@ export default function RootLayout({
   // caused by mismatched client/server content caused by next-themes
   return (
     <html className="w-screen h-screen" lang="en" suppressHydrationWarning>
-      <body className={cn("w-full h-full", inter.className)}>
+      <body className={cn("h-full LandingPage", inter.className)}>
         <NextAuthProvider>{children}</NextAuthProvider>
         <Toaster />
       </body>

diff --git a/app/page.tsx b/app/page.tsx
@@ -6,21 +6,20 @@ import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 
 export default function Home() {
-  const { data: session, status } = useSession()
+  const { status } = useSession()
   const router = useRouter()
 
-  // Check session if already signed in redirect to graph page
   useEffect(() => {
     if (status === "authenticated") {
       router.push("/graph")
     } else {
       router.push("/login")
     }
-  }, [router, session, status]);
+  }, [router, status]);
 
   return (
-    <div className="flex flex-col items-center justify-center min-h-screen py-2">
-      <main className="flex flex-col items-center justify-center flex-1 px-20 text-center space-y-5">
+    <div className="h-full LandingPage">
+      <main className="h-full flex items-center justify-center">
         <Spinning/>
       </main>
     </div>

diff --git a/app/schema/SchemaView.tsx b/app/schema/SchemaView.tsx
@@ -99,8 +99,8 @@ function getStyle() {
 
 const getElementId = (element: ElementDataDefinition) => element.source ? { id: element.id?.slice(1), query: "()-[e]-()" } : { id: element.id, query: "(e)" }
 
-const getCreateQuery = (type: string, selectedNodes: NodeDataDefinition[], attributes: [string, Attribute][], label?: string) => {
-    if (type === "node") {
+const getCreateQuery = (type: boolean, selectedNodes: NodeDataDefinition[], attributes: [string, Attribute][], label?: string) => {
+    if (type) {
         return `CREATE (n${label ? `:${label}` : ""}${attributes?.length > 0 ? ` {${attributes.map(([k, [t, d, u, un]]) => `${k}: ["${t}", "${d}", "${u}", "${un}"]`).join(",")}}` : ""}) RETURN n`
     }
     return `MATCH (a), (b) WHERE ID(a) = ${selectedNodes[0].id} AND ID(b) = ${selectedNodes[1].id} CREATE (a)-[e${label ? `:${label}` : ""}${attributes?.length > 0 ? ` {${attributes.map(([k, [t, d, u, un]]) => `${k}: ["${t}", "${d}", "${u}", "${un}"]`).join(",")}}` : ""}]->(b) RETURN e`
@@ -423,20 +423,18 @@ export default function SchemaView({ schema, setNodesCount, setEdgesCount }: Pro
     }
 
     const onCreateElement = async (attributes: [string, Attribute][], label?: string) => {
-        const type = isAddEntity ? "node" : ""
-
-        const result = await securedFetch(`api/graph/${prepareArg(schema.Id)}_schema/?query=${getCreateQuery(type, selectedNodes, attributes, label)}`, {
+        const result = await securedFetch(`api/graph/${prepareArg(schema.Id)}_schema/?query=${getCreateQuery(isAddEntity, selectedNodes, attributes, label)}`, {
             method: "GET"
         })
 
         if (result.ok) {
             const json = await result.json()
 
-            if (type === "node" && setNodesCount) {
+            if (isAddEntity && setNodesCount) {
                 chartRef?.current?.add({ data: schema.extendNode(json.result.data[0].n) })
                 setNodesCount(prev => prev + 1)
                 setIsAddEntity(false)
-            } else if (type === "node" && setEdgesCount) {
+            } else if (isAddEntity && setEdgesCount) {
                 chartRef?.current?.add({ data: schema.extendEdge(json.result.data[0].e) })
                 setEdgesCount(prev => prev + 1)
                 setIsAddRelation(false)

diff --git a/app/schema/page.tsx b/app/schema/page.tsx
@@ -50,7 +50,7 @@ export default function Page() {
     }, [schemaName])
 
     return (
-        <div className="h-full w-full flex flex-col">
+        <div className="Page">
             <Header onSetGraphName={setSchemaName} />
             <div className="h-1 grow p-8 px-10 flex flex-col gap-8">
                 <Selector

diff --git a/app/settings/page.tsx b/app/settings/page.tsx
@@ -21,7 +21,7 @@ export default function Settings() {
     }
 
     return (
-        <div className="w-full h-full flex flex-col">
+        <div className="Page">
             <Header />
             <div className="grow flex flex-col gap-8 p-16">
                 <h1 className="text-2xl font-medium px-6">Settings</h1>