mirror of
https://github.com/LucasVbr/meeting-app.git
synced 2026-05-14 01:31:54 +00:00
Lucàs
64 lines
1.9 KiB
TypeScript
64 lines
1.9 KiB
TypeScript
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<Message[]>([]);
|
|
const [text, setText] = useState('');
|
|
const [socket, setSocket] = useState<Socket>()
|
|
|
|
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 <Text>Loading...</Text>;
|
|
|
|
const handleSubmit = () => {
|
|
if (text !== "" && socket) {
|
|
socket.emit("createdMessage", {text, sender: session.user.id})
|
|
setText("");
|
|
}
|
|
}
|
|
|
|
if (session && session.user && messages)
|
|
return (
|
|
<>
|
|
<Head><title>{websiteName}</title></Head>
|
|
|
|
<Container>
|
|
<MessageList user={session.user as User} messages={messages}/>
|
|
|
|
<Flex gap={5} mt={5}>
|
|
<Input type={"text"} colorScheme={'purple'} onChange={evt => setText(evt.target.value)} value={text} />
|
|
<Button colorScheme={'purple'} onClick={handleSubmit}>Envoyer</Button>
|
|
</Flex>
|
|
</Container>
|
|
</>
|
|
);
|
|
} |