refactor: call formatParam in different place

visgl · Dec 9, 2024 · 02ad34c · 02ad34c
1 parent ae5712b
commit 02ad34c
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 28 deletions.
diff --git a/src/libraries/__tests__/create-static-maps-url.test.ts b/src/libraries/__tests__/create-static-maps-url.test.ts
@@ -99,9 +99,11 @@ describe('createStaticMapsUrl', () => {
         }
       ]
     });
-    expect(url).toContain(
-      'markers=color%3Ared%7Clabel%3AA%7Csize%3Amid%7C40.714728%2C-73.998672'
+    const markerParam = encodeURIComponent(
+      'color:red|label:A|size:mid|40.714728,-73.998672'
     );
+
+    expect(url).toContain(`markers=${markerParam}`);
   });
 
   test('includes scale parameter', () => {

diff --git a/src/libraries/create-static-maps-url/assemble-map-type-styles.ts b/src/libraries/create-static-maps-url/assemble-map-type-styles.ts
@@ -1,3 +1,5 @@
+import {formatParam} from './helpers';
+
 /**
  * Converts an array of Google Maps style objects into an array of style strings
  * compatible with the Google Static Maps API.
@@ -16,33 +18,35 @@
  * // Returns: ["|feature:road|element:geometry|color:0xff0000|weight:1"]
  *
  * Each style string follows the format:
- * "|feature:{featureType}|element:{elementType}|{stylerName}:{stylerValue}"
+ * "feature:{featureType}|element:{elementType}|{stylerName}:{stylerValue}"
  *
  * Note: Color values with hexadecimal notation (#) are automatically converted
  * to the required 0x format for the Static Maps API.
  */
 export function assembleMapTypeStyles(
   styles: Array<google.maps.MapTypeStyle>
 ): string[] {
-  return styles.map((mapTypeStyle: google.maps.MapTypeStyle) => {
-    const {featureType, elementType, stylers = []} = mapTypeStyle;
+  return styles
+    .map((mapTypeStyle: google.maps.MapTypeStyle) => {
+      const {featureType, elementType, stylers = []} = mapTypeStyle;
 
-    let styleString = '';
+      let styleString = '';
 
-    if (featureType) {
-      styleString += `|feature:${featureType}`;
-    }
+      if (featureType) {
+        styleString += `|feature:${featureType}`;
+      }
 
-    if (elementType) {
-      styleString += `|element:${elementType}`;
-    }
+      if (elementType) {
+        styleString += `|element:${elementType}`;
+      }
 
-    for (const styler of stylers) {
-      Object.entries(styler).forEach(([name, value]) => {
-        styleString += `|${name}:${String(value).replace('#', '0x')}`;
-      });
-    }
+      for (const styler of stylers) {
+        Object.entries(styler).forEach(([name, value]) => {
+          styleString += `|${name}:${String(value).replace('#', '0x')}`;
+        });
+      }
 
-    return styleString;
-  });
+      return styleString;
+    })
+    .map(formatParam);
 }
diff --git a/src/libraries/create-static-maps-url/assemble-marker-params.ts b/src/libraries/create-static-maps-url/assemble-marker-params.ts
@@ -1,3 +1,4 @@
+import {formatParam} from './helpers';
 import {StaticMapsMarker} from './types';
 
 /**
@@ -19,8 +20,8 @@ import {StaticMapsMarker} from './types';
  * const params = assembleMarkerParams(markers);
  * // Params will be an array of strings representing the marker parameters
  * Example output: [
- *   "|color:blue|label:A|size:mid|40.714728,-73.998672|40.714728,-73.998672",
- *   "|icon:http://example.com/icon.png|40.714728,-73.998672"
+ *   "color:blue|label:A|size:mid|40.714728,-73.998672|40.714728,-73.998672",
+ *   "icon:http://example.com/icon.png|40.714728,-73.998672"
  * ]
  */
 export function assembleMarkerParams(markers: StaticMapsMarker[] = []) {
@@ -73,5 +74,5 @@ export function assembleMarkerParams(markers: StaticMapsMarker[] = []) {
     markerParams.push(markerParam);
   });
 
-  return markerParams;
+  return markerParams.map(formatParam);
 }
diff --git a/src/libraries/create-static-maps-url/assemble-path-params.ts b/src/libraries/create-static-maps-url/assemble-path-params.ts
@@ -1,4 +1,4 @@
-import {formatLocation} from './helpers';
+import {formatLocation, formatParam} from './helpers';
 import {StaticMapsPath} from './types';
 
 /**
@@ -25,7 +25,7 @@ import {StaticMapsPath} from './types';
  *
  * const pathParams = assemblePathParams(paths);
  * Output: [
- *    '|color:red|weight:5|40.714728,-73.998672|40.718217,-73.998284'
+ *    'color:red|weight:5|40.714728,-73.998672|40.718217,-73.998284'
  *  ]
  */
 export function assemblePathParams(paths: Array<StaticMapsPath> = []) {
@@ -75,5 +75,5 @@ export function assemblePathParams(paths: Array<StaticMapsPath> = []) {
     pathParams.push(pathParam);
   });
 
-  return pathParams;
+  return pathParams.map(formatParam);
 }
diff --git a/src/libraries/create-static-maps-url/index.ts b/src/libraries/create-static-maps-url/index.ts
@@ -116,12 +116,12 @@ export function createStaticMapsUrl({
 
   // Assemble Markers
   for (const markerParam of assembleMarkerParams(markers)) {
-    url.searchParams.append('markers', formatParam(markerParam));
+    url.searchParams.append('markers', markerParam);
   }
 
   // Assemble Paths
   for (const pathParam of assemblePathParams(paths)) {
-    url.searchParams.append('path', formatParam(pathParam));
+    url.searchParams.append('path', pathParam);
   }
 
   // Assemble visible locations
@@ -134,7 +134,7 @@ export function createStaticMapsUrl({
 
   // Assemble Map Type Styles
   for (const styleString of assembleMapTypeStyles(style)) {
-    url.searchParams.append('style', formatParam(styleString));
+    url.searchParams.append('style', styleString);
   }
 
   return url.toString();