fix: boundary check in publishing form

Geo-Web-Project · Mar 19, 2024 · 66eb9f2 · 66eb9f2
1 parent 37a830c
commit 66eb9f2
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 78 deletions.
diff --git a/src/components/cadastre/Map.tsx b/src/components/cadastre/Map.tsx
@@ -297,7 +297,7 @@ function Map(props: MapProps) {
   }>({ id: "", timerId: null });
   const [showParcelList, setShowParcelList] = React.useState<boolean>(false);
   const [showSearchBar, setShowSearchBar] = useState<boolean>(false);
-  const [lastClickPoint, setLastClickPoint] = useState<LngLat | null>(null);
+  const [newAugmentCoords, setNewAugmentCoords] = useState<LngLat | null>(null);
 
   const { isMobile, isTablet } = useMediaQuery();
   const { parcelIdToCoords, flyToParcel } = useParcelNavigation();
@@ -748,7 +748,7 @@ function Map(props: MapProps) {
           coords.lat > Number(parcel.bboxS) &&
           coords.lat < Number(parcel.bboxN)
         ) {
-          setLastClickPoint(coords);
+          setNewAugmentCoords(coords);
         }
         break;
       case STATE.PARCEL_EDITING_BID:
@@ -964,7 +964,7 @@ function Map(props: MapProps) {
         window.plausible("Confirm Shape");
         break;
       case STATE.PUBLISHING_NEW_MARKER:
-        setLastClickPoint(null);
+        setNewAugmentCoords(null);
         break;
       default:
         if (isGridVisible) {
@@ -1067,6 +1067,8 @@ function Map(props: MapProps) {
           setNewParcel={setNewParcel}
           isValidClaim={isValidClaim}
           delay={interactionState === STATE.CLAIM_SELECTING}
+          newAugmentCoords={newAugmentCoords}
+          setNewAugmentCoords={setNewAugmentCoords}
         ></OffCanvasPanel>
       ) : null}
       <Col
@@ -1165,11 +1167,11 @@ function Map(props: MapProps) {
           })}
 
           {interactionState === STATE.PUBLISHING_NEW_MARKER &&
-            lastClickPoint && (
+            newAugmentCoords && (
               <Marker
                 key={`marker-add`}
-                longitude={lastClickPoint.lng}
-                latitude={lastClickPoint.lat}
+                longitude={newAugmentCoords.lng}
+                latitude={newAugmentCoords.lat}
                 anchor="bottom"
               >
                 <AugmentPin fill="#CF3232" />

diff --git a/src/components/cadastre/OffCanvasPanel.tsx b/src/components/cadastre/OffCanvasPanel.tsx
@@ -1,5 +1,6 @@
 import { useRef, useState, useEffect, useLayoutEffect } from "react";
 import { BigNumber } from "ethers";
+import { LngLat } from "mapbox-gl";
 import Container from "react-bootstrap/Container";
 import Button from "react-bootstrap/Button";
 import Image from "react-bootstrap/Image";
@@ -31,6 +32,8 @@ export type OffCanvasPanelProps = MapProps & {
   >;
   isValidClaim: boolean;
   delay: boolean;
+  newAugmentCoords: LngLat | null;
+  setNewAugmentCoords: React.Dispatch<React.SetStateAction<LngLat | null>>;
 };
 
 export interface ParcelFieldsToUpdate {

diff --git a/src/components/cadastre/publisher/PublishingForm.tsx b/src/components/cadastre/publisher/PublishingForm.tsx
@@ -6,7 +6,6 @@ import InputGroup from "react-bootstrap/InputGroup";
 import Spinner from "react-bootstrap/Spinner";
 import { AugmentType } from "./AugmentPublisher";
 import Stack from "react-bootstrap/Stack";
-import { useMap } from "react-map-gl";
 import ApproveAugmentButton from "./actions/ApproveAugmentButton";
 import { OffCanvasPanelProps } from "../OffCanvasPanel";
 import AugmentPin from "../AugmentPin";
@@ -42,8 +41,9 @@ export default function PublishingForm(props: PublishingFormProps) {
     worldContract,
     selectedParcelId,
     w3Client,
+    newAugmentCoords,
+    setNewAugmentCoords,
   } = props;
-  const { default: map } = useMap();
 
   const { tables } = useMUD();
 
@@ -63,8 +63,6 @@ export default function PublishingForm(props: PublishingFormProps) {
     audioVolume: undefined,
   });
 
-  const isLocationOn = false;
-
   const namespaceId = useMemo(() => {
     return stringToHex(Number(selectedParcelId).toString(), { size: 14 });
   }, [selectedParcelId]);
@@ -239,16 +237,16 @@ export default function PublishingForm(props: PublishingFormProps) {
   }
 
   useEffect(() => {
-    map?.on(`click`, (ev) => {
-      setAugmentArgs({
-        ...augmentArgs,
-        coords: {
-          lat: ev.lngLat.lat,
-          lon: ev.lngLat.lng,
-        },
-      });
+    setAugmentArgs({
+      ...augmentArgs,
+      coords: newAugmentCoords
+        ? {
+            lat: newAugmentCoords.lat,
+            lon: newAugmentCoords.lng,
+          }
+        : {},
     });
-  }, [map]);
+  }, [newAugmentCoords]);
 
   const spinner = (
     <Spinner
@@ -330,13 +328,21 @@ export default function PublishingForm(props: PublishingFormProps) {
         <Form.Group className="d-flex gap-3 mb-3">
           <InputGroup>
             <Button
-              variant={isLocationOn ? "secondary" : "info"}
+              variant={
+                augmentArgs.coords.lat && augmentArgs.coords.lon
+                  ? "secondary"
+                  : "info"
+              }
               className="d-flex align-items-center p-0 m-0 px-1"
-              disabled
-              // onClick={() => setIsLocationOn(!isLocationOn)}
+              disabled={!augmentArgs.coords.lat || !augmentArgs.coords.lon}
+              onClick={() => setNewAugmentCoords(null)}
             >
               <Image
-                src={isLocationOn ? "location-on.svg" : "location-off.svg"}
+                src={
+                  augmentArgs.coords.lat && augmentArgs.coords.lon
+                    ? "location-on.svg"
+                    : "location-off.svg"
+                }
                 alt="upload"
                 width={24}
               />

diff --git a/vite.config.ts.timestamp-1701355840815-a55d7958aaade.mjs b/vite.config.ts.timestamp-1701355840815-a55d7958aaade.mjs