maji-KY/react.html

## react.html
<!doctype html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>react</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="http://fb.me/react-with-addons-0.12.2.js"></script>
    <script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/0.11.6/react-router.js"></script>
    <script src="https://github.com/react-bootstrap/react-bootstrap/releases/download/v0.13.0/react-bootstrap.min.js"></script>
    <script src="js/ReactRouterBootstrap.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bacon.js/0.7.50/Bacon.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/superagent/0.15.7/superagent.min.js"></script>
    <script src="https://github.com/BinaryMuse/fluxxor/releases/download/1.5.2/fluxxor.js"></script>
    <!--<script type="text/jsx" src="app.js"></script>-->

</head>
<body>

<div id="appContainer"></div>

<!--<script type="text/jsx;harmony=true">-->
<script type="text/jsx">

    var ButtonLink = ReactRouterBootstrap.ButtonLink;

    var FluxMixin = Fluxxor.FluxMixin(React);
    var StoreWatchMixin = Fluxxor.StoreWatchMixin;


    var ActionTypes = {
        CHANGE_TODO_LIST: "CHANGE_TODO_LIST",
        DONE_TODO: "DONE_TODO"
    };

    var TodoStore = Fluxxor.createStore({
        initialize: function() {
            this.todos = [{
                id: 'Buy some milk',
                name: 'Buy some milk',
                done: false
            }];
            console.log("koko");
            console.log(this);
            this.bindActions(
                ActionTypes.CHANGE_TODO_LIST, this.onAddTodo,
                ActionTypes.DONE_TODO, this.onDoneTodo
            );
        },

        onAddTodo: function(payload) {
            this.todos.push({id: payload.text, name: payload.text, complete: false});
            this.emit("change");
        },

        onDoneTodo: function(payload) {
            console.log("onDoneTodo");
            console.log(this.todos);
            payload.todo.done = true;
            this.emit("change");
        },

        getState: function() {
            return {
                todos: this.todos
            };
        }
    });


    var Todo = React.createClass({
        mixins: [FluxMixin],
        onClick: function(e) {
            e.preventDefault();
            this.getFlux().actions.doneTodo(this.props.todo);
        },
        render: function() {
            var todo = this.props.todo;
            console.log(todo.name);
            var button = (todo.done) ? "": <button onClick={this.onClick}>Done</button>;
            return (<li>{todo.name} {button}</li>);
        }
    });

    var TodoList = React.createClass({
        mixins: [StoreWatchMixin("TodoStore"), FluxMixin],
        getStateFromFlux: function() {
            var flux = this.getFlux();
            console.log(this);
            return flux.store("TodoStore").getState();
        },
        render: function() {
            var rows = this.state.todos.filter(function(todo) {
                return !todo.done;
            }).map(function(todo) {
                return (<Todo key={todo.id} todo={todo}></Todo>);
            });
            return (
                <div className="active-todos">
                    <h2>Active</h2>
                    <ul>{rows}</ul>
                </div>
            );
        }
    });

    var TodoForm = React.createClass({
        componentWillMount: function() {
            console.log(this);
        },
        mixins: [React.addons.LinkedStateMixin, FluxMixin],
        getInitialState: function() {
            return {content: ''};
        },
        handleSubmit: function(e) {
            e.preventDefault();
            var name = this.state.content.trim();
            if(name) {
//                alert(name);
                // this.props.onSubmitTodo(name);// to dispatch event
                this.getFlux().actions.addTodo(name);
                this.setState({ content: ""});
            }
        },
        render: function() {
            var valueLink = this.linkState('content');
            var handleChange = function(e) {
                valueLink.requestChange(e.target.value);
            };
            return (
                <form onSubmit={this.handleSubmit}>
                    <input ref="todoName" type="text" value={valueLink.value} onChange={handleChange}></input><input type="submit"></input>
                </form>
            );
        }
    });

    var TodoApp = React.createClass({
        render: function() {
            return (
                <div>
                    <h1>My Todo</h1>
                    <TodoList/>
                    <TodoForm/>
                </div>
            );
        }
    });

    var Users = React.createClass({
        render: function() {
            return (
                <div>
                    <h1>Users</h1>
                    <ButtonLink to="/user/1">1</ButtonLink>
                    <ButtonLink to="/user/2">2</ButtonLink>
                    <ButtonLink to="/user/3">3</ButtonLink>
                </div>
            );
        }
    });

    var UsersView = React.createClass({
        render: function() {
            return (
                <div>
                    <RouteHandler />
                </div>
            );
        }
    });

    var User = React.createClass({
        mixins: [ReactRouter.State],
        render: function() {
            return (
                <div>
                    <h1>User: {this.getParams().userId}</h1>
                    <ButtonLink to="list">back</ButtonLink>
                </div>
            );
        }
    });

    var NotFound = React.createClass({
        render: function() {
            return (
                <div>
                    <h1>ねーよ</h1>
                </div>
            );
        }
    });

    var App = React.createClass({
        mixins: [ FluxMixin ],
        componentWillMount: function() {
            console.log(this);
        },
        render: function() {
            var flux = this.getFlux();
            return (
                <div>
                    <h1>title</h1>
                    <ButtonLink to="/">todo</ButtonLink><br/>
                    <ButtonLink to="list">users</ButtonLink>
                    <RouteHandler flux={flux} />
                </div>
            );
        }
    });

    var Router = ReactRouter;
    var Route = ReactRouter.Route;
    var Routes = ReactRouter.Routes;
    var Redirect = ReactRouter.Redirect;
    var RouteHandler = ReactRouter.RouteHandler;
    var routes = (
        <Route handler={App} path="/">
            <ReactRouter.DefaultRoute handler={TodoApp} />
            <Route name="list" handler={Users} />
            <Route name="users" handler={UsersView}>
                <Route name="user" path="/user/:userId" handler={User} />
                <ReactRouter.NotFoundRoute handler={NotFound}/>
            </Route>
            <ReactRouter.NotFoundRoute handler={NotFound}/>
            <Redirect from="company" to="about" />
        </Route>
    );


    var stores = {
        TodoStore : new TodoStore()
    };
    var actions = {
        addTodo: function(text) {
            this.dispatch(ActionTypes.CHANGE_TODO_LIST, {text: text});
        },
        doneTodo: function(todo) {
            this.dispatch(ActionTypes.DONE_TODO, {todo: todo});
        }
    };
    var flux = new Fluxxor.Flux(stores, actions);
    Router.run(routes, function (Handler) {
        React.render(<Handler flux={flux} />,  document.getElementById('appContainer'));
    });

