From 72dafd63fc587a0203fb3e26e01518fe38d25c51 Mon Sep 17 00:00:00 2001
From: sipp11 <sipp11@zzyzx.co>
Date: Tue, 17 Jul 2018 16:13:34 +0900
Subject: [PATCH] Better looing route

---
 src/components/RouteDetail.js |  2 +-
 src/components/RouteForm.js   | 30 ++++++++++++++++++------------
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/components/RouteDetail.js b/src/components/RouteDetail.js
index 6664b67..5cf3295 100644
--- a/src/components/RouteDetail.js
+++ b/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}
diff --git a/src/components/RouteForm.js b/src/components/RouteForm.js
index ab7e5dd..426cb6f 100644
--- a/src/components/RouteForm.js
+++ b/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() {