Send Messages in chat

TODO:
- use socket to reload
- use Redux do avoid props drilling

Took 1 hour 44 minutes

prisma/schema.prisma

@@ -80,7 +80,8 @@ model Passion {
 
 model Chat {
   id      String    @id @default(auto()) @map("_id") @db.ObjectId
-  messages  Message[]
+  Message Message[]
+
   createdAt DateTime @default(now())
 
   // Les utilisateurs qui ont un chat en commun

src/components/Message.tsx

@@ -1,18 +0,0 @@
-import {Card, Text, Flex} from '@chakra-ui/react';
-
-type Props = {
-  sender: 'me' | 'other'
-  message: string
-}
-
-export default function Message(props: Props) {
-  const {align, message} = props;
-
-  return (
-      <Flex alignItems={align === "me" ? 'end' : "start"}>
-        <Card display={'flex'} px={2} py={1} bg={'purple.500'}>
-          <Text>{message}</Text>
-        </Card>
-      </Flex>
-  );
-}

src/components/chat/Message.tsx

@@ -0,0 +1,18 @@
+import {Box, Flex, Text} from '@chakra-ui/react';
+import type {Message as MessageType, User} from "@prisma/client"
+
+
+type Props = {
+  user: User
+  message: MessageType
+}
+
+export default function Message(props: Props) {
+  const {message, user} = props;
+
+  return (
+      <Flex justifyContent={user.id === message.UserID ? 'right' : 'left'}>
+        <Text w={'fit-content'} bg={'purple.500'} borderRadius={'full'} color={'white'} px={"10px"} py={"5px"}>{message.text}</Text>
+      </Flex>
+  );
+}

src/components/chat/MessageList.tsx

@@ -0,0 +1,18 @@
+import type {Message as MessageType, User} from "@prisma/client";
+import Message from '@/components/chat/Message';
+import {Box, Flex} from '@chakra-ui/react';
+
+type Props = {
+  user: User
+  messages: MessageType[]
+}
+
+export default function MessageList(props: Props) {
+  const {messages, user} = props;
+
+  return (
+      <Flex direction={'column'} gap={1}>
+        {messages.map((message, index) => <Message key={index} user={user} message={message}/>)}
+      </Flex>
+  );
+}

src/components/form/FormMessage.tsx

@@ -0,0 +1,34 @@
+import {Button, Flex, Input} from '@chakra-ui/react';
+import {useState} from 'react';
+import {User} from '@prisma/client';
+
+type Props = {
+  user: User,
+  chatId: Props
+}
+
+export default function FormMessage(props: Props) {
+  const {user, chatId} = 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))
+    }
+  }
+
+  return (
+      <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>
+  )
+}

src/pages/chat/[id].tsx

@@ -1,53 +1,36 @@
-import {Container, Flex, Text} from '@chakra-ui/react';
+import {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} from 'react';
-import Message from '@/components/Message';
+import {useEffect, useState} from 'react';
 
-export default function Chat() {
+import MessageList from '@/components/chat/MessageList';
+import FormMessage from '@/components/form/FormMessage';
+
+export default function ChatId() {
   const router = useRouter();
   const {data: session, status} = useSession();
   const {id} = router.query;
+  const [messages, setMessages] = useState([])
 
   useEffect(() => {
-    switch (status) {
-      case 'loading':
-        return;
-      case 'unauthenticated':
-        return router.push('/login');
-      case 'authenticated':
-        fetch(`/api/chats/${id}`).then(res => res.json()).then(chat => {
-          if (!chat.UserID.contain(session?.user?.id)) router.push('/login');
-        });
-        return;
-    }
+    if (status === "authenticated")
+    fetch(`/api/messages?where={"ChatID": "${id}"}`)
+    .then(res => res.json())
+    .then(msgs => setMessages(msgs))
   }, [status]);
 
-  if (status === "loading") return <Text>Loading...</Text>
-
-  const messages = [
-    {sender: "me", message: "salut"},
-    {sender: "other", message: "salut"},
-    {sender: "me", message: "salut"},
-    {sender: "other", message: "salut"},
-    {sender: "me", message: "salut"},
-    {sender: "other", message: "salut"},
-  ]
+  if (status === 'loading') return <Text>Loading...</Text>;
 
+  if (session && messages)
   return (
       <>
         <Head><title>{websiteName}</title></Head>
 
         <Container>
-          <Flex direction={'column'}>
-            {
-              messages.map(m => <Message sender={m.sender} message={m.message}/>)
-            }
-          </Flex>
-
-          <Text>Hello World {session?.user?.firstName ?? ""}</Text>
+          <MessageList user={session.user} messages={messages}/>
+          <FormMessage user={session.user} chatId={id} />
         </Container>
       </>
   );

src/pages/chat/index.tsx

@@ -0,0 +1,17 @@
+import {Button, Text} from '@chakra-ui/react';
+import {useSession} from 'next-auth/react';
+import {useRouter} from 'next/router';
+
+export default function Chat() {
+  const router = useRouter();
+  const {data: session, status} = useSession()
+
+  if (session)
+  return (
+      <>
+        {
+          session.user.ChatID.map((id: string, index: number) => <Button key={index} onClick={() => router.push(`/chat/${id}`)} >{id}</Button>)
+        }
+      </>
+  )
+}