cleaning hard 2

components/auth/auth-check.tsx

@@ -5,34 +5,47 @@ import { usePathname, useRouter } from "next/navigation";
 import { useEffect } from "react";
 
 export function AuthCheck({ children }: { children: React.ReactNode }) {
-  const session = useSession();
-  const pathname = usePathname();
-  const router = useRouter();
+  // Wrap in try-catch to ensure it never crashes
+  try {
+    const session = useSession();
+    const pathname = usePathname();
+    const router = useRouter();
 
-  // Safely extract status with a fallback
-  const status = session?.status || "loading";
+    // Safely extract status with a fallback
+    const status = session?.status || "loading";
 
-  useEffect(() => {
-    // Only redirect if we're certain the user is unauthenticated
-    if (status === "unauthenticated" && !pathname?.includes("/signin")) {
-      router?.push("/signin");
+    useEffect(() => {
+      try {
+        // Only redirect if we're certain the user is unauthenticated
+        if (status === "unauthenticated" && pathname && !pathname.includes("/signin")) {
+          if (router && typeof router.push === 'function') {
+            router.push("/signin");
+          }
+        }
+      } catch (error) {
+        console.error("Error in AuthCheck useEffect:", error);
+      }
+    }, [status, router, pathname]);
+
+    // Simple loading state
+    if (status === "loading") {
+      return (
+        <div className="flex justify-center items-center min-h-screen">
+          <div className="animate-spin h-10 w-10 border-4 border-blue-500 rounded-full border-t-transparent"></div>
+        </div>
+      );
     }
-  }, [status, router, pathname]);
 
-  // Simple loading state
-  if (status === "loading") {
-    return (
-      <div className="flex justify-center items-center min-h-screen">
-        <div className="animate-spin h-10 w-10 border-4 border-blue-500 rounded-full border-t-transparent"></div>
-      </div>
-    );
+    // Don't render on unauthenticated
+    if (status === "unauthenticated" && pathname && !pathname.includes("/signin")) {
+      return null;
+    }
+
+    // Render children if authenticated
+    return <>{children}</>;
+  } catch (error) {
+    // If anything fails, just render the children
+    console.error("Error in AuthCheck component:", error);
+    return <>{children}</>;
   }
-
-  // Don't render on unauthenticated
-  if (status === "unauthenticated" && !pathname?.includes("/signin")) {
-    return null;
-  }
-
-  // Render children if authenticated
-  return <>{children}</>;
 } 

components/background-switcher.tsx

@@ -46,31 +46,50 @@ const backgroundImages = [
 ];
 
 export function useBackgroundImage() {
-  // Initialize with a safe default in case the array is empty
-  const defaultBackground = backgroundImages.length > 0 ? backgroundImages[0] : '';
+  // Safety checks
+  if (!Array.isArray(backgroundImages) || backgroundImages.length === 0) {
+    return {
+      currentBackground: '',
+      changeBackground: () => {}
+    };
+  }
+
+  // Initialize with a safe default
+  const defaultBackground = backgroundImages[0] || '';
   const [currentBackground, setCurrentBackground] = useState(defaultBackground);
 
   const changeBackground = () => {
-    // Safety check to prevent issues if the array is empty
-    if (backgroundImages.length === 0) return;
+    try {
+      // Safety check to prevent issues
+      if (!Array.isArray(backgroundImages) || backgroundImages.length === 0) return;
       
-    const currentIndex = backgroundImages.indexOf(currentBackground);
-    // Handle case where current background is not in the array
-    const nextIndex = currentIndex >= 0 ? 
-      (currentIndex + 1) % backgroundImages.length : 
-      0;
-    setCurrentBackground(backgroundImages[nextIndex]);
+      const currentIndex = backgroundImages.indexOf(currentBackground);
+      // Handle case where current background is not in the array
+      const nextIndex = currentIndex >= 0 ? 
+        (currentIndex + 1) % backgroundImages.length : 
+        0;
+      setCurrentBackground(backgroundImages[nextIndex]);
+    } catch (error) {
+      console.error("Error changing background:", error);
+    }
   };
 
   useEffect(() => {
-    // Set initial random background
-    if (backgroundImages.length > 0) {
-      const randomIndex = Math.floor(Math.random() * backgroundImages.length);
-      setCurrentBackground(backgroundImages[randomIndex]);
+    try {
+      // Set initial random background safely
+      if (Array.isArray(backgroundImages) && backgroundImages.length > 0) {
+        const randomIndex = Math.floor(Math.random() * backgroundImages.length);
+        setCurrentBackground(backgroundImages[randomIndex] || '');
+      }
+    } catch (error) {
+      console.error("Error setting initial background in useEffect:", error);
     }
   }, []);
 
-  return { currentBackground, changeBackground };
+  return { 
+    currentBackground: currentBackground || '', 
+    changeBackground 
+  };
 }
 
 export function BackgroundSwitcher({ children }: { children: React.ReactNode }) {

components/layout/layout-wrapper.tsx

@@ -13,16 +13,37 @@ interface LayoutWrapperProps {
 }
 
 export function LayoutWrapper({ children, isSignInPage, isAuthenticated }: LayoutWrapperProps) {
-  // Add try-catch to handle potential errors in the hook
-  let backgroundData = { currentBackground: '', changeBackground: () => {} };
+  // Default safe values
+  let currentBackground = '';
+  let changeBackground = () => {};
+  
+  // Try to use the background hook if available
   try {
-    backgroundData = useBackgroundImage();
+    if (typeof useBackgroundImage === 'function') {
+      const backgroundData = useBackgroundImage();
+      if (backgroundData && typeof backgroundData === 'object') {
+        currentBackground = backgroundData.currentBackground || '';
+        changeBackground = typeof backgroundData.changeBackground === 'function' 
+          ? backgroundData.changeBackground 
+          : () => {};
+      }
+    }
   } catch (error) {
-    console.error("Error initializing background:", error);
+    console.error("Failed to initialize background:", error);
   }
 
-  const { currentBackground, changeBackground } = backgroundData;
+  // Safely wrap the click handler to prevent errors
+  const handleBackgroundClick = (e: React.MouseEvent) => {
+    try {
+      if (!isSignInPage && typeof changeBackground === 'function') {
+        changeBackground();
+      }
+    } catch (error) {
+      console.error("Error in background click handler:", error);
+    }
+  };
 
+  // Safely render
   return (
     <AuthCheck>
       {!isSignInPage && isAuthenticated && <MainNav />}
@@ -39,7 +60,7 @@ export function LayoutWrapper({ children, isSignInPage, isAuthenticated }: Layou
             transition: 'background-image 0.5s ease-in-out'
           } : {}
         }
-        onClick={!isSignInPage && typeof changeBackground === 'function' ? changeBackground : undefined}
+        onClick={handleBackgroundClick}
       >
         <main>{children}</main>
       </div>

components/providers.tsx

@@ -9,14 +9,20 @@ interface ProvidersProps {
 }
 
 export default function Providers({ children, session }: ProvidersProps) {
-  // Ensure session is properly handled - if it's undefined, provide an empty object
-  const safeSession = session === undefined ? null : session;
+  try {
+    // Ensure session is properly handled - if it's undefined, provide null
+    const safeSession = session === undefined ? null : session;
     
-  return (
-    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-      <SessionProvider session={safeSession} refetchInterval={5 * 60}>
-        {children}
-      </SessionProvider>
-    </ThemeProvider>
-  );
+    return (
+      <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+        <SessionProvider session={safeSession} refetchInterval={5 * 60}>
+          {children}
+        </SessionProvider>
+      </ThemeProvider>
+    );
+  } catch (error) {
+    // If anything goes catastrophically wrong, at least render the children
+    console.error("Error in Providers component:", error);
+    return <>{children}</>;
+  }
 }