Better looing route

src/components/RouteDetail.js

@@ -30,7 +30,7 @@ const RouteDesc = (props) => (
       type: {props.route.route_type}
     </span>
     <span className="panel-block">
-      color: <br/>Text #{props.route.text_color || '-'} <br />BG #{props.route.route_text_color}
+      color: <br/>Text #{props.route.route_color || '-'} <br />BG #{props.route.route_text_color}
     </span>
     <span className="panel-block">
       Sort order: {props.route.route_sort_order}

src/components/RouteForm.js

@@ -66,23 +66,29 @@ class RouteForm extends Component {
     this.setState({justSubmit: true})
   }
 
-  componentWillMount() {
-    const { props } = this
+  static getDerivedStateFromProps(props, state) {
+    // if form is ready, then nothing else to do
+    if (state.agency !== null || state.id !== null)
+      return null
+
     const { agencyId, routeId } = props.match.params
-    const { results } = props.route
-    const ones = results.filter(ele => ele.route_id === routeId)
-    if (ones.length > 0) {
-      this.setState(ones[0])
-      props.updateBreadcrumb({ agencyId, routeId })
-    } else {
-      const agencies = props.agency.results.filter(ele => ele.agency_id === agencyId)
+    if (routeId === undefined
+        && state.agency === null
+        && props.agency.count > 0) {
+      // this is for new route
+      const { results } = props.agency
+      const agencies = results.filter(ele => ele.agency_id === agencyId)
       if (agencies.length > 0) {
-        let d = {}
-        d["agency_id"] = agencies[0].id
-        this.setState(d)
         props.updateBreadcrumb({ agencyId, routeId: 'new' })
+        return { agency: agencies[0].id }
       }
+    } else if (routeId !== undefined && state.id === null) {
+      // this is for editing route
+      const ones = props.route.results.filter(ele => ele.route_id === routeId)
+      props.updateBreadcrumb({ agencyId, routeId })
+      return ones[0]
     }
+    return null
   }
 
   renderForm() {