hasdavidc/yo.html

## yo.html
<!DOCTYPE html>
  <head>
    <!-- React JS -->
    <script src="http://fb.me/react-0.10.0.min.js"></script>
    <script src="http://fb.me/JSXTransformer-0.10.0.js"></script>

    <!-- Firebase JS -->
    <script src="https://cdn.firebase.com/js/client/1.0.17/firebase.js"></script>
    <!-- Firebase Login JS -->
    <script src="https://cdn.firebase.com/js/simple-login/1.6.1/firebase-simple-login.js"></script>
    <!-- ReactFire -->
    <script src="https://cdn.firebase.com/libs/reactfire/0.1.6/reactfire.min.js"></script>
  </head>
  <body>
    <div id="mount"></div>

    <script type="text/jsx">
      /** @jsx React.DOM */

      var baseUrl = 'https://yo-in-react.firebaseio.com';

      var UserDisplay = React.createClass({
        render : function() {
          return <h3>Username: {this.props.user.name}</h3>;
        }
      });

      var PeopleToYo = React.createClass({
        mixins : [ReactFireMixin],
        componentWillMount : function() {
          this.bindAsArray(new Firebase(baseUrl + '/users/' + this.props.name + '/yoList'), 'yoList');
        },
        getInitialState : function() {
          return {
            newPerson : '',
            yoList : [],
            showError : false
          };
        },
        _sendYo : function(personToYo) {
          var yoRecipient = new Firebase(baseUrl + '/users/' + personToYo);

          yoRecipient.once('value', function(data) {
            if (!data.val()) {
              return;
            }

            yoRecipient.child('yoCount').set((data.val().yoCount + 1) || 1);
          });
        },
        _handleChange : function(event) {
          this.setState({
            showError : false,
            newPerson : event.target.value
          });
        },
        _addPerson : function() {
          if (!this.state.newPerson.trim()) {
            return;
          }

          var $this = this;
          var newPersonRef = new Firebase(baseUrl + '/users/' + this.state.newPerson.trim());
          newPersonRef.once('value', function(data) {
            if (!data.val()) {
              $this.setState({
                showError : true
              });
              return;
            }

            $this.firebaseRefs['yoList'].push({
              name: $this.state.newPerson.trim()
            });

            $this.setState({
              showError : false,
              newPerson : ''
            });
          });

        },
        render : function() {
          return (
            <section>
              <ul>{this.state.yoList.map(function(person) {
                return <li>{person.name} <button onClick={this._sendYo.bind(this, person.name)}>Yo</button></li>;
              }, this)}</ul>

              <input type="text" value={this.state.newPerson} onChange={this._handleChange} />
              <button onClick={this._addPerson}>Add to Yo List</button>
              {this.state.showError ? 'That person doesn\'t exist!' : ''}
            </section>
          );
        }
      });

      var YoCount = React.createClass({
        render : function() {
          return <div>Yo Count: {this.props.user.yoCount || 0}</div>;
        }
      });

      var App = React.createClass({
        mixins : [ReactFireMixin],
        componentWillMount : function() {

          var $this = this;

          $this.authRef = new FirebaseSimpleLogin(new Firebase(baseUrl), function(error, user) {
            $this.setState({
              errorMsg : ''
            });

            if (error) {
              // an error occurred while attempting login
              $this.setState({
                errorMsg : error.message,
                authenticated : false
              });
            } else if (user) {
              // user authenticated with Firebase

              $this.setState({
                name : user.username,
                authenticated : true
              });

              var newRef = new Firebase(baseUrl + '/users/' + user.username);

              $this.bindAsObject(newRef, 'user');
              newRef.child('name').set(user.username);

            } else {
              // user is logged out
              $this.setState({
                authenticated : false
              });
            }
          });
        },
        getInitialState : function() {
          return {
            name : '',
            user : {},
            errorMsg : '',
            authenticated : false
          };
        },
        _logout : function() {
          this.authRef.logout();
        },
        _login : function() {
          this.authRef.login('twitter', {
            rememberMe: true
          });
        },
        render : function() {

          var loggedIn = (
            <section>
              <a href="#" onClick={this._logout}>Logout</a>
              <UserDisplay user={this.state.user} />
              <PeopleToYo name={this.state.name} />
              <YoCount user={this.state.user} />
            </section>
          );

          var loggedOut = (
            <section>
              <a href="#" onClick={this._login}>Login</a>
              <div>{this.state.errorMsg ? ('Error : ' + this.state.errorMsg) : ''}</div>
            </section>
          );

          return this.state.authenticated ? loggedIn : loggedOut;
        }
      });

      React.renderComponent(<App />, document.getElementById('mount'));
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<head>
	<!-- React JS -->
	<script src="http://fb.me/react-0.10.0.min.js"></script>
	<script src="http://fb.me/JSXTransformer-0.10.0.js"></script>

	<!-- Firebase JS -->
	<script src="https://cdn.firebase.com/js/client/1.0.17/firebase.js"></script>
	<!-- Firebase Login JS -->
	<script src="https://cdn.firebase.com/js/simple-login/1.6.1/firebase-simple-login.js"></script>
	<!-- ReactFire -->
	<script src="https://cdn.firebase.com/libs/reactfire/0.1.6/reactfire.min.js"></script>
	</head>
	<body>
	<div id="mount"></div>

	<script type="text/jsx">
	/** @jsx React.DOM */

	var baseUrl = 'https://yo-in-react.firebaseio.com';

	var UserDisplay = React.createClass({
	render : function() {
	return <h3>Username: {this.props.user.name}</h3>;
	}
	});

	var PeopleToYo = React.createClass({
	mixins : [ReactFireMixin],
	componentWillMount : function() {
	this.bindAsArray(new Firebase(baseUrl + '/users/' + this.props.name + '/yoList'), 'yoList');
	},
	getInitialState : function() {
	return {
	newPerson : '',
	yoList : [],
	showError : false
	};
	},
	_sendYo : function(personToYo) {
	var yoRecipient = new Firebase(baseUrl + '/users/' + personToYo);

	yoRecipient.once('value', function(data) {
	if (!data.val()) {
	return;
	}

	yoRecipient.child('yoCount').set((data.val().yoCount + 1) \|\| 1);
	});
	},
	_handleChange : function(event) {
	this.setState({
	showError : false,
	newPerson : event.target.value
	});
	},
	_addPerson : function() {
	if (!this.state.newPerson.trim()) {
	return;
	}

	var $this = this;
	var newPersonRef = new Firebase(baseUrl + '/users/' + this.state.newPerson.trim());
	newPersonRef.once('value', function(data) {
	if (!data.val()) {
	$this.setState({
	showError : true
	});
	return;
	}

	$this.firebaseRefs['yoList'].push({
	name: $this.state.newPerson.trim()
	});

	$this.setState({
	showError : false,
	newPerson : ''
	});
	});

	},
	render : function() {
	return (
	<section>
	<ul>{this.state.yoList.map(function(person) {
	return <li>{person.name} <button onClick={this._sendYo.bind(this, person.name)}>Yo</button></li>;
	}, this)}</ul>

	<input type="text" value={this.state.newPerson} onChange={this._handleChange} />
	<button onClick={this._addPerson}>Add to Yo List</button>
	{this.state.showError ? 'That person doesn\'t exist!' : ''}
	</section>
	);
	}
	});

	var YoCount = React.createClass({
	render : function() {
	return <div>Yo Count: {this.props.user.yoCount \|\| 0}</div>;
	}
	});

	var App = React.createClass({
	mixins : [ReactFireMixin],
	componentWillMount : function() {

	var $this = this;

	$this.authRef = new FirebaseSimpleLogin(new Firebase(baseUrl), function(error, user) {
	$this.setState({
	errorMsg : ''
	});

	if (error) {
	// an error occurred while attempting login
	$this.setState({
	errorMsg : error.message,
	authenticated : false
	});
	} else if (user) {
	// user authenticated with Firebase

	$this.setState({
	name : user.username,
	authenticated : true
	});

	var newRef = new Firebase(baseUrl + '/users/' + user.username);

	$this.bindAsObject(newRef, 'user');
	newRef.child('name').set(user.username);

	} else {
	// user is logged out
	$this.setState({
	authenticated : false
	});
	}
	});
	},
	getInitialState : function() {
	return {
	name : '',
	user : {},
	errorMsg : '',
	authenticated : false
	};
	},
	_logout : function() {
	this.authRef.logout();
	},
	_login : function() {
	this.authRef.login('twitter', {
	rememberMe: true
	});
	},
	render : function() {

	var loggedIn = (
	<section>
	<a href="#" onClick={this._logout}>Logout</a>
	<UserDisplay user={this.state.user} />
	<PeopleToYo name={this.state.name} />
	<YoCount user={this.state.user} />
	</section>
	);

	var loggedOut = (
	<section>
	<a href="#" onClick={this._login}>Login</a>
	<div>{this.state.errorMsg ? ('Error : ' + this.state.errorMsg) : ''}</div>
	</section>
	);

	return this.state.authenticated ? loggedIn : loggedOut;
	}
	});

	React.renderComponent(<App />, document.getElementById('mount'));
	</script>
	</body>
	</html>