fold and merge

Author: jcouyang

docs/src/main/tut/examples/example.tsx

@@ -141,3 +141,28 @@ let Xeg7 = Xstream.fromEvent('click', 'decrement')
   let Eg7 = Xeg7.merge(Xeg6).apply(ViewEg7)
 
 xmount(<Eg7/>, document.getElementById('eg7') )
+
+const actions = ['-1', '+1', 'reset']
+let Xeg8 =
+  actions.map((action)=>Xstream.fromEvent('click', action).toFantasyX<{count:number}>())
+    .reduce((acc,a)=>acc.merge(a))
+    .foldS((acc, i) => {
+    acc.count = acc.count || 0
+      switch(i) {
+      case '-1': return {count: acc.count -1}
+      case '+1': return {count: acc.count +1}
+      case 'reset': return {count: 0}
+      default: acc
+      }
+    }
+)
+
+let ViewEg8 = props => <p>
+  <span className="result">{props.count}</span>
+  {actions.map(action=>
+    <input type="button" name={action} value={action} onClick={e=>props.actions.fromEvent(e)} />)}
+</p>
+
+let Eg8 = Xeg8.apply(ViewEg8)
+
+xmount(<Eg8/>, document.getElementById('eg8') )

docs/src/main/tut/examples/index.html

@@ -214,35 +214,36 @@ xmount(<Eg7/>, document.getElementById('eg7') )
 #+HTML: <p><div id="eg7"></div></p>
 
 
-# * Example 8: Fold multiple buttons
-
-# #+BEGIN_SRC js :tangle example.tsx
-#   const actions = ['-1', '+1', 'reset']
-#   let Xeg8 = fold(
-#     (acc, i) => {
-#       switch(i) {
-#       case '-1': return acc-1
-#       case '+1': return acc+1
-#       case 'reset': return 0
-#       default: acc
-#       }
-#     },
-#     0,
-#     actions.map((action)=>fromEvent('click', action))
-#       .reduce((acc,a)=>acc.merge(a)))
-
-#   let ViewEg8 = props => <p>
-#     <span className="result">{props.count}</span>
-#     {actions.map(action=>
-#       <input type="button" name={action} value={action} onClick={e=>props.actions.fromEvent(e)} />)}
-#   </p>
-
-#   let Eg8 = Xeg8.map(a=>({count: a})).apply(ViewEg8)
-
-#   xmount(<Eg8/>, document.getElementById('eg8') )
-# #+END_SRC
-
-# #+HTML: <p><div id="eg8"></div></p>
+* Example 8: Fold multiple buttons
+
+#+BEGIN_SRC js :tangle example.tsx
+  const actions = ['-1', '+1', 'reset']
+  let Xeg8 =
+    actions.map((action)=>Xstream.fromEvent('click', action).toFantasyX<{count:number}>())
+      .reduce((acc,a)=>acc.merge(a))
+      .foldS((acc, i) => {
+      acc.count = acc.count || 0
+        switch(i) {
+        case '-1': return {count: acc.count -1}
+        case '+1': return {count: acc.count +1}
+        case 'reset': return {count: 0}
+        default: acc
+        }
+      }
+  )
+
+  let ViewEg8 = props => <p>
+    <span className="result">{props.count}</span>
+    {actions.map(action=>
+      <input type="button" name={action} value={action} onClick={e=>props.actions.fromEvent(e)} />)}
+  </p>
+
+  let Eg8 = Xeg8.apply(ViewEg8)
+
+  xmount(<Eg8/>, document.getElementById('eg8') )
+#+END_SRC
+
+#+HTML: <p><div id="eg8"></div></p>
 
 #+HTML: <script src="example.js"></script>
 

docs/src/main/tut/examples/index.org

@@ -109,20 +109,20 @@ describe('Load Example Page', function() {
     })
   })
 
-  // describe('#Example 8', () => {
-  //   it('increase 3 and decrease 4', () => {
-  //     return page
-  //       .click('#eg8 input[name="+1"]')
-  //       .click('#eg8 input[name="reset"]')
-  //       .click('#eg8 input[name="+1"]')
-  //       .click('#eg8 input[name="+1"]')
-  //       .click('#eg8 input[name="+1"]')
-  //       .click('#eg8 input[name="-1"]')
-  //       .click('#eg8 input[name="-1"]')
-  //       .click('#eg8 input[name="-1"]')
-  //       .click('#eg8 input[name="-1"]')
-  //       .evaluate(() => document.querySelector('#eg8 .result').textContent)
-  //       .then(x=>expect(x).to.equal('-1'))
-  //   })
-  // })
+  describe('#Example 8', () => {
+    it('increase 3 and decrease 4', () => {
+      return page
+        .click('#eg8 input[name="+1"]')
+        .click('#eg8 input[name="reset"]')
+        .click('#eg8 input[name="+1"]')
+        .click('#eg8 input[name="+1"]')
+        .click('#eg8 input[name="+1"]')
+        .click('#eg8 input[name="-1"]')
+        .click('#eg8 input[name="-1"]')
+        .click('#eg8 input[name="-1"]')
+        .click('#eg8 input[name="-1"]')
+        .evaluate(() => document.querySelector('#eg8 .result').textContent)
+        .then(x=>expect(x).to.equal('-1'))
+    })
+  })
 })