From 04082f9db9fc674bc6ea5fb5ef3a06bd5879d117 Mon Sep 17 00:00:00 2001
From: CGottschallJ <Cameron.Gottschall@gmail.com>
Date: Sun, 15 Oct 2017 20:11:07 -0500
Subject: [PATCH 1/4] Initial: Complete through ProdictDetail

---
 public/Components/Header.js     |  36 +++++++
 src/App.js                      | 168 ++++----------------------------
 src/components/Header.js        |  36 +++++++
 src/components/ProductDetail.js |  24 +++++
 src/index.js                    |   2 +-
 5 files changed, 115 insertions(+), 151 deletions(-)
 create mode 100644 public/Components/Header.js
 create mode 100644 src/components/Header.js
 create mode 100644 src/components/ProductDetail.js

diff --git a/public/Components/Header.js b/public/Components/Header.js
new file mode 100644
index 0000000..572c1d6
--- /dev/null
+++ b/public/Components/Header.js
@@ -0,0 +1,36 @@
+import React from 'react';
+
+function Header () {
+    return (
+      <nav className="navbar navbar-inverse navbar-fixed-top" role="navigation">
+          <div className="container">
+
+              <div className="navbar-header">
+                  <button type="button" className="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+                      <span className="sr-only">Toggle navigation</span>
+                      <span className="icon-bar"></span>
+                      <span className="icon-bar"></span>
+                      <span className="icon-bar"></span>
+                  </button>
+                  <a className="navbar-brand" href="#">Start Bootstrap</a>
+              </div>
+
+              <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+                  <ul className="nav navbar-nav">
+                      <li>
+                          <a href="#">About</a>
+                      </li>
+                      <li>
+                          <a href="#">Services</a>
+                      </li>
+                      <li>
+                          <a href="#">Contact</a>
+                      </li>
+                  </ul>
+              </div>
+          </div>
+      </nav>
+
+  );
+}
+export default Header;
diff --git a/src/App.js b/src/App.js
index 4139cab..edf62e9 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,46 +1,24 @@
 import React, { Component } from 'react';
 import logo from './logo.svg';
 import './App.css';
