Last active
December 15, 2015 00:38
-
-
Save jpetto/2e10ce233158d7533709 to your computer and use it in GitHub Desktop.
EWT Week 14 - React 2
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
let Header = React.createClass({ | |
propTypes: { | |
'subtitle': React.PropTypes.string.isRequired | |
}, | |
render: function() { | |
return ( | |
<header className="app-header"> | |
<h1>List-o-matic</h1> | |
<h2>{ this.props.subtitle }</h2> | |
</header> | |
) | |
} | |
}); | |
export default Header; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import Common from 'es6!app/common'; | |
var ListItem = React.createClass({ | |
render: function() { | |
return ( | |
<li> | |
<a href={ this.props.details.url }>{ this.props.details.name }</a> | |
<span className="price"> | |
{ Common.formatUSD(this.props.details.price) }</span> | |
<button type="button" | |
onClick={ this.props.removeItem.bind(null, this.props.index) }>⊗</button> | |
</li> | |
) | |
} | |
}); | |
var AddItemForm = React.createClass({ | |
createItem: function(e) { | |
e.preventDefault(); | |
var item = { | |
name: this.refs.name.value, | |
price: this.refs.price.value, | |
url: this.refs.url.value | |
}; | |
// need to call addItem somehow... | |
this.props.addItem(item); | |
// reset the form | |
this.refs.itemForm.reset(); | |
}, | |
render: function() { | |
return ( | |
<form className="item-edit" ref="itemForm" | |
onSubmit={ this.createItem }> | |
<input type="text" ref="name" placeholder="Item Name" /> | |
<input type="number" step="0.01" ref="price" | |
placeholder="Item Price" /> | |
<input type="url" ref="url" placeholder="Item URL" /> | |
<button type="submit" className="btn">+ Add Item</button> | |
</form> | |
) | |
} | |
}); | |
export var ListItems = React.createClass({ | |
renderItem: function(key) { | |
return <ListItem key={ key } index={ key } | |
details={ this.props.items[key] } | |
removeItem={ this.props.removeItem } /> | |
}, | |
render: function() { | |
var itemIds = Object.keys(this.props.items); | |
var total = itemIds.reduce(function(prevTotal, key) { | |
var item = this.props.items[key]; | |
return prevTotal + parseInt(item.price, 10); | |
}.bind(this), 0); | |
return ( | |
<section className="list-items"> | |
<h3>List Items</h3> | |
<ul className="items"> | |
{ itemIds.map(this.renderItem) } | |
<li> | |
<strong>Total:</strong> | |
{ Common.formatUSD(total) } | |
</li> | |
</ul> | |
<AddItemForm addItem={ this.props.addItem } /> | |
<br /> | |
<button type="button" className="btn" | |
onClick={ this.props.loadCommonItems }>Load Items</button> | |
</section> | |
) | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import Rebase from 'rebase'; | |
import CommonItems from 'es6!app/common-items'; | |
import Header from 'es6!app/components/Header'; | |
import { ListItems } from 'es6!app/components/ListItems'; | |
var base = Rebase.createClass('https://amber-fire-7965.firebaseio.com/'); | |
let ListManager = React.createClass({ | |
// lifecycle method of React | |
// executed just before React creates component | |
getInitialState: function() { | |
return { | |
items: {}, | |
notes: {} | |
}; | |
}, | |
// react lifecylce method | |
// executed immediately after initial rendering | |
componentDidMount: function() { | |
base.syncState(this.props.params.listId + '/items', { | |
context: this, | |
state: 'items' | |
}); | |
}, | |
addItem: function(item) { | |
var timestamp = (new Date()).getTime(); | |
// moving chess piece - not final decision | |
this.state.items['item-' + timestamp] = item; | |
// making move final | |
this.setState({ items: this.state.items }); | |
}, | |
removeItem: function(key) { | |
if (confirm('Are you sure you wanna remove this?')) { | |
this.state.items[key] = null; | |
this.setState({ items: this.state.items }); | |
} | |
}, | |
loadCommonItems: function() { | |
this.setState({ items: CommonItems }); | |
console.log('loaded common items'); | |
}, | |
render: function() { | |
return ( | |
<div className="list-manager"> | |
<Header subtitle={ this.props.params.listId } /> | |
<div className="content"> | |
<ListItems items={ this.state.items } | |
addItem={ this.addItem } | |
removeItem={ this.removeItem } | |
loadCommonItems={ this.loadCommonItems } /> | |
</div> | |
</div> | |
) | |
} | |
}); | |
export default ListManager; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment