@blaze-cms/plugin-google-maps-fe 0.138.0-core-styles.0 → 0.138.0-core-styles.4

package/src/GoogleMaps/helpers/add-zoom-listener.js

@@ -1,10 +1,10 @@
 import { ZOOM_CHANGED } from '../../constants';
 import setShapes from './set-shapes';
 
-const addZoomListener = (map, router, shapes, imageData) => {
+const addZoomListener = (map, router, shapes, imageData, client) => {
   if (!map) return;
   setShapes(map, router, shapes, imageData);
-  map.addListener(ZOOM_CHANGED, () => setShapes(map, router, shapes, imageData));
+  map.addListener(ZOOM_CHANGED, () => setShapes(map, router, shapes, imageData, client));
 };
 
 export default addZoomListener;

package/src/GoogleMaps/helpers/set-shapes.js

@@ -2,6 +2,7 @@ import React from 'react';
 import isNumber from 'lodash.isnumber';
 import ReactDOMServer from 'react-dom/server';
 import { Link } from '@blaze-cms/nextjs-components';
+import { ApolloProvider } from '@apollo/client';
 import {
   buildPropsToDisplayWithContent,
   summaryComponents,
@@ -38,7 +39,7 @@ const closeInfoWindows = () => {
   }
 };
 
-const addShapeListeners = (map, router, shape, imageData, shapeInstance) => {
+const addShapeListeners = (map, router, shape, imageData, shapeInstance, client) => {
   const { enableInfoPane = false, dataSummaries = [], url, shapeData } = shape;
 
   if (enableInfoPane) {
@@ -49,7 +50,7 @@ const addShapeListeners = (map, router, shape, imageData, shapeInstance) => {
     shapeInstance.addListener(CLICK, async event => {
       closeInfoWindows();
       const content = ReactDOMServer.renderToString(
-        await infoWindowContent(imageData, dataSummaries, url, shapeData)
+        await infoWindowContent(imageData, dataSummaries, url, shapeData, client)
       );
       infoWindow.setContent(content);
       infoWindow.setPosition(event.latLng);
@@ -90,7 +91,7 @@ const getIconUrl = (imageId, imageData) => {
   return image.url;
 };
 
-const infoWindowContent = async (imageData, dataSummaries, url, shapeData) => {
+const infoWindowContent = async (imageData, dataSummaries, url, shapeData, client) => {
   const summariesWithContent = await Promise.all(
     dataSummaries.map(async dataSummary => {
       const { elementTitle, type, propsToDisplay, ...otherProps } = dataSummary;
@@ -104,12 +105,14 @@ const infoWindowContent = async (imageData, dataSummaries, url, shapeData) => {
 
       const getDataSummaryComponent = () => {
         const component = (
-          <SummaryComponent
-            key={type}
-            modifier={modifier}
-            elementTitle={elementTitle}
-            summaryPropsWithContent={summaryPropsWithContent}
-          />
+          <ApolloProvider client={client}>
+            <SummaryComponent
+              key={type}
+              modifier={modifier}
+              elementTitle={elementTitle}
+              summaryPropsWithContent={summaryPropsWithContent}
+            />
+          </ApolloProvider>
         );
 
         if (isTypeHeading && url) return <Link href={url}>{component}</Link>;
@@ -181,7 +184,7 @@ function getIcon(imageData, shape) {
   return svgMarker;
 }
 
-const setMarker = (map, router, shape, imageData) => {
+const setMarker = (map, router, shape, imageData, client) => {
   const { label = '', latitude, longitude } = shape;
 
   if (isPositionCorrect(latitude, longitude)) {
@@ -194,7 +197,7 @@ const setMarker = (map, router, shape, imageData) => {
       title: label || ''
     });
 
-    addShapeListeners(map, router, shape, imageData, marker);
+    addShapeListeners(map, router, shape, imageData, marker, client);
 
     shapesArray.push(marker);
 
@@ -279,7 +282,7 @@ const setCircle = (map, router, shape, imageData) => {
   }
 };
 
-const setShapes = (map, router, shapes, imageData) => {
+const setShapes = (map, router, shapes, imageData, client) => {
   const mapZoom = map.getZoom();
   clearShapes();
 
@@ -289,7 +292,7 @@ const setShapes = (map, router, shapes, imageData) => {
     if (mapZoom >= minZoom && mapZoom <= maxZoom) {
       switch (type) {
         case MARKER: {
-          setMarker(map, router, shape, imageData);
+          setMarker(map, router, shape, imageData, client);
           break;
         }
         case POLYLINE: {