</script>


</body>
</html>
	<!doctype html>
	<html lang="ja">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>react</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
	<script src="http://fb.me/react-with-addons-0.12.2.js"></script>
	<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/0.11.6/react-router.js"></script>
	<script src="https://github.com/react-bootstrap/react-bootstrap/releases/download/v0.13.0/react-bootstrap.min.js"></script>
	<script src="js/ReactRouterBootstrap.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/bacon.js/0.7.50/Bacon.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/superagent/0.15.7/superagent.min.js"></script>
	<script src="https://github.com/BinaryMuse/fluxxor/releases/download/1.5.2/fluxxor.js"></script>
	<!--<script type="text/jsx" src="app.js"></script>-->

	</head>
	<body>

	<div id="appContainer"></div>

	<!--<script type="text/jsx;harmony=true">-->
	<script type="text/jsx">

	var ButtonLink = ReactRouterBootstrap.ButtonLink;

	var FluxMixin = Fluxxor.FluxMixin(React);
	var StoreWatchMixin = Fluxxor.StoreWatchMixin;


	var ActionTypes = {
	CHANGE_TODO_LIST: "CHANGE_TODO_LIST",
	DONE_TODO: "DONE_TODO"
	};

	var TodoStore = Fluxxor.createStore({
	initialize: function() {
	this.todos = [{
	id: 'Buy some milk',
	name: 'Buy some milk',
	done: false
	}];
	console.log("koko");
	console.log(this);
	this.bindActions(
	ActionTypes.CHANGE_TODO_LIST, this.onAddTodo,
	ActionTypes.DONE_TODO, this.onDoneTodo
	);
	},

	onAddTodo: function(payload) {
	this.todos.push({id: payload.text, name: payload.text, complete: false});
	this.emit("change");
	},

	onDoneTodo: function(payload) {
	console.log("onDoneTodo");
	console.log(this.todos);
	payload.todo.done = true;
	this.emit("change");
	},

	getState: function() {
	return {
	todos: this.todos
	};
	}
	});


	var Todo = React.createClass({
	mixins: [FluxMixin],
	onClick: function(e) {
	e.preventDefault();
	this.getFlux().actions.doneTodo(this.props.todo);
	},
	render: function() {
	var todo = this.props.todo;
	console.log(todo.name);
	var button = (todo.done) ? "": <button onClick={this.onClick}>Done</button>;
	return (<li>{todo.name} {button}</li>);
	}
	});

	var TodoList = React.createClass({
	mixins: [StoreWatchMixin("TodoStore"), FluxMixin],
	getStateFromFlux: function() {
	var flux = this.getFlux();
	console.log(this);
	return flux.store("TodoStore").getState();
	},
	render: function() {
	var rows = this.state.todos.filter(function(todo) {
	return !todo.done;
	}).map(function(todo) {
	return (<Todo key={todo.id} todo={todo}></Todo>);
	});
	return (
	<div className="active-todos">
	<h2>Active</h2>
	<ul>{rows}</ul>
	</div>
	);
	}
	});

	var TodoForm = React.createClass({
	componentWillMount: function() {
	console.log(this);
	},
	mixins: [React.addons.LinkedStateMixin, FluxMixin],
	getInitialState: function() {
	return {content: ''};
	},
	handleSubmit: function(e) {
	e.preventDefault();
	var name = this.state.content.trim();
	if(name) {
	// alert(name);
	// this.props.onSubmitTodo(name);// to dispatch event
	this.getFlux().actions.addTodo(name);
	this.setState({ content: ""});
	}
	},
	render: function() {
	var valueLink = this.linkState('content');
	var handleChange = function(e) {
	valueLink.requestChange(e.target.value);
	};
	return (
	<form onSubmit={this.handleSubmit}>
	<input ref="todoName" type="text" value={valueLink.value} onChange={handleChange}></input><input type="submit"></input>
	</form>
	);
	}
	});

	var TodoApp = React.createClass({
	render: function() {
	return (
	<div>
	<h1>My Todo</h1>
	<TodoList/>
	<TodoForm/>
	</div>
	);
	}
	});

	var Users = React.createClass({
	render: function() {
	return (
	<div>
	<h1>Users</h1>
	<ButtonLink to="/user/1">1</ButtonLink>
	<ButtonLink to="/user/2">2</ButtonLink>
	<ButtonLink to="/user/3">3</ButtonLink>
	</div>
	);
	}
	});

	var UsersView = React.createClass({
	render: function() {
	return (
	<div>
	<RouteHandler />
	</div>
	);
	}
	});

	var User = React.createClass({
	mixins: [ReactRouter.State],
	render: function() {
	return (
	<div>
	<h1>User: {this.getParams().userId}</h1>
	<ButtonLink to="list">back</ButtonLink>
	</div>
	);
	}
	});

	var NotFound = React.createClass({
	render: function() {
	return (
	<div>
	<h1>ねーよ</h1>
	</div>
	);
	}
	});

	var App = React.createClass({
	mixins: [ FluxMixin ],
	componentWillMount: function() {
	console.log(this);
	},
	render: function() {
	var flux = this.getFlux();
	return (
	<div>
	<h1>title</h1>
	<ButtonLink to="/">todo</ButtonLink><br/>
	<ButtonLink to="list">users</ButtonLink>
	<RouteHandler flux={flux} />
	</div>
	);
	}
	});

	var Router = ReactRouter;
	var Route = ReactRouter.Route;
	var Routes = ReactRouter.Routes;
	var Redirect = ReactRouter.Redirect;
	var RouteHandler = ReactRouter.RouteHandler;
	var routes = (
	<Route handler={App} path="/">
	<ReactRouter.DefaultRoute handler={TodoApp} />
	<Route name="list" handler={Users} />
	<Route name="users" handler={UsersView}>
	<Route name="user" path="/user/:userId" handler={User} />
	<ReactRouter.NotFoundRoute handler={NotFound}/>
	</Route>
	<ReactRouter.NotFoundRoute handler={NotFound}/>
	<Redirect from="company" to="about" />
	</Route>
	);


	var stores = {
	TodoStore : new TodoStore()
	};
	var actions = {
	addTodo: function(text) {
	this.dispatch(ActionTypes.CHANGE_TODO_LIST, {text: text});
	},
	doneTodo: function(todo) {
	this.dispatch(ActionTypes.DONE_TODO, {todo: todo});
	}
	};
	var flux = new Fluxxor.Flux(stores, actions);
	Router.run(routes, function (Handler) {
	React.render(<Handler flux={flux} />, document.getElementById('appContainer'));
	});

	</script>



	</body>
	</html>