From ac4d6db0721f1ca2f7ba66c9ccf67773428b484c Mon Sep 17 00:00:00 2001
From: Landon Reed <landontreed@gmail.com>
Date: Tue, 12 May 2020 09:51:45 -0400
Subject: [PATCH 1/2] refactor(icons): move example custom icons into own file

---
 custom-icons.js | 47 +++++++++++++++++++++++++++++++++++
 example.js      | 66 ++++++++++---------------------------------------
 2 files changed, 60 insertions(+), 53 deletions(-)
 create mode 100644 custom-icons.js

diff --git a/custom-icons.js b/custom-icons.js
new file mode 100644
index 000000000..dbd806f10
--- /dev/null
+++ b/custom-icons.js
@@ -0,0 +1,47 @@
+import {
+  ClassicBus,
+  ClassicGondola,
+  ClassicModeIcon,
+  Ferry,
+  LegIcon,
+  StandardGondola
+} from '@opentripplanner/icons'
+
+/**
+ * For more advanced users, you can replicate and customize components and
+ * observe the change in icons.
+ * - For LegIcon: https://github.com/opentripplanner/otp-ui/blob/master/packages/icons/src/trimet-leg-icon.js
+ * - For ModeIcon: https://github.com/opentripplanner/otp-ui/blob/master/packages/icons/src/trimet-mode-icon.js
+ * The example below shuffles some icons around from what you might normally
+ * expect for demonstration purposes.
+ */
+
+const CustomTransitIcon = Ferry
+const CustomRailIcon = ClassicGondola
+const CustomStreetcarIcon = StandardGondola
+const CustomBikeRentalIcon = ClassicBus
+
+export const CustomModeIcon = ({ mode, ...props }) => {
+  if (!mode) return null
+  switch (mode.toLowerCase()) {
+    // Place custom icons for each mode here.
+    case 'transit':
+      return <CustomTransitIcon {...props} />
+    case 'rail':
+      return <CustomRailIcon {...props} />
+    default:
+      return <ClassicModeIcon mode={mode} {...props} />
+  }
+}
+
+export const CustomLegIcon = ({ leg, ...props }) => {
+  if (
+    leg.routeLongName &&
+    leg.routeLongName.startsWith('MAX')
+  ) {
+    return <CustomStreetcarIcon />
+  } else if (leg.rentedBike) {
+    return <CustomBikeRentalIcon />
+  }
+  return <LegIcon leg={leg} ModeIcon={CustomModeIcon} {...props} />
+}
diff --git a/example.js b/example.js
index 0dd37c00c..ea04109d3 100644
--- a/example.js
+++ b/example.js
@@ -1,17 +1,7 @@
 // import this polyfill in order to make webapp compatible with IE 11
 import 'es6-math'
 
-// The commented imports below are used in the custom icons example.
-import {
-  // ClassicBus,
-  // ClassicGondola,
-  ClassicLegIcon,
-  ClassicModeIcon,
-  // Ferry,
-  // LegIcon,
-  // StandardGondola
-} from '@opentripplanner/icons'
-
+import {ClassicLegIcon, ClassicModeIcon} from '@opentripplanner/icons'
 import { createHashHistory } from 'history'
 import { connectRouter, routerMiddleware } from 'connected-react-router'
 import React, { Component } from 'react'
@@ -20,7 +10,6 @@ import { createStore, combineReducers, applyMiddleware, compose } from 'redux'
 import { Provider } from 'react-redux'
 import thunk from 'redux-thunk'
 import createLogger from 'redux-logger'
-
 // import Bootstrap Grid components for layout
 import { Navbar, Grid, Row, Col } from 'react-bootstrap'
 
@@ -33,13 +22,22 @@ import {
   AppMenu,
   createOtpReducer
 } from './lib'
-
 // load the OTP configuration
 import otpConfig from './config.yml'
 
+// Set useCustomIcons to true to override classic icons with the exports from
+// custom-icons.js
+const useCustomIcons = true
+
 // Define icon sets for modes.
-const MyLegIcon = ClassicLegIcon
-const MyModeIcon = ClassicModeIcon
+let MyLegIcon = ClassicLegIcon
+let MyModeIcon = ClassicModeIcon
+
+if (useCustomIcons) {
+  const CustomIcons = require('./custom-icons')
+  MyLegIcon = CustomIcons.CustomLegIcon
+  MyModeIcon = CustomIcons.CustomModeIcon
+}
 
 /**
  * For testing, try uncommenting the following two statements (and comment the two above),
@@ -50,44 +48,6 @@ const MyModeIcon = ClassicModeIcon
 // const MyLegIcon = () => <Ferry />
 // const MyModeIcon = () => <AerialTram />
 
-/** 
- * For more advanced users, you can replicate and customize components and observe the change in icons.
- * - For LegIcon: https://github.com/opentripplanner/otp-ui/blob/master/packages/icons/src/trimet-leg-icon.js
- * - For ModeIcon: https://github.com/opentripplanner/otp-ui/blob/master/packages/icons/src/trimet-mode-icon.js
- * The example below shuffles some icons around for demonstration purposes.
- */
-/*
-const CustomTransitIcon = Ferry
-const CustomRailIcon = ClassicGondola
-const CustomStreetcarIcon = StandardGondola
-const CustomBikeRentalIcon = ClassicBus
-
-const MyModeIcon = ({ mode, ...props }) => {
-  if (!mode) return null;
-  switch (mode.toLowerCase()) {
-    // Place custom icons for each mode here.
-    case "transit":
-      return <CustomTransitIcon {...props} />
-    case "rail":
-      return <CustomRailIcon {...props} />
-    default:
-      return <ClassicModeIcon mode={mode} {...props} />
-  }
-}
-
-const MyLegIcon = ({ leg, ...props }) => {
-  if (
-    leg.routeLongName &&
-    leg.routeLongName.startsWith('MAX')
-  ) {
-    return <CustomStreetcarIcon />
-  } else if (leg.rentedBike) {
-    return <CustomBikeRentalIcon />
-  }
-  return <LegIcon leg={leg} ModeIcon={MyModeIcon} {...props} />
-}
-*/
-
 // create an initial query for demo/testing purposes
 const initialQuery = {
   from: {

From 266ecb46027d988a711ff4632db0966f7828ce1f Mon Sep 17 00:00:00 2001
From: Landon Reed <landontreed@gmail.com>
Date: Tue, 12 May 2020 10:36:05 -0400
Subject: [PATCH 2/2] refactor(example): set useCustomIcons to false

---
 example.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/example.js b/example.js
index ea04109d3..8d7caf306 100644
--- a/example.js
+++ b/example.js
@@ -27,7 +27,7 @@ import otpConfig from './config.yml'
 
 // Set useCustomIcons to true to override classic icons with the exports from
 // custom-icons.js
-const useCustomIcons = true
+const useCustomIcons = false
 
 // Define icon sets for modes.
 let MyLegIcon = ClassicLegIcon