feat: add parcel list modal

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,8 +171,8 @@ export type MapProps = {
   paymentToken: NativeAssetSuperToken;
   sfFramework: Framework;
   setPortfolioNeedActionCount: React.Dispatch<React.SetStateAction<number>>;
-  portfolioParcelCenter: Point | null;
-  setPortfolioParcelCenter: React.Dispatch<React.SetStateAction<Point | null>>;
+  parcelNavigationCenter: Point | null;
+  setParcelNavigationCenter: React.Dispatch<React.SetStateAction<Point | null>>;
   isPortfolioToUpdate: boolean;
   auctionStart: BigNumber;
   auctionEnd: BigNumber;
@@ -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,17 @@ function Map(props: MapProps) {
           <Image src={"satellite_ic.png"} width={30} />
         </Button>
       </ButtonGroup>
+      <Button
+        className="bg-purple 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}
+      />
     </>
   );
 }

components/cards/StreamingInfo.tsx

@@ -30,7 +30,7 @@ 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>>;
+  setParcelNavigationCenter: React.Dispatch<React.SetStateAction<Point | null>>;
   isPortfolioToUpdate: boolean;
   setIsPortfolioToUpdate: React.Dispatch<React.SetStateAction<boolean>>;
 };

components/parcels/Foreclosure.tsx

@@ -0,0 +1,209 @@
+import { useState, useEffect } from "react";
+import { BigNumber } from "ethers";
+import { gql, useQuery } from "@apollo/client";
+import { Container } from "react-bootstrap";
+import { Framework } from "@superfluid-finance/sdk-core";
+import type { Point } from "@turf/turf";
+import * as turf from "@turf/turf";
+import { GeoWebContent } from "@geo-web/content";
+import { Contracts } from "@geo-web/sdk/dist/contract/types";
+import { PCOLicenseDiamondFactory } from "@geo-web/sdk/dist/contract/index";
+import { MAX_LIST_SIZE, Parcel, ParcelsQuery } from "./ParcelList";
+import ParcelTable from "./ParcelTable";
+import { STATE } from "../Map";
+import { getParcelContent } from "../../lib/utils";
+
+interface ForeclosureProps {
+  sfFramework: Framework;
+  geoWebContent: GeoWebContent;
+  registryContract: Contracts["registryDiamondContract"];
+  setSelectedParcelId: React.Dispatch<React.SetStateAction<string>>;
+  setInteractionState: React.Dispatch<React.SetStateAction<STATE>>;
+  handleCloseModal: () => void;
+  setParcelNavigationCenter: React.Dispatch<React.SetStateAction<Point | null>>;
+  shouldRefetch: boolean;
+  setShouldRefetch: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+type Bid = Parcel & {
+  timestamp: number;
+  licenseOwner: string;
+};
+
+const foreclosureQuery = gql`
+  query Foreclosure($skip: Int) {
+    geoWebParcels(
+      first: 1000
+      orderBy: currentBid__timestamp
+      orderDirection: desc
+      skip: $skip
+    ) {
+      id
+      createdAtBlock
+      bboxN
+      bboxS
+      bboxE
+      bboxW
+      licenseOwner
+      licenseDiamond
+      currentBid {
+        forSalePrice
+        contributionRate
+        timestamp
+      }
+    }
+  }
+`;
+
+function Foreclosure(props: ForeclosureProps) {
+  const {
+    sfFramework,
+    geoWebContent,
+    registryContract,
+    setSelectedParcelId,
+    setInteractionState,
+    handleCloseModal,
+    setParcelNavigationCenter,
+    shouldRefetch,
+    setShouldRefetch,
+  } = props;
+
+  const [parcels, setParcels] = useState<Bid[] | null>(null);
+
+  const { data, refetch, networkStatus } = useQuery<ParcelsQuery>(
+    foreclosureQuery,
+    {
+      variables: {
+        skip: 0 * MAX_LIST_SIZE,
+      },
+      notifyOnNetworkStatusChange: true,
+    }
+  );
+
+  useEffect(() => {
+    if (!data) {
+      return;
+    }
+
+    if (data.geoWebParcels.length === 0) {
+      setParcels([]);
+      return;
+    }
+
+    let isMounted = true;
+
+    (async () => {
+      const _parcels: Bid[] = [];
+      const promises = [];
+
+      for (const parcel of data.geoWebParcels) {
+        const licenseDiamondAddress = parcel.licenseDiamond;
+        const licenseDiamondContract = PCOLicenseDiamondFactory.connect(
+          licenseDiamondAddress,
+          sfFramework.settings.provider
+        );
+
+        const promiseChain = (async () => {
+          if (_parcels.length === MAX_LIST_SIZE) {
+            return;
+          }
+
+          const isPayerBidActive =
+            await licenseDiamondContract.isPayerBidActive();
+
+          if (!isPayerBidActive) {
+            const parcelId = parcel.id;
+            const createdAtBlock = parcel.createdAtBlock;
+            const currentBid = parcel.currentBid;
+            const forSalePrice = BigNumber.from(currentBid.forSalePrice);
+            const timestamp = currentBid.timestamp;
+            const poly = turf.bboxPolygon([
+              parcel.bboxW,
+              parcel.bboxS,
+              parcel.bboxE,
+              parcel.bboxN,
+            ]);
+            const center = turf.center(poly);
+            const parcelContent = await getParcelContent(
+              registryContract.address.toLowerCase(),
+              geoWebContent,
+              parcel.id,
+              parcel.licenseOwner
+            );
+            const name =
+              parcelContent && parcelContent.name
+                ? parcelContent.name
+                : `Parcel ${parcel.id}`;
+
+            _parcels.push({
+              parcelId: parcelId,
+              status: "In Foreclosure",
+              createdAtBlock: createdAtBlock,
+              name: name,
+              timestamp: timestamp,
+              price: forSalePrice,
+              center: center.geometry,
+              licenseOwner: parcel.licenseOwner,
+            });
+          }
+        })();
+        promises.push(promiseChain);
+      }
+
+      await Promise.allSettled(promises);
+
+      if (isMounted) {
+        const sorted = sortParcels(_parcels);
+
+        setParcels(sorted);
+      }
+    })();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [data]);
+
+  useEffect(() => {
+    if (!shouldRefetch) {
+      return;
+    }
+
+    refetch({
+      skip: 0,
+    });
+
+    setShouldRefetch(false);
+  }, [shouldRefetch]);
+
+  const sortParcels = (parcels: Bid[]): Bid[] => {
+    const sorted = [...parcels].sort((a, b) => {
+      let result = 0;
+
+      result = a.timestamp > b.timestamp ? -1 : 1;
+
+      return result;
+    });
+
+    return sorted;
+  };
+
+  const handleAction = (parcel: Parcel): void => {
+    handleCloseModal();
+    setInteractionState(STATE.PARCEL_SELECTED);
+    setSelectedParcelId(parcel.parcelId);
+    setParcelNavigationCenter(parcel.center);
+  };
+
+  return (
+    <Container>
+      <ParcelTable
+        parcels={parcels}
+        networkStatus={networkStatus}
+        handleAction={handleAction}
+      />
+    </Container>
+  );
+}
+
+export default Foreclosure;