josephg/react.html

## react.html
<!DOCTYPE html>
<html>
  <head>
    <title>Hello React</title>
    <link rel="stylesheet" href="base.css" />
    <script src="http://fb.me/react-0.11.0.js"></script>
    <script src="http://fb.me/JSXTransformer-0.11.0.js"></script>
    <script src="channel/bcsocket.js"></script>
    <script src="share.uncompressed.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
<script type="text/jsx">
/** @jsx React.DOM */

var s = new BCSocket(null, {reconnect: true});
var sjs = new window.sharejs.Connection(s);

var doc = sjs.get('demo', 'react');
doc.subscribe();

doc.whenReady(function() {
  if (!doc.type) doc.create('json0');
  if (doc.type.name !== 'json0') throw Error('Unexpected doc type');

  if (!doc.snapshot) {
    doc.submitOp([{p:[], oi:[]}]);
  }
});


var Comment = React.createClass({
  render: function() {
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        {this.props.children}
      </div>
    );
  }
});

var CommentList = React.createClass({
  render: function() {
    var commentNodes = this.props.data.map(function (comment) {
      return (
        <Comment author={comment.author}>
          {comment.text}
        </Comment>
      );
    });
    return (
      <div className="commentList">
        {commentNodes}
      </div>
    );
  }
});

var CommentForm = React.createClass({
  handleSubmit: function() {
    var author = this.refs.author.getDOMNode().value.trim();
    var text = this.refs.text.getDOMNode().value.trim();
    if (!text || !author) {
      return false;
    }

    var self = this;
    doc.whenReady(function() {
      doc.submitOp([{p:[doc.snapshot.length], li:{author:author, text:text}}], self);
    });

    // TODO: send request to the server
    this.refs.author.getDOMNode().value = '';
    this.refs.text.getDOMNode().value = '';
    return false;
  },
  render: function() {
    return (
      <form className="commentForm" onSubmit={this.handleSubmit}>
        <input type="text" placeholder="Your name" ref="author" />
        <input type="text" placeholder="Say something..." ref="text" />
        <input type="submit" value="Post" />
      </form>
    );
  }
});

var CommentBox = React.createClass({
  getInitialState: function() {
    return {data: []};
  },
  componentDidMount: function() {
    var self = this;

    doc.whenReady(function() {
      self.setState({data: doc.snapshot});

      var context = doc.createContext();
      context._onOp = function(op) {
        self.setState({data: this.getSnapshot()});
      };
    });
  },
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.state.data} />
        <hr />
        <CommentForm />
      </div>
    );
  }
});

React.renderComponent(
  <CommentBox />,
  document.getElementById('content')
);

function swap12() {
  doc.submitOp([{p:[1],lm:0}]);
}

</script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Hello React</title>
	<link rel="stylesheet" href="base.css" />
	<script src="http://fb.me/react-0.11.0.js"></script>
	<script src="http://fb.me/JSXTransformer-0.11.0.js"></script>
	<script src="channel/bcsocket.js"></script>
	<script src="share.uncompressed.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
	</head>
	<body>
	<div id="content"></div>
	<script type="text/jsx">
	/** @jsx React.DOM */

	var s = new BCSocket(null, {reconnect: true});
	var sjs = new window.sharejs.Connection(s);

	var doc = sjs.get('demo', 'react');
	doc.subscribe();

	doc.whenReady(function() {
	if (!doc.type) doc.create('json0');
	if (doc.type.name !== 'json0') throw Error('Unexpected doc type');

	if (!doc.snapshot) {
	doc.submitOp([{p:[], oi:[]}]);
	}
	});


	var Comment = React.createClass({
	render: function() {
	return (
	<div className="comment">
	<h2 className="commentAuthor">
	{this.props.author}
	</h2>
	{this.props.children}
	</div>
	);
	}
	});

	var CommentList = React.createClass({
	render: function() {
	var commentNodes = this.props.data.map(function (comment) {
	return (
	<Comment author={comment.author}>
	{comment.text}
	</Comment>
	);
	});
	return (
	<div className="commentList">
	{commentNodes}
	</div>
	);
	}
	});

	var CommentForm = React.createClass({
	handleSubmit: function() {
	var author = this.refs.author.getDOMNode().value.trim();
	var text = this.refs.text.getDOMNode().value.trim();
	if (!text \|\| !author) {
	return false;
	}

	var self = this;
	doc.whenReady(function() {
	doc.submitOp([{p:[doc.snapshot.length], li:{author:author, text:text}}], self);
	});

	// TODO: send request to the server
	this.refs.author.getDOMNode().value = '';
	this.refs.text.getDOMNode().value = '';
	return false;
	},
	render: function() {
	return (
	<form className="commentForm" onSubmit={this.handleSubmit}>
	<input type="text" placeholder="Your name" ref="author" />
	<input type="text" placeholder="Say something..." ref="text" />
	<input type="submit" value="Post" />
	</form>
	);
	}
	});

	var CommentBox = React.createClass({
	getInitialState: function() {
	return {data: []};
	},
	componentDidMount: function() {
	var self = this;

	doc.whenReady(function() {
	self.setState({data: doc.snapshot});

	var context = doc.createContext();
	context._onOp = function(op) {
	self.setState({data: this.getSnapshot()});
	};
	});
	},
	render: function() {
	return (
	<div className="commentBox">
	<h1>Comments</h1>
	<CommentList data={this.state.data} />
	<hr />
	<CommentForm />
	</div>
	);
	}
	});

	React.renderComponent(
	<CommentBox />,
	document.getElementById('content')
	);

	function swap12() {
	doc.submitOp([{p:[1],lm:0}]);
	}

	</script>
	</body>
	</html>