Merge pull request #251 from wri/feat/TM-854-overview-project

[TM-854] overview project profile

src/components/elements/MapSidePanel/MapSidePanel.stories.tsx

@@ -25,8 +25,7 @@ export const Default: Story = {
     );
   },
   args: {
-    title: "Project Sites",
-    onSelectItem: console.log
+    title: "Project Sites"
   }
 };
 

src/components/elements/MapSidePanel/MapSidePanel.tsx

@@ -18,7 +18,6 @@ import { MENU_PLACEMENT_BOTTOM_BOTTOM } from "../Menu/MenuVariant";
 export interface MapSidePanelProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
   title: string;
   items: MapSidePanelItemProps[];
-  onSelectItem: (item: MapSidePanelItemProps) => void;
   onSearch?: (query: string) => void;
   onLoadMore?: () => void;
   emptyText?: string;
@@ -32,7 +31,6 @@ const MapSidePanel = ({
   title,
   items,
   className,
-  onSelectItem,
   onSearch,
   onLoadMore,
   emptyText,
@@ -192,7 +190,6 @@ const MapSidePanel = ({
                 status={item.status}
                 onClick={() => {
                   setSelected(item);
-                  onSelectItem(item);
                 }}
                 setClickedButton={setClickedButton}
                 isSelected={selected?.uuid === item.uuid}

src/components/elements/TooltipMap/TooltipMap.tsx

@@ -124,16 +124,6 @@ const TooltipMap = (props: TooltipMapProps) => {
           </button>
         </div>
       )}
-      {type === "goTo" && (
-        <div className="flex w-full items-center justify-center">
-          <button className="flex items-center justify-center gap-1" onClick={() => goToRelatedSiteProfile()}>
-            <Icon name={IconNames.CLICK} className="h-4 w-4" />
-            <Text variant="text-10-light" className="italic text-black">
-              click to open site profile page
-            </Text>
-          </button>
-        </div>
-      )}
     </div>
   );
 };

src/components/extensive/EntityMapAndGalleryCard/EntityMapAndGalleryCard.tsx

@@ -1,14 +1,23 @@
 import { useT } from "@transifex/react";
+import { useRouter } from "next/router";
 import { useMemo, useState } from "react";
 import { Else, If, Then } from "react-if";
 
 import EmptyState from "@/components/elements/EmptyState/EmptyState";
 import ImageGallery from "@/components/elements/ImageGallery/ImageGallery";
-import Map from "@/components/elements/Map-mapbox/Map";
+import { BBox } from "@/components/elements/Map-mapbox/GeoJSON";
+import { useMap } from "@/components/elements/Map-mapbox/hooks/useMap";
+import { MapContainer } from "@/components/elements/Map-mapbox/Map";
+import { mapPolygonData } from "@/components/elements/Map-mapbox/utils";
 import { IconNames } from "@/components/extensive/Icon/Icon";
 import PageCard from "@/components/extensive/PageElements/Card/PageCard";
 import { getEntitiesOptions } from "@/constants/options/entities";
-import { useDeleteV2FilesUUID, useGetV2MODELUUIDFiles } from "@/generated/apiComponents";
+import {
+  GetV2TypeEntityResponse,
+  useDeleteV2FilesUUID,
+  useGetV2MODELUUIDFiles,
+  useGetV2TypeEntity
+} from "@/generated/apiComponents";
 import { useGetReadableEntityName } from "@/hooks/entity/useGetReadableEntityName";
 import { useDate } from "@/hooks/useDate";
 import { useGetImagesGeoJSON } from "@/hooks/useImageGeoJSON";
@@ -34,7 +43,10 @@ const EntityMapAndGalleryCard = ({
   const { format } = useDate();
   const [pagination, setPagination] = useState({ page: 1, pageSize: 10 });
   const [filter, setFilter] = useState<{ key: string; value: string }>();
+  const mapFunctions = useMap();
   const { getReadableEntityName } = useGetReadableEntityName();
+  const router = useRouter();
+  const projectUUID = router.query.uuid as string;
   const queryParams: any = {
     page: pagination.page,
     per_page: pagination.pageSize,
@@ -44,6 +56,17 @@ const EntityMapAndGalleryCard = ({
     queryParams[filter?.key] = filter?.value;
   }
 
+  const { data: sitePolygonData } = useGetV2TypeEntity<GetV2TypeEntityResponse>({
+    queryParams: {
+      uuid: projectUUID,
+      type: modelName
+    }
+  });
+
+  const mapBbox = sitePolygonData?.bbox as BBox;
+
+  const polygonDataMap = mapPolygonData(sitePolygonData?.polygonsData);
+
   const { data, refetch } = useGetV2MODELUUIDFiles({
     // Currently only projects, sites, nurseries, projectReports, nurseryReports and siteReports are set up
     pathParams: { model: modelName, uuid: modelUUID },
@@ -90,11 +113,18 @@ const EntityMapAndGalleryCard = ({
   return (
     <>
       <PageCard title={`${modelTitle} ${t("Area")}`}>
-        <Map
+        <MapContainer
+          polygonsData={polygonDataMap}
+          sitePolygonData={sitePolygonData?.polygonsData}
+          bbox={mapBbox}
           className="rounded-lg"
           geojson={geoJSON}
           imageLayerGeojson={imagesGeoJson}
           onDeleteImage={uuid => deleteFile({ pathParams: { uuid } })}
+          mapFunctions={mapFunctions}
+          showLegend
+          hasControls
+          showPopups
         />
       </PageCard>
       <If

src/pages/project/[uuid]/components/ProjectArea.tsx

@@ -17,7 +17,6 @@ interface ProjectAreaProps {
 const ProjectArea = ({ project }: ProjectAreaProps) => {
   const t = useT();
   const { format } = useDate();
-  const [setSelected] = useState<any>();
   const [polygonsData, setPolygonsData] = useState<any[]>([]);
   const [polygonDataMap, setPolygonDataMap] = useState<any>({});
   const [projectBbox, setProjectBbox] = useState<BBox>();
@@ -88,7 +87,6 @@ const ProjectArea = ({ project }: ProjectAreaProps) => {
           })) || []) as any[]
         }
         mapFunctions={mapFunctions}
-        onSelectItem={setSelected}
         className="absolute z-20 h-[500px] w-[23vw] bg-[#ffffff12] p-8"
         emptyText={t("No polygons are available.")}
         checkedValues={checkedValues}