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';
export default async function SocketHandler(req: any, res: any) {
const {id: chatId} = req.query;
const {id} = req.query;
if (res.socket.server.io) {
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> => {
await prismaClient.chat.findFirst({
where: {id: chatId}, include: {Message: true},
prismaClient.chat.findFirst({
where: {id},
include: {Message: true, User: true}
}).then((chat: (Chat & { Message: Message[] }) | null) =>
{if (chat) socket.emit('allOldMessages', chat.Message)}
);
@@ -27,7 +28,7 @@ export default async function SocketHandler(req: any, res: any) {
data: {
text: msgInput.text,
User: {connect: {id: msgInput.sender}},
Chat: {connect: {id: chatId}},
Chat: {connect: {id}},
},
}).then((newMessage: Message) => socket.emit('newIncomingMessage', newMessage));
});
src/pages/chat/[id].tsx
+24 -25
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 {websiteName} from '@/lib/constants';
import {useSession} from 'next-auth/react';
@@ -9,44 +9,41 @@ import MessageList from '@/components/chat/MessageList';
import {io, Socket} from 'socket.io-client';
import {Message, User} from '@prisma/client';
import LoadingPage from '@/components/LoadingPage';
export default function ChatId() {
const router = useRouter();
const {data: session, status} = useSession();
const {data: session, status} = useSession({required: true});
const {id: chatId} = router.query;
const [messages, setMessages] = useState<Message[]>([]);
const [text, setText] = useState('');
const [socket, setSocket] = useState<Socket>()
const [socket, setSocket] = useState<Socket>();
useEffect(() => {
if (status === 'authenticated') socketInitializer()
if (status === 'authenticated') socketInitializer();
}, [status]);
const socketInitializer = () => {
fetch(`/api/socket/chat/${chatId}`)
.then(() => {
const soc = io();
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>;
soc.on('connect', () => console.log('connected'));
soc.on('allOldMessages', (allOldMessages: Message[]) => setMessages(allOldMessages));
soc.on('newIncomingMessage', (newIncomingMessage: Message) => setMessages(messages => [...messages, newIncomingMessage]));
setSocket(soc);
});
};
const handleSubmit = () => {
if (text !== "" && socket) {
socket.emit("createdMessage", {text, sender: session.user.id})
setText("");
if (text !== '' && socket && session?.user) {
socket.emit('createdMessage', {text, sender: session.user.id});
setText('');
}
}
};
if (session && session.user && messages)
if (status === 'loading') return <LoadingPage/>;
return (
<>
<Head><title>{websiteName}</title></Head>
@@ -55,8 +52,10 @@ export default function ChatId() {
<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>
<Input type={'text'} colorScheme={'purple'}
onChange={evt => setText(evt.target.value)} value={text}/>
<Button colorScheme={'purple'}
onClick={handleSubmit}>Envoyer</Button>
</Flex>
</Container>
</>