add auth check, auto redirect to login and fix layout issue

desci-labs · Dec 4, 2024 · 4cb82f9 · 4cb82f9
1 parent f330e9a
commit 4cb82f9
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 93 deletions.
diff --git a/src/app/(unauth)/layout.tsx b/src/app/(unauth)/layout.tsx
@@ -1,23 +1,13 @@
-
 import { Inter } from "next/font/google";
 import "../globals.scss";
 
 import ThemeContext from "../ThemeProvider";
 const inter = Inter({ subsets: ["latin"] });
 
 export default function RootLayout({
-    children,
-  }: Readonly<{
-    children: React.ReactNode;
-  }>) {
-    return (
-      <html lang="en" className="">
-        <body className={inter.className}>
-          <ThemeContext>
-              {children}
-          </ThemeContext>
-        </body>
-      </html>
-    );
-  }
-
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return <>{children}</>;
+}
diff --git a/src/app/ThemeProvider.tsx b/src/app/ThemeProvider.tsx
@@ -3,9 +3,9 @@
 import { ThemeProvider } from "@/components/theme-provider";
 import { getQueryClient } from "@/lib/get-query-client";
 import {
-  defaultShouldDehydrateQuery,
-  isServer,
-  QueryClient,
+  // defaultShouldDehydrateQuery,
+  // isServer,
+  // QueryClient,
   QueryClientProvider,
 } from "@tanstack/react-query";
 import { PropsWithChildren } from "react";

diff --git a/src/components/custom/LayoutPanel.tsx b/src/components/custom/LayoutPanel.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { PropsWithChildren } from "react";
+import { PropsWithChildren, useEffect } from "react";
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 import Sidebar from "./Sidebar";
 import ResizeHandle from "./ResizeHandle";
@@ -9,49 +9,64 @@ import ThemeSwitch from "@/components/atoms/ThemeSwitch";
 import { Layout, LayoutHeader, LayoutBody } from "@/components/custom/Layout";
 import { UserNav } from "@/components/molecules/UserNav";
 import DynamicTopNav from "../molecules/DynamicTopNav";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { validateAuth } from "@/lib/api";
+import { useRouter } from "next/navigation";
 
 export default function LayoutPanel({ children }: PropsWithChildren<unknown>) {
   const { attachHandle, onResize } = useSetLayout();
   const { minSize, maxSize } = useGetLayout();
+  const { data: isLoggedIn, isLoading } = useSuspenseQuery(validateAuth);
+  const router = useRouter();
+
+  // const checkAuth = async () => {};
+
+  useEffect(() => {
+    if (!isLoading && !isLoggedIn) {
+      console.log("[auth]", { isLoggedIn });
+      // redirect to auth page
+      router.push('/login')
+    }
+  }, [isLoggedIn, isLoading, router]);
 
   return (
     <div className="overflow-y-hidden">
-    <PanelGroup
-      direction="horizontal"
-      className="w-full min-h-screen h-full max-h-screen overflow-hidden bg-background"
-    >
-      <Panel
-        collapsible
-        defaultSize={maxSize}
-        collapsedSize={minSize}
-        minSize={minSize}
-        onResize={onResize}
-        ref={attachHandle}
-        className="transition-[width] max-h-screen"
-      >
-        <Sidebar />
-      </Panel>
-      <PanelResizeHandle className="w-[1px] bg-gray-300 hover:bg-gray-100 transition-colors relative">
-        <ResizeHandle />
-      </PanelResizeHandle>
-      <Panel
-        defaultSize={100 - minSize}
-        minSize={100 - maxSize}
-        className="overflow-x-hidden"
+      <PanelGroup
+        direction="horizontal"
+        className="w-full min-h-screen h-full max-h-screen overflow-hidden bg-background"
       >
-        <Layout className="min-h-screen flex-col items-center justify-between p-0 m-0">
-          <LayoutHeader sticky>
-            <DynamicTopNav />
-            <div className="ml-auto flex items-center space-x-4">
-              {/* <Search /> */}
-              <ThemeSwitch />
-              <UserNav />
-            </div>
-          </LayoutHeader>
-          <LayoutBody>{children}</LayoutBody>
-        </Layout>
-      </Panel>
-    </PanelGroup>
+        <Panel
+          collapsible
+          defaultSize={maxSize}
+          collapsedSize={minSize}
+          minSize={minSize}
+          onResize={onResize}
+          ref={attachHandle}
+          className="transition-[width] max-h-screen"
+        >
+          <Sidebar />
+        </Panel>
+        <PanelResizeHandle className="w-[1px] bg-gray-300 hover:bg-gray-100 transition-colors relative">
+          <ResizeHandle />
+        </PanelResizeHandle>
+        <Panel
+          defaultSize={100 - minSize}
+          minSize={100 - maxSize}
+          className="overflow-x-hidden"
+        >
+          <Layout className="min-h-screen flex-col items-center justify-between p-0 m-0">
+            <LayoutHeader sticky>
+              <DynamicTopNav />
+              <div className="ml-auto flex items-center space-x-4">
+                {/* <Search /> */}
+                <ThemeSwitch />
+                <UserNav />
+              </div>
+            </LayoutHeader>
+            <LayoutBody>{children}</LayoutBody>
+          </Layout>
+        </Panel>
+      </PanelGroup>
     </div>
   );
 }
