display current place on map

Author: pchloe02

frontend/src/components/Map/BaseMapLayers.tsx

@@ -0,0 +1,17 @@
+// src/components/map/MapLayer.tsx
+import { TileLayer, Marker } from "react-leaflet";
+
+interface MapLayerProps {
+  initialPosition: [number, number];
+}
+
+const BaseMapLayers = ({ initialPosition }: MapLayerProps) => {
+  return (
+    <>
+      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
+      <Marker position={initialPosition} />
+    </>
+  );
+};
+
+export default BaseMapLayers;

frontend/src/components/Map/CurrentLocationMarker.tsx

@@ -0,0 +1,31 @@
+import { useEffect, useRef } from "react";
+import { useMap } from "react-leaflet";
+import L from "leaflet";
+import { useGeolocationContext } from "../../providers/GeolocationContext";
+
+const CurrentLocationMarker = () => {
+  const map = useMap();
+  const { location, error } = useGeolocationContext();
+  const markerRef = useRef<L.Marker>();
+
+  useEffect(() => {
+    if (location) {
+      const lat = location.coords.latitude;
+      const lng = location.coords.longitude;
+
+      if (markerRef.current) {
+        markerRef.current.setLatLng([lat, lng]);
+      } else {
+        markerRef.current = L.marker([lat, lng]).addTo(map);
+      }
+    }
+  }, [location, map]);
+
+  if (error) {
+    console.error(`Geolocation error (${error.code}): ${error.message}`);
+  }
+
+  return null;
+};
+
+export default CurrentLocationMarker;

frontend/src/components/Map/Map.tsx

@@ -0,0 +1,38 @@
+// src/components/map/MapComponent.tsx
+import React from "react";
+import { MapContainer } from "react-leaflet";
+import { useGeolocationContext } from "../../providers/GeolocationContext";
+import ChangeView from "../../utils/ChangeView";
+import CurrentLocationMarker from "./CurrentLocationMarker";
+import BaseMapLayers from "./BaseMapLayers";
+import { getMapZoom, getInitialCoords } from "./functions";
+import "./style.css";
+
+const MapContainerWrapper = () => {
+  const params = new URLSearchParams(window.location.search);
+  const paramLat = params.get("lat");
+  const paramLng = params.get("lng");
+
+  const { location } = useGeolocationContext();
+
+  const coords = getInitialCoords({
+    paramLat,
+    paramLng,
+    userLocation: location,
+  });
+  const zoom = getMapZoom(paramLat, paramLng);
+
+  return (
+    <MapContainer
+      center={coords}
+      zoom={zoom}
+      style={{ height: "100vh", width: "100%" }}
+    >
+      <BaseMapLayers initialPosition={coords} />
+      <ChangeView coords={coords} zoom={zoom} />
+      <CurrentLocationMarker />
+    </MapContainer>
+  );
+};
+
+export default MapContainerWrapper;

frontend/src/components/Map/MapContainerWrapper.tsx

@@ -0,0 +1,33 @@
+export const getMapZoom = (
+  paramLat: string | null,
+  paramLng: string | null
+): number => {
+  if (paramLat === null && paramLng === null) {
+    return 20;
+  }
+  return 16;
+};
+
+interface InitialCoordsParams {
+  paramLat: string | null;
+  paramLng: string | null;
+  userLocation: GeolocationPosition | null;
+}
+
+export const getInitialCoords = ({
+  paramLat,
+  paramLng,
+  userLocation,
+}: InitialCoordsParams): [number, number] => {
+  const defaultLat = 50.740717; // Coordonnées par défaut
+  const defaultLng = 2.258634;
+
+  const lat = paramLat
+    ? parseFloat(paramLat)
+    : userLocation?.coords.latitude || defaultLat;
+  const lng = paramLng
+    ? parseFloat(paramLng)
+    : userLocation?.coords.longitude || defaultLng;
+
+  return [lat, lng];
+};

frontend/src/components/Map/functions.tsx

@@ -1,6 +1,6 @@
-import MapComponent from "./Map/Map";
+import MapContainerWrapper from "./Map/MapContainerWrapper";
 import Navbar from "./NavBar/NavBar";
 import Card from "./Card/Card";
 import ListCards from "./ListCards/ListCards";
 
-export { Navbar, Card, ListCards, MapComponent };
+export { Navbar, Card, ListCards, MapContainerWrapper };

