From 14d44dddc361cc0a0443f9d029a52a44000c2bcf Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Mon, 15 Apr 2024 15:18:40 -0400
Subject: [PATCH] refactor(otp2-tile-overlay): Refactor route color expression.

---
 packages/otp2-tile-overlay/src/index.tsx | 14 +++-------
 packages/otp2-tile-overlay/src/util.ts   | 34 +++++++++++++-----------
 2 files changed, 22 insertions(+), 26 deletions(-)

diff --git a/packages/otp2-tile-overlay/src/index.tsx b/packages/otp2-tile-overlay/src/index.tsx
index c3387ff38..bc35ce812 100644
--- a/packages/otp2-tile-overlay/src/index.tsx
+++ b/packages/otp2-tile-overlay/src/index.tsx
@@ -11,7 +11,7 @@ import React, { useCallback, useEffect, useState } from "react"
 import { Layer, Popup, Source, useMap } from "react-map-gl"
 
 // eslint-disable-next-line prettier/prettier
-import { generateLayerPaint } from "./util"
+import { generateLayerPaint, ROUTE_COLOR_EXPRESSION } from "./util"
 
 const SOURCE_ID = "otp2-tiles"
 const AREA_TYPES = ["areaStops"]
@@ -143,11 +143,7 @@ const OTP2TileLayerWithPopup = ({
         filter={filter}
         id={`${id}-fill`}
         paint={{
-          "fill-color": [
-            "concat",
-            "#",
-            ["case", ["!=", ["index-of", ",", ["get", "routeColors"]], -1], ["slice", ["get", "routeColors"], 0, ["index-of", ",", ["get", "routeColors"]]], ["get", "routeColors"]]
-          ],
+          "fill-color": ROUTE_COLOR_EXPRESSION,
           "fill-opacity": 0.2,
         }}
         source-layer={type}
@@ -159,11 +155,7 @@ const OTP2TileLayerWithPopup = ({
         id={`${id}-outline`}
         layout={{ "line-join": "round", "line-cap": "round" }}
         paint={{
-          "line-color": [
-            "concat",
-            "#",
-            ["case", ["!=", ["index-of", ",", ["get", "routeColors"]], -1], ["slice", ["get", "routeColors"], 0, ["index-of", ",", ["get", "routeColors"]]], ["get", "routeColors"]]
-          ],
+          "line-color": ROUTE_COLOR_EXPRESSION,
           "line-opacity": 0.8,
           "line-width": 3
         }}
diff --git a/packages/otp2-tile-overlay/src/util.ts b/packages/otp2-tile-overlay/src/util.ts
index 6bb556172..c4175d74e 100644
--- a/packages/otp2-tile-overlay/src/util.ts
+++ b/packages/otp2-tile-overlay/src/util.ts
@@ -1,3 +1,5 @@
+import { Expression } from "mapbox-gl";
+
 const generateFloatingVehicleColor = (formFactor: string) => [
   "case",
   ["==", ["get", formFactor], "SCOOTER"],
@@ -7,6 +9,22 @@ const generateFloatingVehicleColor = (formFactor: string) => [
   "#333"
 ];
 
+export const ROUTE_COLOR_EXPRESSION: Expression = [
+  "concat",
+  "#",
+  [
+    "case",
+    ["!=", ["index-of", ",", ["get", "routeColors"]], -1],
+    [
+      "slice",
+      ["get", "routeColors"],
+      0,
+      ["index-of", ",", ["get", "routeColors"]]
+    ],
+    ["get", "routeColors"]
+  ]
+];
+
 // eslint-disable-next-line import/prefer-default-export
 export const generateLayerPaint = (color?: string): any => {
   return {
@@ -30,21 +48,7 @@ export const generateLayerPaint = (color?: string): any => {
       "circle-stroke-width": 3
     },
     areaStops: {
-      "circle-color": [
-        "concat",
-        "#",
-        [
-          "case",
-          ["!=", ["index-of", ",", ["get", "routeColors"]], -1],
-          [
-            "slice",
-            ["get", "routeColors"],
-            0,
-            ["index-of", ",", ["get", "routeColors"]]
-          ],
-          ["get", "routeColors"]
-        ]
-      ],
+      "circle-color": ROUTE_COLOR_EXPRESSION,
       "circle-opacity": 0.9,
       "circle-stroke-color": "#333",
       "circle-stroke-width": 2