diff --git a/public/ImageUsers/646a90e4d97a217e2f6a9a71_1684705597601.jpg b/public/ImageUsers/646a90e4d97a217e2f6a9a71_1684705597601.jpg new file mode 100644 index 0000000..be307b6 Binary files /dev/null and b/public/ImageUsers/646a90e4d97a217e2f6a9a71_1684705597601.jpg differ diff --git a/public/ImageUsers/646a90e4d97a217e2f6a9a71_1684705637040.webp b/public/ImageUsers/646a90e4d97a217e2f6a9a71_1684705637040.webp new file mode 100644 index 0000000..fcdc947 Binary files /dev/null and b/public/ImageUsers/646a90e4d97a217e2f6a9a71_1684705637040.webp differ diff --git a/public/ImageUsers/646a92aad97a217e2f6a9aab_1684706024489.jpg b/public/ImageUsers/646a92aad97a217e2f6a9aab_1684706024489.jpg new file mode 100644 index 0000000..a9f5e68 Binary files /dev/null and b/public/ImageUsers/646a92aad97a217e2f6a9aab_1684706024489.jpg differ diff --git a/public/ImageUsers/646a931dd97a217e2f6a9abf_1684706141723.jpg b/public/ImageUsers/646a931dd97a217e2f6a9abf_1684706141723.jpg new file mode 100644 index 0000000..2f2e591 Binary files /dev/null and b/public/ImageUsers/646a931dd97a217e2f6a9abf_1684706141723.jpg differ diff --git a/public/ImageUsers/646a93bbd97a217e2f6a9ad7_1684706286377.jpg b/public/ImageUsers/646a93bbd97a217e2f6a9ad7_1684706286377.jpg new file mode 100644 index 0000000..7ff4130 Binary files /dev/null and b/public/ImageUsers/646a93bbd97a217e2f6a9ad7_1684706286377.jpg differ diff --git a/public/ImageUsers/646a946ad97a217e2f6a9ae8_1684706498941.jpg b/public/ImageUsers/646a946ad97a217e2f6a9ae8_1684706498941.jpg new file mode 100644 index 0000000..92d0f4c Binary files /dev/null and b/public/ImageUsers/646a946ad97a217e2f6a9ae8_1684706498941.jpg differ diff --git a/public/ImageUsers/646a99a9d97a217e2f6a9be3_1684708044756.jpg b/public/ImageUsers/646a99a9d97a217e2f6a9be3_1684708044756.jpg new file mode 100644 index 0000000..b8d59e2 Binary files /dev/null and b/public/ImageUsers/646a99a9d97a217e2f6a9be3_1684708044756.jpg differ diff --git a/public/ImageUsers/646a9efbd97a217e2f6a9c68_1684709263934.jpg b/public/ImageUsers/646a9efbd97a217e2f6a9c68_1684709263934.jpg new file mode 100644 index 0000000..28d8ded Binary files /dev/null and b/public/ImageUsers/646a9efbd97a217e2f6a9c68_1684709263934.jpg differ diff --git a/public/ImageUsers/646a9fced97a217e2f6a9c87_1684709377150.jpg b/public/ImageUsers/646a9fced97a217e2f6a9c87_1684709377150.jpg new file mode 100644 index 0000000..57583a0 Binary files /dev/null and b/public/ImageUsers/646a9fced97a217e2f6a9c87_1684709377150.jpg differ diff --git a/src/components/Carousel.tsx b/src/components/Carousel.tsx index 3fde1ce..6fa4991 100644 --- a/src/components/Carousel.tsx +++ b/src/components/Carousel.tsx @@ -1,13 +1,13 @@ -import {useState} from 'react'; -import {Flex, IconButton} from '@chakra-ui/react'; -import {BiLeftArrowAlt, BiRightArrowAlt} from 'react-icons/bi'; +import { useState } from "react"; +import { Flex, IconButton } from "@chakra-ui/react"; +import { BiLeftArrowAlt, BiRightArrowAlt } from "react-icons/bi"; interface Props { images: string[]; borderRadius?: string | number; } -const Carousel = ({images, borderRadius: bRadius}: Props) => { +const Carousel = ({ images, borderRadius: bRadius }: Props) => { const [currentIndex, setCurrentIndex] = useState(0); const handleClickPrevious = () => { @@ -18,22 +18,39 @@ const Carousel = ({images, borderRadius: bRadius}: Props) => { setCurrentIndex(currentIndex === images.length - 1 ? 0 : currentIndex + 1); }; - if (images.length === 0) images = ['blank_profile_picture.webp']; + if (images.length === 0) images = ["blank_profile_picture.webp"]; return ( - - - - + + + + - - - - + + + + ); }; diff --git a/src/components/chat/MapBar.tsx b/src/components/chat/MapBar.tsx index 61f7c3f..fe040ff 100644 --- a/src/components/chat/MapBar.tsx +++ b/src/components/chat/MapBar.tsx @@ -1,31 +1,28 @@ -import { Flex } from "@chakra-ui/react"; -import { MapContainer, TileLayer } from "react-leaflet"; -import SimpleMarkerBar from "./SimpleMarkerBar"; -import "leaflet/dist/leaflet.css"; +import {Flex} from '@chakra-ui/react'; +import {MapContainer, TileLayer} from 'react-leaflet'; +import SimpleMarkerBar from './SimpleMarkerBar'; +import 'leaflet/dist/leaflet.css'; type MapBarProps = { lat: string; lon: string; name: string; - align: "left" | "right"; + align: 'left' | 'right'; }; -export default function MapBar({ lat, lon, name, align }: MapBarProps) { +export default function MapBar({lat, lon, name}: MapBarProps) { return ( - + center={[Number(lat), Number(lon)]} + zoom={13} + minZoom={6} + zoomControl={false} + style={{width: '100%', height: '20rem'}}> - + - ); } diff --git a/src/components/chat/Message.tsx b/src/components/chat/Message.tsx index 1905664..2d0a7f7 100644 --- a/src/components/chat/Message.tsx +++ b/src/components/chat/Message.tsx @@ -1,4 +1,4 @@ -import type {Message as MessageType} from '@prisma/client'; +import type {Message as MessageType, User} from '@prisma/client'; import MessageText from '@/components/chat/MessageText'; import React from 'react'; import MessageMap from '@/components/chat/MessageMap'; @@ -6,9 +6,10 @@ import MessageMap from '@/components/chat/MessageMap'; type Props = { align: "left" | 'right' message: MessageType + user?: User } -const Message = ({message, align}: Props) => { +const Message = ({message, align, user}: Props) => { if (message.text.match(//g)) { const regex = /-?\d+\.\d+),lat=(?-?\d+\.\d+),name=(?.+)>/g; const p = regex.exec(message.text)?.groups as unknown as { @@ -16,12 +17,10 @@ const Message = ({message, align}: Props) => { lat: number name: string } - if (p) return + if (p) return } - return ( - - ) + return } export default Message; \ No newline at end of file diff --git a/src/components/chat/MessageList.tsx b/src/components/chat/MessageList.tsx index ffce938..ca2905d 100644 --- a/src/components/chat/MessageList.tsx +++ b/src/components/chat/MessageList.tsx @@ -1,19 +1,24 @@ -import type {Message as MessageType, User} from '@prisma/client'; +import type {Message as MessageType, User, Chat} from '@prisma/client'; import Message from '@/components/chat/Message'; import {Flex} from '@chakra-ui/react'; type Props = { user: User, messages: MessageType[] + chat: Chat & { User: User[] } } -const MessageList = ({messages, user}: Props) => ( - - {messages.map((message, index) => , - )} - -); +const MessageList = ({messages, user, chat}: Props) => { + if (chat?.User) + return ( + + {messages.map((message, index) => + u.id === message.UserID)} + align={user.id === message.UserID ? 'right' : 'left'} + key={index} message={message}/>, + )} + + ); +}; export default MessageList; \ No newline at end of file diff --git a/src/components/chat/MessageMap.tsx b/src/components/chat/MessageMap.tsx index 0202da8..23b7d7c 100644 --- a/src/components/chat/MessageMap.tsx +++ b/src/components/chat/MessageMap.tsx @@ -1,6 +1,7 @@ -import {Box, Flex, Text} from '@chakra-ui/react'; +import {Avatar, Box, Flex, Text} from '@chakra-ui/react'; import dynamic from 'next/dynamic'; +import {User} from '@prisma/client'; const MapBarWithNoSSR = dynamic(() => import('./MapBar'), { ssr: false, @@ -13,16 +14,18 @@ type Props = { lat: string; name: string; }; + user?: User }; -export default function MessageMap({align, point}: Props) { +export default function MessageMap({align, point, user}: Props) { const {lon, lat, name} = point; return ( - + + {user && align === "left" && } - {/*{lon}, {lat}, {name}*/} + {user && align === "right" && } ); } diff --git a/src/components/chat/MessageText.tsx b/src/components/chat/MessageText.tsx index b542b1a..31c5812 100644 --- a/src/components/chat/MessageText.tsx +++ b/src/components/chat/MessageText.tsx @@ -1,17 +1,21 @@ -import {Flex, Text} from '@chakra-ui/react'; +import {Avatar, Flex, Text} from '@chakra-ui/react'; import type {Message as MessageType, User} from '@prisma/client'; type Props = { align: 'left' | 'right' - message: MessageType + message: MessageType, + user?: User } -const MessageText = ({message, align}: Props) => ( - +const MessageText = ({message, align, user}: Props) => ( + + + {user && align === "left" && } {message.text} + {user && align === "right" && } ); diff --git a/src/components/layout/dashboard/card_user/CardUser.tsx b/src/components/layout/dashboard/card_user/CardUser.tsx index 3bdb560..960771f 100644 --- a/src/components/layout/dashboard/card_user/CardUser.tsx +++ b/src/components/layout/dashboard/card_user/CardUser.tsx @@ -17,16 +17,21 @@ 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'; +import { User } from "@prisma/client"; type Props = { - users: User[] - loggedUser: User - setMatch: any - refetchLoggedUser: any -} + users: User[]; + loggedUser: User; + setMatch: any; + refetchLoggedUser: any; +}; -export default function CardUser({users, loggedUser, setMatch, refetchLoggedUser}: Props) { +export default function CardUser({ + users, + loggedUser, + setMatch, + refetchLoggedUser, +}: Props) { const toast = useToast({ position: "top", duration: 2000, @@ -174,7 +179,9 @@ export default function CardUser({users, loggedUser, setMatch, refetchLoggedUser A propos : - "{listUsers[0].bio}" + + {listUsers[0].bio && `"${listUsers[0].bio}"`} + diff --git a/src/components/layout/dashboard/left_panel/LeftPanel.tsx b/src/components/layout/dashboard/left_panel/LeftPanel.tsx index ca13e57..c940cfe 100644 --- a/src/components/layout/dashboard/left_panel/LeftPanel.tsx +++ b/src/components/layout/dashboard/left_panel/LeftPanel.tsx @@ -33,11 +33,12 @@ export default function LeftPanel(props) { bg={"#faf9ff"} > - + @@ -53,23 +54,26 @@ export default function LeftPanel(props) { {user.bio && `"${user.bio}"`} - + + alignContent={"bottom"} + > } - onClickHandler={() => router.push("/map")}> + onClickHandler={() => router.push("/map")} + > Carte } - onClickHandler={() => router.push("/profile")}> + onClickHandler={() => router.push("/profile")} + > Profil @@ -82,7 +86,8 @@ export default function LeftPanel(props) { } - onClickHandler={() => signOut({ callbackUrl: "/" })}> + onClickHandler={() => signOut({ callbackUrl: "/" })} + > Déconnexion diff --git a/src/components/layout/profile/ModalModifyImages.tsx b/src/components/layout/profile/ModalModifyImages.tsx index cdeb84d..92e8cab 100644 --- a/src/components/layout/profile/ModalModifyImages.tsx +++ b/src/components/layout/profile/ModalModifyImages.tsx @@ -138,7 +138,7 @@ export default function ModalModifyImages(props) { + @@ -77,7 +77,7 @@ export default function settings() { Submit - + ); } } diff --git a/src/pages/chat/[id].tsx b/src/pages/chat/[id].tsx index 77d52c0..694c2dc 100644 --- a/src/pages/chat/[id].tsx +++ b/src/pages/chat/[id].tsx @@ -1,11 +1,10 @@ import { - Box, + Box, Button, Container, Flex, FormControl, IconButton, Input, - Text } from '@chakra-ui/react'; import Head from 'next/head'; import {websiteName} from '@/lib/constants'; @@ -19,7 +18,8 @@ import {io, Socket} from 'socket.io-client'; import {Chat, Message, User} from '@prisma/client'; import LoadingPage from '@/components/LoadingPage'; import Navbar from '@/components/Navbar'; -import {ArrowForwardIcon, CalendarIcon} from '@chakra-ui/icons'; + +import {ArrowForwardIcon} from '@chakra-ui/icons'; import {FaMapMarkedAlt} from 'react-icons/fa'; export default function ChatId() { @@ -84,8 +84,8 @@ export default function ChatId() { - - + +
@@ -103,6 +103,8 @@ export default function ChatId() {
+ +
); } \ No newline at end of file diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx index 0ebc018..6bd233a 100644 --- a/src/pages/dashboard.tsx +++ b/src/pages/dashboard.tsx @@ -3,32 +3,36 @@ import { GridItem, Box, useToast, - useDisclosure, - Card, CardBody, CardHeader, Heading, -} from '@chakra-ui/react'; -import {useSession} from 'next-auth/react'; -import {useRouter} from 'next/router'; + 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, User} from '@prisma/client'; -import ChatList from '@/components/chat/ChatList'; +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, useQueryClient } 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({required: true}); + const { data: session, status } = useSession({ required: true }); + + const queryClient = useQueryClient(); + + queryClient.invalidateQueries({ queryKey: ["ListUsers"] }); const { isLoading, @@ -37,18 +41,18 @@ 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) => { - return res.json(); - }) - .catch((err) => { - return err; - }); + .then((res) => { + return res.json(); + }) + .catch((err) => { + return err; + }); }, }); @@ -58,89 +62,104 @@ 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 - .then((res) => res.json()) - .catch((err) => { - return err; - }); + return fetch(`/api/user/userDashboard?userID=${loggedUser.id}`) //exclure les profils déjà like ou dislike + .then((res) => res.json()) + .catch((err) => { + return err; + }); }, }); if (isLoading) { - if (status === 'unauthenticated') router.push('/login'); - return ; + if (status === "unauthenticated") router.push("/login"); + return ; } 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; if (loggedUser?.Notification?.length > 0) { const matchNotification = loggedUser.Notification.filter( - (notif: Notification) => - notif.type === NotificationType.NEW_MATCH && - notif.hasBeenConsulted === false, + (notif: Notification) => + notif.type === NotificationType.NEW_MATCH && + notif.hasBeenConsulted === false ); modal = matchNotification.map((notif: Notification) => { return ( - + ); }); } - if (status === 'loading') return ; + if (status === "loading") return ; return ( - <> - {modal} + <> + {modal} - - {websiteName} | Dashboard - + + {websiteName} | Dashboard + - - - - - - - {isLoadingListUsers - ? () - : (isErrorListUsers || !listUsers || !listUsers.users || - listUsers.users.length === 0) - ? - : - } - - - - - - - {router.push('/chat')}}>Conversations - - - - - - - - {/*Right Bottom*/} - - + + + + + + + {isLoadingListUsers ? ( + + ) : isErrorListUsers || + !listUsers || + !listUsers.users || + listUsers.users.length === 0 ? ( + + ) : ( + + )} + + + + + + + { + router.push("/chat"); + }} + > + Conversations + + + + + + + + + {/*Right Bottom*/} + + ); } diff --git a/src/pages/map.tsx b/src/pages/map.tsx index 805f0d4..99082e5 100644 --- a/src/pages/map.tsx +++ b/src/pages/map.tsx @@ -37,7 +37,7 @@ export default function Map() { enabled: status === "authenticated", queryFn: async () => { const { user } = session as unknown as Session; - console.log(loggedUser.location.length); + return fetch(`/api/users/${user.id}`) .then((res) => { return res.json(); @@ -56,8 +56,9 @@ export default function Map() { } = useQuery({ queryKey: ["listBars"], refetchOnWindowFocus: false, - - enabled: Boolean(loggedUser) && loggedUser.location.length > 0, + enabled: + Boolean(loggedUser) && + (loggedUser.location?.length > 0 || location[0] !== null), queryFn: async () => { ///Utiliser api de noratim diff --git a/src/pages/profile.tsx b/src/pages/profile.tsx index b7d5572..e03a4d5 100644 --- a/src/pages/profile.tsx +++ b/src/pages/profile.tsx @@ -30,7 +30,7 @@ import CustomSlider from "@/components/layout/profile/CustomSlider"; import { useEffect, useState } from "react"; import { useForm } from "react-hook-form"; -import { useQuery } from "@tanstack/react-query"; +import { useQuery, useQueryClient } from "@tanstack/react-query"; export default function UserProfile() { const router = useRouter(); @@ -45,6 +45,8 @@ export default function UserProfile() { const [showTooltipDistance, setShowTooltipDistance] = useState(false); const [sliderDistanceValue, setSliderDistanceValue] = useState(0); + const queryClient = useQueryClient(); + const { handleSubmit, control, @@ -147,6 +149,7 @@ export default function UserProfile() { status: "success", isClosable: true, }); + queryClient.invalidateQueries({ queryKey: ["user"] }); }) .catch((err) => { setCurrentlyLoading(false);