Skip to content

Instantly share code, notes, and snippets.

@hasdavidc

hasdavidc/yo.html

Created Aug 3, 2014
Embed
What would you like to do?
My Yo web clone in React and Firebase, using Twitter authentication
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment