feat(Map with bars): added the map with bars provided by opendatasoft

TODO: -modal to invite match to bar

-use overpass ? (openStreetMap API)

src/pages/dashboard.tsx

@@ -1,7 +1,7 @@
 import { Grid, GridItem, Text, Box, useToast } from "@chakra-ui/react";
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 
 import type { Session } from "@/models/auth/Session";
 import CardUser from "../components/layout/dashboard/card_user/CardUser";
@@ -16,10 +16,8 @@ import LoadingPage from "@/components/LoadingPage";
 export default function Dashboard() {
   const router = useRouter();
   const toast = useToast({ position: "top", isClosable: true });
-  const [userLikes, setUserLikes] = useState();
-  const [userDislikes, setUserDislikes] = useState();
-
-  const [preferences, setPreferences] = useState(null);
+  const [userLikes, setUserLikes] = useState([] as string[]);
+  const [userDislikes, setUserDislikes] = useState([] as string[]);
 
   const { data: session, status } = useSession();
 
@@ -37,13 +35,6 @@ export default function Dashboard() {
       setUserDislikes([...user.UserDislikesID]);
       setUserLikes([...user.UserLikesID]);
 
-      setPreferences([
-        user.prefGender,
-        user.ageMin,
-        user.ageMax,
-        user.distance,
-      ]);
-
       return fetch(`/api/users/${user.id}`)
         .then((res) => {
           return res.json();
@@ -68,7 +59,14 @@ export default function Dashboard() {
     enabled: status === "authenticated" && !isLoading,
     queryFn: async () => {
       return fetch(
-        `/api/user/userDashboard?preferences=${preferences}&excludedId=${loggedUser.id}&userLikes=${loggedUser.UserLikesID}&userDislikes=${loggedUser.UserDislikesID}`
+        `/api/user/userDashboard?preferences=${[
+          loggedUser.prefGender,
+          loggedUser.ageMin,
+          loggedUser.ageMax,
+          loggedUser.distance,
+        ]}&excludedId=${loggedUser.id}&userLikes=${
+          loggedUser.UserLikesID
+        }&userDislikes=${loggedUser.UserDislikesID}`
       ) //exclure les profils déjà like ou dislike
         .then((res) => res.json())
         .catch((err) => {
@@ -89,7 +87,6 @@ export default function Dashboard() {
       position: "top",
     });
     if (status === "unauthenticated") router.push("/");
-    return <span>Error: {error.message}</span>;
   }
 
   return (

src/pages/map.tsx

@@ -0,0 +1,146 @@
+import { 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 LoadingPage from "@/components/LoadingPage";
+import ErrorPage from "@/components/ErrorPage";
+import Navbar from "@/components/Navbar";
+
+export default function Map() {
+  const [location, setLocation] = useState([
+    null as unknown as number,
+    null as unknown as number,
+  ]);
+  const toast = useToast({ position: "bottom" });
+  const idSaveToast = "saved_location";
+  const { data: session, status } = useSession();
+
+  //faire un useQuery pour récupérer les bars et restaurants et en meme temps regarder si l'user a une location
+  //Si oui, faire une mutation avec navigator.geolocation.getCurrentPosition pour mettre à jour la location de l'user dans la bdd
+
+  // cet url  : https://data.opendatasoft.com/api/v2/catalog/datasets/osm-fr-bars%40babel/records?limit=100&offset=0&lang=fr&timezone=UTC
+
+  // ou : https://data.opendatasoft.com/api/v2/catalog/datasets/osm-fr-bars%40babel/exports/json?limit=-1&offset=0&lang=fr&timezone=UTC  MAIS RENVOI UN file
+
+  const {
+    isLoading,
+    isError,
+    data: loggedUser,
+    error,
+  } = useQuery({
+    queryKey: ["LoggedUser"],
+    enabled: status === "authenticated",
+    queryFn: async () => {
+      const { user } = session as unknown as Session;
+
+      return fetch(`/api/users/${user.id}`)
+        .then((res) => {
+          return res.json();
+        })
+        .catch((err) => {
+          return err;
+        });
+    },
+  });
+
+  const {
+    data: listBars,
+    isError: isErrorListBars,
+    isLoading: isLoadingListBars,
+    error: errorListBars,
+  } = useQuery({
+    queryKey: ["listBars"],
+    enabled: !isLoading && location[0] !== null,
+    queryFn: async () => {
+      let urlBars = new URL(
+        "https://data.opendatasoft.com/api/v2/catalog/datasets/osm-fr-bars%40babel/exports/json?"
+      );
+
+      const coordinates = location[1].toString() + " " + location[0].toString();
+
+      urlBars.searchParams.append(
+        "where",
+        `distance(geo_point_2d,geom'POINT(${coordinates})',75km)`
+      );
+      urlBars.searchParams.append("limit", "-1");
+      urlBars.searchParams.append("offset", "0");
+      urlBars.searchParams.append("timezone", `UTC`);
+
+      return fetch(urlBars.toString())
+        .then((res) => res.json())
+        .catch((err) => {
+          return err;
+        });
+    },
+  });
+
+  const userSetLocation = useMutation({
+    mutationKey: "userSetLocation",
+    enabled: !isLoading && !loggedUser,
+    mutationFn: async (position: string) => {
+      const pos = {
+        location: position,
+      };
+
+      return fetch(`/api/users/${loggedUser.id}`, {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        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) => {
+          return err;
+        });
+    },
+  });
+
+  useEffect(() => {
+    navigator.geolocation.getCurrentPosition((position) => {
+      setLocation([position.coords.latitude, position.coords.longitude]);
+      userSetLocation.mutate(
+        `${position.coords.latitude},${position.coords.longitude}`
+      );
+    });
+  }, []);
+
+  const MapWithNoSSR = dynamic(
+    () => import("../components/layout/map/MapComponent"),
+    {
+      ssr: false,
+    }
+  );
+
+  return (
+    <>
+      {isLoading || isLoadingListBars ? (
+        <LoadingPage />
+      ) : isError || isErrorListBars ? (
+        <ErrorPage />
+      ) : (
+        <>
+          <Navbar />
+          <MapWithNoSSR
+            location={location}
+            loggedUser={loggedUser}
+            listBars={listBars}
+          />
+        </>
+      )}
+    </>
+  );
+}

src/pages/userProfile.tsx

@@ -53,9 +53,9 @@ export default function UserProfile() {
   const [passions, setPassions] = useState(null);
 
   const [showTooltipAge, setShowTooltipAge] = useState(true);
-  const [sliderAgeValue, setSliderAgeValue] = useState([]);
-  const [showTooltipDistance, setShowTooltipDistance] = useState(true);
-  const [sliderDistanceValue, setSliderDistanceValue] = useState([]);
+  const [sliderAgeValue, setSliderAgeValue] = useState([] as number[]);
+  // const [showTooltipDistance, setShowTooltipDistance] = useState(true);
+  // const [sliderDistanceValue, setSliderDistanceValue] = useState([]);
 
   const {
     handleSubmit,
@@ -88,7 +88,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())
@@ -110,10 +110,9 @@ export default function UserProfile() {
       position: "top",
     });
     if (status === "unauthenticated") router.push("/");
-    return <span>Error: {error.message}</span>;
   }
 
-  const getTextGender = (gender) => {
+  const getTextGender = (gender: string) => {
     switch (gender) {
       case Gender.MALE:
         return "Homme";