chore: dev environment is wsl - remove secrets because of typo (rookie move)

Author: robsdevcraft

apps/web/.env.lcoal

@@ -2,31 +2,37 @@
  * Component that automatically syncs user to Convex when authenticated
  * Only runs when Convex recognizes the user as authenticated (has auth token)
  */
-import { useEffect } from 'react'
-import { useMutation, useQuery, Authenticated } from 'convex/react'
-import { api } from 'convex/_generated/api'
+import { useEffect } from "react";
+import { useMutation, useQuery, Authenticated } from "convex/react";
+import { api } from "convex/_generated/api";
 
 export function UserSync() {
-  const ensureUser = useMutation(api.users.ensureCurrentUser)
-  const currentUser = useQuery(api.users.getCurrent)
-  
+  const ensureUser = useMutation(api.users.ensureCurrentUser);
+  const currentUser = useQuery(api.users.getCurrent);
+
   useEffect(() => {
     // Only sync if user is authenticated but doesn't exist in database yet
     if (currentUser === null) {
+      console.log(
+        "[UserSync] User is authenticated but not in DB. Attempting creation...",
+      );
       // Small delay to ensure everything is settled
       const timer = setTimeout(() => {
-        ensureUser().catch(() => {
-          // Silently ignore - user might already exist or auth might not be ready
-          // The query will retry automatically
-        })
-      }, 200)
-      
-      return () => clearTimeout(timer)
+        ensureUser()
+          .then((id) =>
+            console.log("[UserSync] User created successfully:", id),
+          )
+          .catch((e) => {
+            console.error("[UserSync] Creation FAILED:", e);
+          });
+      }, 200);
+
+      return () => clearTimeout(timer);
     }
-  }, [currentUser, ensureUser])
-  
+  }, [currentUser, ensureUser]);
+
   // This component doesn't render anything
