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

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

Browse Source
This commit is contained in:
Laurian-Dufrechou
2023-05-20 22:30:17 +02:00
parent 8082fb5dff cde6569028
commit 484b3d6167
9 changed files with 153 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Carousel.tsx
+1 -1
View File
@@ -23,7 +23,7 @@ const Carousel = ({images, borderRadius: bRadius}: Props) => {
return (
<Flex px={2} align="center" borderRadius={bRadius} overflow={'hidden'}
justify={'space-between'} bgColor={'purple.50'} height={500}
bgImage={images[currentIndex]} bgSize={'contain'}
bgImage={images[currentIndex]} bgSize={'cover'}
bgRepeat={'no-repeat'} bgPosition={'center'} width={'100%'}>
<IconButton aria-label="left-arrow" borderRadius="full"
onClick={handleClickPrevious}>
src/components/chat/ChatList.tsx
+3 -2
View File
@@ -1,6 +1,7 @@
import {Chat, User} from '@prisma/client';
import ChatListItem from '@/components/chat/ChatListItem';
import {useEffect, useState} from 'react';
import {Stack, StackDivider} from '@chakra-ui/react';
type Props = {
user: User
@@ -18,11 +19,11 @@ export default function ChatList({user}: Props) {
}, []);
return (
<>
<Stack divider={<StackDivider/>} spacing={2}>
{chats.map(
(chat: Chat & { User: User[] }, index: number) =>
<ChatListItem key={index} chat={chat} user={user}/>)
}
</>
</Stack>
);
}
src/components/chat/ChatListItem.tsx
+5 -7
View File
@@ -1,26 +1,24 @@
import {Chat, User} from '@prisma/client';
import {Box, Flex, Image, Text} from '@chakra-ui/react';
import {Box, Button, Flex, Image, Text} from '@chakra-ui/react';
import {useRouter} from 'next/router';
type Props = {
user: User,
chat: Chat & {User: User[]}
chat: Chat & { User: User[] }
};
export default function ChatListItem({user, chat}: Props) {
const router = useRouter();
const otherUser = chat.User.find((u: User) => u.id !== user.id) as User
const otherUser = chat.User.find((u: User) => u.id !== user.id) as User;
console.log(chat);
return (
<>
<Flex cursor={"pointer"} onClick={() => router.push(`/chat/${chat.id}`)}>
<Image borderRadius={'full'} boxSize='50px' src={otherUser.images[0] ?? "/blank_profile_picture.webp"}/>
<Flex alignItems={"center"} gap={5} cursor={'pointer'} onClick={() => router.push(`/chat/${chat.id}`)}>
<Image borderRadius={'full'} boxSize="50px" src={otherUser.images[0] ?? '/blank_profile_picture.webp'}/>
<Box>
<Text>{otherUser.firstName} {otherUser.lastName}</Text>
</Box>
</Flex>
</>
);
}
src/components/chat/MessageList.tsx
+5 -3
View File
@@ -1,6 +1,6 @@
import type {Message as MessageType, User} from '@prisma/client';
import Message from '@/components/chat/Message';
import {Flex} from '@chakra-ui/react';
import {Flex, Box} from '@chakra-ui/react';
type Props = {
user: User,
@@ -9,12 +9,14 @@ type Props = {
const MessageList = ({messages, user}: Props) => {
return (
<Flex direction={'column'} gap={1}>
<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}/>
message={message}/>,
)}
</Flex>
</Box>
);
};
src/components/layout/dashboard/card_user/CardUser.tsx
+9 -6
View File
@@ -17,13 +17,16 @@ import PassionTagList from "@/components/layout/dashboard/card_user/PassionTagLi
import { useState } from "react";
import SearchFailCard from "./SearchFailCard";
import LoadingPage from "@/components/LoadingPage";
import {User} from '@prisma/client';
export default function CardUser({
users,
loggedUser,
setMatch,
refetchLoggedUser,
}) {
type Props = {
users: User[]
loggedUser: User
setMatch: any
refetchLoggedUser: any
}
export default function CardUser({users, loggedUser, setMatch, refetchLoggedUser}: Props) {
const toast = useToast({
position: "top",
duration: 2000,
src/components/layout/dashboard/left_panel/LeftPanel.tsx
-7
View File
@@ -68,13 +68,6 @@ export default function LeftPanel(props) {
Carte
</LeftPanelButton>
<LeftPanelButton
leftIcon={<AiFillMessage />}
onClickHandler={() => router.push("/chat")}
>
Messages
</LeftPanelButton>
<LeftPanelButton
leftIcon={<BsFillPersonFill />}
onClickHandler={() => router.push("/profile")}
src/pages/chat/[id].tsx
+29 -10
View File
@@ -1,15 +1,16 @@
import {Button, Container, Flex, Input} from '@chakra-ui/react';
import {Button, Container, Flex, FormControl, Input} 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 {useEffect, useRef, useState} from 'react';
import MessageList from '@/components/chat/MessageList';
import {io, Socket} from 'socket.io-client';
import {Message, User} from '@prisma/client';
import LoadingPage from '@/components/LoadingPage';
import Navbar from '@/components/Navbar';
export default function ChatId() {
const router = useRouter();
@@ -30,33 +31,51 @@ export default function ChatId() {
const soc = io();
soc.on('connect', () => console.log('connected'));
soc.on('allOldMessages', (allOldMessages: Message[]) => setMessages(allOldMessages));
soc.on('newIncomingMessage', (newIncomingMessage: Message) => setMessages(messages => [...messages, newIncomingMessage]));
soc.on('allOldMessages',
(allOldMessages: Message[]) => setMessages(allOldMessages));
soc.on('newIncomingMessage',
(newIncomingMessage: Message) => setMessages(
messages => [...messages, newIncomingMessage]));
setSocket(soc);
});
};
const handleSubmit = () => {
const handleSubmit = (evt) => {
evt.preventDefault()
if (text !== '' && socket && session?.user) {
socket.emit('createdMessage', {text, sender: session.user.id});
setText('');
}
};
const AlwaysScrollToBottom = () => {
const elementRef = useRef();
useEffect(() => elementRef.current.scrollIntoView());
return <div ref={elementRef}/>;
};
if (status === 'loading') return <LoadingPage/>;
return (
<>
<Head><title>{websiteName}</title></Head>
<Navbar/>
<Container>
<MessageList user={session.user as User} messages={messages}/>
<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>
<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>
</FormControl>
</form>
<AlwaysScrollToBottom/>
</Container>
</>
);
src/pages/chat/index.tsx
+1 -4
View File
@@ -7,8 +7,5 @@ export default function Chat() {
const {data: session, status} = useSession({required: true});
if (status === 'loading') return <LoadingPage/>;
if (session)
return (
<ChatList user={session.user as User}/>
);
return <ChatList user={session.user as User}/>;
}
src/pages/dashboard.tsx
+67 -53
View File
@@ -1,25 +1,34 @@
import { Grid, GridItem, Box, useToast, useDisclosure } from "@chakra-ui/react";
import { useSession } from "next-auth/react";
import { useRouter } from "next/router";
import { useState } from "react";
import {
Grid,
GridItem,
Box,
useToast,
useDisclosure,
Card, CardBody, CardHeader, Heading,
} from '@chakra-ui/react';
import {useSession} from 'next-auth/react';
import {useRouter} from 'next/router';
import type { Session } from "@/models/auth/Session";
import CardUser from "../components/layout/dashboard/card_user/CardUser";
import SearchFailCard from "../components/layout/dashboard/card_user/SearchFailCard";
import type {Session} from '@/models/auth/Session';
import CardUser from '../components/layout/dashboard/card_user/CardUser';
import SearchFailCard
from '../components/layout/dashboard/card_user/SearchFailCard';
import LeftPanel from "../components/layout/dashboard/left_panel/LeftPanel";
import ModalMatch from "@/components/layout/dashboard/match_notification/ModalMatch";
import Head from "next/head";
import { websiteName } from "@/lib/constants";
import { useQuery } from "@tanstack/react-query";
import LoadingPage from "@/components/LoadingPage";
import { Notification, NotificationType } from "@prisma/client";
import LeftPanel from '../components/layout/dashboard/left_panel/LeftPanel';
import ModalMatch
from '@/components/layout/dashboard/match_notification/ModalMatch';
import Head from 'next/head';
import {websiteName} from '@/lib/constants';
import {useQuery} from '@tanstack/react-query';
import LoadingPage from '@/components/LoadingPage';
import {Notification, NotificationType, User} from '@prisma/client';
import ChatList from '@/components/chat/ChatList';
export default function Dashboard() {
const router = useRouter();
const toast = useToast({ position: "top", isClosable: true });
const toast = useToast({position: 'top', isClosable: true});
const { data: session, status } = useSession();
const {data: session, status} = useSession({required: true});
const {
isLoading,
@@ -28,10 +37,10 @@ export default function Dashboard() {
error,
refetch: refetchLoggedUser,
} = useQuery({
queryKey: ["LoggedUser"],
enabled: status === "authenticated",
queryKey: ['LoggedUser'],
enabled: status === 'authenticated',
queryFn: async () => {
const { user } = session as unknown as Session;
const {user} = session as unknown as Session;
return fetch(`/api/users/${user.id}?include=Notification`)
.then((res) => {
@@ -49,10 +58,11 @@ export default function Dashboard() {
isLoading: isLoadingListUsers,
error: errorListUsers,
} = useQuery({
queryKey: ["ListUsers"],
enabled: status === "authenticated" && !isLoading,
queryKey: ['ListUsers'],
enabled: status === 'authenticated' && !isLoading,
queryFn: async () => {
return fetch(`/api/user/userDashboard?userID=${loggedUser.id}`) //exclure les profils déjà like ou dislike
return fetch(
`/api/user/userDashboard?userID=${loggedUser.id}`) //exclure les profils déjà like ou dislike
.then((res) => res.json())
.catch((err) => {
return err;
@@ -61,17 +71,17 @@ export default function Dashboard() {
});
if (isLoading) {
if (status === "unauthenticated") router.push("/login");
return <LoadingPage />;
if (status === 'unauthenticated') router.push('/login');
return <LoadingPage/>;
}
if (isError) {
toast({
title: `Erreur lors de la récupération des données du profil`,
status: "error",
position: "top",
status: 'error',
position: 'top',
});
if (status === "unauthenticated") router.push("/");
if (status === 'unauthenticated') router.push('/');
}
let modal;
@@ -80,15 +90,16 @@ export default function Dashboard() {
const matchNotification = loggedUser.Notification.filter(
(notif: Notification) =>
notif.type === NotificationType.NEW_MATCH &&
notif.hasBeenConsulted === false
notif.hasBeenConsulted === false,
);
modal = matchNotification.map((notif: Notification) => {
return (
<ModalMatch notif={notif} key={notif.id} loggedUser={loggedUser} />
<ModalMatch notif={notif} key={notif.id} loggedUser={loggedUser}/>
);
});
}
if (status === 'loading') return <LoadingPage/>;
return (
<>
{modal}
@@ -97,35 +108,38 @@ export default function Dashboard() {
<title>{websiteName} | Dashboard</title>
</Head>
<Grid
templateColumns={"repeat(5, 1fr)"}
templateRows={"repeat(2, 1fr)"}
<Grid templateColumns={'repeat(5, 1fr)'}
templateRows={'repeat(2, 1fr)'}
gap={5}
minH={"100vh"}
>
<GridItem area={"1 / 1 / 3 / 2"}>
<LeftPanel user={loggedUser} />
minH={'100vh'}>
<GridItem area={'1 / 1 / 3 / 2'}>
<LeftPanel user={loggedUser}/>
</GridItem>
<GridItem area={"1 / 2 / 3 / 4"}>
<GridItem area={'1 / 2 / 3 / 4'}>
<Box py={3}>
{isLoadingListUsers ? (
<LoadingPage />
) : isErrorListUsers ||
listUsers === undefined ||
listUsers.users === undefined ||
listUsers.users.length === 0 ? (
<SearchFailCard />
) : (
<CardUser
users={listUsers.users}
loggedUser={loggedUser}
refetchLoggedUser={refetchLoggedUser}
/>
)}
{isLoadingListUsers
? (<LoadingPage/>)
: (isErrorListUsers || !listUsers || !listUsers.users ||
listUsers.users.length === 0)
? <SearchFailCard/>
: <CardUser users={listUsers.users} loggedUser={loggedUser}
refetchLoggedUser={refetchLoggedUser}/>
}
</Box>
</GridItem>
<GridItem area={"1 / 4 / 2 / 6"}>{/*Right top*/}</GridItem>
<GridItem area={"2 / 4 / 3 / 6"}>{/*Right Bottom*/}</GridItem>
<GridItem area={'1 / 4 / 2 / 6'}>
<Box py={3} pr={3}>
<Card w={"100%"} h={"100%"} borderRadius={"1rem"}>
<CardHeader>
<Heading cursor={"pointer"} size='md' onClick={() => {router.push('/chat')}}>Conversations</Heading>
</CardHeader>
<CardBody>
<ChatList user={session?.user as User}/>
</CardBody>
</Card>
</Box>
</GridItem>
<GridItem area={'2 / 4 / 3 / 6'}>{/*Right Bottom*/}</GridItem>
</Grid>
</>
);