@blaze-cms/plugin-google-maps-fe 0.123.0-alpha.9 → 0.123.1-alpha.1

package/src/GoogleMaps/helpers/build-shapes-configs.js

@@ -0,0 +1,110 @@
+import flatten from 'lodash.flatten';
+import { IMAGE_ID, URL, ID } from '../../constants';
+
+const getPropValues = properties =>
+  properties
+    .reduce((acc, property) => {
+      if (property.includes('.')) {
+        const [relationName, relationProp] = property.split('.');
+        return `${acc} ${relationName} { ${relationProp} }`;
+      }
+      return `${acc} ${property}`;
+    }, '')
+    .trim();
+
+const getUpdatedPropsQuery = (propsQuery, entityData) => {
+  const { properties = {}, dynamicProperties = {} } = entityData;
+
+  const [url] = Object.keys(dynamicProperties).filter(prop => prop === URL);
+  const hasImage = !!Object.keys(properties).filter(prop => prop === IMAGE_ID).length;
+
+  let updatedPropsQuery = hasImage ? `${propsQuery} ${IMAGE_ID}` : propsQuery;
+  updatedPropsQuery = url ? `${updatedPropsQuery} ${URL}` : updatedPropsQuery;
+
+  return updatedPropsQuery;
+};
+
+const buildFilterQueryString = filter => {
+  const [filterKey, filterValue] = filter.split('/');
+  const filterKeyword = `${filterKey}.keyword`;
+  return { bool: { should: [{ match: { [filterKeyword]: filterValue } }] } };
+};
+
+const buildFilters = filters => {
+  if (!filters || !filters.length) return null;
+  const filterQueryProps = filters.map(buildFilterQueryString);
+  return { bool: { should: filterQueryProps } };
+};
+
+const buiildShapeProps = (shape, shapeKey, dataSummaries, parentId, entityData, entityGroup) => {
+  const { displayItems = [], filterBy } = shape;
+  const { latProp, lonProp, entity } = entityGroup;
+  const { actions } = entityData;
+  const action = actions ? actions.getAllPublished || actions.getAll : '';
+
+  const dataSummaryProps = dataSummaries
+    .reduce((acc, { propsToDisplay }) => {
+      const propsToDisplayValues = flatten(
+        propsToDisplay.map(({ propertiesToDisplay }) => propertiesToDisplay)
+      );
+      const propsToDisplayString = getPropValues(propsToDisplayValues);
+
+      return `${acc} ${propsToDisplayString}`;
+    }, '')
+    .trim();
+  const ids = [];
+  displayItems.length ? ids.push(displayItems[0]) : ids.push(parentId);
+
+  const filtersObject = buildFilters(filterBy);
+  let propsQuery = dataSummaryProps ? `${dataSummaryProps}` : '';
+  propsQuery = getUpdatedPropsQuery(propsQuery, entityData);
+  if (latProp && lonProp) {
+    propsQuery = `${propsQuery} ${formatProp(latProp)} ${formatProp(lonProp)}`;
+  }
+  if (ids.length && !propsQuery.includes(ID)) propsQuery = `${propsQuery.trim()} ${ID}`;
+
+  return {
+    shapeKey,
+    entity,
+    propsQuery,
+    ids,
+    action,
+    filtersObject
+  };
+};
+
+const formatProp = prop => {
+  if (!prop.includes('.')) return prop;
+
+  const [mainProp, nestedProp] = prop.split('.');
+  return `${mainProp}{${nestedProp}}`;
+};
+
+const buildShapesConfig = (schemas, entityGroups, parent) => {
+  if (!schemas || !entityGroups) return [];
+  const { itemId, itemEntity } = parent;
+  const shapeGroups = [];
+  entityGroups.forEach((entityGroup, i) => {
+    const { entity, shapes, dataSummaries = [] } = entityGroup;
+    const parentId = entity === itemEntity && itemId;
+    if (!entity) return null;
+    const entityData = schemas[entity] || {};
+
+    shapes.filter(Boolean).forEach((shape, shapeIndex) => {
+      const shapeKey = `shape${i}${shapeIndex}`;
+      const shapeValues = buiildShapeProps(
+        shape,
+        shapeKey,
+        dataSummaries,
+        parentId,
+        entityData,
+        entityGroup
+      );
+      shapeGroups.push({ ...shapeValues, shapeOptions: shape, entityOptions: entityGroup });
+    });
+  });
+
+  return shapeGroups;
+};
+
+export default buildShapesConfig;

