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

add button to Map in Chat

Browse Source 
Took 44 minutes
This commit is contained in:
Lucàs
2023-05-21 20:17:29 +02:00
parent bb92a9525b
commit 70974c4f0e
2 changed files with 29 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/chat/MessageList.tsx
+9 -13
View File
@@ -1,23 +1,19 @@
import type {Message as MessageType, User} from '@prisma/client'; import type {Message as MessageType, User} from '@prisma/client';
import Message from '@/components/chat/Message'; import Message from '@/components/chat/Message';
import {Flex, Box} from '@chakra-ui/react'; import {Flex} from '@chakra-ui/react';
type Props = { type Props = {
user: User, user: User,
messages: MessageType[] messages: MessageType[]
} }
const MessageList = ({messages, user}: Props) => { const MessageList = ({messages, user}: Props) => (
return ( <Flex direction={'column'} gap={1} justifyContent={'flex-end'}>
<Box w={'70vh'} overflow={'scroll'}> {messages.map((message, index) => <Message
<Flex direction={'column'} gap={1} justifyContent={'flex-end'}> align={user.id === message.UserID ? 'right' : 'left'} key={index}
{messages.map((message, index) => <Message message={message}/>,
align={user.id === message.UserID ? 'right' : 'left'} key={index} )}
message={message}/>, </Flex>
)} );
</Flex>
</Box>
);
};
export default MessageList; export default MessageList;
src/pages/chat/[id].tsx
+20 -10
View File
@@ -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 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';
@@ -11,6 +18,7 @@ import {io, Socket} from 'socket.io-client';
import {Message, User} from '@prisma/client'; import {Message, User} from '@prisma/client';
import LoadingPage from '@/components/LoadingPage'; import LoadingPage from '@/components/LoadingPage';
import Navbar from '@/components/Navbar'; import Navbar from '@/components/Navbar';
import {ArrowForwardIcon, CalendarIcon} from '@chakra-ui/icons';
export default function ChatId() { export default function ChatId() {
const router = useRouter(); const router = useRouter();
@@ -56,27 +64,29 @@ export default function ChatId() {
if (status === 'loading') return <LoadingPage/>; if (status === 'loading') return <LoadingPage/>;
return ( return (
<> <Box bgColor={'gray.50'}>
<Head><title>{websiteName}</title></Head> <Head><title>{websiteName}</title></Head>
<Navbar/> <Navbar/>
<Container pt={20}> <Container pt={20} bgColor={"white"}>
<MessageList user={session.user as User} messages={messages}/> <MessageList user={session.user as User} messages={messages}/>
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<FormControl> <FormControl>
<Flex gap={5} py={5}> <Flex gap={2} py={5} width={"100%"}>
<Input type={'text'} <Input type={'text'} value={text} flexGrow={"grow"}
onChange={evt => setText(evt.target.value)} onChange={evt => setText(evt.target.value)}/>
value={text}/> <IconButton aria-label={"Map"} onClick={evt => {
<Button type={'submit'} colorScheme={'purple'}>Envoyer</Button> evt.preventDefault();
router.push("/map");
}} icon={<CalendarIcon/>} variant={"outline"}/>
<IconButton aria-label={"Envoyer"} variant={"outline"} icon={<ArrowForwardIcon/>} type={"submit"}/>
</Flex> </Flex>
</FormControl> </FormControl>
</form> </form>
<AlwaysScrollToBottom/> <AlwaysScrollToBottom/>
</Container> </Container>
</> </Box>
); );
} }