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

feat(invite Match to bar / create chat on match): Modal to invite match to bar/ create chat on match

Browse Source
This commit is contained in:
Laurian-Dufrechou
2023-05-18 17:03:45 +02:00
parent 5b2e9ebafc
commit 8e021a833d
15 changed files with 598 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+16
View File
@@ -44,6 +44,7 @@
},
"devDependencies": {
"@types/bcrypt": "^5.0.0",
"@types/leaflet": "^1.9.3",
"@types/node": "^18.15.1",
"next-transpile-modules": "^10.0.0",
"prisma": "^4.11.0",
@@ -2341,6 +2342,12 @@
"@types/ms": "*"
}
},
"node_modules/@types/geojson": {
"version": "7946.0.10",
"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.10.tgz",
"integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==",
"dev": true
},
"node_modules/@types/hoist-non-react-statics": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
@@ -2355,6 +2362,15 @@
"resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
"integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
},
"node_modules/@types/leaflet": {
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.3.tgz",
"integrity": "sha512-Caa1lYOgKVqDkDZVWkto2Z5JtVo09spEaUt2S69LiugbBpoqQu92HYFMGUbYezZbnBkyOxMNPXHSgRrRY5UyIA==",
"dev": true,
"dependencies": {
"@types/geojson": "*"
}
},
"node_modules/@types/lodash": {
"version": "4.14.192",
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.192.tgz",
package.json
+1
View File
@@ -45,6 +45,7 @@
},
"devDependencies": {
"@types/bcrypt": "^5.0.0",
"@types/leaflet": "^1.9.3",
"@types/node": "^18.15.1",
"next-transpile-modules": "^10.0.0",
"prisma": "^4.11.0",
src/components/ErrorGeoLocation.tsx
+8 -3
View File
@@ -2,12 +2,17 @@ import { MdError } from "react-icons/md";
import { Button, Text, VStack } from "@chakra-ui/react";
import { useRouter } from "next/router";
export default function LoadingPage() {
export default function ErrorGeolocation() {
const router = useRouter();
return (
<VStack justifyContent="center" alignItems="center" height="100vh"
width="100vw" bg="gray.100">
<VStack
justifyContent="center"
alignItems="center"
height="100vh"
width="100vw"
bg="gray.100"
>
<MdError color="purple.500" size="50%" />
<Text color="purple.500" fontSize="2xl" fontWeight="bold">
Veillez à autoriser la géolocalisation
src/components/layout/dashboard/left_panel/LeftPanel.tsx
+1 -1
View File
@@ -49,7 +49,7 @@ export default function LeftPanel(props) {
</Flex>
<Divider mb={"1rem"} />
<Text as="i" fontWeight={"bold"}>
&quot;{user.bio}&quot;
{user.bio && `"${user.bio}"`}
</Text>
</Box>
</Box>
src/components/layout/dashboard/match_notification/ModalMatch.tsx
+1 -2
View File
@@ -14,7 +14,6 @@ import {
Text,
useDisclosure,
} from "@chakra-ui/react";
import { SetStateAction } from "react";
import { useQuery } from "@tanstack/react-query";
import { User } from "@prisma/client";
import Carousel from "@/components/Carousel";
@@ -111,7 +110,7 @@ export default function ModalMatch({ notif, loggedUser }: modalMatchProps) {
</Text>
</Box>
<Box>
<Heading size={"sm"} fontWeight={"bold"}>
<Heading size={"sm"} mt={4} fontWeight={"bold"}>
Passions :
</Heading>
{passionLoading ? (
src/components/layout/map/CardMatchedUser.tsx
+83
View File
@@ -0,0 +1,83 @@
import {
Box,
Card,
CardBody,
chakra,
Flex,
GridItem,
Image,
Spacer,
Text,
useRadio,
} from "@chakra-ui/react";
import { Notification } from "@prisma/client";
import { useQuery } from "@tanstack/react-query";
type CardMatchedUserProps = {
notif: Notification;
};
export default function CardMatchedUser({
notif,
...radioProps
}: CardMatchedUserProps) {
const {
isLoading,
isError,
data: matchedUser,
error,
} = useQuery({
refetchOnWindowFocus: false,
queryKey: ["matchUser", notif.MatchedUserID],
queryFn: async () => {
return fetch(`/api/users/${notif.MatchedUserID}?include=Chat`)
.then((res) => {
return res.json();
})
.catch((err) => {
return err;
});
},
});
const { state, getInputProps, getRadioProps, htmlProps, getLabelProps } =
useRadio(radioProps);
return (
<>
{!isLoading ? (
<chakra.label {...htmlProps} cursor="pointer">
<input {...getInputProps()} hidden />
<GridItem height={"100%"}>
<Card
{...getRadioProps()}
height={"100%"}
outline={state.isChecked ? "3px solid" : "none"}
outlineColor={state.isChecked ? "purple.500" : "none"}
bg={state.isChecked ? "purple.50" : "white"}
>
<CardBody>
<Flex
height={"100%"}
direction={"column"}
gap={"1rem"}
justifyContent={"space-between"}
{...getLabelProps()}
>
<Image src={matchedUser.images[0]}></Image>
<Text
align={"center"}
fontSize={"1.5rem"}
fontWeight={"bold"}
>
{matchedUser.firstName} {matchedUser.lastName}
</Text>
</Flex>
</CardBody>
</Card>
</GridItem>
</chakra.label>
) : null}
</>
);
}
src/components/layout/map/MapComponent.tsx
+24 -19
View File
@@ -1,22 +1,23 @@
import {MapContainer, TileLayer, Marker, Popup} from 'react-leaflet';
import {Flex, Text, useToast} from '@chakra-ui/react';
import MarkerClusterGroup
from '@christopherpickering/react-leaflet-markercluster';
import { MapContainer, TileLayer, Marker, useMapEvents } from "react-leaflet";
import { Flex, Text, useToast } from "@chakra-ui/react";
import MarkerClusterGroup from "@christopherpickering/react-leaflet-markercluster";
import L from "leaflet";
import { memo, useState } from "react";
import '@christopherpickering/react-leaflet-markercluster/dist/styles.min.css';
import "@christopherpickering/react-leaflet-markercluster/dist/styles.min.css";
import MarkerBar from './MarkerBar';
import 'leaflet/dist/leaflet.css';
import MarkerBar from "./MarkerBar";
import "leaflet/dist/leaflet.css";
export default function MapComponent(props: any) {
const {location, listBars} = props;
const { location, listBars } = props;
const toast = useToast({position: 'bottom'});
const toast = useToast({ position: "bottom" });
const idToastError = 'error_location';
const idToastError = "error_location";
const userIcon = new L.Icon({
iconUrl: 'logo.svg',
iconUrl: "logo.svg",
iconSize: [35, 35],
});
@@ -26,10 +27,10 @@ export default function MapComponent(props: any) {
<>
{!toast.isActive(idToastError) &&
toast({
title: 'Erreur',
title: "Erreur",
id: idToastError,
description: 'Veuillez autoriser la localisation',
status: 'error',
description: "Veuillez autoriser la localisation",
status: "error",
isClosable: false,
duration: 100000,
})}
@@ -38,10 +39,13 @@ export default function MapComponent(props: any) {
</Text>
</>
) : (
<Flex>
<MapContainer center={location} zoom={13} minZoom={8}
<MapContainer
center={location}
zoom={13}
minZoom={8}
zoomControl={false}
style={{width: '100vw', height: '100vw'}}>
style={{ width: "100vw", height: "100vw" }}
>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
@@ -50,10 +54,11 @@ export default function MapComponent(props: any) {
<Marker icon={userIcon} position={location}></Marker>
<MarkerClusterGroup chunkedLoading showCoverageOnHover={false}>
{listBars.map((bar: any, index: number) => <MarkerBar key={index} bar={bar}/>)}
{listBars.map((bar: any, index: number) => (
<MarkerBar key={index} bar={bar} />
))}
</MarkerClusterGroup>
</MapContainer>
</Flex>
)}
</>
);
src/components/layout/map/MarkerBar.tsx
+13 -8
View File
@@ -1,11 +1,14 @@
import { Marker, Popup } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import { Box, Button, Text } from "@chakra-ui/react";
import { Box, Button, Text, useDisclosure } from "@chakra-ui/react";
import ModalInviteBar from "./ModalInviteBar";
import L, { LatLngTuple } from "leaflet";
export default function MarkerBar(props) {
export default function MarkerBar(props: any) {
const { bar } = props;
//changer l'icon
const { isOpen, onClose, onOpen } = useDisclosure();
const barIcon = new L.Icon({
iconUrl: "drink_cocktail.png",
iconSize: [35, 35],
@@ -13,17 +16,19 @@ export default function MarkerBar(props) {
backgroundColor: "purple",
});
const location = [bar.geo_point_2d.lat, bar.geo_point_2d.lon];
const location = [bar.geo_point_2d.lat, bar.geo_point_2d.lon] as LatLngTuple;
//mettre un tooltip...
return (
<Marker icon={barIcon} position={location}>
<Popup>
<Box alignItems={"center"}>
<Box align={"center"}>
<Text fontSize={"1rem"} fontWeight={"bold"} align={"center"}>
{bar.name || '"Nom du bar"'}
{bar.name}
</Text>
<Button variant={"outline"}>Inviter un match</Button>
<Button variant={"outline"} onClick={onOpen}>
Inviter un match
</Button>
<ModalInviteBar bar={bar} isOpen={isOpen} onClose={onClose} />
</Box>
</Popup>
</Marker>
src/components/layout/map/ModalInviteBar.tsx
+161
View File
@@ -0,0 +1,161 @@
import {
Box,
Button,
Card,
CardBody,
Flex,
Grid,
GridItem,
Modal,
ModalBody,
ModalCloseButton,
ModalContent,
ModalFooter,
ModalHeader,
Text,
useRadio,
useRadioGroup,
useToast,
} from "@chakra-ui/react";
import { Notification, NotificationType, User } from "@prisma/client";
import { useMutation, useQuery } from "@tanstack/react-query";
import { useSession } from "next-auth/react";
import type { Session } from "@/models/auth/Session";
import CardMatchedUser from "./CardMatchedUser";
import { Router } from "next/router";
import { log } from "console";
type ModalInviteBarProps = {
isOpen: boolean;
onClose: () => void;
bar: any;
};
export default function ModalInviteBar({
isOpen,
onClose,
bar,
}: ModalInviteBarProps) {
const { data: session, status } = useSession();
const toast = useToast();
const { value, getRadioProps, getRootProps } = useRadioGroup({
defaultValue: "-1",
});
const inviteToBar = useMutation({
mutationFn: async (id) => {
const inviteOptions = {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
idUser: id,
idUserMatched: value,
bar: bar,
}),
};
try {
const res = await fetch(`/api/user/inviteToBar`, inviteOptions);
const response = await res.json();
return response;
} catch (err) {
return err;
}
},
onSuccess: (data) => {
if (data.error) {
toast({
title: "Erreur",
description: "Une erreur est survenue",
status: "error",
duration: 2000,
});
return;
}
console.log(data);
},
});
const {
isLoading,
isError,
data: notificationMatch,
error,
} = useQuery({
queryKey: ["notificationMatch"],
enabled: status === "authenticated",
queryFn: async () => {
const { user } = session as unknown as Session;
return fetch(
`/api/notifications?where={"$and":{"UserID":"${user.id}", "type":"${NotificationType.NEW_MATCH}"}}`
)
.then((res) => {
return res.json();
})
.catch((err) => {
return err;
});
},
});
console.log(bar);
return (
<>
<Modal
blockScrollOnMount={false}
size={"2xl"}
isOpen={isOpen}
onClose={onClose}
scrollBehavior={"inside"}
>
<ModalContent>
<ModalHeader display={"flex"} alignItems={"center"} gap={2}>
Inviter au bar : {bar.name}
<Box as="span" fontSize={"3xl"}>
🍻
</Box>
</ModalHeader>
<ModalBody>
<Grid
{...getRootProps()}
templateColumns={`repeat(${notificationMatch?.length}, 1fr)`}
gap={6}
>
{!isError && !error
? notificationMatch?.map((notif: Notification) => {
return (
<CardMatchedUser
key={notif.MatchedUserID}
notif={notif}
{...getRadioProps({ value: notif.MatchedUserID })}
/>
);
})
: null}
</Grid>
</ModalBody>
<ModalFooter>
<Button
mr={3}
isDisabled={value === "-1"}
onClick={() => {
const { user } = session as unknown as Session;
inviteToBar.mutate(user.id);
onClose();
// Router.push("/chat");
}}
>
Inviter
</Button>
<Button variant="ghost" onClick={onClose}>
Annuler
</Button>
</ModalFooter>
</ModalContent>
</Modal>
</>
);
}
src/components/layout/profile/ModalModifyImages.tsx
+60 -47
View File
@@ -14,60 +14,58 @@ import {
ModalOverlay,
useDisclosure,
useToast,
} from '@chakra-ui/react';
import {useQueryClient} from '@tanstack/react-query';
import {useState} from 'react';
import {RiEditBoxLine} from 'react-icons/ri';
} from "@chakra-ui/react";
import { useQueryClient } from "@tanstack/react-query";
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 { isOpen, onOpen, onClose } = useDisclosure();
const { images, user, userData, setUserData } = props;
const [listImage, setlistImage] = useState(images);
const toast = useToast({position: 'top', isClosable: true});
const toast = useToast({ position: "top", isClosable: true });
const client = useQueryClient();
const uploadImage = async (file) => {
const body = new FormData();
body.append('file', file);
body.append("file", file);
const imagePostOptions = {
method: 'POST',
method: "POST",
body,
};
const imagePatchOptions = {
method: 'PUT',
headers: {'Content-Type': 'application/json'},
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
images: [...listImage, `imageUsers/${file.name}`],
}),
};
fetch(`/api/file/uploadFile`, imagePostOptions)
.then(res => {
.then((res) => {
fetch(`/api/users/${user.id}`, imagePatchOptions)
.then(res => {
.then((res) => {
toast({
title: `Ajout d'image effectué`,
status: 'success',
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',
status: "error",
isClosable: true,
});
});
})
.catch(err => {
.catch((err) => {
toast({
title: `Erreur lors de l'ajout des images`,
status: 'error',
status: "error",
isClosable: true,
});
console.log(err);
@@ -84,14 +82,14 @@ export default function ModalModifyImages(props) {
}
const imageDeleteOptions = {
method: 'DELETE',
body: JSON.stringify({fileName: fileName.split('/').pop()}),
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'},
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
images: [...listImage],
}),
@@ -100,14 +98,14 @@ export default function ModalModifyImages(props) {
.then((res) => {
toast({
title: `Suppression d'image effectué`,
status: 'success',
status: "success",
isClosable: true,
});
})
.catch(() => {
toast({
title: `Erreur lors de la suppression des images`,
status: 'error',
status: "error",
isClosable: true,
});
});
@@ -116,60 +114,75 @@ export default function ModalModifyImages(props) {
return (
<>
<Button onClick={onOpen} leftIcon={<RiEditBoxLine/>}>
<Button onClick={onOpen} leftIcon={<RiEditBoxLine />}>
Modifier les images
</Button>
<Modal blockScrollOnMount={false} size={'4xl'} isOpen={isOpen}
onClose={onClose} scrollBehavior={'inside'}>
<ModalOverlay/>
<Modal
blockScrollOnMount={false}
size={"4xl"}
isOpen={isOpen}
onClose={onClose}
scrollBehavior={"inside"}
>
<ModalOverlay />
<ModalContent>
<ModalHeader>Modification des images</ModalHeader>
<ModalCloseButton/>
<ModalCloseButton />
<ModalBody>
<Grid templateColumns={`repeat(${listImage.length + 1}, 1fr)`}
gap={5}>
<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.toString()} colorScheme={'red'}
onClick={() =>
deleteImage(`${listImage[index]}`)}>
<Flex direction={"column"} gap={"1rem"}>
<Image src={image} />
<Button
id={index.toString()}
colorScheme={"red"}
onClick={() => 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}) => {
<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 extension = file.name.split(".").pop();
const newFile = new File(
[file],
`${user.id}_${time}.${extension}`,
{
type: file.type,
},
}
);
uploadImage(newFile);
}}/>
}}
/>
</GridItem>
)}
</Grid>
</ModalBody>
<ModalFooter>
<Button mr={3} onClick={() => {
client.invalidateQueries('user');
<Button
mr={3}
onClick={() => {
client.invalidateQueries("user");
onClose();
}}>
}}
>
Save
</Button>
</ModalFooter>
src/pages/api/user/inviteToBar.ts
+53
View File
@@ -0,0 +1,53 @@
import { log } from "console";
const { PrismaClient } = require("@prisma/client");
const post = async (req: any, res: any) => {
const prisma = new PrismaClient();
const { idUser, idUserMatched, bar } = req.body;
try {
const chat = await prisma.chat.findFirst({
where: {
AND: [
{ User: { some: { id: idUser } } },
{ User: { some: { id: idUserMatched } } },
],
},
include: {
User: true,
},
});
const message = await prisma.message.create({
data: {
text: `<!lon=${bar.geo_point_2d.lon},lat=${bar.geo_point_2d.lat},name=${bar.name}>`,
Chat: {
connect: {
id: chat.id,
},
},
User: {
connect: {
id: idUser,
},
},
},
});
res
.status(200)
.json({ message: "invitation envoyée", message_sent: message });
} catch (error) {
res.status(400).json({ message: "Something went wrong", error: error });
} finally {
await prisma.$disconnect();
}
};
export default (req: any, res: any) => {
req.method === "POST"
? post(req, res)
: res.status(404).send({ message: "Wrong method, please use POST" });
};
src/pages/api/user/like.js
+8 -2
View File
@@ -50,9 +50,15 @@ const post = async (req, res) => {
},
},
});
}
//faire une notification mais faut qu'on regarde un meilleur moyen dans la BD
await prisma.chat.create({
data: {
User: {
connect: [{ id: idUserLiked }, { id: idUser }],
},
},
});
}
await prisma.user.update({
where: {
src/pages/map.tsx
+27 -29
View File
@@ -1,14 +1,20 @@
import { useEffect, useState } from "react";
import React, { useEffect, useState } from "react";
import dynamic from "next/dynamic";
import { useToast } from "@chakra-ui/react";
import "leaflet/dist/leaflet.css";
import { useSession } from "next-auth/react";
import { useMutation, useQuery } from "@tanstack/react-query";
import type { Session } from "@/models/auth/Session";
import LoadingPage from "@/components/LoadingPage";
import ErrorPage from "@/components/ErrorPage";
import ErrorGeolocation from "@/components/ErrorGeolocation";
import Navbar from "@/components/Navbar";
import ErrorGeolocation from "@/components/ErrorGeoLocation";
const MapWithNoSSR = dynamic(
() => import("../components/layout/map/MapComponent"),
{
ssr: false,
}
);
export default function Map() {
const [location, setLocation] = useState([
@@ -17,8 +23,6 @@ export default function Map() {
]);
const [geolocationError, setGeolocationError] = useState(false);
const toast = useToast({ position: "bottom" });
const idSaveToast = "saved_location";
const { data: session, status } = useSession();
const [listBars, setListBars] = useState({} as unknown as any);
@@ -29,6 +33,7 @@ export default function Map() {
error,
} = useQuery({
queryKey: ["LoggedUser"],
refetchOnWindowFocus: false,
enabled: status === "authenticated",
queryFn: async () => {
const { user } = session as unknown as Session;
@@ -50,8 +55,11 @@ export default function Map() {
error: errorListBars,
} = useQuery({
queryKey: ["listBars"],
refetchOnWindowFocus: false,
enabled: !isLoading && location[0] !== null,
queryFn: async () => {
///Utiliser api de noratim
let urlBars = new URL(
"https://data.opendatasoft.com/api/v2/catalog/datasets/osm-fr-bars%40babel/exports/json?"
);
@@ -80,7 +88,6 @@ export default function Map() {
});
const userSetLocation = useMutation({
mutationKey: "userSetLocation",
mutationFn: async (position: string) => {
const pos = {
location: position,
@@ -94,14 +101,6 @@ export default function Map() {
body: JSON.stringify(pos),
})
.then((res) => {
// if (!toast.isActive(idSaveToast)) {
// toast({
// id: idSaveToast,
// title: "Position enregistrée",
// description: "Votre position a bien été enregistrée",
// status: "success",
// });
// }
res.json();
})
.catch((err) => {
@@ -125,6 +124,13 @@ export default function Map() {
}, [loggedUser]);
function successPosition(position: GeolocationPosition) {
if (
position.coords.latitude === location[0] &&
position.coords.longitude === location[1]
) {
return;
}
setLocation([position.coords.latitude, position.coords.longitude]);
setGeolocationError(false);
@@ -138,29 +144,21 @@ export default function Map() {
setGeolocationError(true);
}
const MapWithNoSSR = dynamic(
() => import("../components/layout/map/MapComponent"),
{
ssr: false,
}
);
return (
<>
{geolocationError ? (
<ErrorGeolocation />
) : isError || isErrorListBars ? (
<ErrorPage />
) : isLoading || isLoadingListBars ? (
) : isLoading ||
isLoadingListBars ||
location[0] === null ||
location[1] === null ? (
<LoadingPage />
) : (
<>
<Navbar />
<MapWithNoSSR
location={location}
loggedUser={loggedUser}
listBars={listBars}
/>
<Navbar variant={"fixed"} />
<MapWithNoSSR location={location} listBars={listBars} />
</>
)}
</>
src/pages/profile.tsx
+37 -27
View File
@@ -9,15 +9,14 @@ import {
Center,
Container,
Divider,
Editable,
Flex,
FormHelperText,
FormLabel,
Text,
useToast,
VStack,
} from "@chakra-ui/react";
import { formateDate } from "@/lib/formateDate";
import ModalModifyImages from "@/components/layout/profile/ModalModifyImages";
import ModalChoosePassion from "@/components/layout/profile/ModalChoosePassion";
import ProfileTagList from "@/components/layout/profile/ProfileTagList";
@@ -39,6 +38,7 @@ export default function UserProfile() {
const [currentlyLoading, setCurrentlyLoading] = useState(false);
const [passions, setPassions] = useState([] as any[]);
const [address, setAddress] = useState({} as any);
const [showTooltipAge, setShowTooltipAge] = useState(false);
const [sliderAgeValue, setSliderAgeValue] = useState([[] as number[]]);
@@ -86,6 +86,22 @@ export default function UserProfile() {
},
});
const { data: addressData, isSuccess: addressIsSuccess } = useQuery({
queryKey: ["address"],
enabled: Boolean(userData?.location),
queryFn: async () => {
const [lat, long] = userData.location.split(",");
return fetch(
`https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${lat}&lon=${long}`
)
.then((res) => res.json())
.catch((err) => {
return err;
});
},
});
if (isLoading) {
if (status === "unauthenticated") router.push("/login");
return <LoadingPage />;
@@ -131,7 +147,6 @@ export default function UserProfile() {
status: "success",
isClosable: true,
});
// router.reload();
})
.catch((err) => {
setCurrentlyLoading(false);
@@ -146,27 +161,19 @@ export default function UserProfile() {
}
};
const formateDate = (dateString: string) => {
var options = { year: "numeric", month: "long", day: "numeric" };
return new Date(dateString).toLocaleDateString([], options);
};
return (
<Box bgColor={"purple.50"}>
<Container justifyContent={"center"} maxW={"70rem"} mt={"1rem"}>
<Flex flexDirection={"column"} alignItems={"center"} gap={"1rem"}>
<Box width={"50%"}>
{userData.images ? (
<Carousel
images={userData.images}
images={
userData.images
? userData.images
: ["blank_profile_picture.webp"]
}
borderRadius={"1rem"}
></Carousel>
) : (
<Carousel
images={userData.images}
borderRadius={"1rem"}
></Carousel>
)}
</Box>
<ModalModifyImages
userData={userData}
@@ -179,7 +186,12 @@ export default function UserProfile() {
Modifiez les champs en les selectionnants
</Text>
<Box as="form" onSubmit={handleSubmit(saveData)} width={"80%"}>
<Box
position={"relative"}
as="form"
onSubmit={handleSubmit(saveData)}
width={"80%"}
>
<Flex width={"100%"} justify={"space-between"} mb={"1rem"}>
<Box>
<CustomEditable
@@ -210,7 +222,7 @@ export default function UserProfile() {
<Box>
<CustomFalseEditable
id="birthdate"
defaultValue={
value={
userData.birthdate === undefined ||
userData.birthdate === null
? "Non renseigné"
@@ -225,13 +237,12 @@ export default function UserProfile() {
<Box>
<CustomFalseEditable
id="location"
isDisabled={true}
defaultValue={
userData.location === null || userData.location === ""
? "Rendez vous sur la carte"
: userData.location
value={
!addressIsSuccess || addressData === undefined
? "Rendez vous sur la carte !"
: `${addressData.address.town}, ${addressData.address.county}, ${addressData.address.state}`
}
label={"Ville :"}
label={"Adresse :"}
helperText={
"Ce champ est modifié automatiquement depuis la carte"
}
@@ -240,8 +251,7 @@ export default function UserProfile() {
<Box>
<CustomFalseEditable
id="email"
isDisabled={true}
defaultValue={userData.email}
value={userData.email}
label={"Adresse mail :"}
/>
</Box>
@@ -334,7 +344,7 @@ export default function UserProfile() {
/> */}
</Box>
<Divider colorScheme={"purple"} />
<Center gap={"1rem"} my={"1rem"}>
<Center position={"sticky"} bottom={0} gap={"1rem"} my={"1rem"}>
<Button
colorScheme={"purple"}
isLoading={currentlyLoading}
yarn.lock
+12
View File
@@ -1416,6 +1416,11 @@
dependencies:
"@types/ms" "*"
"@types/geojson@*":
"integrity" "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA=="
"resolved" "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.10.tgz"
"version" "7946.0.10"
"@types/hoist-non-react-statics@^3.3.1":
"integrity" "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA=="
"resolved" "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz"
@@ -1429,6 +1434,13 @@
"resolved" "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz"
"version" "0.0.29"
"@types/leaflet@^1.9.3":
"integrity" "sha512-Caa1lYOgKVqDkDZVWkto2Z5JtVo09spEaUt2S69LiugbBpoqQu92HYFMGUbYezZbnBkyOxMNPXHSgRrRY5UyIA=="
"resolved" "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.3.tgz"
"version" "1.9.3"
dependencies:
"@types/geojson" "*"
"@types/lodash.mergewith@4.6.7":
"integrity" "sha512-3m+lkO5CLRRYU0fhGRp7zbsGi6+BZj0uTVSwvcKU+nSlhjA9/QRNfuSGnD2mX6hQA7ZbmcCkzk5h4ZYGOtk14A=="
"resolved" "https://registry.npmjs.org/@types/lodash.mergewith/-/lodash.mergewith-4.6.7.tgz"