-
-function App() {
+import Header from './components/Header';
+import State from './state';
+import ProductDetail from './components/ProductDetail';
+
+function App(props) {
+  let productDivs = props.products.map( (p, idx) => {
+    return <ProductDetail key={idx} product={p} />
+  });
+  console.log(productDivs);
+  console.log(props.products[0].name);
     return (
       <div className="App">
-     
-    <nav className="navbar navbar-inverse navbar-fixed-top" role="navigation">
-        <div className="container">
-          
-            <div className="navbar-header">
-                <button type="button" className="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
-                    <span className="sr-only">Toggle navigation</span>
-                    <span className="icon-bar"></span>
-                    <span className="icon-bar"></span>
-                    <span className="icon-bar"></span>
-                </button>
-                <a className="navbar-brand" href="#">Start Bootstrap</a>
-            </div>
-          
-            <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
-                <ul className="nav navbar-nav">
-                    <li>
-                        <a href="#">About</a>
-                    </li>
-                    <li>
-                        <a href="#">Services</a>
-                    </li>
-                    <li>
-                        <a href="#">Contact</a>
-                    </li>
-                </ul>
-            </div>
-         
-        </div>
-      
-    </nav>
 
- 
-    <div className="container">
+        <Header />
 
-        <div className="row">
+        <div className="container">
+
+          <div className="row">
 
             <div className="col-md-3">
                 <p className="lead">Shop Name</p>
@@ -52,7 +30,7 @@ function App() {
             </div>
 
             <div className="col-md-9">
-
+//carousel
                 <div className="row carousel-holder">
 
                     <div className="col-md-12">
@@ -85,116 +63,7 @@ function App() {
                 </div>
 
                 <div className="row">
-
-                    <div className="col-sm-4 col-lg-4 col-md-4">
-                        <div className="thumbnail">
-                            <img src="http://placehold.it/320x150" alt=""/>
-                            <div className="caption">
-                                <h4 className="pull-right">$24.99</h4>
-                                <h4><a href="#">First Product</a>
-                                </h4>
-                                <p>See more snippets like this online store item at <a target="_blank" href="http://www.bootsnipp.com">Bootsnipp - http://bootsnipp.com</a>.</p>
-                            </div>
-                            <div className="ratings">
-                                <p className="pull-right">15 reviews</p>
-                                <p>
-                                    <span className="glyphicon glyphicon-star"></span>
-                                    <span className="glyphicon glyphicon-star"></span>
-                                    <span className="glyphicon glyphicon-star"></span>
-                                    <span className="glyphicon glyphicon-star"></span>
-                                    <span className="glyphicon glyphicon-star"></span>
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div className="col-sm-4 col-lg-4 col-md-4">
-                        <div className="thumbnail">
-                            <img src="http://placehold.it/320x150" alt=""/>
-                            <div className="caption">
-                                <h4 className="pull-right">$64.99</h4>
-                                <h4><a href="#">Second Product</a>
-                                </h4>
-                                <p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-                            </div>
-                            <div className="ratings">
-                                <p className="pull-right">12 reviews</p>
-                                <p>
-                                    <span className="glyphicon glyphicon-star"></span>
-                                    <span className="glyphicon glyphicon-star"></span>
-                                    <span className="glyphicon glyphicon-star"></span>
-                                    <span className="glyphicon glyphicon-star"></span>
-                                    <span className="glyphicon glyphicon-star-empty"></span>
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div className="col-sm-4 col-lg-4 col-md-4">
-                        <div className="thumbnail">
-                            <img src="http://placehold.it/320x150" alt=""/>
-                            <div className="caption">
-                                <h4 className="pull-right">$74.99</h4>
-                                <h4><a href="#">Third Product</a>
-                                </h4>
-                                <p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-                            </div>
-                            <div className="ratings">
-                                <p className="pull-right">31 reviews</p>
-                                <p>
-                                    <span className="glyphicon glyphicon-star"></span>
-                                    <span className="glyphicon glyphicon-star"></span>
-                                    <span className="glyphicon glyphicon-star"></span>
-                                    <span className="glyphicon glyphicon-star"></span>
-                                    <span className="glyphicon glyphicon-star-empty"></span>
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div className="col-sm-4 col-lg-4 col-md-4">
-                        <div className="thumbnail">
-                            <img src="http://placehold.it/320x150" alt=""/>
-                            <div className="caption">
-                                <h4 className="pull-right">$84.99</h4>
-                                <h4><a href="#">Fourth Product</a>
-                                </h4>
-                                <p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-                            </div>
-                            <div className="ratings">
-                                <p className="pull-right">6 reviews</p>
-                                <p>
-                                    <span className="glyphicon glyphicon-star"></span>
-                                    <span className="glyphicon glyphicon-star"></span>
-                                    <span className="glyphicon glyphicon-star"></span>
-                                    <span className="glyphicon glyphicon-star-empty"></span>
-                                    <span className="glyphicon glyphicon-star-empty"></span>
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div className="col-sm-4 col-lg-4 col-md-4">
-                        <div className="thumbnail">
-                            <img src="http://placehold.it/320x150" alt=""/>
-                            <div className="caption">
-                                <h4 className="pull-right">$94.99</h4>
-                                <h4><a href="#">Fifth Product</a>
-                                </h4>
-                                <p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-                            </div>
-                            <div className="ratings">
-                                <p className="pull-right">18 reviews</p>
-                                <p>
-                                    <span className="glyphicon glyphicon-star"></span>
-                                    <span className="glyphicon glyphicon-star"></span>
-                                    <span className="glyphicon glyphicon-star"></span>
-                                    <span className="glyphicon glyphicon-star"></span>
-                                    <span className="glyphicon glyphicon-star-empty"></span>
-                                </p>
-                            </div>
-                        </div>
-                    </div>
+                {productDivs}
 
                     <div className="col-sm-4 col-lg-4 col-md-4">
                         <h4><a href="#">Like this template?</a>
@@ -210,12 +79,12 @@ function App() {
         </div>
 
     </div>
-   
+
     <div className="container">
 
         <hr/>
 
-      
+
         <footer>
             <div className="row">
                 <div className="col-lg-12">
@@ -228,5 +97,4 @@ function App() {
       </div>
     );
 }
-
 export default App;
diff --git a/src/components/Header.js b/src/components/Header.js
new file mode 100644
index 0000000..572c1d6
--- /dev/null
+++ b/src/components/Header.js
@@ -0,0 +1,36 @@
+import React from 'react';
+
+function Header () {
+    return (
+      <nav className="navbar navbar-inverse navbar-fixed-top" role="navigation">
+          <div className="container">
+
+              <div className="navbar-header">
+                  <button type="button" className="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+                      <span className="sr-only">Toggle navigation</span>
+                      <span className="icon-bar"></span>
+                      <span className="icon-bar"></span>
+                      <span className="icon-bar"></span>
+                  </button>
+                  <a className="navbar-brand" href="#">Start Bootstrap</a>
+              </div>
+
+              <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+                  <ul className="nav navbar-nav">
+                      <li>
+                          <a href="#">About</a>
+                      </li>
+                      <li>
+                          <a href="#">Services</a>
+                      </li>
+                      <li>
+                          <a href="#">Contact</a>
+                      </li>
+                  </ul>
+              </div>
+          </div>
+      </nav>
+
+  );
+}
+export default Header;
diff --git a/src/components/ProductDetail.js b/src/components/ProductDetail.js
new file mode 100644
index 0000000..f6caa40
--- /dev/null
+++ b/src/components/ProductDetail.js
@@ -0,0 +1,24 @@
+import React from 'react';
+
+function ProductDetail(props) {
+  return (
+    <div className="col-sm-4 col-lg-4 col-md-4">
+        <div className="thumbnail">
+          <img src={props.product.imgUrl} alt=""/>
+            <div className="caption">
+                <h4 className="pull-right">{props.product.price}</h4>
+                <h4><a href="#">{props.product.name}</a>
+                </h4>
+                <p>See more snippets like this online store item at <a target="_blank" href="http://www.bootsnipp.com">Bootsnipp - http://bootsnipp.com</a>.</p>
+            </div>
+            <div className="ratings">
+                <p className="pull-right">{props.product.reviews} reviews</p>
+                <p>
+                    <span className="glyphicon glyphicon-star">{props.product.rating}</span>
+                </p>
+            </div>
+        </div>
+    </div>
+  )
+}
+export default ProductDetail;
diff --git a/src/index.js b/src/index.js
index e58303d..c51978f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,6 +5,6 @@ import './index.css';
 import state from './state';
 
 ReactDOM.render(
-  <App />,
+  <App products={state.products} />,
   document.getElementById('root')
 );

From 0ed58fca39ad8690324d548fc3d5d8706472d99c Mon Sep 17 00:00:00 2001
From: CGottschallJ <Cameron.Gottschall@gmail.com>
Date: Sun, 15 Oct 2017 20:22:23 -0500
Subject: [PATCH 2/4] second: complete through Carousel and Footer

---
 src/App.js                 | 60 +++++++++-----------------------------
 src/components/Carousel.js | 37 +++++++++++++++++++++++
 src/components/Footer.js   | 14 +++++++++
 3 files changed, 65 insertions(+), 46 deletions(-)
 create mode 100644 src/components/Carousel.js
 create mode 100644 src/components/Footer.js

diff --git a/src/App.js b/src/App.js
index edf62e9..3c1e1c4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,7 +4,8 @@ import './App.css';
 import Header from './components/Header';
 import State from './state';
 import ProductDetail from './components/ProductDetail';
-
+import Carousel from './components/Carousel';
+import Footer from './components/Footer';
 function App(props) {
   let productDivs = props.products.map( (p, idx) => {
     return <ProductDetail key={idx} product={p} />
@@ -30,47 +31,11 @@ function App(props) {
             </div>
 
             <div className="col-md-9">
-//carousel
-                <div className="row carousel-holder">
-
-                    <div className="col-md-12">
-                        <div id="carousel-example-generic" className="carousel slide" data-ride="carousel">
-                            <ol className="carousel-indicators">
-                                <li data-target="#carousel-example-generic" data-slide-to="0" className="active"></li>
-                                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
-                                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
-                            </ol>
-                            <div className="carousel-inner">
-                                <div className="item active">
-                                    <img className="slide-image" src="http://placehold.it/800x300" alt=""/>
-                                </div>
-                                <div className="item">
-                                    <img className="slide-image" src="http://placehold.it/800x300" alt=""/>
-                                </div>
-                                <div className="item">
-                                    <img className="slide-image" src="http://placehold.it/800x300" alt=""/>
-                                </div>
-                            </div>
-                            <a className="left carousel-control" href="#carousel-example-generic" data-slide="prev">
-                                <span className="glyphicon glyphicon-chevron-left"></span>
-                            </a>
-                            <a className="right carousel-control" href="#carousel-example-generic" data-slide="next">
-                                <span className="glyphicon glyphicon-chevron-right"></span>
-                            </a>
-                        </div>
-                    </div>
+              <Carousel />
 
-                </div>
 
                 <div className="row">
-                {productDivs}
-
-                    <div className="col-sm-4 col-lg-4 col-md-4">
-                        <h4><a href="#">Like this template?</a>
-                        </h4>
-                        <p>If you like this template, then check out <a target="_blank" href="http://maxoffsky.com/code-blog/laravel-shop-tutorial-1-building-a-review-system/">this tutorial</a> on how to build a working review system for your online store!</p>
-                        <a className="btn btn-primary" target="_blank" href="http://maxoffsky.com/code-blog/laravel-shop-tutorial-1-building-a-review-system/">View Tutorial</a>
-                    </div>
+                  {productDivs}
 
                 </div>
 
@@ -83,18 +48,21 @@ function App(props) {
     <div className="container">
 
         <hr/>
+        <Footer />
 
 
-        <footer>
-            <div className="row">
-                <div className="col-lg-12">
-                    <p>Copyright &copy; Your Website 2014</p>
-                </div>
-            </div>
-        </footer>
 
     </div>
       </div>
     );
 }
 export default App;
+
+/*
+<div className="col-sm-4 col-lg-4 col-md-4">
+    <h4><a href="#">Like this template?</a>
+    </h4>
+    <p>If you like this template, then check out <a target="_blank" href="http://maxoffsky.com/code-blog/laravel-shop-tutorial-1-building-a-review-system/">this tutorial</a> on how to build a working review system for your online store!</p>
+    <a className="btn btn-primary" target="_blank" href="http://maxoffsky.com/code-blog/laravel-shop-tutorial-1-building-a-review-system/">View Tutorial</a>
+</div>
+*/
diff --git a/src/components/Carousel.js b/src/components/Carousel.js
new file mode 100644
index 0000000..3150b7f
--- /dev/null
+++ b/src/components/Carousel.js
@@ -0,0 +1,37 @@
+import React from 'react';
+
+function Carousel(){
+  return (
+    <div className="row carousel-holder">
+
+        <div className="col-md-12">
+            <div id="carousel-example-generic" className="carousel slide" data-ride="carousel">
+                <ol className="carousel-indicators">
+                    <li data-target="#carousel-example-generic" data-slide-to="0" className="active"></li>
+                    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
+                    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
+                </ol>
+                <div className="carousel-inner">
+                    <div className="item active">
+                        <img className="slide-image" src="http://placehold.it/800x300" alt=""/>
+                    </div>
+                    <div className="item">
+                        <img className="slide-image" src="http://placehold.it/800x300" alt=""/>
+                    </div>
+                    <div className="item">
+                        <img className="slide-image" src="http://placehold.it/800x300" alt=""/>
+                    </div>
+                </div>
+                <a className="left carousel-control" href="#carousel-example-generic" data-slide="prev">
+                    <span className="glyphicon glyphicon-chevron-left"></span>
+                </a>
+                <a className="right carousel-control" href="#carousel-example-generic" data-slide="next">
+                    <span className="glyphicon glyphicon-chevron-right"></span>
+                </a>
+            </div>
+        </div>
+
+    </div>
+  )
+}
+export default Carousel;
diff --git a/src/components/Footer.js b/src/components/Footer.js
new file mode 100644
index 0000000..7d0e1a0
--- /dev/null
+++ b/src/components/Footer.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+function Footer() {
+  return (
+    <footer>
+        <div className="row">
+            <div className="col-lg-12">
+                <p>Copyright &copy; Your Website 2014</p>
+            </div>
+        </div>
+    </footer>
+  )
+}
+export default Footer;

From dd8165a627bbbd96b7e1795527aeb8730e369034 Mon Sep 17 00:00:00 2001
From: CGottschallJ <Cameron.Gottschall@gmail.com>
Date: Sun, 15 Oct 2017 20:29:07 -0500
Subject: [PATCH 3/4] third: Complete through star ratings

---
 src/components/ProductDetail.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/ProductDetail.js b/src/components/ProductDetail.js
index f6caa40..0a0342f 100644
--- a/src/components/ProductDetail.js
+++ b/src/components/ProductDetail.js
@@ -1,6 +1,16 @@
 import React from 'react';
 
 function ProductDetail(props) {
+let ratingsArr = [];
+for(let i = 0; i < 5; i++){
+  if(i < props.product.rating) {
+    ratingsArr.push(<span key={i} className="glyphicon glyphicon-star"></span>)
+  } else {
+    ratingsArr.push(<span key={i} className="glyphicon glyphicon-star-empty"></span>)
+  }
+}
+if(props.product.rating)
+
   return (
     <div className="col-sm-4 col-lg-4 col-md-4">
         <div className="thumbnail">
@@ -14,7 +24,7 @@ function ProductDetail(props) {
             <div className="ratings">
                 <p className="pull-right">{props.product.reviews} reviews</p>
                 <p>
-                    <span className="glyphicon glyphicon-star">{props.product.rating}</span>
+                    {ratingsArr}
                 </p>
             </div>
         </div>

From 6b5ad5640604e7c30f23627ea0d981cc6bde13ec Mon Sep 17 00:00:00 2001
From: CGottschallJ <Cameron.Gottschall@gmail.com>
Date: Sun, 15 Oct 2017 21:53:58 -0500
Subject: [PATCH 4/4] fourth: final fixes, still need lint

---
 src/App.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/App.js b/src/App.js
index 3c1e1c4..9406766 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,6 +6,7 @@ import State from './state';
 import ProductDetail from './components/ProductDetail';
 import Carousel from './components/Carousel';
 import Footer from './components/Footer';
+
 function App(props) {
   let productDivs = props.products.map( (p, idx) => {
     return <ProductDetail key={idx} product={p} />