From 6b0d6be0756845d5e71417cd2cf078e5f968f10e Mon Sep 17 00:00:00 2001
From: Chase <chase.gilliam@gmail.com>
Date: Mon, 4 Sep 2017 23:06:57 -0400
Subject: [PATCH] simple beer component display

---
 deck-js/.eslintrc.json                  |  7 ++++++-
 deck-js/src/components/beer/index.js    | 26 +++++++++++++++++++++++++
 deck-js/src/components/header/index.js  |  2 +-
 deck-js/src/components/header/style.css |  2 +-
 deck-js/src/manifest.json               |  2 +-
 deck-js/src/routes/brewer/index.js      | 21 +++++++++++++++-----
 6 files changed, 51 insertions(+), 9 deletions(-)
 create mode 100644 deck-js/src/components/beer/index.js

diff --git a/deck-js/.eslintrc.json b/deck-js/.eslintrc.json
index 99f7c65..d4ebc12 100644
--- a/deck-js/.eslintrc.json
+++ b/deck-js/.eslintrc.json
@@ -4,5 +4,10 @@
         "react",
         "jsx-a11y",
         "import"
-    ]
+    ],
+    "rules": {
+        "react/prefer-stateless-function": 0,
+        "react/react-in-jsx-scope": 0,
+        "react/jsx-filename-extension": 0
+    }
 }
\ No newline at end of file
diff --git a/deck-js/src/components/beer/index.js b/deck-js/src/components/beer/index.js
new file mode 100644
index 0000000..ace63dd
--- /dev/null
+++ b/deck-js/src/components/beer/index.js
@@ -0,0 +1,26 @@
+import { h, Component } from 'preact';
+
+
+export default class Beer extends Component {
+  render() {
+    const beer = this.props.beer;
+    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 style={beerStyle}>
+        <h3>{beer.name}</h3>
+        <ul style={ulStyle}>
+          <li style={liStyle}> Style: {beer.style} </li>
+          <li style={liStyle}> Abv: {beer.abv} </li>
+          <li style={liStyle}> Style: {beer.style} </li>
+        </ul>
+      </div>
+    );
+  }
+}
diff --git a/deck-js/src/components/header/index.js b/deck-js/src/components/header/index.js
index 4fc9443..da7c995 100644
--- a/deck-js/src/components/header/index.js
+++ b/deck-js/src/components/header/index.js
@@ -6,7 +6,7 @@ export default class Header extends Component {
 	render() {
 		return (
 			<header class={style.header}>
-				<h1>Preact App</h1>
+				<h1>On Deck</h1>
 				<nav>
 					<Link activeClassName={style.active} href="/">Home</Link>
 					<Link activeClassName={style.active} href="/brewer">Me</Link>
diff --git a/deck-js/src/components/header/style.css b/deck-js/src/components/header/style.css
index f08fda7..14898d0 100644
--- a/deck-js/src/components/header/style.css
+++ b/deck-js/src/components/header/style.css
@@ -5,7 +5,7 @@
 	width: 100%;
 	height: 56px;
 	padding: 0;
-	background: #673AB7;
+	background: #2C3E50;
 	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
 	z-index: 50;
 }
diff --git a/deck-js/src/manifest.json b/deck-js/src/manifest.json
index 8a4936a..e851399 100644
--- a/deck-js/src/manifest.json
+++ b/deck-js/src/manifest.json
@@ -5,7 +5,7 @@
   "display": "standalone",
   "orientation": "portrait",
   "background_color": "#fff",
-  "theme_color": "#673ab8",
+  "theme_color": "#2C3E50",
   "icons": [{
     "src": "/assets/icons/android-chrome-192x192.png",
     "type": "image/png",
diff --git a/deck-js/src/routes/brewer/index.js b/deck-js/src/routes/brewer/index.js
index 97bc58b..18e5ece 100644
--- a/deck-js/src/routes/brewer/index.js
+++ b/deck-js/src/routes/brewer/index.js
@@ -1,5 +1,6 @@
 import { h, Component } from 'preact';
 import { createApolloFetch } from 'apollo-fetch';
+import Beer from '../../components/beer';
 import style from './style';
 
 export default class Brewer extends Component {
@@ -7,6 +8,7 @@ export default class Brewer extends Component {
 		time: Date.now(),
 		userName: "",
 		beerCount: 0,
+		beers: [],
 	};
 
 	// update the current time
@@ -14,11 +16,20 @@ export default class Brewer extends Component {
 		this.setState({ time: Date.now() });
 	};
 
-	parseData = () => {
-		const user = this.state.data.user
+	buildBeers = () => {
+		if (this.state.beers) {
+			return(
+				this.state.beers.map(beer => <Beer beer={beer}/> )
+			);
+		}
+	}
+
+	parseData = (data) => {
+		const user = data.user
 		this.setState({
 			userName: user.name,
-			beerCount: user.beers.length
+			beerCount: user.beers.length,
+			beers: user.beers
 		});
 	}
 	
@@ -62,8 +73,7 @@ export default class Brewer extends Component {
 		apolloFetch({ query, variables })
 			.then(result => {
 				const { data, errors, extensions } = result;
-				this.setState({data: data});
-				this.parseData();
+				this.parseData(data);
 			})
 			.catch(error => {
 				console.log(error)
@@ -87,6 +97,7 @@ export default class Brewer extends Component {
 
 				<div>Current time: {new Date(time).toLocaleString()}</div>
 				<div>beers on tap: {beerCount}</div>
+				{this.buildBeers()}
 			</div>
 		);
 	}