jasim/MetaRefreshReactExample

## MetaRefreshReactExample
<!DOCTYPE html>
<html>
<head>
    <script type='text/javascript' src="http://fb.me/JSXTransformer-0.12.1.js"></script>
    <script type='text/javascript' src="http://fb.me/react-with-addons-0.12.1.js"></script>
</head>

<style type="text/css">
    .CardsList-Card {
        background-color: #ddeeaa;
        font-size: 14px;
        padding: 0.5em;
        border: 2px solid green;
    }

    .CardsList {
        border: 1px solid red;
    }

</style>

<body>
<div id="CardsList"></div>
</body>

<script type="text/jsx">

    var CardsListCard = React.createClass({
        render: function () {
            return (
                    <div className="CardsList-Card">
                        <div className="CardsList-Card-Name">
                                {this.props.card.name}
                        </div>
                        <div className="CardsList-Card-Job">
                                {this.props.card.job}
                        </div>
                    </div>
            );
        }
    });

    var CardsListAddCardWidget = React.createClass({
        getInitialState: function () {
            return {
                name: "",
                job: ""
            }
        },

        handleNameChange: function (e) {
            this.setState({name: e.target.value});
        },

        handleJobChange: function (e) {
            this.setState({job: e.target.value});
        },

        handleAdd: function() {
            this.props.handleAdd({name: this.state.name, job: this.state.job})
        },

        render: function () {
            return (
                    <div className="CardsList-AddCardWidget">
                        <input type="text" placeholder="enter name" value={this.state.name} onChange={this.handleNameChange} />
                        <input type="text" placeholder="enter job"  value={this.state.job} onChange={this.handleJobChange} />
                        <button onClick={this.handleAdd}>Add!</button>
                    </div>
            );
        }
    });

    var CardsList = React.createClass({
        getInitialState: function () {
            return {
                cards: [
                    {id: 1, name: "Emil Soman", job: "hippie", company_name: "CodeMancers"},
                    {id: 2, name: "Jasim A Basheer", job: "wanderer", company_name: "NoWhere"},
                ],
                filterText: "CodeMancers",
            }
        },

        handleAdd: function (card) {
            var cards = this.state.cards;
            cards.push({id: cards.length, name: card.name, job: card.job});
            this.setState({cards: cards});
        },

        handleFilterTextChange: function(e) {
            this.setState({filterText: e.target.value});
        },

        render: function () {
            var self = this;
            var filteredCards = this.state.cards.filter(function(card) {
                if(self.state.filterText.length == 0) return true;
                return card.job == self.state.filterText
            });

            var cardsView = filteredCards.map(function (card) {
                return (<CardsListCard card={card} />);
            });

            return (
                    <div className="CardsList">
                        <h1>MetaRefresh List of Cards</h1>
                        {cardsView}
                        <input type="text" value={this.state.filterText} onChange={this.handleFilterTextChange} />
                        <CardsListAddCardWidget handleAdd={this.handleAdd} />
                    </div>
            );
        }
    });

    React.render(
            <CardsList />,
            document.getElementById('CardsList')
    );
</script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script type='text/javascript' src="http://fb.me/JSXTransformer-0.12.1.js"></script>
	<script type='text/javascript' src="http://fb.me/react-with-addons-0.12.1.js"></script>
	</head>

	<style type="text/css">
	.CardsList-Card {
	background-color: #ddeeaa;
	font-size: 14px;
	padding: 0.5em;
	border: 2px solid green;
	}

	.CardsList {
	border: 1px solid red;
	}

	</style>

	<body>
	<div id="CardsList"></div>
	</body>

	<script type="text/jsx">

	var CardsListCard = React.createClass({
	render: function () {
	return (
	<div className="CardsList-Card">
	<div className="CardsList-Card-Name">
	{this.props.card.name}
	</div>
	<div className="CardsList-Card-Job">
	{this.props.card.job}
	</div>
	</div>
	);
	}
	});

	var CardsListAddCardWidget = React.createClass({
	getInitialState: function () {
	return {
	name: "",
	job: ""
	}
	},

	handleNameChange: function (e) {
	this.setState({name: e.target.value});
	},

	handleJobChange: function (e) {
	this.setState({job: e.target.value});
	},

	handleAdd: function() {
	this.props.handleAdd({name: this.state.name, job: this.state.job})
	},

	render: function () {
	return (
	<div className="CardsList-AddCardWidget">
	<input type="text" placeholder="enter name" value={this.state.name} onChange={this.handleNameChange} />
	<input type="text" placeholder="enter job" value={this.state.job} onChange={this.handleJobChange} />
	<button onClick={this.handleAdd}>Add!</button>
	</div>
	);
	}
	});

	var CardsList = React.createClass({
	getInitialState: function () {
	return {
	cards: [
	{id: 1, name: "Emil Soman", job: "hippie", company_name: "CodeMancers"},
	{id: 2, name: "Jasim A Basheer", job: "wanderer", company_name: "NoWhere"},
	],
	filterText: "CodeMancers",
	}
	},

	handleAdd: function (card) {
	var cards = this.state.cards;
	cards.push({id: cards.length, name: card.name, job: card.job});
	this.setState({cards: cards});
	},

	handleFilterTextChange: function(e) {
	this.setState({filterText: e.target.value});
	},

	render: function () {
	var self = this;
	var filteredCards = this.state.cards.filter(function(card) {
	if(self.state.filterText.length == 0) return true;
	return card.job == self.state.filterText
	});

	var cardsView = filteredCards.map(function (card) {
	return (<CardsListCard card={card} />);
	});

	return (
	<div className="CardsList">
	<h1>MetaRefresh List of Cards</h1>
	{cardsView}
	<input type="text" value={this.state.filterText} onChange={this.handleFilterTextChange} />
	<CardsListAddCardWidget handleAdd={this.handleAdd} />
	</div>
	);
	}
	});

	React.render(
	<CardsList />,
	document.getElementById('CardsList')
	);
	</script>
	</html>