stateless beer component

.gitignore

@@ -19,4 +19,5 @@ erl_crash.dump
 /deck-js/node_modules
 deck-js/build
 
-.env
+.env
+ngrok

deck-js/src/components/beer_list/index.js

@@ -0,0 +1,35 @@
+import { h, Component } from 'preact';
+
+
+export default class BeerList extends Component {
+  render() {
+    const beers = this.props.beers;
+    const liStyle = { padding: '0.25em' };
+    const ulStyle = { listStyle: 'none' };
+    const beerStyle = {
+      padding: '1em',
+      margin: '1em',
+      background: 'rgba(250,250,250,0.5)',
+      boxShadow: '0 1px 5px rgba(0,0,0,0.5)',
+    };
+    return (
+      <div>
+        {beers.map(beer => (
+          <Beer beer={beer} beerStyle={beerStyle} listStyle={liStyle} ulStyle={ulStyle}/>
+        ))}
+      </div>
+    );
+  }
+}
+
+const Beer = ({ beer, beerStyle, liStyle, ulStyle}) => (
+  <div style={beerStyle}>
+    <h3 style={{padding: '0.125em 2em'}}>{beer.name}</h3>
+    <ul style={ulStyle}>
+      <li style={liStyle}> Style: {beer.style} </li>
+      <li style={liStyle}> Abv: {beer.abv} </li>
+      <li style={liStyle}> IBU: {beer.estimatedIbu} </li>
+      <li style={liStyle}> OG: {beer.measuredOriginalGravity} </li>
+    </ul>
+  </div>
+);

deck-js/src/routes/brewer/index.js

@@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 import { createApolloFetch } from 'apollo-fetch';
-import Beer from '../../components/beer';
+import BeerList from '../../components/beer_list';
 import style from './style';
 
 export default class Brewer extends Component {
@@ -16,14 +16,6 @@ export default class Brewer extends Component {
 		this.setState({ time: Date.now() });
 	};
 
-	buildBeers = () => {
-		if (this.state.beers) {
-			return(
-				this.state.beers.map(beer => <Beer beer={beer}/> )
-			);
-		}
-	}
-
 	parseData = (data) => {
 		const user = data.user
 		this.setState({
@@ -89,15 +81,15 @@ export default class Brewer extends Component {
 	}
 
 	// Note: `user` comes from the URL, courtesy of our router
-	render({ user }, { time, userName, beerCount }) {
+	render({ user }, { time, userName, beerCount, beers }) {
 		return (
 			<div class={style.brewer}>
 				<h1>Brewer: {userName}</h1>
 				<p>This is the brewer profile for a user named {userName}.</p>
 
 				<div>Current time: {new Date(time).toLocaleString()}</div>
 				<div>beers on tap: {beerCount}</div>
-				{this.buildBeers()}
+				<BeerList beers={beers}/>
 			</div>
 		);
 	}

lib/on_deck_web/endpoint.ex

@@ -41,7 +41,7 @@ defmodule OnDeckWeb.Endpoint do
     key: "_on_deck_key",
     signing_salt: "YDQP4iS4"
 
-  plug CORSPlug, origin: ["http://localhost:8080"]
+  plug CORSPlug, origin: ["*"]
 
   plug OnDeckWeb.Router