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

src/components/layout/map/MapComponent.tsx

@@ -42,7 +42,7 @@ export default function MapComponent(props: any) {
         <MapContainer
           center={location}
           zoom={13}
-          minZoom={8}
+          minZoom={6}
           zoomControl={false}
           style={{ width: "100vw", height: "100vw" }}
         >

src/components/layout/profile/CustomSlider.tsx

@@ -6,10 +6,10 @@ import {
   SliderThumb,
   SliderTrack,
   Tooltip,
-} from '@chakra-ui/react';
+} from "@chakra-ui/react";
-import {Controller, ControllerProps} from 'react-hook-form';
+import { Controller, ControllerProps } from "react-hook-form";
 
-import {FaWalking} from 'react-icons/fa';
+import { FaWalking } from "react-icons/fa";
 
 type CustomSliderProps = {
   label: string;
@@ -19,7 +19,7 @@ type CustomSliderProps = {
   showTooltipDistance: boolean;
   setShowTooltipDistance: React.Dispatch<React.SetStateAction<boolean>>;
   name: string;
-} & Omit<ControllerProps, 'render'>;
+} & Omit<ControllerProps, "render">;
 
 export default function CustomSlider(props: CustomSliderProps) {
   const {
@@ -35,30 +35,45 @@ export default function CustomSlider(props: CustomSliderProps) {
 
   return (
     <>
-        <FormLabel as={'legend'} htmlFor={name}>{label}</FormLabel>
+      <FormLabel as={"legend"} htmlFor={name}>
-        <Controller{...controllerProps} name={name}
+        {label}
-                   render={({field: {onChange}}) => (
+      </FormLabel>
-                       <Slider aria-label={'distance'} min={20} max={250}
+      <Controller
-                               id={'distance'} color={'pink.500'}
+        {...controllerProps}
+        name={name}
+        render={({ field: { onChange } }) => (
+          <Slider
+            aria-label={"distance"}
+            min={20}
+            max={100}
+            id={"distance"}
+            color={"pink.500"}
             defaultValue={defaultValue}
-                               onChange={v => {
+            onChange={(v) => {
               setSliderDistanceValue(v);
               onChange(v);
             }}
             onMouseEnter={() => setShowTooltipDistance(true)}
-                               onMouseLeave={() => setShowTooltipDistance(false)}>
+            onMouseLeave={() => setShowTooltipDistance(false)}
+          >
             <SliderTrack>
-                           <SliderFilledTrack bgColor={'purple.500'}/>
+              <SliderFilledTrack bgColor={"purple.500"} />
             </SliderTrack>
-                         <Tooltip hasArrow bg="purple.500" color="white"
+            <Tooltip
-                                  placement="top" isOpen={showTooltipDistance}
+              hasArrow
-                                  label={`${sliderDistanceValue} km`}>
+              bg="purple.500"
+              color="white"
+              placement="top"
+              isOpen={showTooltipDistance}
+              label={`${sliderDistanceValue} km`}
+            >
               <SliderThumb boxSize={6}>
-                             <Box color={'purple.500'} as={FaWalking}/>
+                <Box color={"purple.500"} as={FaWalking} />
               </SliderThumb>
             </Tooltip>
           </Slider>
-                   )}/>
+        )}
+      />
     </>
   );
 }

src/pages/map.tsx

@@ -56,7 +56,7 @@ export default function Map() {
   } = useQuery({
     queryKey: ["listBars"],
     refetchOnWindowFocus: false,
-    enabled: !isLoading && location[0] !== null,
+    enabled: Boolean(loggedUser) && loggedUser.location.length > 0,
     queryFn: async () => {
       ///Utiliser api de noratim
 
@@ -64,11 +64,16 @@ export default function Map() {
         "https://data.opendatasoft.com/api/v2/catalog/datasets/osm-fr-bars%40babel/exports/json?"
       );
 
-      const coordinates = location[1].toString() + " " + location[0].toString();
+      let coordinates;
+      if (location[0] === null || location[1] === null) {
+        const co = loggedUser.location.split(",");
+        coordinates = co[1].toString() + " " + co[0].toString();
+      } else
+        coordinates = location[1].toString() + " " + location[0].toString();
 
       urlBars.searchParams.append(
         "where",
-        `distance(geo_point_2d,geom'POINT(${coordinates})',75km)`
+        `distance(geo_point_2d,geom'POINT(${coordinates})',${loggedUser.distance}km)`
       );
       urlBars.searchParams.append("limit", "-1");
       urlBars.searchParams.append("offset", "0");

src/pages/profile.tsx

@@ -26,7 +26,7 @@ import CustomFalseEditable from "@/components/layout/profile/CustomFalseEditable
 import CustomEditableArea from "@/components/layout/profile/CustomEditableArea";
 import CustomRadioGender from "@/components/layout/profile/CustomRadioGender";
 import CustomRangeSlider from "@/components/layout/profile/CustomRangeSlider";
-// import CustomSlider from "@/components/layout/user_profile/CustomSlider";
+import CustomSlider from "@/components/layout/profile/CustomSlider";
 
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
@@ -42,8 +42,8 @@ export default function UserProfile() {
 
   const [showTooltipAge, setShowTooltipAge] = useState(false);
   const [sliderAgeValue, setSliderAgeValue] = useState([[] as number[]]);
-  // const [showTooltipDistance, setShowTooltipDistance] = useState(false);
+  const [showTooltipDistance, setShowTooltipDistance] = useState(false);
-  // const [sliderDistanceValue, setSliderDistanceValue] = useState<number>(0);
+  const [sliderDistanceValue, setSliderDistanceValue] = useState<number>(0);
 
   const {
     handleSubmit,
@@ -76,7 +76,7 @@ export default function UserProfile() {
       const { user } = session as unknown as Session;
 
       setSliderAgeValue([user.ageMin, user.ageMax]);
-      // setSliderDistanceValue(user.distance);
+      setSliderDistanceValue(user.distance);
 
       return fetch(`/api/users/${user.id}`)
         .then((res) => res.json())
@@ -162,7 +162,7 @@ export default function UserProfile() {
   };
 
   return (
-    <Box bgColor={"purple.50"}>
+    <Box height={"100%"}>
       <Container justifyContent={"center"} maxW={"70rem"} mt={"1rem"}>
         <Flex flexDirection={"column"} alignItems={"center"} gap={"1rem"}>
           <Box width={"50%"}>
@@ -332,16 +332,16 @@ export default function UserProfile() {
                   sliderAgeValue={sliderAgeValue}
                 />
               </Box>
-              {/* <CustomSlider
+              <CustomSlider
                 control={control}
-                label={"Distance :"}
+                label={"Distance des bars :"}
                 name={"distance"}
                 defaultValue={userData.distance}
                 setSliderDistanceValue={setSliderDistanceValue}
                 setShowTooltipDistance={setShowTooltipDistance}
                 showTooltipDistance={showTooltipDistance}
                 sliderDistanceValue={sliderDistanceValue}
-              /> */}
+              />
             </Box>
             <Divider colorScheme={"purple"} />
             <Center position={"sticky"} bottom={0} gap={"1rem"} my={"1rem"}>