Server : Apache/2 System : Linux server-15-235-50-60 5.15.0-164-generic #174-Ubuntu SMP Fri Nov 14 20:25:16 UTC 2025 x86_64 User : gositeme ( 1004) PHP Version : 8.2.29 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname Directory :  /home/gositeme/domains/lavocat.ca/public_html/src/pages/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

import { useSession } from 'next-auth/react';
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import dynamic from 'next/dynamic';
import LayoutWithSidebar from '@/components/LayoutWithSidebar';
import { Toaster } from '@/components/ui/toaster';

// Dynamically import GroupChat to avoid SSR issues with WebSocket
const GroupChat = dynamic(() => import('@/components/Chat/GroupChat'), { 
  ssr: false,
  loading: () => (
    <div className="flex h-screen w-full items-center justify-center bg-gray-100 dark:bg-gray-900">
      <div className="text-center">
        <div className="animate-spin rounded-full h-24 w-24 border-b-4 border-blue-600 mx-auto mb-4"></div>
        <p className="text-gray-600 dark:text-gray-400">Loading chat...</p>
      </div>
    </div>
  )
});

export default function GroupChatPage() {
  const { data: session, status } = useSession();
  const router = useRouter();
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (status === 'loading') {
      return; // Wait until session status is resolved
    }
    if (!session) {
      router.push('/auth/login');
    }
  }, [session, status, router]);

  // Add error boundary for the dynamic component
  if (error) {
    return (
      <div className="flex h-screen w-full items-center justify-center bg-gray-100 dark:bg-gray-900">
        <div className="text-center">
          <div className="text-red-600 text-xl mb-4">Error loading chat</div>
          <p className="text-gray-600 dark:text-gray-400 mb-4">{error}</p>
          <button 
            onClick={() => window.location.reload()} 
            className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
          >
            Reload Page
          </button>
        </div>
      </div>
    );
  }

  if (status === 'loading' || !session) {
    return (
      <div className="flex h-screen w-full items-center justify-center bg-gray-100 dark:bg-gray-900">
        <div className="text-center">
          <div className="animate-spin rounded-full h-24 w-24 border-b-4 border-blue-600 mx-auto mb-4"></div>
          <p className="text-gray-600 dark:text-gray-400">
            {status === 'loading' ? 'Loading session...' : 'Redirecting to login...'}
          </p>
        </div>
      </div>
    );
  }

  // Render the full-page chat component within the main layout
  return (
    <LayoutWithSidebar>
      <main className="h-full w-full">
        <GroupChat />
        <Toaster />
      </main>
    </LayoutWithSidebar>
  );
}