React WesBos

app.jsx

import React from 'react';
const ReactDOM = require('react-dom');
import {Router, Route, History, Navigation} from 'react-router';
import helpers from './helpers';

// For changing navbar link and remove hashes
import createBrowserHistory from 'history/lib/createBrowserHistory';


// App
class App extends React.Component {
	render() {
		console.log('Route: ' + this.props.router)
		return (
			<div className="catch-of-the-day">
				<div className="menu">
					<Header tagline="Batumi Seafood" />
				</div>
				<Order />
				<Inventory />
			</div>
		);
	}
}


// Header
class Header extends React.Component {
  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>
    );
  }
}

// Order
class Order extends React.Component {
  render() {
    return (
      <p>Order</p>
    );
  }
}

// Inventory
class Inventory extends React.Component {
  render() {
    return (
      <p>Inventory</p>
    );
  }
}


// Storepicker
const StorePicker = React.createClass({
	mixins: [History],
	goToStore: function(event) {
		event.preventDefault();
		// Get the data from the input
		// ref makes references and can be taken from everywhere
		let storeId = this.refs.storeId.value;
		console.log(storeId)
		this.history.pushState(null, `/store/${storeId}`);
		// transition from StorePicker to <App />
	},

	render: function() {

		let name = "George";
		return (
			<form className="store-selector" onSubmit={this.goToStore}>
				{/* Comment */}
				<h2>Please Enter A Store {name}</h2>
				<input type="text" ref="storeId" defaultValue={helpers.getFunName()} required />
				<input type="Submit"/>
			</form>
		);
	}
});

// Not Found
class NotFound extends React.Component {
  render() {
    return (
      <h1>404 Not Found!</h1>
    );
  }
}


// Router
const routes = (
	<Router history={createBrowserHistory()}>
		<Route path="/" component={StorePicker} />
		<Route path="/store/:storeId" component={App} />
		<Router path='*' component={NotFound}></Router>
	</Router>
);


ReactDOM.render(
	routes,
	document.getElementById('main')
);