Merge pull request #9 from nakaji-dayo/master

Add example using cycle/http

Author: TylorS

example/contacts.json

@@ -0,0 +1,10 @@
+[
+    {
+        "name": "foo",
+        "email": "[email protected]"
+    },
+    {
+        "name": "bar",
+        "email": "[email protected]"
+    }
+]

example/package.json

@@ -13,6 +13,7 @@
   "license": "MIT",
   "dependencies": {
     "@cycle/core": "^6.0.3",
+    "@cycle/http": "^8.2.2",
     "cycle-snabbdom": "^1.2.0",
     "history": "^2.0.1",
     "rx": "^4.1.0"

example/src/app.js

@@ -4,12 +4,14 @@ import Sidebar from './components/sidebar'
 import Home from './components/home'
 import Inbox from './components/inbox'
 import Compose from './components/compose'
+import Contact from './components/contact'
 import NotFound from './components/notfound'
 
 const routes = {
   '/': Home,
   '/inbox': Inbox,
   '/compose': Compose,
+  '/contact': Contact,
   '*': NotFound,
 }
 
@@ -53,12 +55,13 @@ function App(sources) {
   const {router} = sources
   const match$ = router.define(routes)
   const sidebar = Sidebar(sources, match$.pluck('path'))
-  const childrenDOM$ = match$.map(
-    ({path, value}) => value({...sources, router: router.path(path)}).DOM
+  const children$ = match$.map(
+    ({path, value}) => value({...sources, router: router.path(path)})
   )
 
   return {
-    DOM: sidebar.DOM.combineLatest(childrenDOM$, view),
+    DOM: sidebar.DOM.combineLatest(children$.map(x => x.DOM), view),
+    HTTP: children$.map(x => x.HTTP).filter(x => !!x).mergeAll(),
   }
 }
 

example/src/components/contact.js

@@ -0,0 +1,23 @@
+import {Observable} from 'rx'
+import {div, h2, ul, li} from 'cycle-snabbdom'
+
+function Contact(sources) {
+  const getContacts$ = Observable.just({})
+          .map(() => ({
+            url: '/contacts.json',
+            method: 'GET',
+          }))
+  const contacts$ = sources.HTTP
+          .mergeAll()
+          .map(x => x.body)
+          .startWith([])
+  return {DOM: contacts$.map(xs => div([
+    h2({style: {padding: '1em'}}, 'Contact Stuffs'),
+    ul({},
+       xs.map(x => li({}, `${x.name}: ${x.email}`))
+      ),
+  ])),
+          HTTP: getContacts$}
+}
+
+export default Contact

example/src/components/sidebar.js

@@ -28,6 +28,7 @@ function Sidebar(sources, path$) {
   const inboxHref = createHref('/inbox')
   const composeHref = createHref('/compose')
   const contactHref = createHref('/contact')
+  const newHref = createHref('/new')
 
   const view$ = path$.map(() => {
     return ul({style: ulStyle},[
@@ -40,6 +41,9 @@ function Sidebar(sources, path$) {
       li({style: liStyle}, [
         a({style: linkStyle, props: {href: contactHref}}, 'Contacts'),
       ]),
+      li({style: liStyle}, [
+        a({style: linkStyle, props: {href: newHref}}, 'New'),
+      ]),
     ])
   })
 

example/src/main.js

@@ -1,5 +1,6 @@
 import {run} from '@cycle/core'
 import {makeDOMDriver} from 'cycle-snabbdom'
+import {makeHTTPDriver} from '@cycle/http'
 import {makeRouterDriver} from '../../lib'
 import {createHashHistory} from 'history'
 
@@ -10,4 +11,5 @@ const history = createHashHistory({queryKey: false})
 run(app, {
   DOM: makeDOMDriver('#app'),
   router: makeRouterDriver(history),
+  HTTP: makeHTTPDriver(),
 })