React.js based simple TODO list with lenses.

README.markdown

React.js based simple TODO list with lenses.

Based on hexlet.io react.js course's final task https://ru.hexlet.io/lessons/one_way_data_flow/theory_unit

A Pen by Ilya Beda on CodePen.

License.

index.html

<div id="example">
</div>

script.js

var itemsLens = Tscope.attr('items');
var valueLens = Tscope.attr('value');

var Item = React.createClass({
                handleOnRemove: function() {
                    this.props.onRemove(this.props.item.id);
                },

                render: function() {
                    return <div>
                        {this.props.item.value}
                        <input type="button" className="remove" value="remove" onClick={this.handleOnRemove} />
                    </div>
                }
            })

            var Box = React.createClass({
                getInitialState: function() {
                    return {value: "", items: []};
                },

                handleOnChange: function(e) {
                    e.preventDefault();
                    this.setState({value: e.target.value})
                },

                handleOnRemove: function(id) {                   
                    var items = itemsLens.traversal(function(item) {
                      return item.id !== id 
                    }).get(this.state);                    
                    this.setState(itemsLens.set(this.state, items));
                },

                handleOnClick: function(e) {
                    e.preventDefault();
                    var items = itemsLens(this.state);
                    var item = {id: Math.random(), value: this.state.value}
                    items.push(item);
                    this.setState(itemsLens(valueLens(this.state, ""), items));
                },

                render: function() {
                    var value = this.state.value;
                    var items = this.state.items;
                    var self = this;

                    return (
                        <div>
                            <form action="">
                                <input className="text" type="text" value={value} onChange={this.handleOnChange} />
                                <input className="submit" type="submit" onClick={this.handleOnClick} />
                            </form>

                            <div className="items">
                                {items.map(function(item){ return <Item item={item} onRemove={self.handleOnRemove} /> })}
                            </div>
                        </div>
                    );
                }
            })

            React.render(
                <Box />,
                document.getElementById("example")
            );

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js"></script>
<script src="http://bro.agency/js/tscope.js"></script>