Merge branch 'master' of https://github.com/valmacd/brainstation-wine…

…pairing

wine_frontend/public/index.html

@@ -10,7 +10,7 @@
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+    <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> -->
     <link rel='stylesheet' href='./styles.css' tyle="text/css" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.

wine_frontend/src/App.css

@@ -1,28 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
-}
-
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: white;
-}
-
-.App-title {
-  font-size: 1.5em;
-}
-
-.App-intro {
-  font-size: large;
-}
-
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}

wine_frontend/src/App.js

@@ -1,26 +1,14 @@
 import React, { Component } from 'react';
-import WineList from './components/WineList'
-import {Route, Switch} from 'react-router-dom';
 import Home from './Home';
 
-// const grid = {
-//   display: 'grid',
-//   gridTemplateRows:'auto'
-// }
-
 class App extends Component {
   render() {
     return (
       <div className="App">
         <Home />
-
       </div>
     );
   }
 }
-// <Route path='/' render={()=><Home/>}/>
-// <Switch>
-// <Route path='/' render={()=><WineList />} />
-// </Switch>
 
 export default App;

wine_frontend/src/Home.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import Form from './components/Form';
 import axios from 'axios';
-import { Link, Route, Switch, withRouter } from 'react-router-dom';
+import { Route, Switch, withRouter } from 'react-router-dom';
 import WineList from './components/WineList';
 import WineDetail from './components/WineDetail';
 

wine_frontend/src/components/Form.js

@@ -1,13 +1,12 @@
 import React from 'react';
-import {Link} from 'react-router-dom';
 
 const grid = {
     display:'grid',
     gridTemplateColumns:'1fr 1fr 1fr',
-    justifyItem: 'center'
+    justifyItem: 'center',
 }
 const buttonGrid = {
-    gridColumn: '2/3'
+    gridColumn: '2/3',
 }
 
 class Form extends React.Component {

wine_frontend/src/components/Wine.js

@@ -1,12 +1,19 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+const txtColor={
+  color:'white'
+}
+const imgStyle = {
+  width: '50%'
+}
 class Wine extends Component {
   render() {
-    return(
+    return (
       <div>
-        <img src={this.props.wine.image_url}/>
-        <Link to={'/winedetail/' + this.props.wine.id}>Name: {this.props.wine.name}</Link>
+        <div>
+          <img src={this.props.wine.image_url} style={imgStyle} alt="Loading"/>
+        </div>
+        <Link to={'/winedetail/' + this.props.wine.id} style={txtColor}>{this.props.wine.name}</Link>
       </div>
     )
   };

wine_frontend/src/components/WineDetail.js

@@ -1,38 +1,42 @@
 import React from 'react';
 
+const style={
+    marginTop: "3%",
+    contentAlign:'center'
+}
+const imgSize={
+    width: "35%"
+}
 class WineDetail extends React.Component {
-
     goBackPage = () => {
         this.props.history.push('/winelist');
     }
-
     fieldEmpty = () => {
         let wineId = Number(this.props.match.params.wineId);
         // debugger;
         for (let i=0; i< this.props.winechoice.length; i++) {
             if (wineId === this.props.winechoice[i].id){
                 return (
-                    <div>
-                        <img src={this.props.winechoice[i].image_url}/>
+                    <div style={style}>
+                    <h1>{'Name: ' + this.props.winechoice[i].name}</h1>
+                        <img src={this.props.winechoice[i].image_url} style={imgSize} alt="Loading"/>
                         <ul>
                             <li>{'Name: ' + this.props.winechoice[i].name}</li>
                             <li>{'Producer Name: ' + this.props.winechoice[i].producer_name}</li>
                             <li>{'$ ' + (this.props.winechoice[i].price_in_cents)/100}</li>
                             <li>{'Style: ' + this.props.winechoice[i].style}</li>
                             <li>{'Tasting Note: ' + this.props.winechoice[i].tasting_note}</li>
                             <li>{'Food Pairing Suggestion: ' + this.props.winechoice[i].serving_suggestion}</li>
+                            <li>{`Quantity in Stock ` + Number(this.props.winechoice[1].quantity)}</li>
                         </ul>
                     </div>
                 )
             }
         }
     }
-
-
     render(){
         return(
             <div>
-                <h1> Wine Details </h1>
                 {this.fieldEmpty()}
                 <button onClick={this.goBackPage} type='back' name='back'>Go Back to Wine List</button>
             </div>

wine_frontend/src/components/WineList.js

@@ -1,15 +1,17 @@
 import React from 'react';
-import {Link} from 'react-router-dom';
 import Wine from './Wine';
 
+const grid = {
+    display: 'flex',
+    marginTop:'3%'
+}
 class WineList extends React.Component {
     render() {
         let wine = this.props.winechoice.map(wine=>
             <Wine wine={wine} />
         )
         return (
-            <div>
-                <h1>I am the wineList</h1>
+            <div style={grid}>
                 {wine}
             </div>
         )

wine_frontend/src/index.css

@@ -1,9 +1,10 @@
 body {
-  margin: 0;
-  padding: 0;
-  font-family: sans-serif;
+  /* margin: 0;
+  padding: 0; */
+  font-family: Arial, Helvetica, sans-serif;
   color: white;
-  text-shadow: 1px 1px 6px black
+  text-shadow: 1px 1px 6px black;
+  text-align: center;
 }
 .background {
   background-image: url("/picture/Mapleleaf.jpg");
@@ -14,6 +15,14 @@ body {
   margin-top: 50px;
 }
 
-img {
-  width: 300px;
+/* img {
+  width: 50%;
+} */
+
+div {
+  align-content: center;
+}
+
+Link {
+  color: white;
 }