cleaning hard 2

components/auth/auth-check.tsx

@@ -5,6 +5,8 @@ import { usePathname, useRouter } from "next/navigation";
 import { useEffect } from "react";
 
 export function AuthCheck({ children }: { children: React.ReactNode }) {
+  // Wrap in try-catch to ensure it never crashes
+  try {
     const session = useSession();
     const pathname = usePathname();
     const router = useRouter();
@@ -13,9 +15,15 @@ export function AuthCheck({ children }: { children: React.ReactNode }) {
     const status = session?.status || "loading";
 
     useEffect(() => {
+      try {
         // Only redirect if we're certain the user is unauthenticated
-    if (status === "unauthenticated" && !pathname?.includes("/signin")) {
-      router?.push("/signin");
+        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]);
 
@@ -29,10 +37,15 @@ export function AuthCheck({ children }: { children: React.ReactNode }) {
     }
 
     // Don't render on unauthenticated
-  if (status === "unauthenticated" && !pathname?.includes("/signin")) {
+    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}</>;
+  }
 } 

components/background-switcher.tsx

@@ -46,13 +46,22 @@ 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
@@ -60,17 +69,27 @@ export function useBackgroundImage() {
         (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) {
+    try {
+      // Set initial random background safely
+      if (Array.isArray(backgroundImages) && backgroundImages.length > 0) {
         const randomIndex = Math.floor(Math.random() * backgroundImages.length);
-      setCurrentBackground(backgroundImages[randomIndex]);
+        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,7 +9,8 @@ interface ProvidersProps {
 }
 
 export default function Providers({ children, session }: ProvidersProps) {
-  // Ensure session is properly handled - if it's undefined, provide an empty object
+  try {
+    // Ensure session is properly handled - if it's undefined, provide null
     const safeSession = session === undefined ? null : session;
     
     return (
@@ -19,4 +20,9 @@ export default function Providers({ children, session }: ProvidersProps) {
         </SessionProvider>
       </ThemeProvider>
     );
+  } catch (error) {
+    // If anything goes catastrophically wrong, at least render the children
+    console.error("Error in Providers component:", error);
+    return <>{children}</>;
+  }
 }