Merge branch 'dev' of github.com:LucasVbr/projet-web4 into dev

src/components/form/FormMessage.tsx

@@ -1,27 +1,32 @@
 import {Button, Flex, Input} from '@chakra-ui/react';
 import {useState} from 'react';
 import {User} from '@prisma/client';
+import {io, Socket} from 'socket.io-client';
+import Message from '@/components/chat/Message';
 
 type Props = {
   user: User,
-  chatId: Props
+  chatId: Props,
+  socket: any
 }
 
 export default function FormMessage(props: Props) {
-  const {user, chatId} = props;
+  const {user, socket} = props;
   const [text, setText] = useState("");
 
   const handleSubmit = () => {
     if (text !== "") {
-      fetch("/api/messages", {
-        method: "POST",
-        headers: {'Content-Type': 'application/json'},
-        body: JSON.stringify({
-          text,
-          'User': {"connect": {'id': user.id}},
-          'Chat': {"connect": {'id': chatId}}
-        })
-      }).then(res => res.json()).then(res => console.log(res)).catch(err => console.error(err))
+      socket.emit("createdMessage", {text, sender: user.id})
+
+      // fetch("/api/messages", {
+      //   method: "POST",
+      //   headers: {'Content-Type': 'application/json'},
+      //   body: JSON.stringify({
+      //     text,
+      //     'User': {"connect": {'id': user.id}},
+      //     'Chat': {"connect": {'id': chatId}}
+      //   })
+      // }).then(res => res.json()).then(res => console.log(res)).catch(err => console.error(err))
     }
   }
 

src/pages/api/socket/chat/[id].ts

@@ -0,0 +1,42 @@
+import {Server} from 'socket.io';
+import prismaClient from '@/lib/prismaClient';
+
+export default async function SocketHandler(req: any, res: any) {
+  const {id: chatId} = req.query;
+
+  // It means that socket server was already initialised
+  if (res.socket.server.io) {
+    console.log('Already set up');
+    res.end();
+    return;
+  }
+
+  const io = new Server(res.socket.server);
+  res.socket.server.io = io;
+
+  // Define actions inside
+  io.on('connection', async (socket) => {
+    console.log(socket.id);
+
+    await prismaClient.chat.findFirst({
+      where: {id: chatId},
+      include: {Message: true},
+    }).then(chat => {
+      // @ts-ignore
+      return socket.emit('allOldMessages', chat.Message);
+    });
+
+    socket.on('createdMessage', async (msgInput) => {
+      await prismaClient.message.create({
+        data: {
+          text: msgInput.text,
+          User: {connect: {id: msgInput.sender}},
+          Chat: {connect: {id: chatId}},
+        },
+      }).then((newMessage) => socket.emit('newIncomingMessage', newMessage));
+    });
+  });
+
+  console.log('Setting up socket');
+  res.end();
+}

src/pages/chat/[id].tsx

@@ -1,36 +1,73 @@
-import {Container, Flex, Input, Text} from '@chakra-ui/react';
+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 {useCallback, useEffect, useState} from 'react';
 
 import MessageList from '@/components/chat/MessageList';
-import FormMessage from '@/components/form/FormMessage';
+
+import {io, Socket} from 'socket.io-client';
+import {Message} from '@prisma/client';
 
 export default function ChatId() {
   const router = useRouter();
   const {data: session, status} = useSession();
-  const {id} = router.query;
-  const [messages, setMessages] = useState([])
+  const {id: chatId} = router.query;
+
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [text, setText] = useState('');
+  const [socket, setSocket] = useState<Socket>()
 
   useEffect(() => {
-    if (status === "authenticated")
-    fetch(`/api/messages?where={"ChatID": "${id}"}`)
-    .then(res => res.json())
-    .then(msgs => setMessages(msgs))
+    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[]) => {
+      console.log("allOldMessages", allOldMessages);
+      setMessages(allOldMessages);
+    })
+
+    soc.on("newIncomingMessage", (newIncomingMessage: Message) => {
+      console.log("newIncomingMessage", newIncomingMessage);
+      console.log("messages", messages);
+      setMessages(messages => ([...messages, newIncomingMessage]));
+    });
+
+    setSocket(soc);
+  }
+
   if (status === 'loading') return <Text>Loading...</Text>;
 
-  if (session && messages)
+  const handleSubmit = () => {
+    if (text !== "" && socket) {
+      // @ts-ignore
+      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} messages={messages}/>
-          <FormMessage user={session.user} chatId={id} />
+
+          <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>
       </>
   );