import {Button, Container, Flex, Input, Text} from '@chakra-ui/react'; import Head from 'next/head'; import {websiteName} from '@/lib/constants'; import {useSession} from 'next-auth/react'; import {useRouter} from 'next/router'; import {useEffect, useState} from 'react'; import MessageList from '@/components/chat/MessageList'; import {io, Socket} from 'socket.io-client'; import {Message, User} from '@prisma/client'; export default function ChatId() { const router = useRouter(); const {data: session, status} = useSession(); const {id: chatId} = router.query; const [messages, setMessages] = useState([]); const [text, setText] = useState(''); const [socket, setSocket] = useState() useEffect(() => { if (status === 'authenticated') socketInitializer() }, [status]); const socketInitializer = async () => { await fetch(`/api/socket/chat/${chatId}`) const soc = io(); soc.on('connect', () => console.log('connected')) soc.on("allOldMessages", (allOldMessages: Message[]) => setMessages(allOldMessages)) soc.on("newIncomingMessage", (newIncomingMessage: Message) => setMessages(messages => [...messages, newIncomingMessage]) ); setSocket(soc); } if (status === 'loading') return Loading...; const handleSubmit = () => { if (text !== "" && socket) { socket.emit("createdMessage", {text, sender: session.user.id}) setText(""); } } if (session && session.user && messages) return ( <> {websiteName} setText(evt.target.value)} value={text} /> ); }