File size: 1,742 Bytes
e3eb984 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | import { useEffect } from 'react'
import { useAuthStore } from '@/store/authStore'
import { useChatStore } from '@/store/chatStore'
import { socketService } from '@/services/socketService'
import ChatSidebar from '@/components/chat/ChatSidebar'
import ChatWindow from '@/components/chat/ChatWindow'
import { Separator } from '@/components/ui/separator'
export default function ChatPage() {
const { user, token } = useAuthStore()
const { loadChats, currentChat } = useChatStore()
useEffect(() => {
if (token && user) {
// Connect to socket
socketService.connect(token).then(() => {
console.log('Socket connected successfully')
}).catch((error) => {
console.error('Socket connection failed:', error)
})
// Load initial data
loadChats()
// Cleanup on unmount
return () => {
socketService.disconnect()
}
}
}, [token, user, loadChats])
return (
<div className="flex h-screen bg-background">
{/* Sidebar */}
<div className="w-80 border-r border-border">
<ChatSidebar />
</div>
<Separator orientation="vertical" />
{/* Main chat area */}
<div className="flex-1 flex flex-col">
{currentChat ? (
<ChatWindow />
) : (
<div className="flex-1 flex items-center justify-center">
<div className="text-center">
<div className="text-6xl mb-4">💬</div>
<h2 className="text-2xl font-semibold mb-2">Welcome to ChatApp</h2>
<p className="text-muted-foreground">
Select a chat to start messaging
</p>
</div>
</div>
)}
</div>
</div>
)
}
|