[TM-1343] get data for countries in popup (#562)

* [TM-1343] get data for countries in popup * [TM-1343] remove some anys * TM-1343 fix tooltip country design * TM-1343 fix build * [TM-1343] fix if --------- Co-authored-by: diego-morales-flores-1996 <[email protected]>
wri · Oct 15, 2024 · e697141 · e697141
1 parent b8d8111
commit e697141
Show file tree

Hide file tree

Showing 9 changed files with 323 additions and 80 deletions.
diff --git a/src/components/elements/Map-mapbox/components/DashboardPopup.tsx b/src/components/elements/Map-mapbox/components/DashboardPopup.tsx
@@ -1,15 +1,69 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useEffect, useState } from "react";
 
+import { fetchGetV2DashboardTotalSectionHeaderCountry } from "@/generated/apiComponents";
 import TooltipGridMap from "@/pages/dashboard/components/TooltipGridMap";
+import { createQueryParams } from "@/utils/dashboardUtils";
 
 const client = new QueryClient();
-
+type Item = {
+  id: string;
+  title: string;
+  value: string;
+};
 export const DashboardPopup = (event: any) => {
   const isoCountry = event?.feature?.properties?.iso;
   const countryName = event?.feature?.properties?.country;
+  const { addPopupToMap } = event;
+  const [items, setItems] = useState<Item[]>([]);
+  useEffect(() => {
+    async function fetchData() {
+      const parsedFilters = {
+        programmes: [],
+        country: isoCountry,
+        "organisations.type": [],
+        landscapes: []
+      };
+      const queryParams: any = createQueryParams(parsedFilters);
+      const response: any = await fetchGetV2DashboardTotalSectionHeaderCountry({ queryParams: queryParams });
+      if (response) {
+        const parsedItems = [
+          {
+            id: "1",
+            title: "No. of Projects",
+            value: ((response.total_enterprise_count || 0) + (response.total_non_profit_count || 0)).toString()
+          },
+          {
+            id: "2",
+            title: "Trees Planted",
+            value: (response.total_trees_restored || 0).toString()
+          },
+          {
+            id: "3",
+            title: "Restoration Hectares",
+            value: (response.total_hectares_restored || 0).toString()
+          },
+          {
+            id: "4",
+            title: "Jobs Created",
+            value: (response.total_entries || 0).toString()
+          }
+        ];
+        setItems(parsedItems);
+        addPopupToMap();
+      } else {
+        console.error("No data returned from the API");
+      }
+    }
+    fetchData();
+  }, [isoCountry]);
   return (
-    <QueryClientProvider client={client}>
-      <TooltipGridMap label={countryName} learnMore={true} isoCountry={isoCountry} />
-    </QueryClientProvider>
+    <>
+      {items && (
+        <QueryClientProvider client={client}>
+          <TooltipGridMap label={countryName} learnMore={true} isoCountry={isoCountry} items={items} />
+        </QueryClientProvider>
+      )}
+    </>
   );
 };
diff --git a/src/components/elements/Map-mapbox/utils.ts b/src/components/elements/Map-mapbox/utils.ts
@@ -26,6 +26,23 @@ import { getPulsingDot } from "./pulsing.dot";
 const GEOSERVER = process.env.NEXT_PUBLIC_GEOSERVER_URL;
 const WORKSPACE = process.env.NEXT_PUBLIC_GEOSERVER_WORKSPACE;
 
+type EditPolygon = {
+  isOpen: boolean;
+  uuid: string;
+  primary_uuid?: string;
+};
+
+type PopupComponentProps = {
+  feature: mapboxgl.MapboxGeoJSONFeature;
+  popup: mapboxgl.Popup;
+  setPolygonFromMap: (polygon: any) => void;
+  sitePolygonData: SitePolygonsDataResponse | undefined;
+  type: TooltipType;
+  editPolygon: EditPolygon;
+  setEditPolygon: (value: EditPolygon) => void;
+  addPopupToMap?: () => void;
+};
+
 export const getFeatureProperties = <T extends any>(properties: any, key: string): T | undefined => {
   return properties[key] ?? properties[`user_${key}`];
 };
