Animating React Components

src/base.js

@@ -0,0 +1,9 @@
+import Rebase from 're-base';
+
+const base = Rebase.createClass({
+	apiKey: "AIzaSyD7JQyOY5bHygu6_8D7lErPaIj4Hd0cqqM",
+    authDomain: "catch-of-the-day-luis-rojas.firebaseapp.com",
+    databaseURL: "https://catch-of-the-day-luis-rojas.firebaseio.com",
+});
+
+export default base;

src/components/App.js

@@ -4,20 +4,51 @@ import Order from './Order';
 import Inventory from './Inventory';
 import Fish from './Fish';
 import SampleFishes from '../sample-fishes';
+import base from '../base';
 
 class App extends React.Component {
 	constructor() {
 		super();
 		this.addFish = this.addFish.bind(this);
 		this.loadSamples = this.loadSamples.bind(this);
 		this.addToOrder = this.addToOrder.bind(this);
+		this.updateFish = this.updateFish.bind(this);
+		this.removeFish = this.removeFish.bind(this);
+		this.removeFromOrder = this.removeFromOrder.bind(this);
+
 		//getInitialState
 		this.state = {
 			fishes: {},
 			order: {}
 		};
 	}
 
+	componentWillMount() {
+		//This runs right before the <App> is rendered
+		this.ref = base.syncState(`${this.props.params.storeId}/fishes`, {
+			context: this,
+			state: 'fishes'
+		});
+
+		//Check if there is any order in localstorage
+		const localStorageRef = localStorage.getItem(`order-${this.props.params.storeId}`);
+
+		if(localStorageRef) {
+			//Update our App component's order state
+			this.setState({
+				order: JSON.parse(localStorageRef)
+			});
+		}
+	}
+
+	componentWillUnmount() {
+		base.removeBinding(this.ref);
+	}
+
+	componentWillUpdate(nextProps, nextState) {
+		localStorage.setItem(`order-${this.props.params.storeId}`, JSON.stringify(nextState.order));
+	}
+
 	addFish(fish) {
 		//update our state
 		const fishes = {...this.state.fishes};
@@ -28,6 +59,18 @@ class App extends React.Component {
 		this.setState({ fishes: fishes });
 	}
 
+	updateFish(key, updatedFish) {
+		const fishes = { ...this.state.fishes};
+		fishes[key] = updatedFish;
+		this.setState({ fishes });
+	}
+
+	removeFish(key) {
+		const fishes = { ...this.state.fishes};
+		fishes[key] = null;
+		this.setState({ fishes });
+	}
+
 	loadSamples() {
 		this.setState({
 			fishes: SampleFishes
@@ -43,6 +86,12 @@ class App extends React.Component {
 		this.setState({ order });
 	}
 
+	removeFromOrder(key) {
+		const order = { ...this.state.order};
+		delete order[key];
+		this.setState({ order });
+	}
+
 	render() {
 		return (
 			<div className="catch-of-the-day">
@@ -56,8 +105,17 @@ class App extends React.Component {
 						}
 					</ul>
 				</div>
-				<Order />
-				<Inventory addFish={this.addFish} loadSamples={this.loadSamples}/>
+				<Order 
+					fishes={this.state.fishes} 
+					order={this.state.order} 
+					params={this.props.params}
+					removeFromOrder={this.removeFromOrder}/>
+				<Inventory 
+					addFish={this.addFish} 
+					loadSamples={this.loadSamples} 
+					fishes={this.state.fishes}
+					updateFish={this.updateFish}
+					removeFish={this.removeFish}/>
 			</div>
 		)
 	}

src/components/Inventory.js

@@ -2,10 +2,43 @@ import React from 'react';
 import AddFishForm from './AddFishForm';
 
 class Inventory extends React.Component {
+	constructor() {
+		super();
+		this.renderInventory = this.renderInventory.bind(this);
+	}
+
+	handleChange(e, key) {
+		const fish = this.props.fishes[key];
+		// take a copy of that fish and update it with the new data
+		const updatedFish = {
+			...fish,
+			[e.target.name]: e.target.value
+		}
+		this.props.updateFish(key, updatedFish);
+	}
+
+	renderInventory(key) {
+		const fish = this.props.fishes[key];
+		return (
+			<div className="fish-edit" key={key}>
+				<input type="text" name="name" value={fish.name} placeholder="Fish Name" onChange={(e) => this.handleChange(e, key)}/>
+				<input type="text" name="price" value={fish.price} onChange={(e) => this.handleChange(e, key)} placeholder="Fish Price"/>
+				<select name="status" value={fish.status} onChange={(e) => this.handleChange(e, key)} placeholder="Fish Status">
+					<option value="available">Fresh!</option>
+					<option value="unavailable">Sold out!</option>
+				</select>
+				<textarea name="desc" value={fish.desc} onChange={(e) => this.handleChange(e, key)} placeholder="Fish Desc"></textarea>
+				<input type="text" name="image" value={fish.image} onChange={(e) => this.handleChange(e, key)} placeholder="Fish Image"/>
+				<button onClick={() => this.props.removeFish(key)}>Remove Fish</button>
+			</div>
+		)
+	}
+
 	render() {
 		return (
 			<div>
 				<h2>Inventory</h2>
+				{Object.keys(this.props.fishes).map(this.renderInventory)}
 				<AddFishForm addFish={this.props.addFish}/>
 				<button onClick={this.props.loadSamples}>Load Sample Fishes</button>
 			</div>

src/components/Order.js

@@ -1,9 +1,67 @@
 import React from 'react';
+import { formatPrice } from '../helpers';
+import CSSTransitionGroup from 'react-addons-css-transition-group';
 
 class Order extends React.Component {
+	constructor() {
+		super();
+		this.renderOrder = this.renderOrder.bind(this);
+	}
+	renderOrder(key) {
+		const fish = this.props.fishes[key];
+		const count = this.props.order[key];
+		const removeButton = <button onClick={() => this.props.removeFromOrder(key)}>&times;</button>
+
+		if(!fish || fish.status === 'unavailable') {
+			return <li key={key}> Sorry, {fish ? fish.name : 'fish'} is no longer available!  {removeButton}</li>
+		}
+
+		return (
+			<li key={key}>
+				<span>
+				<CSSTransitionGroup
+					component="span"
+					className="count"
+					transitionName="count"
+					transitionEnterTimeout={250}
+					transitionLeaveTimeout={250}
+				>
+					<span key={count}>{count}</span>
+				</CSSTransitionGroup>
+				lbs {fish.name} {removeButton}
+				</span>
+				<span className="price">{formatPrice(count * fish.price)}</span>
+			</li>
+		)
+	}
+
 	render() {
+		const orderIds = Object.keys(this.props.order);
+		const total = orderIds.reduce((prevTotal, key) => {
+			const fish = this.props.fishes[key];
+			const count = this.props.order[key];
+			const isAvailable = fish && fish.status === 'available';
+			if(isAvailable) {
+				return prevTotal + (count * fish.price || 0)
+			}
+			return prevTotal;
+		}, 0);
 		return (
-			<h2>Order</h2>
+			<div className="order-wrap">
+				<h2>Your Order</h2>
+				<CSSTransitionGroup 
+					className="order" 
+					component="ul"
+					transitionName="order"
+					transitionEnterTimeout={500}
+					transitionLeaveTimeout={500}>
+					{orderIds.map(this.renderOrder)}
+					<li className="total">
+						<strong>Total: </strong>
+						{formatPrice(total)}
+					</li>
+				</CSSTransitionGroup>
+			</div>
 		)
 	}
 }