Merge pull request #3 from dmitrijs-balcers/master

Replace readonly RegionSelector with Static Map

src/components/RegionSelector/RegionSelector.tsx

@@ -16,7 +16,6 @@ const options: google.maps.MapOptions = {
 interface RegionSelectorProps {
   value: string;
   onChange?: (event: string) => void;
-  readonly?: boolean;
 }
 
 export default function RegionSelector(props: RegionSelectorProps) {
@@ -83,19 +82,13 @@ export default function RegionSelector(props: RegionSelectorProps) {
     <GoogleMap
       options={{
         ...options,
-        disableDefaultUI: props.readonly,
-        gestureHandling: props.readonly ? "none" : undefined,
-        clickableIcons: !props.readonly,
+        clickableIcons: true,
       }}
       mapContainerClassName={styles.map}
       onLoad={onLoad}
     >
       <Polygon
-        options={{
-          draggable: !props.readonly,
-          editable: !props.readonly,
-          clickable: !props.readonly,
-        }}
+        options={{ draggable: true, editable: true, clickable: true }}
         path={polygonPath}
         onLoad={setPolygonRef}
         onDragEnd={onPolygonChange}

src/pages/Pingers/Pingers.tsx

@@ -1,7 +1,6 @@
 import { useQuery, useMutation } from "@apollo/client";
 import { loader } from "graphql.macro";
 import React, { useCallback } from "react";
-import RegionSelector from "../../components/RegionSelector";
 import { useParams } from "react-router-dom";
 import {
   Button,
@@ -18,6 +17,8 @@ import {
 } from "semantic-ui-react";
 import Form, { PingerSchema } from "components/Form";
 import { TRANSLATION_MAP } from "../../shared/l10n";
+import { staticMapUrlBuilder } from "./staticMapUrlBuilder";
+import convert from "../../components/RegionSelector/conversion";
 
 const GET_PINGERS = loader("../../graphql/get-pingers.graphql");
 const CREATE_PINGER = loader("../../graphql/create-pinger.graphql");
@@ -77,7 +78,7 @@ export default function Pingers() {
                   onClick={setPinger}
                   data-testid={"region-selector-container"}
                 >
-                  <RegionSelector value={pinger.region} readonly />
+                  <MapPreview regionRaw={pinger.region} />
                 </div>
                 <Details pinger={pinger} />
               </Segment>
@@ -212,3 +213,16 @@ const Controls: React.FC<{
     </ButtonGroup>
   );
 };
+
+const MapPreview: React.FC<{
+  regionRaw: string;
+}> = ({ regionRaw }) => {
+  const region = convert.polygonStringToCoords(regionRaw);
+  return (
+    <img
+      style={{ width: "100%", aspectRatio: "700/400" }}
+      src={staticMapUrlBuilder(region, { width: 700, height: 400 })}
+      alt={"region preview"}
+    />
+  );
+};

src/pages/Pingers/staticMapUrlBuilder.test.ts

@@ -0,0 +1,19 @@
+import { staticMapUrlBuilder } from "./staticMapUrlBuilder";
+
+describe("staticMapUrlBuilder", () => {
+  it("should return a valid URL", () => {
+    const polygonPath = [
+      { lat: 56.95, lng: 24.1 },
+      { lat: 56.95, lng: 24.2 },
+      { lat: 56.85, lng: 24.2 },
+      { lat: 56.85, lng: 24.1 },
+    ];
+    const size = { width: 700, height: 400 };
+
+    const result = staticMapUrlBuilder(polygonPath, size);
+
+    expect(result).toMatchInlineSnapshot(
+      `"https://maps.googleapis.com/maps/api/staticmap?key=NO_KEY_PROVIDED&size=700x400&path=color%3A0x000000ff%7Cfillcolor%3A0x00000050%7Cweight%3A3%7C56.95%2C24.1%7C56.95%2C24.2%7C56.85%2C24.2%7C56.85%2C24.1"`,
+    );
+  });
+});

src/pages/Pingers/staticMapUrlBuilder.ts

@@ -0,0 +1,23 @@
+export const staticMapUrlBuilder = (
+  polygonPath: { lat: number; lng: number }[],
+  size: { width: number; height: number },
+) => {
+  const key = process.env.REACT_APP_GOOGLE_MAPS_KEY || "NO_KEY_PROVIDED";
+
+  const url = new URL("https://maps.googleapis.com/maps/api/staticmap");
+  url.searchParams.set("key", key);
+  url.searchParams.set("size", `${size.width}x${size.height}`);
+  const path = polygonPath
+    .map((point) => `${point.lat},${point.lng}`)
+    .join("|");
+
+  const color = "0x000000ff";
+  const fill = "0x00000050";
+
+  url.searchParams.set(
+    "path",
+    `color:${color}|fillcolor:${fill}|weight:3|${path}`,
+  );
+
+  return url.toString();
+};