frontend/src/components/index.js

@@ -1,29 +1,29 @@
 import { useEffect, useState } from "react";
 
 const useGeolocation = () => {
-  interface LocationPosition {
-    coords: {
-      latitude: number;
-      longitude: number;
-      accuracy: number;
-    };
-  }
+  // interface LocationPosition {
+  //   coords: {
+  //     latitude: number;
+  //     longitude: number;
+  //     accuracy: number;
+  //   };
+  // }
 
-  interface LocationPositionError {
-    code: number;
-    message: string;
-  }
+  // interface LocationPositionError {
+  //   code: number;
+  //   message: string;
+  // }
 
-  const [location, setLocation] = useState<LocationPosition | null>(null);
-  const [error, setError] = useState<LocationPositionError | null>(null);
+  const [location, setLocation] = useState<GeolocationPosition | null>(null);
+  const [error, setError] = useState<GeolocationPositionError | null>(null);
 
   useEffect(() => {
     const watchPosition = navigator.geolocation.watchPosition(
-      (position: LocationPosition) => {
+      (position: GeolocationPosition) => {
         setLocation(position);
         console.log("Geolocation position:", position);
       },
-      (error: LocationPositionError) => {
+      (error: GeolocationPositionError) => {
         setError(error);
         console.error(`Geolocation error (${error.code}): ${error.message}`);
       }

frontend/src/hooks/useGeolocation.tsx

@@ -1,10 +1,10 @@
 import React from "react";
-import { MapComponent } from "src/components";
+import { MapContainerWrapper } from "src/components";
 
 const HomePage = () => {
   return (
     <div>
-      <MapComponent />
+      <MapContainerWrapper />
     </div>
   );
 };

frontend/src/pages/Homepage/HomePage.tsx

@@ -1,6 +1,15 @@
 import React, { useState, useContext } from "react";
 import axios from "axios";
-import { Box, Button, Input, Stack, Heading, Container, Text, useToast } from "@chakra-ui/react";
+import {
+  Box,
+  Button,
+  Input,
+  Stack,
+  Heading,
+  Container,
+  Text,
+  useToast,
+} from "@chakra-ui/react";
 import { useNavigate } from "react-router-dom";
 import { AuthContext } from "src/contexts/AuthContext";
 import PORT from "src/utils/constant";
@@ -27,7 +36,7 @@ const LoginForm = () => {
 
       toast({
         title: "Connexion réussie",
-        description: "Vous allez être redirigé vers votre profil.",
+        description: `Bienvenue ${username} !`,
         status: "success",
         duration: 3000,
         isClosable: true,
@@ -37,7 +46,6 @@ const LoginForm = () => {
       setTimeout(() => {
         navigate("/");
       }, 3000);
-
     } catch (error) {
       setErrorMessage("Nom d'utilisateur ou mot de passe invalide");
       toast({
@@ -53,9 +61,17 @@ const LoginForm = () => {
   };
 
   return (
-    <Container p={4} minH="100vh" display="flex" alignItems="center" justifyContent="center">
+    <Container
+      p={4}
+      minH="100vh"
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+    >
       <Box w="full" maxW="md" p={6} borderWidth={1} borderRadius="md">
-        <Heading textAlign="center" mb={6}>Connexion</Heading>
+        <Heading textAlign="center" mb={6}>
+          Connexion
+        </Heading>
         <Stack as="form" spacing={4} onSubmit={handleSubmit}>
           <Input
             placeholder="Email ou Nom d'utilisateur"
@@ -71,7 +87,9 @@ const LoginForm = () => {
             required
           />
           {errorMessage && <Text color="red.500">{errorMessage}</Text>}
-          <Button colorScheme="teal" type="submit">Se connecter</Button>
+          <Button colorScheme="teal" type="submit">
+            Se connecter
+          </Button>
         </Stack>
       </Box>
     </Container>

frontend/src/pages/LogInPage/LogInForm.tsx

@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+import { useMap } from "react-leaflet";
+
+interface ChangeViewProps {
+  coords: [number, number];
+  zoom: number;
+}
+
+const ChangeView = ({ coords, zoom }: ChangeViewProps) => {
+  const map = useMap();
+
+  useEffect(() => {
+    map.setView(coords, zoom);
+  }, [coords, zoom, map]);
+
+  return null;
+};
+
+export default ChangeView;