Make it work, add a filtering viewer

flux-by-rx/package.json

@@ -5,11 +5,12 @@
   "main": "index.js",
   "scripts": {
     "init": "npm update && node node_modules/tsd/build/cli.js reinstall",
-    "build": "rm -f dist/* && node node_modules/typescript/bin/tsc.js -p . && cp index.html dist/ && node node_modules/browserify/bin/cmd.js --debug dist/*.js > dist/bundle.js"
+    "build": "rm -rf dist/* && node node_modules/typescript/bin/tsc.js -p . && cp index.html dist/ && node node_modules/browserify/bin/cmd.js --debug `find ./dist -name '*.js'` > dist/bundle.js"
   },
   "author": "Duncan Mak <duncan.mak@xamarin.com>",
   "license": "ISC",
   "dependencies": {
+    "lodash": "^3.10.0",
     "react": "^0.13.3",
     "rx": "^2.5.3"
   },

flux-by-rx/src/actions/viewer.ts

@@ -0,0 +1,5 @@
+import { actions$, registerInitialState } from '../actions';
+
+export let pathChanged  = (path: any) => actions$.onNext({ path });
+
+registerInitialState({ path: '' });

flux-by-rx/src/app.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { DOM } from 'react';
 import { leftButtonClicked, rightButtonClicked } from './actions/button';
+import { pathChanged } from './actions/viewer';
+import { get } from 'lodash';
 
 class Button extends React.Component<any, any> {
     onClick = () => this.props.handler(!this.props.value);
@@ -18,17 +20,28 @@ class MakeItSo extends React.Component<any, any> {
     }
 
     render = () => {
-        return DOM. button({ onClick: this.onClick, disabled: this.props.isDisabled }, "Make it so!");
+        return DOM.button({ onClick: this.onClick, disabled: this.props.isDisabled }, "Make it so!");
+    }
+}
+
+class Viewer extends React.Component<any, any> {
+    render() {
+        let { data: { state } } = this.props;
+
+        return DOM.div({},
+            DOM.input({ type: 'text', defaultValue: '', onChange: (evt) => pathChanged((<any>evt.target).value) }),
+            JSON.stringify(get(state, state.path, state)));
     }
 }
 
 export class App extends React.Component<any, any> {
     render() {
+        let { state, action } = this.props;
         return DOM.div({},
-            DOM.div({}, JSON.stringify(this.props)),
-            React.createElement(MakeItSo, this.props),
-            React.createElement(Button, { value: this.props.leftClicked, handler: leftButtonClicked } ),
-            React.createElement(Button, { value: this.props.rightClicked, handler: rightButtonClicked } ));
+            React.createElement(Viewer, { data: this.props }),
+            React.createElement(MakeItSo, state),
+            React.createElement(Button, { value: state.leftClicked, handler: leftButtonClicked }),
+            React.createElement(Button, { value: state.rightClicked, handler: rightButtonClicked }));
     }
 }
 

flux-by-rx/src/main.ts

@@ -6,12 +6,11 @@ import view   from './view';
 
 function main() {
     let state$ = model(actions$);
-    let output$ = view(actions$, state$);
+    let output$ = view(state$, actions$);
     return output$;
 }
 
 main().subscribe((Output: any) => {
-    console.log("hello");
     React.render(
         Output,
         document.getElementById('app'));

flux-by-rx/src/model.ts

@@ -9,10 +9,10 @@ function model(actions$: Rx.Observable<any>) {
     actions$.subscribe(a => state$.onNext(a));
 
     return initial$.scan((actions, nextAction) => {
-        let { leftClicked, rightClicked }: any = assign({}, actions, nextAction);
+        let {leftClicked, rightClicked, path}: any = assign({}, actions, nextAction);
 
         let isDisabled = leftClicked == rightClicked == true;
-        return {isDisabled, leftClicked, rightClicked};
+        return {isDisabled, leftClicked, rightClicked, path};
     });
 }
 

flux-by-rx/src/view.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { App } from './app';
 import { Observable } from 'rx';
+import { identity } from 'lodash';
 
-function view(actions$: Observable<any>, state$: Observable<any>) {
-    // let o = Observable.zip(actions$, state$, (action: any, state: any) => ({action, state}));
-    let o = state$;
+function view(state$: Observable<any>, actions$: Observable<any>) {
+    let o = Observable.combineLatest(state$, actions$.startWith({}), (state, action) => ({ state, action }));
     return o.map((props: any) => {
         return React.createElement(App, props);
     });