diff --git a/src/components/molecules/Dashboard.tsx b/src/components/molecules/Dashboard.tsx
@@ -39,7 +39,6 @@ function IncomingFeature() {
 }
 
 export default function Dashboard() {
-
   const downloadReport = async () => {
     const response = await fetch("/api/download", { credentials: "include" });
     const blob = await response.blob();
@@ -56,27 +55,23 @@ export default function Dashboard() {
   return (
     <>
       <div className="mb-2 flex items-center justify-between space-y-2">
-        <h1 className="text-2xl font-bold tracking-tight"></h1>
-        <div className="flex items-center space-x-2">
-          <Button
-            onClick={downloadReport}
-          >
-            Download
-          </Button>
-        </div>
+        {/* <h1 className="text-2xl font-bold tracking-tight"></h1> */}
       </div>
       <Tabs
         orientation="vertical"
         defaultValue="analytics"
         className="space-y-4"
       >
-        <div className="w-full overflow-x-auto pb-2">
-          <TabsList>
-            <TabsTrigger value="overview">Overview</TabsTrigger>
-            <TabsTrigger value="analytics">Analytics</TabsTrigger>
-            <TabsTrigger value="reports">Reports</TabsTrigger>
-            <TabsTrigger value="notifications">Notifications</TabsTrigger>
-          </TabsList>
+        <div className="flex items-center space-x-2 justify-between">
+          <div className="w-full overflow-x-auto pb-2">
+            <TabsList>
+              <TabsTrigger value="overview">Overview</TabsTrigger>
+              <TabsTrigger value="analytics">Analytics</TabsTrigger>
+              <TabsTrigger value="reports">Reports</TabsTrigger>
+              <TabsTrigger value="notifications">Notifications</TabsTrigger>
+            </TabsList>
+          </div>
+          <Button onClick={downloadReport}>Download</Button>
         </div>
         <TabsContent value="overview" className="space-y-4">
           <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
@@ -251,11 +246,16 @@ const MetricCard = ({
     </Card>
   );
 };
-const numberValue = (num: number) => num > 0 ? `+${num}` : '0';
+const numberValue = (num: number) => (num > 0 ? `+${num}` : "0");
 
 function Analytics() {
-  const { data: analytics, isLoading, error, isError } = useSuspenseQuery(getAnalytics);
-  console.log({ analytics, isLoading, isError, error})
+  const {
+    data: analytics,
+    isLoading,
+    error,
+    isError,
+  } = useSuspenseQuery(getAnalytics);
+  console.log({ analytics, isLoading, isError, error });
   const byteValueNumberFormatter = Intl.NumberFormat("en", {
     notation: "compact",
     style: "unit",
@@ -270,8 +270,7 @@ function Analytics() {
       </div>
     );
 
-    if (!analytics) return <IncomingFeature />
-
+  if (!analytics) return <IncomingFeature />;
 
   return (
     <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">

diff --git a/src/lib/api/index.ts b/src/lib/api/index.ts
@@ -278,20 +278,14 @@ export const getAnalytics = queryOptions({
   },
   staleTime: 60 * 1000
 });
-// return {
-//   "newUsersInLast30Days": 5,
-//   "newUsersInLast7Days": 2,
-//   "newUsersToday": 0,
-//   "newNodesInLast30Days": 2292,
-//   "newNodesInLast7Days": 454,
-//   "newNodesToday": 0,
-//   "activeUsersToday": 1,
-//   "activeUsersInLast7Days": 11,
-//   "activeUsersInLast30Days": 17,
-//   "nodeViewsToday": 2,
-//   "nodeViewsInLast7Days": 3485,
-//   "nodeViewsInLast30Days": 14245,
-//   "bytesToday": null,
-//   "bytesInLast7Days": 22890864,
-//   "bytesInLast30Days": 77358695
-// }
+
+export const validateAuth = queryOptions({
+  queryKey: [],
+  queryFn: async () => {
+    const response = await fetch(`${NODES_API_URL}/v1/auth/check`, {
+      credentials: "include",
+    });
+    const json = (await response.json()) as { ok: boolean };
+    return json.ok || false;
+  },
+});