simple beer component display

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
+    }
 }

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>
+    );
+  }
+}

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>

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;
 }

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",

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

@@ -1,24 +1,35 @@
 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 {
 	state = {
 		time: Date.now(),
 		userName: "",
 		beerCount: 0,
+		beers: [],
 	};
 
 	// update the current time
 	updateTime = () => {
 		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>
 		);
 	}