Add a summing pair of counters example

examples/sum-counters/Counter.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Record } from 'immutable';
+import { Union } from 'results';
+import { component, Update } from '../../spindle';
+
+
+const Model = Record({
+  value: 0,
+});
+
+
+const Msg = Union({
+  Increment: null,
+  Decrement: null,
+});
+
+
+const update = (msg, model) => Msg.match(msg, {
+  Increment: () => {
+    const newModel = model.update('value', v => v + 1);
+    return Update({
+      model: newModel,
+      emit: newModel.get('value'),
+    });
+  },
+
+  Decrement: () => {
+    const newModel = model.update('value', v => v - 1);
+    return Update({
+      model: newModel,
+      emit: newModel.get('value'),
+    });
+  },
+});
+
+
+const view = (model, BoundMsg) => (
+  <p>
+    <button onClick={BoundMsg.Decrement}>-</button>
+    {model.get('value')}
+    <button onClick={BoundMsg.Increment}>+</button>
+  </p>
+);
+
+
+export default component('Counter',
+  { Model, Msg, update, view });

examples/sum-counters/SummedPair.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Record } from 'immutable';
+import { Union } from 'results';
+import { component, Update } from '../../spindle';
+import Counter from './Counter';
+
+
+const Model = Record({
+  topValue: null,
+  bottomValue: null,
+});
+
+
+const Msg = Union({
+  TopValue: null,
+  BottomValue: null,
+});
+
+
+const update = (msg, model) => Msg.match(msg, {
+  TopValue: v =>
+    Update({ model: model.set('topValue', v) }),
+
+  BottomValue: v =>
+    Update({ model: model.set('bottomValue', v) }),
+});
+
+
+const view = (model, BoundMsg) => (
+  <div>
+    <p>here are some counters:</p>
+    <Counter onEmit={BoundMsg.TopValue} />
+    <Counter onEmit={BoundMsg.BottomValue} />
+    <p>their sum is: {model.get('topValue') + model.get('bottomValue')}</p>
+  </div>
+);
+
+
+export default component('SummedPair',
+  { Model, Msg, update, view });

examples/sum-counters/app.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import SummedPair from './SummedPair';
+
+
+ReactDOM.render(<SummedPair />, document.getElementById('app'));

package.json

@@ -8,7 +8,8 @@
     "build": "browserify app.js -t babelify --outfile bundle.js",
     "watch-counter": "watchify examples/counter/app.js -d -t babelify --outfile bundle.js",
     "watch-pair": "watchify examples/pair-of-counters/app.js -d -t babelify --outfile bundle.js",
-    "watch-n": "watchify examples/n-counters/app.js -d -t babelify --outfile bundle.js"
+    "watch-n": "watchify examples/n-counters/app.js -d -t babelify --outfile bundle.js",
+    "watch-sum": "watchify examples/sum-counters/app.js -d -t babelify --outfile bundle.js"
   },
   "author": "uniphil",
   "license": "GPL",