@@ -121,38 +138,54 @@ export const loadLayersInMap = (map: mapboxgl.Map, polygonsData: Record<string,
 
 const handleLayerClick = (
   e: any,
-  popupComponent: any,
+  PopupComponent: any,
   map: mapboxgl.Map,
   setPolygonFromMap: any,
   sitePolygonData: SitePolygonsDataResponse | undefined,
   type: TooltipType,
   editPolygon: { isOpen: boolean; uuid: string; primary_uuid?: string },
-  setEditPolygon: (value: { isOpen: boolean; uuid: string; primary_uuid?: string }) => void
+  setEditPolygon: (value: { isOpen: boolean; uuid: string; primary_uuid?: string }) => void,
+  layerName?: string
 ) => {
   removePopups("POLYGON");
-  const { lng, lat } = e.lngLat;
-  const feature = e.features[0];
 
-  let popupContent = document.createElement("div");
+  const { lngLat, features } = e;
+  const feature = features?.[0];
+
+  if (!feature) {
+    console.warn("No feature found in click event");
+    return;
+  }
+
+  const popupContent = document.createElement("div");
   popupContent.className = "popup-content-map";
   const root = createRoot(popupContent);
 
-  const newPopup = new mapboxgl.Popup({ className: "popup-map" })
-    .setLngLat([lng, lat])
-    .setDOMContent(popupContent)
-    .addTo(map);
+  const createPopup = (lngLat: mapboxgl.LngLat) =>
+    new mapboxgl.Popup({ className: "popup-map" }).setLngLat(lngLat).setDOMContent(popupContent);
+
+  const newPopup = createPopup(lngLat);
+
+  const isWorldCountriesLayer = layerName === LAYERS_NAMES.WORLD_COUNTRIES;
+
+  const commonProps: PopupComponentProps = {
+    feature,
+    popup: newPopup,
+    setPolygonFromMap,
+    sitePolygonData,
+    type,
+    editPolygon,
+    setEditPolygon
+  };
+
+  if (isWorldCountriesLayer) {
+    const addPopupToMap = () => newPopup.addTo(map);
+    root.render(createElement(PopupComponent, { ...commonProps, addPopupToMap }));
+  } else {
+    newPopup.addTo(map);
+    root.render(createElement(PopupComponent, commonProps));
+  }
 
-  root.render(
-    createElement(popupComponent, {
-      feature,
-      popup: newPopup,
-      setPolygonFromMap,
-      sitePolygonData,
-      type,
-      editPolygon,
-      setEditPolygon
-    })
-  );
   popupAttachedMap["POLYGON"].push(newPopup);
 };
 
@@ -389,7 +422,8 @@ export const addPopupToLayer = (
             sitePolygonData,
             type,
             editPolygon,
-            setEditPolygon
+            setEditPolygon,
+            name
           );
         }
       });

diff --git a/src/generated/apiComponents.ts b/src/generated/apiComponents.ts
@@ -33912,6 +33912,97 @@ export const useGetV2DashboardTotalSectionHeader = <TData = GetV2DashboardTotalS
   );
 };
 
