fix(map): Fix logout

Took 1 hour 16 minutes

src/components/ErrorGeoLocation.tsx

@@ -2,7 +2,7 @@ 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 (

src/components/ErrorPage.tsx

@@ -2,7 +2,7 @@ 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 ErrorPage() {
   const router = useRouter();
 
   return (

src/components/Navbar.tsx

@@ -29,10 +29,7 @@ export default function Navbar({variant = 'fixed'}: Props) {
 
     return (
         <Flex gap={5} justify={'center'} flexBasis={'100%'}>
-          {status === 'authenticated'
-           ? authenticatedLinks
-           : <></>
-          }
+          {status === 'authenticated' && authenticatedLinks}
         </Flex>
     );
   };

src/components/layout/map/MapComponent.tsx

@@ -1,7 +1,6 @@
-import {MapContainer, TileLayer, Marker, Popup} from 'react-leaflet';
+import {MapContainer, TileLayer, Marker} from 'react-leaflet';
 import {Flex, Text, useToast} from '@chakra-ui/react';
-import MarkerClusterGroup
-  from '@christopherpickering/react-leaflet-markercluster';
+import MarkerClusterGroup from '@christopherpickering/react-leaflet-markercluster';
 
 import '@christopherpickering/react-leaflet-markercluster/dist/styles.min.css';
 
@@ -15,46 +14,45 @@ export default function MapComponent(props: any) {
 
   const idToastError = 'error_location';
 
-  const userIcon = new L.Icon({
-    iconUrl: 'logo.svg',
-    iconSize: [35, 35],
-  });
+  const userIcon = new L.Icon({iconUrl: 'logo.svg', iconSize: [35, 35]});
+
+  if (!location[0] || !location[1]) return (
+      <>
+        {!toast.isActive(idToastError) &&
+            toast({
+              title: 'Erreur',
+              id: idToastError,
+              description: 'Veuillez autoriser la localisation',
+              status: 'error',
+              isClosable: false,
+              duration: 100000,
+            })}
+        <Text color="purple.500" fontSize="2xl" fontWeight="bold">
+          Veuillez autoriser la localisation
+        </Text>
+      </>
+  );
 
   return (
       <>
-        {location[0] === null || location[1] === null ? (
-            <>
-              {!toast.isActive(idToastError) &&
-                  toast({
-                    title: 'Erreur',
-                    id: idToastError,
-                    description: 'Veuillez autoriser la localisation',
-                    status: 'error',
-                    isClosable: false,
-                    duration: 100000,
-                  })}
-              <Text color="purple.500" fontSize="2xl" fontWeight="bold">
-                Veuillez autoriser la localisation
-              </Text>
-            </>
-        ) : (
-             <Flex>
-               <MapContainer center={location} zoom={13} minZoom={8}
-                             zoomControl={false}
-                             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'
-                 />
-                 {/* Pour le user */}
-                 <Marker icon={userIcon} position={location}></Marker>
+        <Flex>
+          <MapContainer center={location} zoom={13} minZoom={8}
+                        zoomControl={false}
+                        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'
+            />
+            {/* Pour le user */}
+            <Marker icon={userIcon} position={location}></Marker>
 
-                 <MarkerClusterGroup chunkedLoading showCoverageOnHover={false}>
-                   {listBars.map((bar: any, index: number) => <MarkerBar key={index} bar={bar}/>)}
-                 </MarkerClusterGroup>
-               </MapContainer>
-             </Flex>
-         )}
+            <MarkerClusterGroup chunkedLoading showCoverageOnHover={false}>
+              {listBars.map((bar: any, index: number) =>
+                  <MarkerBar key={index} bar={bar}/>
+              )}
+            </MarkerClusterGroup>
+          </MapContainer>
+        </Flex>
       </>
   );
 }

src/pages/api/auth/[...nextauth].ts

@@ -55,7 +55,5 @@ export default async function auth(req: NextApiRequest, res: NextApiResponse) {
 }
 
 async function getUserByEmail(email: string): Promise<null | User> {
-  return prismaClient.user.findUnique({
-    where: {email},
-  });
+  return prismaClient.user.findUnique({where: {email}});
 }

src/pages/map.tsx

@@ -1,168 +1,77 @@
-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 {useEffect, useState} from 'react';
+import dynamic from 'next/dynamic';
+import 'leaflet/dist/leaflet.css';
+import {useSession} from 'next-auth/react';
 
-import LoadingPage from "@/components/LoadingPage";
-import ErrorPage from "@/components/ErrorPage";
-import ErrorGeolocation from "@/components/ErrorGeolocation";
-import Navbar from "@/components/Navbar";
+import LoadingPage from '@/components/LoadingPage';
+import Navbar from '@/components/Navbar';
+import {Session} from '@/models/auth/Session';
+import ErrorGeoLocation from '@/components/ErrorGeoLocation';
 
 export default function Map() {
-  const [location, setLocation] = useState([
-    null as unknown as number,
-    null as unknown as number,
-  ]);
-
+  const [location, setLocation] = useState<number[]>([]);
   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);
-
-  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,
-    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;
-        });
-    },
-    onSuccess: (data) => {
-      // filter data where name is not null
-      const filteredData = data.filter((bar: any) => bar.name !== null);
-      setListBars(filteredData);
-    },
-  });
-
-  const userSetLocation = useMutation({
-    mutationKey: "userSetLocation",
-    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;
-        });
-    },
-  });
-
-  const geolocationOptions = {
-    enableHighAccuracy: true,
-    timeout: 5000,
-    maximumAge: 0,
-  };
+  const {data: session, status} = useSession({required: true});
+  const [listBars, setListBars] = useState<any>(null);
 
   useEffect(() => {
+    if (!session?.user) return;
+
     navigator.geolocation.getCurrentPosition(
-      successPosition,
-      errorPosition,
-      geolocationOptions
+        (position: GeolocationPosition) => {
+          setLocation([position.coords.latitude, position.coords.longitude]);
+          setGeolocationError(false);
+        },
+        () => setGeolocationError(true),
+        {
+          enableHighAccuracy: true,
+          timeout: 5000,
+          maximumAge: 0,
+        },
     );
-  }, [loggedUser]);
+    if (location[0]) {
+      let urlBars = new URL('https://data.opendatasoft.com/api/v2/catalog/datasets/osm-fr-bars%40babel/exports/json');
 
-  function successPosition(position: GeolocationPosition) {
-    setLocation([position.coords.latitude, position.coords.longitude]);
-    setGeolocationError(false);
+      const coordinates = `${location[1]} ${location[0]}`;
+      const params = {
+        where: `distance(geo_point_2d,geom'POINT(${coordinates})',75km)`,
+        limit: '-1',
+        offset: '0',
+        timezone: 'UTC',
+      };
 
-    if (!loggedUser) return;
-    userSetLocation.mutate(
-      `${position.coords.latitude},${position.coords.longitude}`
-    );
-  }
+      for (const [key, val] of Object.entries(params)) {
+        urlBars.searchParams.append(key, val);
+      }
 
-  function errorPosition(error: GeolocationPositionError) {
-    setGeolocationError(true);
-  }
+      fetch(urlBars)
+          .then(res => res.json())
+          .then(data => {
+            const filteredBars = data.filter((bar: any) => bar.name !== null);
+            setListBars(filteredBars);
+          })
+          .catch(err => console.error(err));
+    }
+  }, [session?.user]);
+
+  if (status === 'loading') return <LoadingPage/>;
+  const {user} = session as unknown as Session;
 
   const MapWithNoSSR = dynamic(
-    () => import("../components/layout/map/MapComponent"),
-    {
-      ssr: false,
-    }
+      () => import('../components/layout/map/MapComponent'),
+      {ssr: false},
   );
 
+  if (geolocationError) return <ErrorGeoLocation/>;
+  if (!listBars) return <LoadingPage/>;
+
   return (
-    <>
-      {geolocationError ? (
-        <ErrorGeolocation />
-      ) : isError || isErrorListBars ? (
-        <ErrorPage />
-      ) : isLoading || isLoadingListBars ? (
-        <LoadingPage />
-      ) : (
-        <>
-          <Navbar />
-          <MapWithNoSSR
+      <>
+        <Navbar variant={'fixed'}/>
+        <MapWithNoSSR
             location={location}
-            loggedUser={loggedUser}
-            listBars={listBars}
-          />
-        </>
-      )}
-    </>
+            loggedUser={user}
+            listBars={listBars}/>
+      </>
   );
 }