Added interactive map for users to change their locations

Snunesnk · Jan 30, 2024 · 455988a · 455988a
1 parent 2923856
commit 455988a
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 22 deletions.
diff --git a/front/index.html b/front/index.html
@@ -9,6 +9,17 @@
             href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
             rel="stylesheet"
         />
+        <link
+            rel="stylesheet"
+            href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+            integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+            crossorigin=""
+        />
+        <script
+            src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+            integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
+            crossorigin=""
+        ></script>
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>MatChat</title>
     </head>

diff --git a/front/package.json b/front/package.json
@@ -15,13 +15,16 @@
         "@mui/material": "^5.15.0",
         "@mui/x-date-pickers": "^5.0.20",
         "@reduxjs/toolkit": "^1.9.3",
+        "@vis.gl/react-google-maps": "^0.5.0",
         "dayjs": "^1.11.7",
         "dotenv": "^10.0.0",
+        "leaflet": "^1.9.4",
         "localforage": "^1.10.0",
         "lodash": "^4.17.21",
         "match-sorter": "^6.3.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-leaflet": "^4.2.1",
         "react-redux": "^8.0.5",
         "react-router-dom": "^6.4.3",
         "socket.io-client": "^4.7.2",

diff --git a/front/src/Components/Settings/Settings.css b/front/src/Components/Settings/Settings.css
@@ -170,8 +170,13 @@
     background-color: #dc21b8a0;
 }
 
-#user-settings .btn.sm {
+.leaflet-container {
+    height: 250px;
+    width: 100%;
+}
+
+#user-settings .btn.mrg-top-30.sm {
     width: 100%;
     margin-top: 15px;
     margin-bottom: 15px;
-}
+}
diff --git a/front/src/Components/Settings/UserSettings.jsx b/front/src/Components/Settings/UserSettings.jsx
@@ -6,6 +6,14 @@ import TagsAutocomplete from '../TagsAutocomplete/TagsAutocomplete'
 import './Settings.css'
 import ApiService from '../../Services/api.service'
 import { CircularProgress } from '@mui/material'
+import {
+    MapContainer,
+    TileLayer,
+    Marker,
+    Popup,
+    useMapEvent,
+    useMap,
+} from 'react-leaflet'
 
 const GENDERS = [
     {
@@ -82,6 +90,31 @@ const saveUserInfos = async (userData) => {
     return ApiService.put('/user', { user: userData })
 }
 
+function LocationMarker({ position, setPosition }) {
+    const map = useMapEvent({
+        click(e) {
+            setPosition(e.latlng)
+        },
+        locationfound(e) {
+            setPosition(e.latlng)
+            map.flyTo(e.latlng, map.getZoom())
+        },
+    })
+
+    const map2 = useMap()
+
+    return position === null ? null : (
+        <Marker position={position}>
+            <Popup>
+                You clicked at:
+                <br />
+                Latitude: {position.lat.toFixed(3)},<br />
+                Longitude: {position.lng.toFixed(3)}
+            </Popup>
+        </Marker>
+    )
+}
+
 const UserSettings = () => {
     const login = useSelector((state) => state.userState.userInfos.login)
     const [user, setUser] = useState(null)
@@ -93,6 +126,7 @@ const UserSettings = () => {
     const [firstName, setFirstName] = useState('')
     const [email, setEmail] = useState('')
     const [personalBtnDisabled, setPersonalBtnDisabled] = useState(true)
+    const [location, setLocation] = useState(null)
 
     useEffect(() => {
         getUserSettings(setUser)
@@ -115,6 +149,7 @@ const UserSettings = () => {
             setLastName(user.name)
             setFirstName(user.surname)
             setEmail(user.email)
+            setLocation({ lat: user.latitude, lng: user.longitude })
 
             setPersonalBtnDisabled(false)
         }
@@ -137,15 +172,19 @@ const UserSettings = () => {
                 prefMale: user.prefMale,
                 prefEnby: user.prefEnby,
             },
+            coordinate: { y: location.lat, x: location.lng },
         }
-        saveUserInfos(userData, setUser).then(user => {
-            setUser(user);
-            setPersonalBtnDisabled(false)
-            alert("Settings saved !")
-        }).catch(err => {
-            console.log(err)
-            alert("An error occured.")
-        })
+        saveUserInfos(userData, setUser)
+            .then((user) => {
+                setUser(user)
+                setPersonalBtnDisabled(false)
+                alert('Settings saved !')
+            })
+            .catch((err) => {
+                console.log(err)
+                alert('An error occured.')
+                setPersonalBtnDisabled(false)
+            })
     }
 
     if (!user) return <div>Loading ... Please wait</div>
@@ -210,20 +249,38 @@ const UserSettings = () => {
                         setValue={(e, tagsList) => setPersonalTags(tagsList)}
                     />
                 </div>
-{/* 
-                <Button
-                    text={'Save personal infos'}
-                    btnClass={'white mrg-top-30'}
+
+                <div className="setting complex-setting personal-setting map">
+                    <div className="setting-infos">Your location</div>
+                    <MapContainer
+                        center={[user.latitude, user.longitude]}
+                        zoom={13}
+                        // scrollWheelZoom={false}
+                    >
+                        <TileLayer
+                            lat={user.latitude}
+                            lng={user.longitude}
+                            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                        />
+                        <LocationMarker
+                            position={location}
+                            setPosition={setLocation}
+                        />
+                    </MapContainer>
+                </div>
+
+                <button
+                    className="btn mrg-top-30 sm"
                     onClick={savePersonalInfos}
                     disabled={personalBtnDisabled}
-                /> */}
-                    <button
-                        className="btn mrg-top-30 sm"
-                        onClick={savePersonalInfos}
-                        disabled={personalBtnDisabled}
-                    >
-                        {personalBtnDisabled ? <CircularProgress /> : 'Save informations'}
-                    </button>
+                >
+                    {personalBtnDisabled ? (
+                        <CircularProgress />
+                    ) : (
+                        'Save informations'
+                    )}
+                </button>
             </div>
         </div>
     )