Merge pull request #334 from outerbase/develop

deployment 2025-02-03

Author: invisal

src/app/(outerbase)/session-provider.tsx

@@ -1,6 +1,6 @@
 "use client";
-import { useRouter } from "next/navigation";
-import { createContext, PropsWithChildren, useContext } from "react";
+import { usePathname, useRouter } from "next/navigation";
+import { createContext, PropsWithChildren, useContext, useEffect } from "react";
 import useSWR from "swr";
 import { getOuterbaseSession } from "../../outerbase-cloud/api";
 import {
@@ -24,9 +24,11 @@ export function useSession() {
 
 export function OuterbaseSessionProvider({ children }: PropsWithChildren) {
   const router = useRouter();
+  const pathname = usePathname();
+  const token = localStorage.getItem("ob-token");
 
   const { data, isLoading } = useSWR(
-    "session",
+    token ? "session-" + localStorage.getItem("ob-token") : undefined,
     () => {
       return getOuterbaseSession();
     },
@@ -37,13 +39,16 @@ export function OuterbaseSessionProvider({ children }: PropsWithChildren) {
     }
   );
 
-  if (isLoading) {
-    return <div>Session Loading...</div>;
-  }
+  useEffect(() => {
+    if (isLoading) return;
+    if (!data?.session || !data?.user) {
+      localStorage.setItem("continue-redirect", pathname);
+      router.push("/signin");
+    }
+  }, [isLoading, data, pathname, router]);
 
-  if (!data?.session || !data?.user) {
-    router.push("/signin");
-    return <div>Redirecting...</div>;
+  if (isLoading || !data) {
+    return <div>Session Loading...</div>;
   }
 
   return (

src/app/signin/page.tsx

@@ -5,11 +5,14 @@ import {
   getOuterbaseWorkspace,
   loginOuterbaseByPassword,
 } from "@/outerbase-cloud/api";
-import { OuterbaseAPIError } from "@/outerbase-cloud/api-type";
+import {
+  OuterbaseAPIError,
+  OuterbaseAPISession,
+} from "@/outerbase-cloud/api-type";
 import { LucideLoader } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import ThemeLayout from "../(theme)/theme_layout";
 import { LoginBaseSpaceship } from "./starbase-portal";
 
@@ -19,6 +22,7 @@ export default function SigninPage() {
   const [error, setError] = useState("");
   const router = useRouter();
   const [loading, setLoading] = useState(false);
+  const [session, setSession] = useState<OuterbaseAPISession>();
 
   const onLoginClicked = useCallback(() => {
     setLoading(true);
@@ -28,22 +32,35 @@ export default function SigninPage() {
         localStorage.setItem("session", JSON.stringify(session));
         localStorage.setItem("ob-token", session.token);
 
-        getOuterbaseWorkspace()
-          .then((w) => {
-            router.push(`/w/${w.items[0].short_name}`);
-          })
-          .catch(console.error)
-          .finally(() => {
-            setLoading(false);
-          });
+        setSession(session);
       })
       .catch((e) => {
         setLoading(false);
         if (e instanceof OuterbaseAPIError) {
           setError(e.description);
         }
       });
-  }, [email, password, router]);
+  }, [email, password]);
+
+  useEffect(() => {
+    if (!session) return;
+
+    const redirect = localStorage.getItem("continue-redirect");
+    if (redirect) {
+      localStorage.removeItem("continue-redirect");
+      router.push(redirect);
+      return;
+    }
+
+    getOuterbaseWorkspace()
+      .then((w) => {
+        router.push(`/w/${w.items[0].short_name}`);
+      })
+      .catch(console.error)
+      .finally(() => {
+        setLoading(false);
+      });
+  }, [session, router]);
 
   return (
     <ThemeLayout overrideTheme="dark">

src/components/gui/json-editor/index.tsx

@@ -13,10 +13,10 @@ interface JsonEditorProps {
 }
 
 function useJsonTheme() {
-  const { resolvedTheme } = useTheme();
+  const { resolvedTheme, forcedTheme } = useTheme();
 
   return useMemo(() => {
-    if (resolvedTheme === "light") {
+    if ((forcedTheme ?? resolvedTheme) === "light") {
       return createTheme({
         theme: "light",
         settings: {
@@ -69,7 +69,7 @@ function useJsonTheme() {
         ],
       });
     }
-  }, [resolvedTheme]);
+  }, [resolvedTheme, forcedTheme]);
 }
 
 const JsonEditor = forwardRef<ReactCodeMirrorRef, JsonEditorProps>(

src/components/gui/sql-editor/use-editor-theme.tsx

@@ -8,10 +8,10 @@ export default function useCodeEditorTheme({
 }: {
   fontSize?: number;
 }) {
-  const { resolvedTheme } = useTheme();
+  const { resolvedTheme, forcedTheme } = useTheme();
 
   return useMemo(() => {
-    if (resolvedTheme === "light") {
+    if ((forcedTheme ?? resolvedTheme) === "light") {
       return createTheme({
         theme: "light",
         settings: {
@@ -73,5 +73,5 @@ export default function useCodeEditorTheme({
         ],
       });
     }
-  }, [resolvedTheme, fontSize]);
+  }, [resolvedTheme, forcedTheme, fontSize]);
 }