Wired up station dropdowns

src/js/components/root.js

@@ -7,16 +7,40 @@ import { HeaderBar } from "./lib/header-bar.js"
 export class Root extends Component {
   constructor(props) {
     super(props);
-
-    this.state = { fromValue: "ashby", toValue: "24th" };
+    this.state = store.state;
+    store.setStateHandler((newState) => {
+        this.setState(newState);
+    });
   }
 
   action() {
     console.log("Clickin'");
   }
 
-  render() {
+  renderStationOptions() {
+    const stations = this.state.stations || [];
+    return _.map(stations, (station) => {
+      const abbr = station.abbr;
+      const name = station.name;
+      return <option key={abbr} value={abbr}>{name}</option>;
+    });
+  }
 
+  renderStationForm() {
+    return (<form name="bartSearch">
+      From:
+      <select value={this.state.fromValue || ""}>
+        { this.renderStationOptions() }
+      </select>
+      <br/>
+      To:
+      <select value={this.state.toValue || ""}>
+        { this.renderStationOptions() }
+      </select>
+    </form>);
+  }
+
+  render() {
     return (
       <BrowserRouter>
         <div className="absolute h-100 w-100 bg-gray0-d ph4-m ph4-l ph4-xl pb4-m pb4-l pb4-xl">
@@ -35,19 +59,9 @@ export class Root extends Component {
                 </div>
                 <div className="searchsidebar" style={{gridColumn: "2", gridRow: "2"}}>
                   Search scheduled trains:
+                  { this.renderStationForm() }
                   <form name="bartSearch">
                     From:
-                    <select value={this.state.fromValue}>
-                        <option value="ashby">Ashby</option>
-                        <option value="fremont">Fremont</option>
-                    </select>
-                    <br/>
-                    To:
-                    <select value={this.state.toValue}>
-                        <option value="ashby">Ashby</option>
-                        <option value="fremont">Fremont</option>
-                        <option value="24th">24th st</option>
-                    </select>
                   </form>
                   <button onClick={this.action.bind(this)}>Search</button>
                 </div>

src/js/reducers/config.js

@@ -1,11 +0,0 @@
-import _ from 'lodash';
-
-
-export class ConfigReducer {
-    reduce(json, state) {
-        let data = _.get(json, 'bartinfo', false);
-        if (data) {
-            state.inbox = data.inbox;
-        }
-    }
-}

src/js/reducers/initial.js

@@ -1,11 +0,0 @@
-import _ from 'lodash';
-
-
-export class InitialReducer {
-    reduce(json, state) {
-        let data = _.get(json, 'initial', false);
-        if (data) {
-            state.inbox = data.inbox;
-        }
-    }
-}

src/js/reducers/update.js

@@ -5,13 +5,10 @@ export class UpdateReducer {
     reduce(json, state) {
         let data = _.get(json, 'update', false);
         if (data) {
-            this.reduceInbox(_.get(data, 'inbox', false), state);
-        }
-    }
-
-    reduceInbox(inbox, state) {
-        if (inbox) {
-            state.inbox = inbox;
+            const stations = _.get(data, 'stations', false);
+            if (stations) {
+                state.stations = stations;
+            }
         }
     }
 }

src/js/store.js

@@ -1,33 +1,25 @@
-import { InitialReducer } from '/reducers/initial';
-import { ConfigReducer } from '/reducers/config';
 import { UpdateReducer } from '/reducers/update';
 
 
 class Store {
     constructor() {
-        this.state = {
-            inbox: {}
-        };
+        this.state = {}
 
-        this.initialReducer = new InitialReducer();
-        this.configReducer = new ConfigReducer();
         this.updateReducer = new UpdateReducer();
         this.setState = () => { };
     }
 
     setStateHandler(setState) {
+        console.log("Calling setStateHandler");
         this.setState = setState;
     }
 
     handleEvent(data) {
+        console.log("Handling event");
+        console.log(data);
         let json = data.data;
 
-        console.log("Storing event");
-        console.log(json);
-        this.initialReducer.reduce(json, this.state);
-        this.configReducer.reduce(json, this.state);
         this.updateReducer.reduce(json, this.state);
-
         this.setState(this.state);
     }
 }

src/js/subscription.js

@@ -14,9 +14,16 @@ export class Subscription {
   }
 
    initializebartinfo() {
+    /*
      api.bind('/primary', 'PUT', api.authTokens.ship, 'bartinfo',
        this.handleEvent.bind(this),
        this.handleError.bind(this));
+    */
+
+     api.bind('/bartstations', 'PUT', api.authTokens.ship, 'bartinfo',
+       this.handleEvent.bind(this),
+       this.handleError.bind(this));
+
    }
 
   handleEvent(diff) {

urbit/app/bartinfo.hoon

@@ -73,7 +73,7 @@
     |=  =path
     ^-  (quip card _this)
     ~&  "on-watch path: {<path>}"
-    ?:  ?=([%primary *] path)
+    ?:  ?=([%bartstations *] path)
       =/  bart-station-request
         =/  out  *outbound-config:iris
         =/  req  bart-api-request-stations:cc
@@ -96,7 +96,9 @@
       ?+  wire   ~
         [%bartstationrequest *]
         =/  value=json  (parse-request-stations-response:cc client-response.sign-arvo)
-        [%give %fact ~[/primary] %json !>(value)]~
+        ?>  ?=(%o -.value)
+        =/  update=json  (pairs:enjs:format [update+o+p.value ~])
+        [%give %fact ~[/bartstations] %json !>(update)]~
       ==
       [http-moves this]
     ?.  ?=(%bound +<.sign-arvo)