Merge pull request #398 from tnrdd/feat/390

feat: add parcel list modal
Geo-Web-Project · Mar 10, 2023 · ad373a8 · ad373a8
2 parents 4bcc464 + 71f0c24
commit ad373a8
Show file tree

Hide file tree

Showing 25 changed files with 1,942 additions and 113 deletions.
diff --git a/components/Map.tsx b/components/Map.tsx
@@ -41,6 +41,7 @@ import * as turf from "@turf/turf";
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import type { InvocationConfig } from "@web3-storage/upload-client";
+import ParcelList from "./parcels/ParcelList";
 
 export const ZOOM_GRID_LEVEL = 17;
 const GRID_DIM_LAT = 140;
@@ -170,14 +171,14 @@ export type MapProps = {
   paymentToken: NativeAssetSuperToken;
   sfFramework: Framework;
   setPortfolioNeedActionCount: React.Dispatch<React.SetStateAction<number>>;
-  portfolioParcelCenter: Point | null;
-  setPortfolioParcelCenter: React.Dispatch<React.SetStateAction<Point | null>>;
-  isPortfolioToUpdate: boolean;
+  parcelNavigationCenter: Point | null;
+  setParcelNavigationCenter: React.Dispatch<React.SetStateAction<Point | null>>;
+  shouldRefetchParcelsData: boolean;
   auctionStart: BigNumber;
   auctionEnd: BigNumber;
   startingBid: BigNumber;
   endingBid: BigNumber;
-  setIsPortfolioToUpdate: React.Dispatch<React.SetStateAction<boolean>>;
+  setShouldRefetchParcelsData: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
 const MAP_STYLE_KEY = "storedMapStyleName";
@@ -199,7 +200,7 @@ function Map(props: MapProps) {
     setSelectedParcelId,
     interactionState,
     setInteractionState,
-    portfolioParcelCenter,
+    parcelNavigationCenter,
   } = props;
   const { data, fetchMore, refetch } = useQuery<PolygonQuery>(query, {
     variables: {
@@ -260,11 +261,12 @@ function Map(props: MapProps) {
   const [interactiveLayerIds, setInteractiveLayerIds] = React.useState<
     string[]
   >([]);
-  const [invalidLicenseId, setInvalidLicenseId] = useState("");
+  const [invalidLicenseId, setInvalidLicenseId] = React.useState("");
   const [newParcel, setNewParcel] = React.useState<{
     id: string;
     timerId: number | null;
   }>({ id: "", timerId: null });
+  const [showParcelList, setShowParcelList] = React.useState<boolean>(false);
 
   const router = useRouter();
 
@@ -751,10 +753,10 @@ function Map(props: MapProps) {
   }, [data]);
 
   useEffect(() => {
-    if (portfolioParcelCenter) {
+    if (parcelNavigationCenter) {
       flyToLocation({
-        longitude: portfolioParcelCenter.coordinates[0],
-        latitude: portfolioParcelCenter.coordinates[1],
+        longitude: parcelNavigationCenter.coordinates[0],
+        latitude: parcelNavigationCenter.coordinates[1],
         zoom: ZOOM_GRID_LEVEL,
         duration: 500,
         padding: {
@@ -764,11 +766,11 @@ function Map(props: MapProps) {
       });
 
       setSelectedParcelCoords({
-        x: portfolioParcelCenter.coordinates[0],
-        y: portfolioParcelCenter.coordinates[1],
+        x: parcelNavigationCenter.coordinates[0],
+        y: parcelNavigationCenter.coordinates[1],
       });
     }
-  }, [portfolioParcelCenter]);
+  }, [parcelNavigationCenter]);
 
   return (
     <>
@@ -915,6 +917,18 @@ function Map(props: MapProps) {
           <Image src={"satellite_ic.png"} width={30} />
         </Button>
       </ButtonGroup>
+      <Button
+        variant="primary"
+        className="p-0 border-0 parcel-list-btn"
+        onClick={() => setShowParcelList(true)}
+      >
+        <Image src="list.svg" alt="parcel list" width={38} />
+      </Button>
+      <ParcelList
+        showParcelList={showParcelList}
+        handleCloseModal={() => setShowParcelList(false)}
+        {...props}
+      />
     </>
   );
 }

diff --git a/components/cards/ActionForm.tsx b/components/cards/ActionForm.tsx
@@ -76,7 +76,7 @@ export function ActionForm(props: ActionFormProps) {
     requiredPayment,
     spender,
     hasOutstandingBid = false,
-    setIsPortfolioToUpdate,
+    setShouldRefetchParcelsData,
     minForSalePrice,
     paymentToken,
     setShouldParcelContentUpdate,
@@ -277,7 +277,7 @@ export function ActionForm(props: ActionFormProps) {
     }
 
     setInteractionState(STATE.PARCEL_SELECTED);
-    setIsPortfolioToUpdate(true);
+    setShouldRefetchParcelsData(true);
   }
 
   const isInvalid = isForSalePriceInvalid || !displayNewForSalePrice;

diff --git a/components/cards/OutstandingBidView.tsx b/components/cards/OutstandingBidView.tsx
@@ -48,7 +48,7 @@ function OutstandingBidView(props: OutstandingBidViewProps) {
     perSecondFeeDenominator,
     setInteractionState,
     setSelectedParcelId,
-    setIsPortfolioToUpdate,
+    setShouldRefetchParcelsData,
     setParcelFieldsToUpdate,
     sfFramework,
     paymentToken,
@@ -179,7 +179,7 @@ function OutstandingBidView(props: OutstandingBidViewProps) {
     }
 
     setIsActing(false);
-    setIsPortfolioToUpdate(true);
+    setShouldRefetchParcelsData(true);
     setParcelFieldsToUpdate({
       forSalePrice: newForSalePriceDisplay !== existingForSalePriceDisplay,
       licenseOwner: true,
@@ -220,7 +220,7 @@ function OutstandingBidView(props: OutstandingBidViewProps) {
     setInteractionState(STATE.PARCEL_SELECTED);
 
     setSelectedParcelId("");
-    setIsPortfolioToUpdate(true);
+    setShouldRefetchParcelsData(true);
     setSelectedParcelId(selectedParcelId);
   }
 

diff --git a/components/cards/ParcelInfo.tsx b/components/cards/ParcelInfo.tsx
@@ -407,7 +407,7 @@ function ParcelInfo(props: ParcelInfoProps) {
             </Col>
             <Col className="d-flex justify-content-end gap-2 text-end pt-2 mx-2">
               <OverlayTrigger
-                key="top"
+                key="chat"
                 placement="top"
                 overlay={<Tooltip id={`tooltip-key`}>Open Parcel Chat</Tooltip>}
               >
@@ -421,7 +421,7 @@ function ParcelInfo(props: ParcelInfoProps) {
                 </Button>
               </OverlayTrigger>
               <OverlayTrigger
-                key="top"
+                key="browser"
                 placement="top"
                 overlay={
                   <Tooltip id={`tooltip-key`}>Open in Spatial Browser</Tooltip>

diff --git a/components/cards/PlaceBidAction.tsx b/components/cards/PlaceBidAction.tsx
@@ -52,7 +52,7 @@ function PlaceBidAction(props: PlaceBidActionProps) {
     perSecondFeeDenominator,
     licenseDiamondContract,
     setInteractionState,
-    setIsPortfolioToUpdate,
+    setShouldRefetchParcelsData,
     setParcelFieldsToUpdate,
     sfFramework,
     paymentToken,
@@ -203,7 +203,7 @@ function PlaceBidAction(props: PlaceBidActionProps) {
     }
 
     setIsActing(false);
-    setIsPortfolioToUpdate(true);
+    setShouldRefetchParcelsData(true);
     setInteractionState(STATE.PARCEL_SELECTED);
     setParcelFieldsToUpdate({
       forSalePrice: displayNewForSalePrice !== displayCurrentForSalePrice,

diff --git a/components/cards/RejectBidAction.tsx b/components/cards/RejectBidAction.tsx
@@ -66,7 +66,7 @@ function RejectBidAction(props: RejectBidActionProps) {
     bidTimestamp,
     bidForSalePrice,
     setInteractionState,
-    setIsPortfolioToUpdate,
+    setShouldRefetchParcelsData,
     setParcelFieldsToUpdate,
     sfFramework,
     paymentToken,
@@ -293,7 +293,7 @@ function RejectBidAction(props: RejectBidActionProps) {
     }
 
     setIsActing(false);
-    setIsPortfolioToUpdate(true);
+    setShouldRefetchParcelsData(true);
     setInteractionState(STATE.PARCEL_SELECTED);
     setParcelFieldsToUpdate({
       forSalePrice: displayNewForSalePrice !== displayCurrentForSalePrice,

diff --git a/components/cards/StreamingInfo.tsx b/components/cards/StreamingInfo.tsx
@@ -30,9 +30,9 @@ type StreamingInfoProps = {
   setSelectedParcelId: React.Dispatch<React.SetStateAction<string>>;
   setInteractionState: React.Dispatch<React.SetStateAction<STATE>>;
   setPortfolioNeedActionCount: React.Dispatch<React.SetStateAction<number>>;
-  setPortfolioParcelCenter: React.Dispatch<React.SetStateAction<Point | null>>;
-  isPortfolioToUpdate: boolean;
-  setIsPortfolioToUpdate: React.Dispatch<React.SetStateAction<boolean>>;
+  setParcelNavigationCenter: React.Dispatch<React.SetStateAction<Point | null>>;
+  shouldRefetchParcelsData: boolean;
+  setShouldRefetchParcelsData: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
 function StreamingInfo(props: StreamingInfoProps) {