Drinkbot UI (React)

Starting point for creating JSFiddles with React. This uses React with Addons.

by Andrew Maxwell

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css">
<div class="container" id="app"></div>

Babel + JSX

var base = 'http://8ff1fb42.ngrok.io/';

class DrinkbotUI extends React.Component {
	constructor(props){
  	super(props);
  	this.state = {drinks: []};
  }
  componentDidMount(){
  	fetch(base + 'config')
    	.then(resp => resp.json())
      .then(data => {
      	this.setState({drinks: data.drinks});
      })
      .catch(err => alert(err));
  }
  order(drink){
    fetch(base + 'request/' + drink.id, {method: 'POST'})
    	.then(resp => resp.text())
      .then(data => alert(data))
      .catch(err => alert(err));
  }
  render(){
  	return <div>{
    
    	this.state.drinks.map(drink => (
        <div key={drink.id}>
          <h3>{ drink.displayName }</h3>
          <ul>{
              Object.keys(drink.recipe).map(ing => (
                <li key={ing}>{drink.recipe[ing]} shots {ing}</li>
              ))
            }</ul>
          <button className="btn btn-primary" onClick={e => this.order(drink)}>Order</button>
        </div>
      ))
      
    }</div>;
  }
}

ReactDOM.render(
  <DrinkbotUI />,
  document.getElementById('app')
);