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

Send messages with sockets ❤️

Browse Source 
Took 3 hours 51 minutes
This commit is contained in:
Lucàs
2023-04-03 16:35:25 +02:00
parent c591a0eb3d
commit c91f5f3dfb
13 changed files with 501 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ModalModifyImages.jsx
-204
View File
@@ -1,204 +0,0 @@
import {
Button,
Flex,
Grid,
GridItem,
Image,
Input,
Modal,
ModalBody,
ModalCloseButton,
ModalContent,
ModalFooter,
ModalHeader,
ModalOverlay,
useDisclosure,
useToast,
} from "@chakra-ui/react";
import { useState } from "react";
import { RiEditBoxLine } from "react-icons/ri";
export default function ModalModifyImages(props) {
const { isOpen, onOpen, onClose } = useDisclosure();
const { images, user, userData, setUserData } = props;
const [listImage, setlistImage] = useState(images);
const toast = useToast();
const uploadImage = async (file) => {
const body = new FormData();
body.append("file", file);
const imagePostOptions = {
method: "POST",
body,
};
const imagePatchOptions = {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
images: [...listImage, `imageUsers/${file.name}`],
}),
};
fetch(`/api/file/uploadFile`, imagePostOptions)
.then((res) => {
fetch(`/api/users/${user.id}`, imagePatchOptions)
.then((res) => {
toast({
title: `Ajout d'image effectué`,
status: "success",
isClosable: true,
});
setlistImage([...listImage, `imageUsers/${file.name}`]);
// router.reload();
})
.catch(() => {
setIsLoading(false);
toast({
title: `Erreur lors de l'ajout des images`,
status: "error",
isClosable: true,
});
});
})
.catch((err) => {
toast({
title: `Erreur lors de l'ajout des images`,
status: "error",
isClosable: true,
});
console.log(err);
});
};
const deleteImage = async (fileName) => {
let newListImage = listImage;
const index = newListImage.indexOf(fileName);
if (index > -1) {
newListImage.splice(index, 1);
setlistImage([...newListImage]);
}
const imageDeleteOptions = {
method: "DELETE",
body: JSON.stringify({ fileName: fileName.split("/").pop() }),
};
fetch(`/api/file/deleteFile`, imageDeleteOptions).then((res) => {
const imagePatchOptions = {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
images: [...listImage],
}),
};
fetch(`/api/users/${user.id}`, imagePatchOptions)
.then((res) => {
toast({
title: `Suppression d'image effectué`,
status: "success",
isClosable: true,
});
})
.catch(() => {
toast({
title: `Erreur lors de la suppression des images`,
status: "error",
isClosable: true,
});
});
});
};
return (
<>
<Button
colorScheme={"purple"}
onClick={onOpen}
leftIcon={<RiEditBoxLine />}
>
Modifier les images
</Button>
<Modal
blockScrollOnMount={false}
size={"4xl"}
isOpen={isOpen}
onClose={onClose}
scrollBehavior={"inside"}
>
<ModalOverlay />
<ModalContent>
<ModalHeader>Modification des images</ModalHeader>
<ModalCloseButton />
<ModalBody>
<Grid
templateColumns={`repeat(${listImage.length + 1}, 1fr)`}
gap={5}
>
{listImage.map((image, index) => (
<GridItem key={index}>
<Flex direction={"column"} gap={"1rem"}>
<Image src={image} />
<Button
id={"" + index}
colorScheme={"red"}
onClick={(e) => {
deleteImage(`${listImage[index]}`);
}}
>
Supprimer l'image
</Button>
</Flex>
</GridItem>
))}
{listImage.length < 5 ? (
<GridItem width={"100%"}>
<Input
type={"file"}
height={"100%"}
accept={"image/png, image/jpeg, image/webp"}
onInput={({ target }) => {
const date = new Date();
const time = date.getTime();
const file = target.files[0];
const extension = file.name.split(".").pop();
const newFile = new File(
[file],
`${user.id}_${time}.${extension}`,
{
type: file.type,
}
);
uploadImage(newFile);
}}
></Input>
</GridItem>
) : (
<></>
)}
</Grid>
</ModalBody>
<ModalFooter>
<Button
colorScheme="purple"
mr={3}
onClick={(e) => {
setUserData({
...userData,
images: [...listImage],
});
onClose();
}}
>
Save
</Button>
</ModalFooter>
</ModalContent>
</Modal>
</>
);
}
src/components/form/FormMessage.tsx
+16 -11
View File
@@ -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/components/layout/dashboard/left_panel/LeftPanel.jsx
+16 -6
View File
@@ -12,6 +12,11 @@ export default function LeftPanel(props) {
const router = useRouter();
const { user } = props;
const formateDate = (dateString) => {
var options = { year: "numeric", month: "long", day: "numeric" };
return new Date(dateString).toLocaleDateString([], options);
};
return (
<Card
width={"20vw"}
@@ -23,12 +28,17 @@ export default function LeftPanel(props) {
<Flex direction={"column"} height={"100%"} margin={"10%"}>
<Box>
<Image src={user.images[0]} borderRadius={"1rem"} />
<Box mt={"1vh"}>
<Text fontSize={"1.5rem"} fontWeight={"bold"}>
{user.firstName} {user.lastName}
</Text>
<Text as="i" fontWeight={"bold"}>
&quot;{user.aPropos}&quot;
<Box mt={"1rem"}>
<Flex align={"center"} justifyContent="space-between">
<Text fontSize={"1.5rem"} fontWeight={"bold"}>
{user.firstName} {user.lastName}
</Text>
<Text fontSize={"1rem"} fontWeight={"bold"}>
{formateDate(user.birthdate)}
</Text>
</Flex>
<Text mt={"3rem"} as="i" fontWeight={"bold"}>
&quot;{user.bio}&quot;
</Text>
</Box>
</Box>
src/pages/admin/settings.tsx
+91
View File
@@ -0,0 +1,91 @@
import {
Box,
Button,
Flex,
FormControl,
FormErrorMessage,
FormLabel,
Input,
useToast,
} from '@chakra-ui/react';
import { useSession } from 'next-auth/react';
import { useRouter } from 'next/router';
import { useState } from 'react';
import { useForm } from 'react-hook-form';
export default function settings() {
const router = useRouter();
const toast = useToast();
const [isLoading, setIsLoading] = useState(false);
const {
handleSubmit,
register,
formState: { errors, isSubmitting },
} = useForm()
const [userData, setUserData] = useState({});
const { data: session, status } = useSession();
if (status === "unauthenticated") router.push("/login");
if (status === "authenticated") {
const { user } = session as unknown as Session;
if (user.role !== "ADMIN") router.push("/login");
const savePassion = (passion: any) => {
const options = {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(passion),
};
fetch(`/api/passions`, options)
.then((res) => {
setIsLoading(false);
toast({
position:'top',
title: `Passion ajoutée`,
status: "success",
isClosable: true,
});
})
.catch((err) => {
setIsLoading(false);
toast({
title: `Erreur lors de l'ajout`,
position :'top',
status: "error",
isClosable: true,
});
});
}
return (
<>
<Box as="form" id='form_passion' width={"80%"} onSubmit={handleSubmit(savePassion)}>
<FormControl isInvalid={errors.name}>
<FormLabel htmlFor='passion'>Passion</FormLabel>
<Input
id='passion'
placeholder='passion'
{...register('name', {
required: 'This is required',
})}
/>
<FormErrorMessage>
{errors.name && errors.name.message}
</FormErrorMessage>
</FormControl>
<Button mt={4} colorScheme='purple' isLoading={isSubmitting} type='submit'>
Submit
</Button>
</Box>
</>
);
}
}
src/pages/api/socket/chat/[id].ts
+42
View File
@@ -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
+48 -11
View File
@@ -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>
</>
);
src/pages/dashboard.tsx
+1 -1
View File
@@ -41,7 +41,7 @@ export default function Dashboard() {
minH={"100vh"}
>
<GridItem area={"1 / 1 / 3 / 2"}>
<LeftPanel user={refinedUser} />
<LeftPanel user={user} />
</GridItem>
<GridItem area={"1 / 2 / 3 / 4"}>
<Box py={3}>
src/pages/userProfile.tsx
+33 -5
View File
@@ -25,7 +25,9 @@ import {
useToast,
} from "@chakra-ui/react";
import ModalModifyImages from "@/components/ModalModifyImages";
import ModalModifyImages from "@/components/layout/user_profile/ModalModifyImages";
import ModalChoosePassion from "@/components/layout/user_profile/ModalChoosePassion";
import ProfileBadgeList from "@/components/layout/user_profile/ProfileBadgeList";
import { useState } from "react";
import { useForm, Controller } from "react-hook-form";
@@ -33,6 +35,8 @@ import { useForm, Controller } from "react-hook-form";
export default function UserProfile() {
const router = useRouter();
const toast = useToast();
const [isLoading, setIsLoading] = useState(false);
const {
@@ -82,6 +86,7 @@ export default function UserProfile() {
.then((res) => {
setIsLoading(false);
toast({
position:'top',
title: `Modifications effectuées`,
status: "success",
isClosable: true,
@@ -92,6 +97,7 @@ export default function UserProfile() {
setIsLoading(false);
toast({
title: `Erreur lors de l'envoi des modifications`,
position :'top',
status: "error",
isClosable: true,
});
@@ -299,6 +305,24 @@ export default function UserProfile() {
</FormControl>
</Box>
<Divider colorScheme={"purple"} />
<Box my={"1rem"}>
<Box>
<FormLabel as={"legend"} htmlFor={"passion"}>
Centre d'intéret :
</FormLabel>
<Controller
name={"passion"}
control={control}
render={({ field }) => (
<>
<ProfileBadgeList passions={user.passion !== undefined ? user.passion : []}/>
<ModalChoosePassion user={user}/>
</>
)}
/>
</Box>
</Box>
<Divider colorScheme={"purple"} />
<Box my={"1rem"}>
<Box>
<FormLabel as={"legend"} htmlFor={"gender"}>
@@ -316,9 +340,6 @@ export default function UserProfile() {
defaultValue={
user.gender === null ? Gender.UNKNOWN : user.gender
}
// onChange={(value) => {
// setUserData({ ...userData, gender: value });
// }}
>
<HStack spacing={"0.5rem"}>
<Radio value={Gender.MALE}>
@@ -372,7 +393,7 @@ export default function UserProfile() {
</Flex> */}
</Box>
<Divider colorScheme={"purple"} />
<Center my={"1rem"}>
<Center gap={"1rem"} my={"1rem"}>
<Button
colorScheme={"purple"}
isLoading={isLoading}
@@ -380,6 +401,13 @@ export default function UserProfile() {
>
Sauvegarder les modifications
</Button>
<Button
colorScheme={"purple"}
variant='outline'
onClick={() => router.push("/dashboard")}
>
Retour
</Button>
</Center>
</Box>
</Flex>