From 7798b0170d8a87d78805c537ed4626472c61eee6 Mon Sep 17 00:00:00 2001
From: dm1sh <me@dmitriy.icu>
Date: Tue, 15 Aug 2023 23:06:12 +0300
Subject: [PATCH] Added location marker

---
 front/package-lock.json               | 11 ++++++++
 front/package.json                    |  1 +
 front/src/assets/locate.svg           |  2 ++
 front/src/components/LocateButton.tsx | 38 +++++++++++++++++++++++++++
 front/src/components/index.ts         |  1 +
 front/src/pages/AddPage.tsx           | 11 +++++---
 front/src/styles/Map.module.css       |  3 +++
 7 files changed, 63 insertions(+), 4 deletions(-)
 create mode 100644 front/src/assets/locate.svg
 create mode 100644 front/src/components/LocateButton.tsx
 create mode 100644 front/src/styles/Map.module.css

diff --git a/front/package-lock.json b/front/package-lock.json
index a60e9b8..465ab48 100644
--- a/front/package-lock.json
+++ b/front/package-lock.json
@@ -17,6 +17,7 @@
         "react-dom": "^18.2.0",
         "react-insta-stories": "^2.6.1",
         "react-leaflet": "^4.2.1",
+        "react-leaflet-custom-control": "^1.3.5",
         "react-router-dom": "^6.14.1"
       },
       "devDependencies": {
@@ -2864,6 +2865,16 @@
         "react-dom": "^18.0.0"
       }
     },
+    "node_modules/react-leaflet-custom-control": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/react-leaflet-custom-control/-/react-leaflet-custom-control-1.3.5.tgz",
+      "integrity": "sha512-9/v7AxY6CoUbc6fAD/0u8O6wCBopxtdzJukWOR7vLZcyAN5rQCYWXjF5wXJ8klONweZGsRaGPJelfEBRtZAgQA==",
+      "peerDependencies": {
+        "leaflet": "^1.7.1",
+        "react": "^17.0.2 || ^18.0.0",
+        "react-dom": "^17.0.2 || ^18.0.0"
+      }
+    },
     "node_modules/react-lifecycles-compat": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
diff --git a/front/package.json b/front/package.json
index cc9df15..c8f2c94 100644
--- a/front/package.json
+++ b/front/package.json
@@ -21,6 +21,7 @@
     "react-dom": "^18.2.0",
     "react-insta-stories": "^2.6.1",
     "react-leaflet": "^4.2.1",
+    "react-leaflet-custom-control": "^1.3.5",
     "react-router-dom": "^6.14.1"
   },
   "devDependencies": {
diff --git a/front/src/assets/locate.svg b/front/src/assets/locate.svg
new file mode 100644
index 0000000..45a697c
--- /dev/null
+++ b/front/src/assets/locate.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M 15 3 L 15 5.0625 C 9.734375 5.539063 5.539063 9.734375 5.0625 15 L 3 15 L 3 17 L 5.0625 17 C 5.539063 22.265625 9.734375 26.460938 15 26.9375 L 15 29 L 17 29 L 17 26.9375 C 22.265625 26.460938 26.460938 22.265625 26.9375 17 L 29 17 L 29 15 L 26.9375 15 C 26.460938 9.734375 22.265625 5.539063 17 5.0625 L 17 3 Z M 15 7.03125 L 15 9 L 17 9 L 17 7.03125 C 21.191406 7.484375 24.515625 10.808594 24.96875 15 L 23 15 L 23 17 L 24.96875 17 C 24.515625 21.191406 21.191406 24.515625 17 24.96875 L 17 23 L 15 23 L 15 24.96875 C 10.808594 24.515625 7.484375 21.191406 7.03125 17 L 9 17 L 9 15 L 7.03125 15 C 7.484375 10.808594 10.808594 7.484375 15 7.03125 Z"/></svg>
\ No newline at end of file
diff --git a/front/src/components/LocateButton.tsx b/front/src/components/LocateButton.tsx
new file mode 100644
index 0000000..af02451
--- /dev/null
+++ b/front/src/components/LocateButton.tsx
@@ -0,0 +1,38 @@
+import { MouseEventHandler } from 'react'
+import { useMapEvent } from 'react-leaflet'
+import { LatLng } from 'leaflet'
+import Control from 'react-leaflet-custom-control'
+
+import locateIcon from '../assets/locate.svg'
+
+import styles from '../styles/Map.module.css'
+import { SetState } from '../utils/types'
+type LocaleButtonProps = {
+    setPosition: SetState<LatLng>
+}
+
+function LocateButton({ setPosition }: LocaleButtonProps) {
+    const map = useMapEvent('locationfound', (e) => {
+        setPosition(e.latlng)
+        map.flyTo(e.latlng)
+    })
+
+    const handleLocale: MouseEventHandler<HTMLAnchorElement> = (e) => {
+        e.preventDefault()
+        e.stopPropagation()
+
+        map.locate()
+    }
+
+    return (
+        <Control position='topleft'>
+            <div className='leaflet-bar'>
+                <a href='#' role='button' onClick={handleLocale}>
+                    <img className={styles.localeIcon} src={locateIcon} alt='locate' />
+                </a>
+            </div>
+        </Control>
+    )
+}
+
+export default LocateButton
\ No newline at end of file
diff --git a/front/src/components/index.ts b/front/src/components/index.ts
index 15d9eba..c6457f3 100644
--- a/front/src/components/index.ts
+++ b/front/src/components/index.ts
@@ -16,3 +16,4 @@ export { default as Poetry } from './Poetry'
 export { default as SelectDisposalTrashbox } from './SelectDisposalTrashbox'
 export { default as StarRating } from './StarRating'
 export { default as CardLayout } from './CardLayout'
+export { default as LocateButton } from './LocateButton'
diff --git a/front/src/pages/AddPage.tsx b/front/src/pages/AddPage.tsx
index 85c91e0..ec49ada 100644
--- a/front/src/pages/AddPage.tsx
+++ b/front/src/pages/AddPage.tsx
@@ -4,7 +4,7 @@ import { MapContainer, TileLayer } from 'react-leaflet'
 import { latLng } from 'leaflet'
 import { useNavigate } from 'react-router-dom'
 
-import { MapClickHandler, LocationMarker, CardLayout } from '../components'
+import { MapClickHandler, LocationMarker, CardLayout, LocateButton } from '../components'
 import { useAddAnnouncement } from '../hooks/api'
 import { categories, categoryNames } from '../assets/category'
 import { stations, lines, lineNames } from '../assets/metro'
@@ -85,11 +85,14 @@ function AddPage() {
                                 attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                                 url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
                             />
-                            {gotResponse(address) && <LocationMarker
-                                address={fallbackError(address)}
+
+                            <LocationMarker
+                                address={gotResponse(address) ? fallbackError(address) : 'Загрузка...'}
                                 position={addressPosition}
                                 setPosition={setAddressPosition}
-                            />}
+                            />
+
+                            <LocateButton setPosition={setAddressPosition} />
 
                             <MapClickHandler
                                 setPosition={setAddressPosition}
diff --git a/front/src/styles/Map.module.css b/front/src/styles/Map.module.css
new file mode 100644
index 0000000..9a26222
--- /dev/null
+++ b/front/src/styles/Map.module.css
@@ -0,0 +1,3 @@
+.localeIcon {
+    height: 22.5px;
+}
\ No newline at end of file