address review comments, wip

Author: maparent

apps/obsidian/src/components/AdminPanelSettings.tsx

@@ -1,6 +1,6 @@
-import { useState, useCallback, useEffect } from "react";
+import { useState, useCallback } from "react";
 import { usePlugin } from "./PluginContext";
-import { Notice } from "obsidian";
+import { Notice, setIcon } from "obsidian";
 import { updateUsername } from "~/utils/supabaseContext";
 import { initializeSupabaseSync } from "~/utils/syncDgNodesToSupabase";
 import { nextRoot } from "@repo/utils/execContext";
@@ -14,18 +14,6 @@ export const AdminPanelSettings = () => {
   const [username, setUsername] = useState<string>(
     plugin.settings.username || "",
   );
-  const [isLoggedIn, setIsLoggedIn] = useState(false);
-  useEffect(() => {
-    if (syncModeEnabled) {
-      const checkLogin = async () => {
-        const client = await getLoggedInClient(plugin);
-        setIsLoggedIn(client !== null);
-      };
-      void checkLogin();
-    } else {
-      setIsLoggedIn(false);
-    }
-  }, [syncModeEnabled, plugin]);
 
   const handleSyncModeToggle = useCallback(
     async (newValue: boolean) => {
@@ -57,14 +45,17 @@ export const AdminPanelSettings = () => {
 
   const handleLoginHandoff = async () => {
     const client = await getLoggedInClient(plugin);
-    if (!client) return;
+    if (!client) {
+      new Notice("Failed to connect to the database", 3000);
+      return;
+    }
     const sessionData = await client.auth.getSession();
     if (!sessionData.data.session) return;
     /* eslint-disable @typescript-eslint/naming-convention */
     const { access_token, refresh_token } = sessionData.data.session;
     const { data, error } = await client.rpc("create_secret_token", {
       v_payload: JSON.stringify({ access_token, refresh_token }),
-      expiry_interval: "10s",
+      expiry_interval: "45s",
     });
     /* eslint-enable @typescript-eslint/naming-convention */
     if (error || typeof data !== "string") return;
@@ -110,7 +101,11 @@ export const AdminPanelSettings = () => {
           />
         </div>
       </div>
-      <div className={"setting-item " + (isLoggedIn ? "" : "hidden")}>
+      <div
+        className={
+          "setting-item " + (plugin.settings.syncModeEnabled ? "" : "hidden")
+        }
+      >
         <div className="setting-item-info">
           <div className="setting-item-name">Group management</div>
           <div className="setting-item-description">
@@ -124,6 +119,10 @@ export const AdminPanelSettings = () => {
             }}
           >
             Manage groups
+            <span
+              className="icon"
+              ref={(el) => (el && setIcon(el, "arrow-up-right")) || undefined}
+            />
           </button>
         </div>
       </div>

apps/roam/src/components/settings/AdminPanel.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useMemo } from "react";
 import {
   Button,
   HTMLTable,
@@ -267,28 +267,15 @@ const FeatureFlagsTab = (): React.ReactElement => {
   const [suggestiveOverlayValue, setSuggestiveOverlayValue] = useState(
     getFeatureFlag("Suggestive mode overlay enabled"),
   );
-  const [accessToken, setAccessToken] = useState<string | null>(null);
-  useEffect(() => {
-    if (duplicateNodeAlertValue || suggestiveOverlayValue) {
-      const fetchTokens = async () => {
-        const client = await getLoggedInClient();
-        if (client) {
-          const session = await client.auth.getSession();
-          if (session.data.session) {
-            setAccessToken(session.data.session.access_token);
-          }
-        }
-      };
-      void fetchTokens();
-    } else {
-      setAccessToken(null);
-    }
-  }, [duplicateNodeAlertValue, suggestiveOverlayValue]);
+  const syncAlreadyEnabled = useMemo(
+    () => duplicateNodeAlertValue || suggestiveOverlayValue,
+    [duplicateNodeAlertValue, suggestiveOverlayValue],
+  );
 
   const ensureSyncEnabled = (
     featureKey: keyof FeatureFlags,
   ): Promise<boolean> => {
-    if (duplicateNodeAlertValue || suggestiveOverlayValue) {
+    if (syncAlreadyEnabled) {
       return Promise.resolve(true);
     }
     setPendingFeatureKey(featureKey);
@@ -315,7 +302,7 @@ const FeatureFlagsTab = (): React.ReactElement => {
     const { access_token, refresh_token } = sessionData.data.session;
     const { data, error } = await client.rpc("create_secret_token", {
       v_payload: JSON.stringify({ access_token, refresh_token }),
-      expiry_interval: "10s",
+      expiry_interval: "45s",
     });
     /* eslint-enable @typescript-eslint/naming-convention */
     if (error || typeof data !== "string") return;
@@ -425,7 +412,7 @@ const FeatureFlagsTab = (): React.ReactElement => {
       >
         Send Error Email
       </Button>
-      {accessToken && (
+      {syncAlreadyEnabled && (
         <Button
           className="w-96"
           icon="document-open"

apps/website/app/utils/supabase/client.ts

@@ -2,8 +2,13 @@ import { createBrowserClient } from "@supabase/ssr";
 import type { Database } from "@repo/database/dbTypes";
 
 export const createClient = () => {
+  if (
+    !process.env.NEXT_PUBLIC_SUPABASE_URL ||
+    !process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY
+  )
+    throw new Error("Configuration error: supabase variables not configured.");
   return createBrowserClient<Database, "public">(
-    process.env.NEXT_PUBLIC_SUPABASE_URL!,
-    process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY!,
+    process.env.NEXT_PUBLIC_SUPABASE_URL,
+    process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY,
   );
 };