add button to Map in Chat

Took 44 minutes
2026-05-13 17:21:53 +00:00 · 2023-05-21 20:17:29 +02:00
parent bb92a9525b
commit 70974c4f0e
2 changed files with 29 additions and 23 deletions
@@ -1,23 +1,19 @@
 import type {Message as MessageType, User} from '@prisma/client';
 import Message from '@/components/chat/Message';
-import {Flex, Box} from '@chakra-ui/react';
+import {Flex} from '@chakra-ui/react';

 type Props = {
  user: User,
  messages: MessageType[]
 }

-const MessageList = ({messages, user}: Props) => {
-  return (
-      <Box w={'70vh'} overflow={'scroll'}>
-        <Flex direction={'column'} gap={1} justifyContent={'flex-end'}>
-          {messages.map((message, index) => <Message
-              align={user.id === message.UserID ? 'right' : 'left'} key={index}
-              message={message}/>,
-          )}
-        </Flex>
-      </Box>
-  );
-};
+const MessageList = ({messages, user}: Props) => (
+    <Flex direction={'column'} gap={1} justifyContent={'flex-end'}>
+      {messages.map((message, index) => <Message
+          align={user.id === message.UserID ? 'right' : 'left'} key={index}
+          message={message}/>,
+      )}
+    </Flex>
+);

 export default MessageList;
@@ -1,4 +1,11 @@
-import {Button, Container, Flex, FormControl, Input} from '@chakra-ui/react';
+import {
+  Box,
+  Container,
+  Flex,
+  FormControl,
+  IconButton,
+  Input,
+} from '@chakra-ui/react';
 import Head from 'next/head';
 import {websiteName} from '@/lib/constants';
 import {useSession} from 'next-auth/react';
@@ -11,6 +18,7 @@ import {io, Socket} from 'socket.io-client';
 import {Message, User} from '@prisma/client';
 import LoadingPage from '@/components/LoadingPage';
 import Navbar from '@/components/Navbar';
+import {ArrowForwardIcon, CalendarIcon} from '@chakra-ui/icons';

 export default function ChatId() {
  const router = useRouter();
@@ -56,27 +64,29 @@ export default function ChatId() {

  if (status === 'loading') return <LoadingPage/>;
  return (
-      <>
+      <Box bgColor={'gray.50'}>
        <Head><title>{websiteName}</title></Head>

        <Navbar/>

-        <Container pt={20}>
+        <Container pt={20} bgColor={"white"}>
          <MessageList user={session.user as User} messages={messages}/>

-
          <form onSubmit={handleSubmit}>
            <FormControl>
-              <Flex gap={5} py={5}>
-                <Input type={'text'}
-                       onChange={evt => setText(evt.target.value)}
-                       value={text}/>
-                <Button type={'submit'} colorScheme={'purple'}>Envoyer</Button>
+              <Flex gap={2} py={5} width={"100%"}>
+                <Input type={'text'} value={text} flexGrow={"grow"}
+                       onChange={evt => setText(evt.target.value)}/>
+                <IconButton aria-label={"Map"} onClick={evt => {
+                  evt.preventDefault();
+                  router.push("/map");
+                }} icon={<CalendarIcon/>} variant={"outline"}/>
+                <IconButton aria-label={"Envoyer"} variant={"outline"} icon={<ArrowForwardIcon/>} type={"submit"}/>
              </Flex>
            </FormControl>
          </form>
          <AlwaysScrollToBottom/>
        </Container>
-      </>
+      </Box>
  );
 }