cleaning hard 2

components/auth/auth-check.tsx

@@ -5,14 +5,17 @@ import { usePathname, useRouter } from "next/navigation";
 import { useEffect } from "react";
 
 export function AuthCheck({ children }: { children: React.ReactNode }) {
-  const { status } = useSession();
+  const session = useSession();
   const pathname = usePathname();
   const router = useRouter();
 
+  // Safely extract status with a fallback
+  const status = session?.status || "loading";
+
   useEffect(() => {
-    // Simple redirect to login page if not authenticated
-    if (status === "unauthenticated" && !pathname.includes("/signin")) {
-      router.push("/signin");
+    // Only redirect if we're certain the user is unauthenticated
+    if (status === "unauthenticated" && !pathname?.includes("/signin")) {
+      router?.push("/signin");
     }
   }, [status, router, pathname]);
 
@@ -26,7 +29,7 @@ export function AuthCheck({ children }: { children: React.ReactNode }) {
   }
 
   // Don't render on unauthenticated
-  if (status === "unauthenticated" && !pathname.includes("/signin")) {
+  if (status === "unauthenticated" && !pathname?.includes("/signin")) {
     return null;
   }
 

components/background-switcher.tsx

@@ -46,18 +46,28 @@ const backgroundImages = [
 ];
 
 export function useBackgroundImage() {
-  const [currentBackground, setCurrentBackground] = useState(backgroundImages[0]);
+  // Initialize with a safe default in case the array is empty
+  const defaultBackground = backgroundImages.length > 0 ? backgroundImages[0] : '';
+  const [currentBackground, setCurrentBackground] = useState(defaultBackground);
 
   const changeBackground = () => {
+    // Safety check to prevent issues if the array is empty
+    if (backgroundImages.length === 0) return;
+    
     const currentIndex = backgroundImages.indexOf(currentBackground);
-    const nextIndex = (currentIndex + 1) % backgroundImages.length;
+    // Handle case where current background is not in the array
+    const nextIndex = currentIndex >= 0 ? 
+      (currentIndex + 1) % backgroundImages.length : 
+      0;
     setCurrentBackground(backgroundImages[nextIndex]);
   };
 
   useEffect(() => {
     // Set initial random background
+    if (backgroundImages.length > 0) {
       const randomIndex = Math.floor(Math.random() * backgroundImages.length);
       setCurrentBackground(backgroundImages[randomIndex]);
+    }
   }, []);
 
   return { currentBackground, changeBackground };

components/layout/layout-wrapper.tsx

@@ -13,7 +13,15 @@ interface LayoutWrapperProps {
 }
 
 export function LayoutWrapper({ children, isSignInPage, isAuthenticated }: LayoutWrapperProps) {
-  const { currentBackground, changeBackground } = useBackgroundImage();
+  // Add try-catch to handle potential errors in the hook
+  let backgroundData = { currentBackground: '', changeBackground: () => {} };
+  try {
+    backgroundData = useBackgroundImage();
+  } catch (error) {
+    console.error("Error initializing background:", error);
+  }
+
+  const { currentBackground, changeBackground } = backgroundData;
 
   return (
     <AuthCheck>
@@ -21,7 +29,7 @@ export function LayoutWrapper({ children, isSignInPage, isAuthenticated }: Layou
       <div 
         className={isSignInPage ? "" : "min-h-screen"}
         style={
-          !isSignInPage ? {
+          !isSignInPage && currentBackground ? {
             backgroundImage: `url('${currentBackground}')`,
             backgroundSize: 'cover',
             backgroundPosition: 'center',
@@ -31,7 +39,7 @@ export function LayoutWrapper({ children, isSignInPage, isAuthenticated }: Layou
             transition: 'background-image 0.5s ease-in-out'
           } : {}
         }
-        onClick={!isSignInPage ? changeBackground : undefined}
+        onClick={!isSignInPage && typeof changeBackground === 'function' ? changeBackground : undefined}
       >
         <main>{children}</main>
       </div>

components/providers.tsx

@@ -9,9 +9,12 @@ 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;
+  
   return (
     <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-      <SessionProvider session={session} refetchInterval={5 * 60}>
+      <SessionProvider session={safeSession} refetchInterval={5 * 60}>
         {children}
       </SessionProvider>
     </ThemeProvider>