lucasvbr/meeting-app
1
0
Fork 0
mirror of https://github.com/LucasVbr/meeting-app.git synced 2026-05-13 17:21:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Edit Chat communication and require to be logged

Browse Source 
Took 44 seconds
This commit is contained in:
Lucàs
2023-05-20 16:19:51 +02:00
parent 8bb94d85f2
commit aa94b9467f
2 changed files with 29 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/api/socket/chat/[id].ts
+5 -4
View File
@@ -3,7 +3,7 @@ import prismaClient from '@/lib/prismaClient';
import type {Chat, Message as Message} from '@prisma/client'; import type {Chat, Message as Message} from '@prisma/client';
export default async function SocketHandler(req: any, res: any) { export default async function SocketHandler(req: any, res: any) {
const {id: chatId} = req.query; const {id} = req.query;
if (res.socket.server.io) { if (res.socket.server.io) {
console.log('Already set up'); console.log('Already set up');
@@ -16,8 +16,9 @@ export default async function SocketHandler(req: any, res: any) {
io.on('connection', async (socket): Promise<void> => { io.on('connection', async (socket): Promise<void> => {
await prismaClient.chat.findFirst({ prismaClient.chat.findFirst({
where: {id: chatId}, include: {Message: true}, where: {id},
include: {Message: true, User: true}
}).then((chat: (Chat & { Message: Message[] }) | null) => }).then((chat: (Chat & { Message: Message[] }) | null) =>
{if (chat) socket.emit('allOldMessages', chat.Message)} {if (chat) socket.emit('allOldMessages', chat.Message)}
); );
@@ -27,7 +28,7 @@ export default async function SocketHandler(req: any, res: any) {
data: { data: {
text: msgInput.text, text: msgInput.text,
User: {connect: {id: msgInput.sender}}, User: {connect: {id: msgInput.sender}},
Chat: {connect: {id: chatId}}, Chat: {connect: {id}},
}, },
}).then((newMessage: Message) => socket.emit('newIncomingMessage', newMessage)); }).then((newMessage: Message) => socket.emit('newIncomingMessage', newMessage));
}); });
src/pages/chat/[id].tsx
+22 -23
View File
@@ -1,4 +1,4 @@
import {Button, Container, Flex, Input, Text} from '@chakra-ui/react'; import {Button, Container, Flex, Input} from '@chakra-ui/react';
import Head from 'next/head'; import Head from 'next/head';
import {websiteName} from '@/lib/constants'; import {websiteName} from '@/lib/constants';
import {useSession} from 'next-auth/react'; import {useSession} from 'next-auth/react';
@@ -9,44 +9,41 @@ import MessageList from '@/components/chat/MessageList';
import {io, Socket} from 'socket.io-client'; import {io, Socket} from 'socket.io-client';
import {Message, User} from '@prisma/client'; import {Message, User} from '@prisma/client';
import LoadingPage from '@/components/LoadingPage';
export default function ChatId() { export default function ChatId() {
const router = useRouter(); const router = useRouter();
const {data: session, status} = useSession(); const {data: session, status} = useSession({required: true});
const {id: chatId} = router.query; const {id: chatId} = router.query;
const [messages, setMessages] = useState<Message[]>([]); const [messages, setMessages] = useState<Message[]>([]);
const [text, setText] = useState(''); const [text, setText] = useState('');
const [socket, setSocket] = useState<Socket>() const [socket, setSocket] = useState<Socket>();
useEffect(() => { useEffect(() => {
if (status === 'authenticated') socketInitializer() if (status === 'authenticated') socketInitializer();
}, [status]); }, [status]);
const socketInitializer = () => {
const socketInitializer = async () => { fetch(`/api/socket/chat/${chatId}`)
await fetch(`/api/socket/chat/${chatId}`) .then(() => {
const soc = io(); const soc = io();
soc.on('connect', () => console.log('connected')) soc.on('connect', () => console.log('connected'));
soc.on("allOldMessages", (allOldMessages: Message[]) => setMessages(allOldMessages)) soc.on('allOldMessages', (allOldMessages: Message[]) => setMessages(allOldMessages));
soc.on("newIncomingMessage", (newIncomingMessage: Message) => soc.on('newIncomingMessage', (newIncomingMessage: Message) => setMessages(messages => [...messages, newIncomingMessage]));
setMessages(messages => [...messages, newIncomingMessage])
);
setSocket(soc); setSocket(soc);
} });
};
if (status === 'loading') return <Text>Loading...</Text>;
const handleSubmit = () => { const handleSubmit = () => {
if (text !== "" && socket) { if (text !== '' && socket && session?.user) {
socket.emit("createdMessage", {text, sender: session.user.id}) socket.emit('createdMessage', {text, sender: session.user.id});
setText(""); setText('');
}
} }
};
if (session && session.user && messages) if (status === 'loading') return <LoadingPage/>;
return ( return (
<> <>
<Head><title>{websiteName}</title></Head> <Head><title>{websiteName}</title></Head>
@@ -55,8 +52,10 @@ export default function ChatId() {
<MessageList user={session.user as User} messages={messages}/> <MessageList user={session.user as User} messages={messages}/>
<Flex gap={5} mt={5}> <Flex gap={5} mt={5}>
<Input type={"text"} colorScheme={'purple'} onChange={evt => setText(evt.target.value)} value={text} /> <Input type={'text'} colorScheme={'purple'}
<Button colorScheme={'purple'} onClick={handleSubmit}>Envoyer</Button> onChange={evt => setText(evt.target.value)} value={text}/>
<Button colorScheme={'purple'}
onClick={handleSubmit}>Envoyer</Button>
</Flex> </Flex>
</Container> </Container>
</> </>