package/src/GoogleMaps/helpers/get-center-coordinates.js

@@ -0,0 +1,24 @@
+import isNumber from 'lodash.isnumber';
+
+const getCenterCoordinates = (mapShapes, otherProps) => {
+  const centerCoordinates = [];
+
+  const { centerLatitude, centerLongitude } = otherProps;
+  const useDefaultCenter =
+    centerLatitude !== 0 &&
+    centerLongitude !== 0 &&
+    isNumber(centerLatitude) &&
+    isNumber(centerLongitude);
+
+  if (useDefaultCenter) return [{ latitude: centerLatitude, longitude: centerLongitude }];
+
+  const useAsCenterShapes = mapShapes.filter(({ useAsCenter }) => useAsCenter);
+  const shapesForCenter = useAsCenterShapes.length ? useAsCenterShapes : mapShapes;
+  shapesForCenter.forEach(({ latitude, longitude }) => {
+    if (isNumber(latitude) && isNumber(longitude)) centerCoordinates.push({ latitude, longitude });
+  });
+
+  return centerCoordinates;
+};
+
+export default getCenterCoordinates;

package/src/GoogleMaps/helpers/get-image-ids.js

@@ -1,19 +1,10 @@
-const getImageIds = (entityConfigs, entityData) => {
-  const images = [];
-
-  Object.keys(entityConfigs).forEach(entityConfig => {
-    const { imageIds } = entityConfigs[entityConfig];
-
-    images.push(...imageIds);
-
-    if (entityData[entityConfig] && entityData[entityConfig].length) {
-      entityData[entityConfig].forEach(entity => {
-        if (entity.imageId) images.push(entity.imageId);
-      });
-    }
+const getImageIds = mapShapes => {
+  const ids = [];
+  mapShapes.forEach(({ shapeData, imageId }) => {
+    if (imageId) ids.push(imageId);
+    if (shapeData.imageId) ids.push(shapeData.imageId);
   });
-
-  return images;
+  return [...new Set(ids)];
 };
 
 export default getImageIds;

package/src/GoogleMaps/helpers/index.js

@@ -1,7 +1,17 @@
 import addZoomListener from './add-zoom-listener';
 import buildQuery from './build-query';
 import getImageIds from './get-image-ids';
-import setEntityConfigs from './set-entity-configs';
+import buildShapesConfig from './build-shapes-configs';
 import setMapOptions from './set-map-options';
+import getCenterCoordinates from './get-center-coordinates';
+import buildMapShapes from './build-map-shapes';
 
-export { addZoomListener, buildQuery, getImageIds, setEntityConfigs, setMapOptions };
+export {
+  addZoomListener,
+  buildQuery,
+  getImageIds,
+  buildShapesConfig,
+  setMapOptions,
+  getCenterCoordinates,
+  buildMapShapes
+};

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

@@ -37,20 +37,18 @@ const closeInfoWindows = () => {
   }
 };
 
-const addShapeListeners = (map, router, shape, entityData, imageData, shapeInstance) => {
-  const { displayItems, entity, enableInfoPane = false, dataSummaries = [] } = shape;
-
-  const url = getEntityUrl(displayItems, entity, entityData);
+const addShapeListeners = (map, router, shape, imageData, shapeInstance) => {
+  const { enableInfoPane = false, dataSummaries = [], url, shapeData } = shape;
 
   if (enableInfoPane) {
     const infoWindow = new window.google.maps.InfoWindow({
       content: ''
     });
 
-    shapeInstance.addListener(CLICK, event => {
+    shapeInstance.addListener(CLICK, async event => {
       closeInfoWindows();
       const content = ReactDOMServer.renderToString(
-        InfoWindowContent(entityData, imageData, displayItems, dataSummaries, url)
+        await infoWindowContent(imageData, dataSummaries, url, shapeData)
       );
       infoWindow.setContent(content);
       infoWindow.setPosition(event.latLng);
@@ -83,73 +81,46 @@ const areRectangleBoundsNumbers = bounds => bounds.every(bound => isNumber(bound
 
 const isPositionCorrect = (lat, lng) => isNumber(lat) && isNumber(lng);
 
-const getEntityUrl = (displayItems, entity, entityData) => {
-  let url = '';
+const getIconUrl = (imageId, imageData) => {
+  if (!imageId) return '';
+  const image = imageData.find(({ id }) => id === imageId);
+  if (!image || !image.url) return '';
 
-  if (entity && displayItems) {
-    const [entityId] = displayItems;
-    const [entityRecord] = entityData.filter(({ id }) => id === entityId);
-    if (entityRecord) {
-      ({ url = '' } = entityRecord);
-    }
-  }
-
-  return url;
+  return image.url;
 };
 
-const getImageUrl = (imageData, imageId) => {
-  const [image] = imageData.getFiles.filter(({ id }) => id === imageId);
-  if (image) return image.url;
-
-  return '';
-};
-
-const getIconUrl = (shape, imageData) => {
-  const { imageId } = shape;
-
-  if (!imageData.getFiles) return '';
-
-  return imageId ? getImageUrl(imageData, imageId) : '';
-};
-
-const InfoWindowContent = (entityData, imageData, displayItems, dataSummaries, url) => {
-  const [entityId] = displayItems;
-  const [entityRecordData] = entityData.filter(({ id }) => id === entityId);
-
-  const summariesWithContent = dataSummaries.map(dataSummary => {
-    const { elementTitle, type, propsToDisplay, ...otherProps } = dataSummary;
-    const isTypeHeading = type === HEADING_LARGE;
-    const summaryPropsWithContent = buildPropsToDisplayWithContent(
-      entityRecordData,
-      propsToDisplay
-    );
-    const modifier = getClassModifiers(LIST, otherProps);
-    const SummaryComponent = summaryComponents[type];
-    if (!summaryPropsWithContent.length) {
-      return null;
-    }
-
-    const getDataSummaryComponent = () => {
-      const component = (
-        <SummaryComponent
-          key={type}
-          modifier={modifier}
-          elementTitle={elementTitle}
-          summaryPropsWithContent={summaryPropsWithContent}
-        />
-      );
-
-      if (isTypeHeading && url) return <Link href={url}>{component}</Link>;
-
-      return component;
-    };
-
-    return getDataSummaryComponent();
-  });
-
-  let image = {};
-  const { imageId } = entityRecordData || {};
-  if (imageId) [image] = imageData.getFiles.filter(({ id }) => id === imageId);
+const infoWindowContent = async (imageData, dataSummaries, url, shapeData) => {
+  const summariesWithContent = await Promise.all(
+    dataSummaries.map(async dataSummary => {
+      const { elementTitle, type, propsToDisplay, ...otherProps } = dataSummary;
+      const isTypeHeading = type === HEADING_LARGE;
+      const summaryPropsWithContent = buildPropsToDisplayWithContent(shapeData, propsToDisplay);
+      const modifier = getClassModifiers(LIST, otherProps);
+      const SummaryComponent = summaryComponents[type];
+      await SummaryComponent.render.preload(); // preload dynamic nextjs component
+
+      if (!summaryPropsWithContent.length) return null;
+
+      const getDataSummaryComponent = () => {
+        const component = (
+          <SummaryComponent
+            key={type}
+            modifier={modifier}
+            elementTitle={elementTitle}
+            summaryPropsWithContent={summaryPropsWithContent}
+          />
+        );
+
+        if (isTypeHeading && url) return <Link href={url}>{component}</Link>;
+
+        return component;
+      };
+
+      return getDataSummaryComponent();
+    })
+  );
+  const { imageId } = shapeData || {};
+  const image = imageData.find(({ id }) => id === imageId);
   const shouldShowImage = image && image.url;
 
   const getImageElement = () => {
@@ -171,12 +142,11 @@ const InfoWindowContent = (entityData, imageData, displayItems, dataSummaries, u
   );
 };
 
-const setMarker = (map, router, shape, data, imageData) => {
-  const { latitude, longitude, entity, label = '', markerWidth = 50, markerHeight = 50 } = shape;
-  if (isPositionCorrect(latitude, longitude)) {
-    const entityData = entity ? data[entity] || [] : [];
+const setMarker = (map, router, shape, imageData) => {
+  const { label = '', markerWidth = 50, markerHeight = 50, latitude, longitude, imageId } = shape;
 
-    const iconUrl = getIconUrl(shape, imageData);
+  if (isPositionCorrect(latitude, longitude)) {
+    const iconUrl = getIconUrl(imageId, imageData);
 
     const icon = iconUrl
       ? {
@@ -192,7 +162,7 @@ const setMarker = (map, router, shape, data, imageData) => {
       title: label || ''
     });
 
-    addShapeListeners(map, router, shape, entityData, imageData, marker);
+    addShapeListeners(map, router, shape, imageData, marker);
 
     shapesArray.push(marker);
 
@@ -200,19 +170,18 @@ const setMarker = (map, router, shape, data, imageData) => {
   }
 };
 
-const setPolyline = (map, router, shape, data, imageData) => {
-  const { paths, entity } = shape;
+const setPolyline = (map, router, shape, imageData) => {
+  const { paths } = shape;
   const path = getPath(paths);
 
   if (path.length) {
-    const entityData = entity ? data[entity] || [] : [];
     const polyline = new window.google.maps.Polyline({
       path,
       geodesic: true,
       ...setStyleOptions(shape)
     });
 
-    addShapeListeners(map, router, shape, entityData, imageData, polyline);
+    addShapeListeners(map, router, shape, imageData, polyline);
 
     shapesArray.push(polyline);
 
@@ -220,18 +189,17 @@ const setPolyline = (map, router, shape, data, imageData) => {
   }
 };
 
-const setPolygon = (map, router, shape, data, imageData) => {
-  const { paths: unParsedPaths, entity } = shape;
+const setPolygon = (map, router, shape, imageData) => {
+  const { paths: unParsedPaths } = shape;
   const paths = getPath(unParsedPaths);
 
   if (paths.length) {
-    const entityData = entity ? data[entity] || [] : [];
     const polygon = new window.google.maps.Polygon({
       paths,
       ...setStyleOptions(shape)
     });
 
-    addShapeListeners(map, router, shape, entityData, imageData, polygon);
+    addShapeListeners(map, router, shape, imageData, polygon);
 
     shapesArray.push(polygon);
 
@@ -239,10 +207,9 @@ const setPolygon = (map, router, shape, data, imageData) => {
   }
 };
 
-const setRectangle = (map, router, shape, data, imageData) => {
-  const { northBound, southBound, eastBound, westBound, entity } = shape;
+const setRectangle = (map, router, shape, imageData) => {
+  const { northBound, southBound, eastBound, westBound } = shape;
   if (areRectangleBoundsNumbers([northBound, southBound, eastBound, westBound])) {
-    const entityData = entity ? data[entity] || [] : [];
     const rectangle = new window.google.maps.Rectangle({
       ...setStyleOptions(shape),
       map,
@@ -254,7 +221,7 @@ const setRectangle = (map, router, shape, data, imageData) => {
       }
     });
 
-    addShapeListeners(map, router, shape, entityData, imageData, rectangle);
+    addShapeListeners(map, router, shape, imageData, rectangle);
 
     shapesArray.push(rectangle);
 
@@ -262,10 +229,9 @@ const setRectangle = (map, router, shape, data, imageData) => {
   }
 };
 
-const setCircle = (map, router, shape, data, imageData) => {
-  const { latitude, longitude, radius, entity } = shape;
+const setCircle = (map, router, shape, imageData) => {
+  const { latitude, longitude, radius } = shape;
   if (isPositionCorrect(latitude, longitude) && isNumber(radius)) {
-    const entityData = entity ? data[entity] || [] : [];
     const circle = new window.google.maps.Circle({
       ...setStyleOptions(shape),
       map,
@@ -273,7 +239,7 @@ const setCircle = (map, router, shape, data, imageData) => {
       radius
     });
 
-    addShapeListeners(map, router, shape, entityData, imageData, circle);
+    addShapeListeners(map, router, shape, imageData, circle);
 
     shapesArray.push(circle);
 
@@ -281,42 +247,40 @@ const setCircle = (map, router, shape, data, imageData) => {
   }
 };
 
-const setShapes = (map, router, shapes, data, imageData) => {
+const setShapes = (map, router, shapes, imageData) => {
   const mapZoom = map.getZoom();
   clearShapes();
 
-  if (shapes.length) {
-    shapes.forEach(shape => {
-      const { type: shapeType, minZoom, maxZoom } = shape;
-
-      if (mapZoom >= minZoom && mapZoom <= maxZoom) {
-        switch (shapeType) {
-          case MARKER: {
-            setMarker(map, router, shape, data, imageData);
-            break;
-          }
-          case POLYLINE: {
-            setPolyline(map, router, shape, data, imageData);
-            break;
-          }
-          case POLYGON: {
-            setPolygon(map, router, shape, data, imageData);
-            break;
-          }
-          case RECTANGLE: {
-            setRectangle(map, router, shape, data, imageData);
-            break;
-          }
-          case CIRCLE: {
-            setCircle(map, router, shape, data, imageData);
-            break;
-          }
-          default:
-            break;
+  shapes.forEach(shape => {
+    const { type, minZoom, maxZoom } = shape;
+
+    if (mapZoom >= minZoom && mapZoom <= maxZoom) {
+      switch (type) {
+        case MARKER: {
+          setMarker(map, router, shape, imageData);
+          break;
         }
+        case POLYLINE: {
+          setPolyline(map, router, shape, imageData);
+          break;
+        }
+        case POLYGON: {
+          setPolygon(map, router, shape, imageData);
+          break;
+        }
+        case RECTANGLE: {
+          setRectangle(map, router, shape, imageData);
+          break;
+        }
+        case CIRCLE: {
+          setCircle(map, router, shape, imageData);
+          break;
+        }
+        default:
+          break;
       }
-    });
-  }
+    }
+  });
 };
 
 export default setShapes;

package/src/GoogleMaps/hooks/use-get-images.js

@@ -1,11 +1,12 @@
 import { useQuery } from '@apollo/client';
-import { generateQuery, generateQueryString } from '../queries';
+import { generateWhereQuery, generateQueryString } from '../queries';
 
 const useGetImages = imageIds => {
   const queryName = 'getFiles';
-  const action = generateQuery(generateQueryString(queryName, queryName, 'id url data'));
+  const action = generateWhereQuery(generateQueryString(queryName, queryName, 'id url data'));
   const { data = {}, loading, error } = useQuery(action, {
-    variables: { where: { id: { _in: imageIds } } }
+    variables: { where: { id: { _in: imageIds } } },
+    skip: !imageIds || !imageIds.length
   });
   return { data, loading, error };
 };

package/src/GoogleMaps/queries.js

@@ -12,16 +12,43 @@ const GET_ENTITY_SCHEMAS = gql`
 `;
 
 const generateQuery = queryString => gql`
-  query getEntityData($where: JSON){
+  query getEntityData {
     ${queryString}
   }
 `;
 
+const generateWhereQuery = queryString => gql`
+  query getEntityData($where: JSON){
+    ${queryString}
+  }
+`;
 const generateQueryString = (action, query, props) => `
   ${query}: ${action}(where: $where){
     ${props}
-    __typename
   }
 `;
 
-export { GET_ENTITY_SCHEMAS, generateQuery, generateQueryString };
+const generateIdsQuery = (query, props, action, ids) => `
+  ${query}: ${action}(where: { id: { _in: ${JSON.stringify(ids)} } }){
+    ${props}
+  }
+`;
+
+const generateFiltersQuery = (query, props, rawQUery, filterQueryKey) => `
+  ${query}:  searchPublishedContent(rawQueryStringified: ${JSON.stringify(rawQUery)}){
+    results {
+      ...on ${filterQueryKey} {
+        ${props}
+      }
+    }
+  }
+`;
+
+export {
+  GET_ENTITY_SCHEMAS,
+  generateQuery,
+  generateQueryString,
+  generateIdsQuery,
+  generateFiltersQuery,
+  generateWhereQuery
+};