Add a NavLink with click capturing

Author: artfuldev

src/app.ts

@@ -1,7 +1,7 @@
 import { run } from '@cycle/run';
 import { App } from './components/App';
 import { makeDOMDriver } from '@cycle/dom';
-import { makeHashHistoryDriver } from '@cycle/history';
+import { captureClicks, makeHashHistoryDriver } from '@cycle/history';
 import { cssRaw } from 'typestyle';
 import { normalize, setupPage } from 'csstips';
 
@@ -30,5 +30,5 @@ cssRaw(`
 
 run(App, {
   dom: makeDOMDriver('#app'),
-  history: makeHashHistoryDriver()
+  history: captureClicks(makeHashHistoryDriver())
 });

src/components/Header/NavMenu.ts

@@ -1,16 +1,18 @@
-import { Stream } from 'xstream';
+import { Stream, MemoryStream } from 'xstream';
 import { DOMSource, VNode, nav, a } from '@cycle/dom';
 import isolate from '@cycle/isolate';
 import { style } from 'typestyle';
 import { rem } from 'csx';
+import { NavLink } from '../NavLink';
+import { Location } from '@cycle/history';
 
 interface Sources {
   dom: DOMSource;
+  history: MemoryStream<Location>;
 }
 
 interface Sinks {
   dom: Stream<VNode>;
-  history: Stream<string>;
 }
 
 const navLink = {
@@ -43,24 +45,27 @@ const className = style({
 });
 
 const xs = Stream;
+const menuItems = [
+  {
+    href: '/',
+    title: 'Home'
+  },
+  {
+    href: '/commits',
+    title: 'Commits'
+  },
+  {
+    href: '/about',
+    title: 'About'
+  }
+];
 
-const NavMenuComponent = ({ dom }: Sources): Sinks => {
-  const navigateTo$ =
-    dom.select('a')
-      .events('click', { preventDefault: true })
-      .map(ev => (ev.target as HTMLAnchorElement).href)
-      .debug();
-  const vdom$ =
-    xs.of(
-      nav(`.${className}`, [
-        a({ attrs: { href: '#/', title: 'Home' } }, ['Home']),
-        a({ attrs: { href: '#/commits', title: 'Commits' } }, ['Commits']),
-        a({ attrs: { href: '#/about', title: 'About' } }, ['About']),
-      ])
-    );
+const NavMenuComponent = ({ dom, history }: Sources): Sinks => {
+  const navLinks = menuItems.map(({ href, title }) => NavLink({ dom, history, href$: xs.of(href), title$: xs.of(title) }));
+  const navLinksDom$ = xs.combine(...navLinks.map(navLink => navLink.dom))
+  const vdom$ = navLinksDom$.map(navLinks => nav(`.${className}`, navLinks));
   return {
-    dom: vdom$,
-    history: navigateTo$
+    dom: vdom$
   };
 };
 

src/components/Header/index.ts

@@ -1,16 +1,17 @@
-import { Stream } from 'xstream';
+import { Stream, MemoryStream } from 'xstream';
 import { DOMSource, VNode, div, h1, em, br } from '@cycle/dom';
 import { style } from 'typestyle';
 import { rem } from 'csx';
 import { NavMenu } from './NavMenu';
+import { Location } from '@cycle/history';
 
 interface Sources {
   dom: DOMSource;
+  history: MemoryStream<Location>;
 }
 
 interface Sinks {
   dom: Stream<VNode>;
-  history: Stream<string>;
 }
 
 const className = style({
@@ -33,8 +34,8 @@ const className = style({
 
 const xs = Stream;
 
-export const Header = ({ dom }: Sources): Sinks => {
-  const navMenu = NavMenu({ dom });
+export const Header = ({ dom, history }: Sources): Sinks => {
+  const navMenu = NavMenu({ dom, history });
   const vdom$ = navMenu.dom.map(navMenu =>
     div(`.${className}`, [
       h1([
@@ -46,7 +47,6 @@ export const Header = ({ dom }: Sources): Sinks => {
     ])
   );
   return {
-    dom: vdom$,
-    history: navMenu.history
+    dom: vdom$
   };
 };

src/components/NavLink.ts

@@ -0,0 +1,35 @@
+import { Stream, MemoryStream } from 'xstream';
+import { DOMSource, VNode, a } from '@cycle/dom';
+import { Location } from '@cycle/history';
+import isolate from '@cycle/isolate';
+
+interface Sources {
+  dom: DOMSource;
+  history: MemoryStream<Location>;
+  href$: Stream<string>;
+  title$: Stream<string>;
+}
+
+interface Sinks {
+  dom: Stream<VNode>;
+  history: Stream<string>;
+}
+
+const xs = Stream;
+
+const NavLinkComponent = ({ dom, history, href$, title$ }: Sources): Sinks => {
+  const currentHref$ = history.map(location => location.pathname);
+  const active$ =
+    currentHref$
+      .map(href => href$.debug().map(h => href === h))
+      .flatten();
+  const vdom$ =
+    xs.combine(href$, active$, title$)
+      .map(([ href, active, title ]) => a(`${!!active ? '.active' : ''}`, { attrs: { href, title } }, [title]));
+  return {
+    dom: vdom$,
+    history: xs.empty()
+  };
+};
+
+export const NavLink = (sources: Sources): Sinks => isolate(NavLinkComponent)(sources);

src/layouts/HeaderLayout.ts

@@ -19,10 +19,10 @@ const className = style({
 
 const xs = Stream;
 
-export const HeaderLayout: Layout = ({ dom, component: { dom: componentDom, history } }) => {
-  const headerDom$ = Header({ dom }).dom;
+export const HeaderLayout: Layout = ({ dom, history, component: { dom: componentDom, history: componentHistory } }) => {
+  const headerComponent = Header({ dom, history });
   const vdom$ =
-    xs.combine(headerDom$, componentDom)
+    xs.combine(headerComponent.dom, componentDom)
       .map(([headerDom, component]) =>
         div(`.header.layout.${className}`, [
           header(headerDom),
@@ -32,6 +32,6 @@ export const HeaderLayout: Layout = ({ dom, component: { dom: componentDom, hist
       );
   return {
     dom: vdom$,
-    history
+    history: componentHistory
   };
 };