add modified App.tsx, removed Debug.jsx modified queryClient.ts and SnippetContext.ts

Author: hexawulf

client/src/App.tsx

@@ -16,7 +16,6 @@ import CollectionDetail from "@/pages/CollectionDetail";
 import Tags from "@/pages/Tags";
 import Settings from "@/pages/Settings";
 import SharedSnippet from "@/pages/SharedSnippet";
-import { DebugEnv } from "./components/Debug";
 
 function Router() {
   return (
@@ -138,7 +137,6 @@ export default function App() {
           <CollectionProvider>
             <TooltipProvider>
               <Router />
-              <DebugEnv />
               {showDebug && <AuthDebug user={user} loading={loading} />}
             </TooltipProvider>
           </CollectionProvider>

client/src/components/Debug.jsx

@@ -91,7 +91,7 @@ export function SnippetProvider({ children }: { children: ReactNode }) {
   // Delete snippet mutation
   const deleteSnippetMutation = useMutation({
     mutationFn: async (id: number) => {
-      await apiRequest("DELETE", `/api/snippets/${id}`);
+      await apiRequest("DELETE", `/api/snippets/${id}`, undefined, { expectJson: false });
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["/api/snippets"] });

client/src/contexts/SnippetContext.tsx

@@ -1,4 +1,5 @@
 import { QueryClient, QueryFunction } from "@tanstack/react-query";
+import { auth } from "@/lib/firebase";
 
 async function throwIfResNotOk(res: Response) {
   if (!res.ok) {
@@ -7,18 +8,88 @@ async function throwIfResNotOk(res: Response) {
   }
 }
 
+interface ApiRequestOptions {
+  expectJson?: boolean;
+}
+
 export async function apiRequest<T = any>(
+  method: string,
   url: string,
-  options?: RequestInit
+  data?: any,
+  options: ApiRequestOptions = {}
 ): Promise<T> {
+  // Get the Firebase ID token if the user is signed in
+  let token = null;
+  try {
+    // Get the current user and their ID token
+    const currentUser = auth.currentUser;
+    if (currentUser) {
+      token = await currentUser.getIdToken();
+      console.log("[apiRequest] Got Firebase ID token, length:", token.length);
+    } else {
+      console.log("[apiRequest] No current user found");
+    }
+  } catch (e) {
+    console.error("[apiRequest] Error getting Firebase ID token:", e);
+    token = null;
+  }
+
+  // Build headers
+  const headers: Record<string, string> = {};
+  
+  // Only add Content-Type if we have data to send
+  if (data) {
+    headers["Content-Type"] = "application/json";
+  }
+  
+  // Add Authorization header if we have a token
+  if (token) {
+    headers["Authorization"] = `Bearer ${token}`;
+    console.log("[apiRequest] Adding Authorization header to request");
+  } else {
+    console.log("[apiRequest] No token available, making unauthenticated request");
+  }
+
+  console.log(`[apiRequest] Making ${method} request to ${url}`);
+
   const res = await fetch(url, {
-    headers: options?.body ? { "Content-Type": "application/json" } : {},
+    method,
+    headers,
+    body: data ? JSON.stringify(data) : undefined,
     credentials: "include",
-    ...options
   });
 
-  await throwIfResNotOk(res);
-  return await res.json();
+  // Defensive: check for JSON response
+  const contentType = res.headers.get("content-type");
+  
+  // If we explicitly don't expect JSON or it's a 204 No Content, return early
+  if (options.expectJson === false || res.status === 204) {
+    if (!res.ok) {
+      const text = (await res.text()) || res.statusText;
+      throw new Error(`${res.status}: ${text}`);
+    }
+    console.log(`[apiRequest] ${method} ${url} completed successfully (no JSON response)`);
+    return undefined as T;
+  }
+  
+  if (contentType && contentType.includes("application/json")) {
+    const json = await res.json();
+    if (!res.ok) {
+      console.error(`[apiRequest] ${method} ${url} failed:`, json);
+      throw new Error(json.message || `API error: ${res.status}`);
+    }
+    console.log(`[apiRequest] ${method} ${url} completed successfully`);
+    return json;
+  } else {
+    // Not JSON, likely an error page
+    if (!res.ok) {
+      const text = await res.text();
+      console.error(`[apiRequest] ${method} ${url} failed with non-JSON response:`, text.slice(0, 100));
+      throw new Error(`${res.status}: Unexpected response from server: ${text.slice(0, 100)}`);
+    }
+    const text = await res.text();
+    throw new Error("Unexpected response from server: " + text.slice(0, 100));
+  }
 }
 
 type UnauthorizedBehavior = "returnNull" | "throw";
@@ -27,7 +98,24 @@ export const getQueryFn: <T>(options: {
 }) => QueryFunction<T> =
   ({ on401: unauthorizedBehavior }) =>
   async ({ queryKey }) => {
+    // For queries, we also need to attach the auth token
+    let token = null;
+    try {
+      const currentUser = auth.currentUser;
+      if (currentUser) {
+        token = await currentUser.getIdToken();
+      }
+    } catch (e) {
+      console.error("[getQueryFn] Error getting Firebase ID token:", e);
+    }
+
+    const headers: Record<string, string> = {};
+    if (token) {
+      headers["Authorization"] = `Bearer ${token}`;
+    }
+
     const res = await fetch(queryKey[0] as string, {
+      headers,
       credentials: "include",
     });
 

client/src/lib/queryClient.ts

@@ -0,0 +1,60 @@
+// CREATE THIS FILE: client/src/lib/safe-classname.ts
+
+/**
+ * Safely converts any className value to a string
+ * Handles objects, arrays, and other non-string values
+ */
+export function safeClassName(className: any): string {
+  if (typeof className === 'string') {
+    return className;
+  }
+  
+  if (className === null || className === undefined) {
+    return '';
+  }
+  
+  // Handle SVGAnimatedString (the main culprit)
+  if (className && typeof className === 'object' && 'baseVal' in className) {
+    return className.baseVal || '';
+  }
+  
+  // Handle arrays
+  if (Array.isArray(className)) {
+    return className.map(safeClassName).filter(Boolean).join(' ');
+  }
+  
+  // Handle objects (CSS modules, styled-components)
+  if (typeof className === 'object') {
+    return Object.keys(className)
+      .filter(key => className[key])
+      .join(' ');
+  }
+  
+  // Handle functions, numbers, booleans
+  if (typeof className === 'function') {
+    return '';
+  }
+  
+  return String(className);
+}
+
+/**
+ * Enhanced cn function that safely handles all className types
+ */
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]): string {
+  // First, make all inputs safe
+  const safeInputs = inputs.map(input => {
+    if (typeof input === 'string' || typeof input === 'undefined' || input === null) {
+      return input;
+    }
+    return safeClassName(input);
+  });
+  
+  return twMerge(clsx(safeInputs));
+}
+
+// Export the original cn as well for backwards compatibility
+export { clsx, twMerge };