-  return null
+  return null;
 }
 
 /**
@@ -37,5 +43,5 @@ export function AuthenticatedUserSync() {
     <Authenticated>
       <UserSync />
     </Authenticated>
-  )
+  );
 }

apps/web/src/components/auth/UserSync.tsx

@@ -1,36 +1,35 @@
-"use client"
+"use client";
 
-import { useEffect, useState } from "react"
+import { useEffect, useState } from "react";
 import {
   Sidebar,
   SidebarContent,
   SidebarFooter,
   SidebarHeader,
   SidebarRail,
-} from "@/components/ui/sidebar"
-import { NavGroup } from "./NavGroup"
-import { NavUser } from "./NavUser"
-import { TeamSwitcher } from "./TeamSwitcher"
-import { useSidebarData, sidebarData as staticSidebarData } from "./sidebar-data"
+} from "@/components/ui/sidebar";
+import { NavGroup } from "./NavGroup";
+import { NavUser } from "./NavUser";
+import { TeamSwitcher } from "./TeamSwitcher";
+import {
+  useSidebarData,
+  sidebarData as staticSidebarData,
+} from "./sidebar-data";
 
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
-  const [isClient, setIsClient] = useState(false)
-  const [sidebarData, setSidebarData] = useState(staticSidebarData)
-  
+  // Always call the hook unconditionally to respect Rules of Hooks
+  const dynamicSidebarData = useSidebarData();
+
+  // Handle hydration mismatch by waiting for client mount
+  const [isMounted, setIsMounted] = useState(false);
+
   useEffect(() => {
-    setIsClient(true)
-  }, [])
-  
-  // Only use the hook on client side to avoid SSR issues with Clerk
-  if (isClient) {
-    try {
-      const data = useSidebarData()
-      setSidebarData(data)
-    } catch (error) {
-      // If hook fails (e.g., Clerk not available), use static data
-    }
-  }
-  
+    setIsMounted(true);
+  }, []);
+
+  // Use static data on server/initial render, dynamic data after mount
+  const sidebarData = isMounted ? dynamicSidebarData : staticSidebarData;
+
   return (
     <div className="relative">
       <Sidebar collapsible="icon" {...props}>
@@ -39,9 +38,9 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
         </SidebarHeader>
         <SidebarContent>
           {sidebarData.navGroups.map((props, index) => (
-            <NavGroup 
-              key={props.title || props.items[0]?.title || `nav-group-${index}`} 
-              {...props} 
+            <NavGroup
+              key={props.title || props.items[0]?.title || `nav-group-${index}`}
+              {...props}
             />
           ))}
         </SidebarContent>
@@ -51,5 +50,5 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
         <SidebarRail />
       </Sidebar>
     </div>
-  )
+  );
 }

apps/web/src/components/dashboard/AppSidebar.tsx

@@ -27,22 +27,22 @@ import {
   FileText,
   RadioTower,
   Inbox,
-} from "lucide-react"
-import { type SidebarData } from "./types"
-import { useQuery } from "convex/react"
-import { api } from "convex/_generated/api"
-import type { Doc } from "convex/_generated/dataModel"
+} from "lucide-react";
+import { type SidebarData } from "./types";
+import { useQuery } from "convex/react";
+import { api } from "convex/_generated/api";
+import type { Doc } from "convex/_generated/dataModel";
 
-const clerkPublishableKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
+const clerkPublishableKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;
 
 // Conditionally import useUser - only if Clerk is configured
 // This avoids bundling Clerk if not needed, but we must handle SSR
-let useUserHook: (() => { user: any } | null) | null = null
+let useUserHook: (() => { user: any }) | null = null;
 if (clerkPublishableKey && typeof window !== "undefined") {
   try {
     // eslint-disable-next-line @typescript-eslint/no-var-requires
-    const clerkReact = require("@clerk/clerk-react")
-    useUserHook = clerkReact.useUser
+    const clerkReact = require("@clerk/clerk-react");
+    useUserHook = clerkReact.useUser;
   } catch {
     // Clerk not available
   }
@@ -52,91 +52,91 @@ if (clerkPublishableKey && typeof window !== "undefined") {
 // Note: This hook should only be called on the client side (after mount)
 // to avoid SSR issues with ClerkProvider. AppSidebar ensures this.
 function useSidebarUser() {
-  // Check if Convex is configured before calling useQuery
-  const convexUrl = import.meta.env.VITE_CONVEX_URL
-  if (!convexUrl) {
-    return {
-      name: "User",
-      email: "",
-      avatar: "",
-    }
-  }
-  
-  // useQuery will throw if ConvexProvider isn't available
-  // We can't catch this, so the caller must handle it
-  const convexUser = useQuery(api.users.getCurrent)
-  
+  // Check if Convex is configured
+  const convexUrl = import.meta.env.VITE_CONVEX_URL;
+  const shouldSkip = !convexUrl;
+
+  // Always call hooks unconditionally
+  const convexUser = useQuery(api.users.getCurrent, shouldSkip ? "skip" : {});
+
   // If Clerk is not configured or not available, only use Convex user
   if (!useUserHook) {
     return {
       name: convexUser?.name || "User",
       email: "",
       avatar: "",
-    }
+    };
   }
-  
+
   // Always call the hook if it's available (React rules require unconditional calls)
   // This will throw if not in ClerkProvider, but AppSidebar only calls this on client
   // where ClerkProvider should be available
-  const { user: clerkUser } = useUserHook()
-  
+  const { user: clerkUser } = useUserHook();
+
+  if (shouldSkip) {
+    return {
+      name: "User",
+      email: "",
+      avatar: "",
+    };
+  }
+
   return {
-    name: clerkUser?.firstName || convexUser?.name || clerkUser?.fullName || clerkUser?.primaryEmailAddress?.emailAddress?.split("@")[0] || "User",
+    name:
+      clerkUser?.firstName ||
+      convexUser?.name ||
+      clerkUser?.fullName ||
+      clerkUser?.primaryEmailAddress?.emailAddress?.split("@")[0] ||
+      "User",
     email: clerkUser?.primaryEmailAddress?.emailAddress || "",
     avatar: clerkUser?.imageUrl || "",
-  }
+  };
 }
 
 // Helper hook to get organizations from Clerk
 function useSidebarTeams() {
-  // Check if Convex is configured before calling useQuery
-  const convexUrl = import.meta.env.VITE_CONVEX_URL
-  if (!convexUrl) {
+  // Check if Convex is configured
+  const convexUrl = import.meta.env.VITE_CONVEX_URL;
+  const shouldSkip = !convexUrl;
+
+  // Always call hooks unconditionally
+  const organizations = useQuery(
+    api.organizations.list,
+    shouldSkip ? "skip" : {},
+  );
+
+  if (shouldSkip) {
     return [
       {
         name: "StackDock",
         logo: Building2,
         plan: "Free",
       },
-    ]
+    ];
   }
-  
-  // useQuery will throw if ConvexProvider isn't available
-  // We can't catch this, so the caller must handle it
-  const organizations = useQuery(api.organizations.list)
-  
+
   if (!organizations || organizations.length === 0) {
     return [
       {
         name: "StackDock",
         logo: Building2,
         plan: "Free",
       },
-    ]
+    ];
   }
-  
+
   return organizations.map((org: Doc<"organizations">) => ({
     name: org.name,
     logo: Building2,
     plan: "Active",
-  }))
+  }));
 }
 
 export function useSidebarData(): SidebarData {
-  // Check if Convex is configured
-  const convexUrl = import.meta.env.VITE_CONVEX_URL
-  
-  // If Convex is not configured, return static data
-  if (!convexUrl) {
-    return sidebarData
-  }
-  
-  // Try to use hooks, but fall back to static data if ConvexProvider isn't available
-  // Note: We can't wrap hooks in try-catch, so if useQuery throws, it will propagate
-  // The component using this hook should handle the error or ensure ConvexProvider is available
-  const user = useSidebarUser()
-  const teams = useSidebarTeams()
-  
+  // Always call hooks unconditionally
+  const user = useSidebarUser();
+  const teams = useSidebarTeams();
+
   return {
     user,
     teams,
@@ -233,27 +233,27 @@ export function useSidebarData(): SidebarData {
       {
         title: "",
         items: [
-            {
-              title: "Monitoring",
-              icon: BarChart3,
-              items: [
-                {
-                  title: "Uptime",
-                  url: "/dashboard/monitoring/uptime",
-                  icon: RadioTower,
-                },
-                {
-                  title: "Issues",
-                  url: "/dashboard/monitoring/issues",
-                  icon: AlertCircle,
-                },
-                {
-                  title: "Logs",
-                  url: "/dashboard/monitoring/logs",
-                  icon: FileText,
-                },
-              ],
-            },
+          {
+            title: "Monitoring",
+            icon: BarChart3,
+            items: [
+              {
+                title: "Uptime",
+                url: "/dashboard/monitoring/uptime",
+                icon: RadioTower,
+              },
+              {
+                title: "Issues",
+                url: "/dashboard/monitoring/issues",
+                icon: AlertCircle,
+              },
+              {
+                title: "Logs",
+                url: "/dashboard/monitoring/logs",
+                icon: FileText,
+              },
+            ],
+          },
         ],
       },
       {
@@ -309,7 +309,7 @@ export function useSidebarData(): SidebarData {
         ],
       },
     ],
-  }
+  };
 }
 
 // Static version for components that can't use hooks
@@ -490,4 +490,4 @@ export const sidebarData: SidebarData = {
       ],
     },
   ],
-}
+};