From 4fd6a5ee25a86d99ea3458defae8fa99b8fc7e6a Mon Sep 17 00:00:00 2001
From: ronreg-ribdev <56719257+ronreg-ribdev@users.noreply.github.com>
Date: Sun, 31 May 2020 05:07:42 -0700
Subject: [PATCH] make form dropdowns work

---
 src/js/components/root.js | 25 ++++++++++++++++---------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/js/components/root.js b/src/js/components/root.js
index 16c928a..a864427 100644
--- a/src/js/components/root.js
+++ b/src/js/components/root.js
@@ -13,8 +13,18 @@ export class Root extends Component {
     });
   }
 
-  action() {
-    console.log("Clickin'");
+  stationSearch() {
+    console.log("Searching");
+  }
+
+  changeStation(evt) {
+    const target = evt.target.name;
+    const value = evt.target.value;
+    if (target === "fromStation") {
+      this.setState({fromStation: value});
+    } else if (target === "toStation") {
+      this.setState({toStation: value});
+    }
   }
 
   renderStationOptions() {
@@ -27,16 +37,17 @@ export class Root extends Component {
   }
 
   renderStationForm() {
-    return (<form name="bartSearch">
+    return (<form name="bartSearch" onSubmit={this.stationSearch.bind(this)}>
       From:
-      <select value={this.state.fromValue || ""}>
+      <select name="fromStation" value={this.state.fromStation || ""} onChange={this.changeStation.bind(this)}>
         { this.renderStationOptions() }
       </select>
       <br/>
       To:
-      <select value={this.state.toValue || ""}>
+      <select name="toStation" value={this.state.toStation || ""} onChange={this.changeStation.bind(this)}>
         { this.renderStationOptions() }
       </select>
+      <input type="submit" value="Search"/>
     </form>);
   }
 
@@ -60,10 +71,6 @@ export class Root extends Component {
                 <div className="searchsidebar" style={{gridColumn: "2", gridRow: "2"}}>
                   Search scheduled trains:
                   { this.renderStationForm() }
-                  <form name="bartSearch">
-                    From:
-                  </form>
-                  <button onClick={this.action.bind(this)}>Search</button>
                 </div>
               </div>
             </div>