+export type GetV2DashboardTotalSectionHeaderCountryQueryParams = {
+  /**
+   * search term to use on the collection
+   */
+  search?: string;
+  /**
+   * multiple filters can be applied. syntax is ?filter[foo]=value1,value2$filter[bar]=value3
+   */
+  filter?: string;
+};
+
+export type GetV2DashboardTotalSectionHeaderCountryError = Fetcher.ErrorWrapper<undefined>;
+
+export type GetV2DashboardTotalSectionHeaderCountryResponse = {
+  data?: {
+    /**
+     * Total number of non profit projects.
+     */
+    total_non_profit_count?: number;
+    /**
+     * Total number of enterprise projects.
+     */
+    total_enterprise_count?: number;
+    /**
+     * Total number of jobs created.
+     */
+    total_entries?: number;
+    /**
+     * Total number of hectares restored.
+     */
+    total_hectares_restored?: number;
+    /**
+     * Total number of trees restored.=
+     */
+    total_trees_restored?: number;
+  };
+};
+
+export type GetV2DashboardTotalSectionHeaderCountryVariables = {
+  queryParams?: GetV2DashboardTotalSectionHeaderCountryQueryParams;
+} & ApiContext["fetcherOptions"];
+
+/**
+ * This endpoint returns totals and metrics related to non-profit projects, enterprise projects, jobs created, hectares restored, trees restored, and trees restored goal.
+ */
+export const fetchGetV2DashboardTotalSectionHeaderCountry = (
+  variables: GetV2DashboardTotalSectionHeaderCountryVariables,
+  signal?: AbortSignal
+) =>
+  apiFetch<
+    GetV2DashboardTotalSectionHeaderCountryResponse,
+    GetV2DashboardTotalSectionHeaderCountryError,
+    undefined,
+    {},
+    GetV2DashboardTotalSectionHeaderCountryQueryParams,
+    {}
+  >({ url: "/v2/dashboard/total-section-header/country", method: "get", ...variables, signal });
+
+/**
+ * This endpoint returns totals and metrics related to non-profit projects, enterprise projects, jobs created, hectares restored, trees restored, and trees restored goal.
+ */
+export const useGetV2DashboardTotalSectionHeaderCountry = <TData = GetV2DashboardTotalSectionHeaderCountryResponse>(
+  variables: GetV2DashboardTotalSectionHeaderCountryVariables,
+  options?: Omit<
+    reactQuery.UseQueryOptions<
+      GetV2DashboardTotalSectionHeaderCountryResponse,
+      GetV2DashboardTotalSectionHeaderCountryError,
+      TData
+    >,
+    "queryKey" | "queryFn"
+  >
+) => {
+  const { fetcherOptions, queryOptions, queryKeyFn } = useApiContext(options);
+  return reactQuery.useQuery<
+    GetV2DashboardTotalSectionHeaderCountryResponse,
+    GetV2DashboardTotalSectionHeaderCountryError,
+    TData
+  >(
+    queryKeyFn({
+      path: "/v2/dashboard/total-section-header/country",
+      operationId: "getV2DashboardTotalSectionHeaderCountry",
+      variables
+    }),
+    ({ signal }) => fetchGetV2DashboardTotalSectionHeaderCountry({ ...fetcherOptions, ...variables }, signal),
+    {
+      ...options,
+      ...queryOptions
+    }
+  );
+};
+
 export type GetV2DashboardActiveCountriesQueryParams = {
   /**
    * search term to use on the collection
@@ -36373,6 +36464,11 @@ export type QueryOperation =
       operationId: "getV2DashboardTotalSectionHeader";
       variables: GetV2DashboardTotalSectionHeaderVariables;
     }
+  | {
+      path: "/v2/dashboard/total-section-header/country";
+      operationId: "getV2DashboardTotalSectionHeaderCountry";
+      variables: GetV2DashboardTotalSectionHeaderCountryVariables;
+    }
   | {
       path: "/v2/dashboard/active-countries";
       operationId: "getV2DashboardActiveCountries";

diff --git a/src/generated/apiSchemas.ts b/src/generated/apiSchemas.ts
@@ -22833,6 +22833,31 @@ export type DashboardTotalSectionHeaderResponse = {
   };
 };
 
+export type DashboardTotalSectionHeaderCountryResponse = {
+  data?: {
+    /**
+     * Total number of non profit projects.
+     */
+    total_non_profit_count?: number;
+    /**
+     * Total number of enterprise projects.
+     */
+    total_enterprise_count?: number;
+    /**
+     * Total number of jobs created.
+     */
+    total_entries?: number;
+    /**
+     * Total number of hectares restored.
+     */
+    total_hectares_restored?: number;
+    /**
+     * Total number of trees restored.=
+     */
+    total_trees_restored?: number;
+  };
+};
+
 export type DashboardActiveCountriesResponse = {
   data?: {
     country_slug?: string;

diff --git a/src/pages/dashboard/components/ContentOverview.tsx b/src/pages/dashboard/components/ContentOverview.tsx
@@ -133,6 +133,7 @@ const ContentOverview = (props: ContentOverviewProps<RowData>) => {
             showLegend={false}
             mapFunctions={dashboardMapFunctions}
             isDashboard={"dashboard"}
+            className="custom-popup-close-button"
           />
           <div className="absolute left-6 top-6 rounded-lg bg-[#1F121259] px-2 py-1 text-center text-white backdrop-blur-md">
             <Text variant="text-12-light">{t("PROGRAMME VIEW")}</Text>