remove intent selector

src/app/client.ts

@@ -5,7 +5,6 @@ import { routes } from './routes/all';
 import { State } from './models/state';
 
 import view from './views/app';
-import viewActions from './view-actions/all';
 
 import makeGoTo from './go-to';
 import makeOther from './other';
@@ -39,7 +38,7 @@ export default function main() {
     // for Router
     routes,
     // for View Renderer
-    'div#app', view, viewActions
+    'div#app', view
   );
   client.run();
 }

src/app/views/all.ts

@@ -4,15 +4,15 @@ import htmlescape from 'htmlescape';
 import { State } from '../models/state';
 import renderApp from '../views/app';
 
-export default function render(state: State): VTree {
+export default function render(state: State, { e }: any): VTree {
   return h('html', [
     h('head', [
       h('title', ['rally-rxjs']),
       h('link', { rel: 'stylesheet', href: '/styles/index.css' }, []),
       h('script', ['var INITIAL_STATE = ' + htmlescape(state) + ';'])
     ]),
     h('body', [
-      renderApp(state),
+      renderApp(state, { e }),
       h('script', { src: '/scripts/bundle.js' }, [])
     ])
   ]);

src/app/views/app.ts

@@ -2,27 +2,41 @@ import { h, VTree } from '../../framework/view';
 
 import { State } from '../models/state';
 
+import { create as goTo } from '../actions/go-to';
+
 import renderSignInPage from '../views/sign-in-page';
 import renderStampRallyListPage from '../views/stamp-rally-list-page';
 import renderStampRallyShowPage from '../views/stamp-rally-show-page';
 import renderNotFoundPage from '../views/not-found-page';
 
-const renderPage = (state: State): VTree => {
+const renderPage = (state: State, { e }: any): VTree => {
   switch (state.currentPage) {
     case 'sign_in#index':
-      return renderSignInPage(state);
+      return renderSignInPage(state, { e });
     case 'stamp_rallies#index':
-      return renderStampRallyListPage(state);
+      return renderStampRallyListPage(state, { e });
     case 'stamp_rallies#show':
-      return renderStampRallyShowPage(state);
+      return renderStampRallyShowPage(state, { e });
     default:
       return renderNotFoundPage();
   }
 };
 
-export default function render(state: State): VTree {
-  return h('div#app', [
+export default function render(state: State, { e }: any): VTree {
+  return h('div#app', {
+    onclick: (event: Event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      let node = <any> event.target;
+      while (node && node.tagName !== 'A') {
+        node = node.parentNode;
+      }
+      if (!node) return;
+      const path: string = node.getAttribute('href');
+      e(goTo(path));
+    }
+  }, [
     h('h1', ['RALLY (unofficial)']),
-    renderPage(state)
+    renderPage(state, { e })
   ]);
 }

src/app/views/sign-in-page.ts

@@ -1,25 +1,32 @@
 import { h, VTree } from '../../framework/view';
 
 import { State } from '../models/state';
+import { create as changeEmail } from '../actions/change-email';
+import { create as changePassword } from '../actions/change-password';
+import { create as signIn } from '../actions/sign-in';
 
-export default function render(state: State): VTree {
+export default function render(state: State, { e }: any): VTree {
   return h('div.sign-in-page', [
     h('label', [
       'email',
       h('input.email', {
         type: 'email',
         name: 'email',
-        value: state.signIn.email
+        value: state.signIn.email,
+        onchange: ({ target: { value } }) => e(changeEmail(value))
       }, []),
     ]),
     h('label', [
       'password',
       h('input.password', {
         type: 'password',
         name: 'password',
-        value: state.signIn.password
+        value: state.signIn.password,
+        onchange: ({ target: { value } }) => e(changePassword(value))
       }, [])
     ]),
-    h('button.sign-in', ['sign in'])
+    h('button.sign-in', {
+      onclick: () => e(signIn())
+    }, ['sign in'])
   ]);
 }

src/app/views/spot-form-view.ts

@@ -1,21 +1,32 @@
 import { h, VTree } from '../../framework/view';
 
 import { SpotForm } from '../models/spot-form';
+import { create as addSpot } from '../actions/add-spot';
+import {
+  create as changeSpotFormName
+} from '../actions/change-spot-form-name';
 
-const labeledTextBox = (name: string, value: string): VTree => {
+const labeledTextBox = (name: string, value: string, e: any): VTree => {
   return h('label', [
     name,
     h('input.' + name, {
       type: 'text',
       name,
-      value
+      value,
+      onchange: ({ target: { value } }) => e(changeSpotFormName(value))
     }, []),
   ]);
 };
 
-export default function render(state: SpotForm): VTree {
+export default function render(state: SpotForm, { e }: any): VTree {
   return h('form.spot', [
-    labeledTextBox('name', state.name),
-    h('button.add-spot', ['add spot'])
+    labeledTextBox('name', state.name, e),
+    h('button.add-spot', {
+      onclick: (event: Event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        e(addSpot());
+      }
+    }, ['add spot'])
   ]);
 };

src/app/views/stamp-rally-form-view.ts

@@ -1,21 +1,34 @@
 import { h, VTree } from '../../framework/view';
 
 import { StampRallyForm } from '../models/stamp-rally-form';
+import { create as addStampRallyAction } from '../actions/add-stamp-rally';
+import {
+  create as changeStampRallyFormName
+} from '../actions/change-stamp-rally-form-name';
 
-const labeledTextBox = (name: string, value: string): VTree => {
+const labeledTextBox = (name: string, value: string, e: any): VTree => {
   return h('label', [
     name,
     h('input.' + name, {
       type: 'text',
       name,
-      value
+      value,
+      onchange: ({ target: { value } }) => {
+        e(changeStampRallyFormName(value))
+      }
     }, []),
   ]);
 };
 
-export default function render(state: StampRallyForm): VTree {
+export default function render(state: StampRallyForm, { e }: any): VTree {
   return h('form.stamp-rally', [
-    labeledTextBox('name', state.name),
-    h('button.add-stamp-rally', ['add stamp-rally'])
+    labeledTextBox('name', state.name, e),
+    h('button.add-stamp-rally', {
+      onclick: (event: Event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        e(addStampRallyAction());
+      }
+    }, ['add stamp-rally'])
   ]);
 };

src/app/views/stamp-rally-list-page.ts

@@ -3,7 +3,7 @@ import { h, VTree } from '../../framework/view';
 import { State } from '../models/state';
 import renderStampRallyFormView from '../views/stamp-rally-form-view';
 
-export default function render(state: State): VTree {
+export default function render(state: State, { e }: any): VTree {
   return h('div.stamp-rally-list-page', [
     h('ul', state.stampRallies.map(stampRally => {
       const href = '/stamp_rallies/' + stampRally.name;
@@ -16,6 +16,6 @@ export default function render(state: State): VTree {
         ])
       ]);
     })),
-    renderStampRallyFormView(state.stampRallyForm)
+    renderStampRallyFormView(state.stampRallyForm, { e })
   ]);
 }

src/app/views/stamp-rally-show-page.ts

@@ -3,7 +3,7 @@ import { h, VTree } from '../../framework/view';
 import { State } from '../models/state';
 import renderSpotFormView from '../views/spot-form-view';
 
-export default function render(state: State): VTree {
+export default function render(state: State, { e }: any): VTree {
   return h('div.stamp-rally-show-page', [
     (
       state.stampRally
@@ -17,6 +17,6 @@ export default function render(state: State): VTree {
         spot.tagline
       ]);
     })),
-    renderSpotFormView(state.spotForm)
+    renderSpotFormView(state.spotForm, { e })
   ]);
 }

src/framework/client.ts

@@ -9,8 +9,7 @@ import { from as render$, is as isRender } from '../app/actions/render';
 
 class Client<State> {
   private viewRootSelector: string;
-  private view: (state: State) => VTree;
-  private viewAction: (dom: DOM) => O<A<string>>;
+  private view: (state: State, options: any) => VTree;
   private app: (
     action$: O<A<any>>,
     options: any
@@ -26,19 +25,18 @@ class Client<State> {
     routes: Route[],
     // for View Renderer
     viewRootSelector: string,
-    view: (state: State) => VTree,
-    viewAction: (dom: DOM) => O<A<any>>
+    view: (state: State, options: any) => VTree
   ) {
     this.viewRootSelector = viewRootSelector;
     this.view = view;
-    this.viewAction = viewAction;
     this.app = app;
     this.router = new Router(routes);
   }
 
   run(): void {
     const dom = new DOM(this.viewRootSelector);
     const state: State = (<any> window).INITIAL_STATE;
+    const e = (action: A<any>): void => subject.next(action);
     const subject = new Subject<A<any>>();
     const history = new HistoryRouter(this.router, subject);
     const fs = [
@@ -51,7 +49,7 @@ class Client<State> {
       (action: A<any>): A<any> => {
         if (!isRender(action)) return action;
         const state: any = action.params; // FIXME
-        const vtree = this.view(state);
+        const vtree = this.view(state, { e });
         dom.renderToDOM(vtree);
         return { type: 'noop' };
       }
@@ -66,11 +64,7 @@ class Client<State> {
       )
       .filter(action => action && action.type !== 'noop')
       .share();
-    const app$: O<A<any>> = Observable
-      .merge(
-        this.app(action$, { state }),
-        this.viewAction(dom)
-      );
+    const app$ = this.app(action$, { state });
     history.start();
     app$.subscribe(action => { setTimeout(() => subject.next(action)); });
   }