refactor: address pr feedback

Author: miles-grant-ibigroup

lib/actions/apiV2.js

@@ -19,6 +19,8 @@ import {
 } from './api'
 import { zoomToStop } from './map'
 
+const LIGHT_GRAY = '666666'
+
 /**
  * Generic helper for crafting GraphQL queries.
  */
@@ -436,7 +438,7 @@ const fetchStopInfo = (map, stop) => {
         if (!stop) return findStopError()
 
         const color =
-          stop.routes?.length > 0 && `#${stop.routes[0]?.color || '666666'}`
+          stop.routes?.length > 0 && `#${stop.routes[0]?.color || LIGHT_GRAY}`
 
         // Doing some OTP1 compatibility rewriting here
         return {
@@ -586,7 +588,7 @@ export const findRoute = (params) =>
               const patternStops = pattern.stops.map((stop) => {
                 const color =
                   stop.routes?.length > 0 &&
-                  `#${stop.routes[0]?.color || '666666'}`
+                  `#${stop.routes[0]?.color || LIGHT_GRAY}`
                 if (stop.routes) delete stop.routes
                 return { ...stop, color }
               })

lib/actions/ui.js

@@ -102,8 +102,9 @@ export function setViewedRoute(payload) {
       viewedRoute &&
       payload?.viewedRoute?.routeId === viewedRoute.routeId &&
       payload?.viewedRoute?.patternId === viewedRoute.patternId
-    )
+    ) {
       return
+    }
 
     dispatch(viewRoute(payload))
 

lib/components/app/print-layout.tsx

@@ -67,6 +67,8 @@ class PrintLayout extends Component<Props, State> {
     if (!itinerary && location && location.search) {
       parseUrlQueryString()
     }
+
+    // TODO: use currentQuery to pan/zoom to the correct part of the map
   }
 
   componentWillUnmount() {

lib/components/map/enhanced-stop-marker.js

@@ -30,15 +30,15 @@ const borderPixels = (props) => (props?.active ? 3 : 1)
 const caretMarginPixels = (props) =>
   (iconPixels - caretPixels - borderPixels(props)) / 2
 
-const defaultColor = '#a6a6a6'
+const DEFAULT_COLOR = '#a6a6a6'
 
 const BaseStopIcon = styled.div`
   background: #fff;
   border-radius: 50%;
   border: ${borderPixels}px solid
-    ${(props) => (props?.active ? props.mainColor : defaultColor)};
-  color: ${(props) => (props?.active ? props.mainColor : defaultColor)};
-  fill: ${(props) => (props?.active ? props.mainColor : defaultColor)};
+    ${(props) => (props?.active ? props.mainColor : DEFAULT_COLOR)};
+  color: ${(props) => (props?.active ? props.mainColor : DEFAULT_COLOR)};
+  fill: ${(props) => (props?.active ? props.mainColor : DEFAULT_COLOR)};
   font-size: ${iconPixels}px;
   height: ${iconPixels}px;
   line-height: 1px;
@@ -56,9 +56,9 @@ const BaseStopIcon = styled.div`
   &::after {
     background: #fff;
     border-bottom: ${borderPixels}px solid
-      ${(props) => (props?.active ? props.mainColor : defaultColor)};
+      ${(props) => (props?.active ? props.mainColor : DEFAULT_COLOR)};
     border-right: ${borderPixels}px solid
-      ${(props) => (props?.active ? props.mainColor : defaultColor)};
+      ${(props) => (props?.active ? props.mainColor : DEFAULT_COLOR)};
     content: '';
     display: block;
     height: ${caretPixels}px;