Permalink
Browse files

refactor shit

  • Loading branch information...
1 parent 4b91170 commit 0b6a8430e9da1142a03143e4eb66e7342ce9bfa5 @DickPigment DickPigment committed Feb 16, 2017
View
Oops, something went wrong.
@@ -0,0 +1,41 @@
+/*
+ Add Fish Form
+ <AddFishForm />
+*/
+import React from 'react';
+
+var AddFishForm = React.createClass({
+ createFish : function(event) {
+ // 1. Stop the form from submitting
+ event.preventDefault();
+ // 2. Take the data from the form and create an object
+ var fish = {
+ name : this.refs.name.value,
+ price : this.refs.price.value,
+ status : this.refs.status.value,
+ desc : this.refs.desc.value,
+ image : this.refs.image.value
+ }
+
+ // 3. Add the fish to the App State
+ this.props.addFish(fish);
+ this.refs.fishForm.reset();
+ },
+ render : function() {
+ return (
+ <form className="fish-edit" ref="fishForm" onSubmit={this.createFish}>
+ <input type="text" ref="name" placeholder="Fish Name"/>
+ <input type="text" ref="price" placeholder="Fish Price" />
+ <select ref="status">
+ <option value="available">Fresh!</option>
+ <option value="unavailable">Sold Out!</option>
+ </select>
+ <textarea type="text" ref="desc" placeholder="Desc"></textarea>
+ <input type="text" ref="image" placeholder="URL to Image" />
+ <button type="submit">+ Add Item </button>
+ </form>
+ )
+ }
+});
+
+export default AddFishForm;
@@ -0,0 +1,88 @@
+/**
+* App
+*/
+
+import React from 'react';
+import Header from './Header';
+import Fish from './Fish';
+import Order from './Order';
+import Inventory from './Inventory';
+import Catalyst from 'react-catalyst';
+
+var App = React.createClass({
+ mixins : [Catalyst.LinkedStateMixin],
+ getInitialState: function () {
+ return {
+ fishes: {},
+ order: {}
+ }
+ },
+ componentDidMount: function() {
+ fetch('/fishes')
+ .then(res => res.json())
+ .then(data => {
+ this.setState({ fishes: data });
+ })
+ var localStorageRef = localStorage.getItem('order-' + this.props.params.storeId);
+
+ if(localStorageRef) {
+ // update our component state to reflect what is in localStorage
+ this.setState({
+ order: JSON.parse(localStorageRef)
+ });
+ }
+
+ } ,
+ componentWillUpdate : function(nextProps, nextState) {
+ localStorage.setItem('order-' + this.props.params.storeId, JSON.stringify(nextState.order));
+ },
+ addToOrder : function(key) {
+ this.state.order[key] = this.state.order[key] + 1 || 1;
+ this.setState({ order : this.state.order });
+ },
+ removeFromOrder : function(key){
+ delete this.state.order[key];
+ this.setState({
+ order : this.state.order
+ });
+ },
+ addFish : function(fish) {
+ var timestamp = (new Date()).getTime();
+ // update the state object
+ this.state.fishes['fish-' + timestamp] = fish;
+ // set the state
+ this.setState({ fishes : this.state.fishes });
+ },
+ removeFish : function(key) {
+ if(confirm("Are you sure you want to remove this fish?!")) {
+ this.state.fishes[key] = null;
+ this.setState({
+ fishes : this.state.fishes
+ });
+ }
+ },
+ loadSamples : function() {
+ this.setState({
+ fishes : require('../sample-fishes')
+ });
+ },
+ renderFish : function(key){
+ return <Fish key={key} index={key} details={this.state.fishes[key]} addToOrder={this.addToOrder}/>
+ },
+ render : function() {
+ return (
+ <div className="catch-of-the-day">
+ <div className="menu">
+ <Header tagline="Fresh Seafood Market" />
+ <ul className="list-of-fishes">
+ {Object.keys(this.state.fishes).map(this.renderFish)}
+ </ul>
+ </div>
+ <Order fishes={this.state.fishes} order={this.state.order} removeFromOrder={this.removeFromOrder} />
+ <Inventory addFish={this.addFish} loadSamples={this.loadSamples} fishes={this.state.fishes} linkState={this.linkState} removeFish={this.removeFish} />
+ </div>
+ )
+ }
+});
+
+export default App;
@@ -0,0 +1,32 @@
+/*
+ Fish
+ <Fish />
+*/
+import React from 'react';
+import h from '../helpers';
+
+var Fish = React.createClass({
+ onButtonClick : function() {
+ console.log("Going to add the fish: ", this.props.index);
+ var key = this.props.index;
+ this.props.addToOrder(key);
+ },
+ render : function() {
+ var details = this.props.details;
+ var isAvailable = (details.status === 'available' ? true : false);
+ var buttonText = (isAvailable ? 'Add To Order' : 'Sold Out!');
+ return (
+ <li className="menu-fish">
+ <img src={details.image} alt={details.name} />
+ <h3 className="fish-name">
+ {details.name}
+ <span className="price">{h.formatPrice(details.price)}</span>
+ </h3>
+ <p>{details.desc}</p>
+ <button disabled={!isAvailable} onClick={this.onButtonClick}>{buttonText}</button>
+ </li>
+ )
+ }
+});
+
+export default Fish;
@@ -0,0 +1,26 @@
+/**
+* Header
+* <Header/>
+*/
+import React from 'react';
+
+var Header = React.createClass({
+ render() {
+ return (
+ <header className="top">
+ <h1>Catch
+ <span className="ofThe">
+ <span className="of">of</span> <span className="the">the</span>
+ </span>
+ day
+ </h1>
+ <h3 className="tagline"><span>{ this.props.tagline }</span></h3>
+ </header>
+ );
+ },
+ propTypes: {
+ tagline : React.PropTypes.string.isRequired
+ }
+})
+
+export default Header;
@@ -0,0 +1,49 @@
+/*
+ Inventory
+ <Inventory/>
+*/
+import React from 'react';
+import AddFishForm from './AddFishForm';
+
+var Inventory = React.createClass({
+ renderInventory : function(key) {
+ var linkState = this.props.linkState;
+ return (
+ <div className="fish-edit" key={key}>
+ <input type="text" valueLink={linkState('fishes.'+ key +'.name')}/>
+ <input type="text" valueLink={linkState('fishes.'+ key +'.price')}/>
+ <select valueLink={linkState('fishes.' + key + '.status')}>
+ <option value="unavailable">Sold Out!</option>
+ <option value="available">Fresh!</option>
+ </select>
+
+ <textarea valueLink={linkState('fishes.' + key + '.desc')}></textarea>
+ <input type="text" valueLink={linkState('fishes.'+ key +'.image')}/>
+ <button onClick={this.props.removeFish.bind(null, key)}>Remove Fish</button>
+
+ </div>
+ )
+ },
+ render : function() {
+ return (
+ <div>
+ <h2>Inventory</h2>
+
+ {Object.keys(this.props.fishes).map(this.renderInventory)}
+
+ <AddFishForm {...this.props} />
+ <button onClick={this.props.loadSamples}>Load Sample Fishes</button>
+ </div>
+ )
+ },
+ propTypes : {
+ addFish : React.PropTypes.func.isRequired,
+ loadSamples : React.PropTypes.func.isRequired,
+ fishes : React.PropTypes.object.isRequired,
+ linkState : React.PropTypes.func.isRequired,
+ removeFish : React.PropTypes.func.isRequired
+ }
+})
+
+
+export default Inventory;
@@ -0,0 +1,14 @@
+/*
+ Not Found
+*/
+import React from 'react';
+
+
+var NotFound = React.createClass({
+ render : function() {
+ return <h1>Not Found!</h1>
+ }
+});
+
+
+export default NotFound;
@@ -0,0 +1,74 @@
+/*
+ Order
+ <Order/>
+*/
+import React from 'react';
+import CSSTransitionGroup from 'react-addons-css-transition-group';
+import h from '../helpers';
+
+var Order = React.createClass({
+ renderOrder : function(key) {
+ var fish = this.props.fishes[key];
+ var count = this.props.order[key];
+ var removeButton = <button onClick={this.props.removeFromOrder.bind(null,key)}>&times;</button>
+
+ if(fish && fish.status === 'unavailable') {
+ return <li key={key}>Sorry, fish no longer available! {removeButton}</li>
+ }
+
+ return (
+ <li key={key}>
+
+ <CSSTransitionGroup component="span" transitionName="count" transitionLeaveTimeout={250} transitionEnterTimeout={250} className="count">
+ <span key={count}>{count}</span>
+ </CSSTransitionGroup>
+
+ lbs {fish.name} {removeButton}
+
+ <span className="price">{h.formatPrice(count * fish.price)}</span>
+ </li>)
+ },
+ render : function() {
+ var orderIds = Object.keys(this.props.order);
+
+ var total = orderIds.reduce((prevTotal, key)=> {
+ var fish = this.props.fishes[key];
+ var count = this.props.order[key];
+ var isAvailable = fish && fish.status === 'available';
+
+ if(fish && isAvailable) {
+ return prevTotal + (count * parseInt(fish.price) || 0);
+ }
+
+ return prevTotal;
+ }, 0);
+
+ return (
+ <div className="order-wrap">
+ <h2 className="order-title">Your Order</h2>
+
+ <CSSTransitionGroup
+ className="order"
+ component="ul"
+ transitionName="order"
+ transitionEnterTimeout={500}
+ transitionLeaveTimeout={500}
+ >
+ {orderIds.map(this.renderOrder)}
+ <li className="total">
+ <strong>Total:</strong>
+ {h.formatPrice(total)}
+ </li>
+ </CSSTransitionGroup>
+
+ </div>
+ )
+ },
+ propTypes : {
+ fishes : React.PropTypes.object.isRequired,
+ order : React.PropTypes.object.isRequired,
+ removeFromOrder : React.PropTypes.func.isRequired
+ }
+})
+
+export default Order;
@@ -0,0 +1,30 @@
+/*
+ StorePicker
+ This will let us make <StorePicker/>
+*/
+import React from 'react';
+import { History } from 'react-router';
+import h from '../helpers';
+
+
+var StorePicker = React.createClass({
+ mixins : [History],
+ goToStore : function(event) {
+ event.preventDefault();
+ // get the data from the input
+ var storeId = this.refs.storeId.value;
+ this.history.pushState(null, '/store/' + storeId);
+ },
+ render : function() {
+ return (
+ <form className="store-selector" onSubmit={this.goToStore}>
+ <h2>Please Enter A Store</h2>
+ <input type="text" ref="storeId" defaultValue={h.getFunName()} required />
+ <input type="Submit" />
+ </form>
+ )
+ }
+
+});
+
+export default StorePicker;
Oops, something went wrong.

0 comments on commit 0b6a843

Please sign in to comment.