const M = Most.default

const connect = Most.connect

const App = React.createClass({

    render(){

        return (

            <form>

              <Height/>

              <Weight/>

              <BMI/>

            </form>

        )

    }

})

​

const heightAction = connect(intent$=>({setHeight: e=>({type:'setHeight', value: e.target.value})}))

const Height = heightAction(

    props => <label>

        height:

        <input type="number" onChange={props.actions.setHeight}/>

    </label>)

​

const weightAction = connect(intent$=>({setWeight: e=>({type:'setWeight', value: e.target.value})}))

​

const Weight = weightAction(

    props => <label>

    weight:

           <input type="number" onChange={props.actions.setWeight}/>

    </label>

)

const BMICalculator = connect(intent$=>{

    let height$ = intent$.filter(x=>x.type=='setHeight').map(e=>e.value)

    let weight$ = intent$.filter(x=>x.type=='setWeight').map(e=>e.value)

    let calculator = (height, weight) => {

        const heightMeters = height * 0.01;

        const bmi = Math.round(weight / (heightMeters * heightMeters));

        return {weight, height, bmi};

    }

    let bmi$ = height$.combine(calculator, weight$)

                      .map(({bmi})=>state=>({bmi: bmi}))

    return {bmi$}

})

​

const BMI = BMICalculator(

    props => <div>

      <p>bmi:{props.bmi}</p>

      <Health bmi={props.bmi}/>

    </div>

)

​

const Health = props => {

    let bmi = props.bmi

    let health = 'hehe'

    if(bmi<18.5) health= 'underweight'

    else if(bmi<24.9) health='normal'

    else if(bmi<30) health='Overweight'

    else if(bmi>=30) health='Obese'

    return <p>health:{health}</p>

}

​

ReactDOM.render(

    <M>

      <App/>

    </M>

    , document.getElementById('app'));

​