chore: getContent callback is now async

opendatasoft · Sep 15, 2023 · 986543a · 986543a
1 parent 465095f
commit 986543a
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 14 deletions.
diff --git a/packages/visualizations-react/stories/Poi/PoiMap.stories.tsx b/packages/visualizations-react/stories/Poi/PoiMap.stories.tsx
@@ -1,8 +1,10 @@
 import React from 'react';
 import { BBox } from 'geojson';
-import { Layer } from '@opendatasoft/visualizations';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 
+import type { Layer } from '@opendatasoft/visualizations';
+import { PopupDisplayTypes } from '@opendatasoft/visualizations';
+
 import sources from './sources';
 import { PoiMap } from '../../src';
 
@@ -14,10 +16,12 @@ const layer1 : Layer = {
     type: "circle",
     color: 'black',
     popup: {
-        display: 'tooltip', 
-        getContent: (_, properties) => {
+        display: PopupDisplayTypes.Tooltip,
+        getContent: async (_, properties) => {
             const {key} = properties as {key: string};
-            return `<h4>${key}</h4>`;}
+            return Promise.resolve(`<h4>${key}</h4>`);
+        },
+        getLoadingContent: () => 'Loading...',
     }
 };
 
@@ -27,10 +31,12 @@ const layer2 : Layer = {
     type: "circle",
     color: 'red',
     popup: {
-        display: 'sidebar', 
-        getContent: (_, properties) => {
+        display: PopupDisplayTypes.Sidebar,
+        getContent: async (_, properties) => {
             const {name, date, description} = properties as {name: string, date: string, description: string};
-            return `<h4>${name}</h4><p>${description}<p/><small>${date}</small>`;}
+            return Promise.resolve(`<h4>${name}</h4><p>${description}<p/><small>${date}</small>`);
+        },
+        getLoadingContent: () => 'Loading...',
     }
 };
 

diff --git a/packages/visualizations/src/components/MapPoi/Map.ts b/packages/visualizations/src/components/MapPoi/Map.ts
@@ -118,11 +118,18 @@ export default class MapPOI {
             return;
         }
 
-        const { display, getContent } = popupConfiguration;
-        this.popup
-            .setLngLat(geometry.coordinates.slice() as LngLatLike)
-            .setHTML(getContent(featureId, properties))
-            .addTo(map);
+        const { display, getContent, getLoadingContent } = popupConfiguration;
+
+        if (this.popup.isOpen() === false) {
+            this.popup.setLngLat(geometry.coordinates.slice() as LngLatLike).addTo(map);
+        }
+
+        this.popup.setHTML(getLoadingContent());
+
+        getContent(featureId, properties)
+            .then((content) => {
+                this.popup.setHTML(content);
+            });
 
         const classnameModifier = display === 'sidebar' ? 'addClassName' : 'removeClassName';
         this.popup[classnameModifier](`${POPUP_OPTIONS.className}--as-sidebar`);

diff --git a/packages/visualizations/src/components/MapPoi/types.ts b/packages/visualizations/src/components/MapPoi/types.ts
@@ -52,14 +52,20 @@ export type Layer = {
     };
 };
 
+export enum PopupDisplayTypes {
+    Tooltip = 'tooltip',
+    Sidebar = 'sidebar',
+}
+
 export type PopupLayer = {
     /**
      * Control where to display the popup
      * - `sidebar`: As a side element (on the left)
      * - `tooltip`: Above the feature that has been clicked
      */
-    display: 'sidebar' | 'tooltip';
-    getContent: (id: GeoJSONFeature['id'], properties?: GeoJsonProperties) => string;
+    display: PopupDisplayTypes;
+    getContent: (id?: GeoJSONFeature['id'], properties?: GeoJsonProperties) => Promise<string>;
+    getLoadingContent: () => string;
 };
 
 export type GeoPoint = {