EWT Week 14 - React 2

Header.js

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;

ListItems.js

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) }>&otimes;</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>
		)
	}
});

ListManager.js

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;