Meiosis examples v0.4.2.

labeled-sliders/labeledSlider/view.js

@@ -1,9 +1,9 @@
 import h from "snabbdom/h";
 const { div, input, span } = require("hyperscript-helpers")(h);
 
-const view = ({actions, measurement, index}) => {
+const view = ({measurement, index}, actions) => {
   const getValue = evt => parseInt(evt.target.value, 10);
-  const onChangeValue = evt => actions.next({index, value: getValue(evt)});
+  const onChangeValue = evt => actions.sendUpdate({index, value: getValue(evt)});
 
   return (
     div([

labeled-sliders/sliderContainer/main.js

@@ -1,6 +1,5 @@
-import { assoc, merge } from "ramda";
-import { Action } from "./actions";
-import { initialModel, transform } from "./model";
+import { initialModel } from "./model";
+import receiveUpdate from "./receiveUpdate";
 import view from "./view";
 
 import createLabeledSlider from "../labeledSlider/main";
@@ -11,16 +10,7 @@ const createSliderContainer = createComponent => {
   return createComponent({
     initialModel,
     view: view(LabeledSlider),
-    transform: transform(Action),
-    receivers: [(model, update) => {
-      if (parseInt(update.index, 10) >= 0) {
-        model.measurements[update.index] = assoc("value", update.value, model.measurements[update.index]);
-      }
-      else {
-        model = merge(model, update);
-      }
-      return model;
-    }]
+    receiveUpdate: receiveUpdate
   });
 };
 

labeled-sliders/sliderContainer/model.js

@@ -1,30 +1,6 @@
-import { append, assoc } from "ramda";
-
 const initialModel = {
   measurements: [],
   nextId: 0
 };
 
-const rnd = (min, max) => Math.round(Math.random() * min) + (max || 0);
-
-const transform = Action => (model, action) => Action.case({
-  AddMeasurement: () =>
-    assoc("nextId",
-      model.nextId + 1,
-      assoc("measurements",
-        append({
-          id: model.nextId,
-          label: "Measurement",
-          value: rnd(50),
-          max: rnd(50,100),
-          units: rnd(10) % 2 === 0 ? "cm" : "mm"
-        }, model.measurements),
-        model
-      )
-    ),
-
-  RemoveMeasurement: id =>
-    assoc("measurements", model.measurements.filter(m => m.id !== id), model)
-}, action);
-
-export { initialModel, transform };
+export { initialModel };

labeled-sliders/sliderContainer/receiveUpdate.js

@@ -0,0 +1,36 @@
+import { append, assoc, merge } from "ramda";
+import { Action } from "./actions";
+
+const rnd = (min, max) => Math.round(Math.random() * min) + (max || 0);
+
+const transform = (model, action) => Action.case({
+  AddMeasurement: () =>
+    assoc("nextId",
+      model.nextId + 1,
+      assoc("measurements",
+        append({
+          id: model.nextId,
+          label: "Measurement",
+          value: rnd(50),
+          max: rnd(50,100),
+          units: rnd(10) % 2 === 0 ? "cm" : "mm"
+        }, model.measurements),
+        model
+      )
+    ),
+
+  RemoveMeasurement: id =>
+    assoc("measurements", model.measurements.filter(m => m.id !== id), model)
+}, action);
+
+const receiveUpdate = (model, update) => {
+  if (parseInt(update.index, 10) >= 0) {
+    model.measurements[update.index] = assoc("value", update.value, model.measurements[update.index]);
+  }
+  else {
+    model = merge(model, transform(model, update));
+  }
+  return model;
+};
+
+export default receiveUpdate;

labeled-sliders/sliderContainer/view.js

@@ -3,13 +3,13 @@ const { div } = require("hyperscript-helpers")(h);
 
 import { Action } from "./actions";
 
-const view = LabeledSlider => ({model, actions}) => {
-  const onAddMeasurement = _evt => actions.next(Action.AddMeasurement());
-  const onRemoveMeasurement = id => actions.next(Action.RemoveMeasurement(id));
+const view = LabeledSlider => (model, actions) => {
+  const onAddMeasurement = _evt => actions.sendUpdate(Action.AddMeasurement());
+  const onRemoveMeasurement = id => actions.sendUpdate(Action.RemoveMeasurement(id));
 
-  const renderMeasurement = (measurement, index) => 
+  const renderMeasurement = (measurement, index) =>
     div({key: measurement.id, style: {border: "1px solid gray"}, id: measurement.id}, [
-      LabeledSlider({actions, measurement, index}),
+      LabeledSlider({measurement, index}, actions),
       div([
         h("button.btn.btn-danger.btn-sm",
           {on: {click: [onRemoveMeasurement, measurement.id]}}, "Remove Measurement")