From 74f481135cd82873d4d8860a0493037ac5d14b68 Mon Sep 17 00:00:00 2001
From: arielherself <ariel@arielherself.xyz>
Date: Sat, 30 Dec 2023 11:14:49 +0800
Subject: [PATCH] feat: clear map button

---
 src/SimulateClick.js |  6 +++---
 src/UMap.js          | 13 ++++++++++---
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/SimulateClick.js b/src/SimulateClick.js
index 661ed86..4d4a2c2 100644
--- a/src/SimulateClick.js
+++ b/src/SimulateClick.js
@@ -1,13 +1,13 @@
 import {Button, IconButton, ButtonGroup, Menu, MenuItem, Stack} from "@mui/joy";
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import React from "react";
-import {Add, LocationOn} from "@mui/icons-material";
+import {Delete, LocationOn} from "@mui/icons-material";
 
-export default function SimulateClick({isLocated,isCandEmpty,relocator}) {
+export default function SimulateClick({isLocated,isMarkersEmpty,relocator,clearMarkers}) {
     return (
         <ButtonGroup buttonFlex={1} aria-label="flex button group" sx={{zIndex: 'modal'}}>
             <Button disabled={isLocated} variant={'solid'} color={'warning'} startDecorator={<LocationOn />} onClick={relocator}>Relocate</Button>
-            <Button disabled={isCandEmpty} variant={'solid'} color={'primary'} startDecorator={<Add />}>Add</Button>
+            <Button disabled={isMarkersEmpty} variant={'solid'} color={'danger'} startDecorator={<Delete />} onClick={clearMarkers}>Clear</Button>
         </ButtonGroup>
     );
 }
\ No newline at end of file
diff --git a/src/UMap.js b/src/UMap.js
index 4c94e8b..59eceb7 100644
--- a/src/UMap.js
+++ b/src/UMap.js
@@ -16,7 +16,9 @@ class Markers extends Component {
     // A location is a [lat,lon] pair.
     constructor(props) {
         super(props);
-        this.state = {markers: [], candMarkers: [], candEmpty: true, polylines: []};
+        this.state = {markers: [], candMarkers: [], mksEmpty: true, candEmpty: true, polylines: []};
+        this.clearMarkers = this.clearMarkers.bind(this);
+        this.clearCandMarkers = this.clearCandMarkers.bind(this);
     }
 
     render() {
@@ -38,6 +40,7 @@ class Markers extends Component {
         this.setState((prev) => ({
             markers: [...prev.markers, [lat, lng]],
             candMarkers: prev.candMarkers,
+            mksEmpty: false,
             candEmpty: prev.candEmpty,
             polylines: prev.polylines,
         }));
@@ -48,6 +51,7 @@ class Markers extends Component {
         this.setState((prev) => ({
             candMarkers: [...prev.candMarkers, [lat, lng]],
             markers: prev.markers,
+            mksEmpty: prev.mksEmpty,
             candEmpty: false,
             polylines: prev.polylines,
         }));
@@ -58,6 +62,7 @@ class Markers extends Component {
         this.setState((prev) => ({
             markers: [],
             candMarkers: prev.candMarkers,
+            mksEmpty: true,
             candEmpty: prev.candEmpty,
             polylines: [],
         }));
@@ -68,6 +73,7 @@ class Markers extends Component {
         this.setState((prev) => ({
             markers: prev.markers,
             candMarkers: [],
+            mksEmpty: prev.mksEmpty,
             candEmpty: true,
             polylines: prev.polylines,
         }));
@@ -93,6 +99,7 @@ class Markers extends Component {
         this.setState((prev) => ({
             markers: prev.markers,
             candMarkers: prev.candMarkers,
+            mksEmpty: prev.mksEmpty,
             candEmpty: prev.candEmpty,
             polylines: clear ? pl : [...pl, ...prev.polylines], // mind the ordering
         }));
@@ -105,7 +112,7 @@ function MapClickHandler({mks,focusUpdater,locator,locker}) {
         click: (e) => {
             map.locate();
             const {lat,lng}=e.latlng;
-            console.info(`Clicking on ${lat} ${lng}`);
+            sill(`Clicking on ${lat} ${lng}`);
             mks.current.addMarker(lat, lng);
             post('POST', 'click', mks.current.state.markers.slice(-2)).then((response) => {
                 // TODO: real functionality
@@ -252,7 +259,7 @@ export default function UMap() {
                 <ViewportChange/>
             </MapContainer>
             <Sheet sx={{position: 'absolute', top: '20px', right: '10vw', zIndex: 'modal'}}>
-                <SimulateClick isLocated={located} relocator={relo} isCandEmpty={markersRef.current ? markersRef.current.state.candEmpty : true}/>
+                <SimulateClick isLocated={located} relocator={relo} isMarkersEmpty={markersRef.current ? markersRef.current.state.mksEmpty : true} clearMarkers={markersRef.current ? markersRef.current.clearMarkers : null}/>
                 <LocationSearch nb={nearbyName} mks={markersRef} focus={focus}/>
             </Sheet>
         </Sheet>