From 9fb63f0e7c96f11e70e2ac34e450ffaa6822a304 Mon Sep 17 00:00:00 2001
From: Aaron Austin <aaronaustin@Aarons-MacBook-Pro.local>
Date: Wed, 24 Jan 2018 21:26:31 -0600
Subject: [PATCH 1/4] Commit for hw

---
 src/App.js                     | 12 +++++++++---
 src/component/Header.js        | 14 ++++++++++++++
 src/component/ProductDetail.js | 32 ++++++++++++++++++++++++++++++++
 src/index.js                   |  2 +-
 4 files changed, 56 insertions(+), 4 deletions(-)
 create mode 100644 src/component/Header.js
 create mode 100644 src/component/ProductDetail.js

diff --git a/src/App.js b/src/App.js
index 4139cab..ff84fb3 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,14 +1,17 @@
 import React, { Component } from 'react';
 import logo from './logo.svg';
 import './App.css';
+import Header from './component/Header'; 
+import ProductDetail from './component/ProductDetail'; 
 
-function App() {
+function App(props) {
     return (
       <div className="App">
      
     <nav className="navbar navbar-inverse navbar-fixed-top" role="navigation">
         <div className="container">
-          
+        <Header/> 
+        {/*           
             <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>
@@ -18,7 +21,7 @@ function App() {
                 </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>
@@ -85,7 +88,9 @@ function App() {
                 </div>
 
                 <div className="row">
+                <ProductDetail product={props.products[4]}/>
 
+{/* 
                     <div className="col-sm-4 col-lg-4 col-md-4">
                         <div className="thumbnail">
                             <img src="http://placehold.it/320x150" alt=""/>
@@ -107,6 +112,7 @@ function App() {
                             </div>
                         </div>
                     </div>
+ */}
 
                     <div className="col-sm-4 col-lg-4 col-md-4">
                         <div className="thumbnail">
diff --git a/src/component/Header.js b/src/component/Header.js
new file mode 100644
index 0000000..5e09e6f
--- /dev/null
+++ b/src/component/Header.js
@@ -0,0 +1,14 @@
+import React from 'react'; 
+function Header(){
+    return ( <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="#">SpacePandaShop</a>
+</div>
+    )
+}
+export default Header;
\ No newline at end of file
diff --git a/src/component/ProductDetail.js b/src/component/ProductDetail.js
new file mode 100644
index 0000000..87af62c
--- /dev/null
+++ b/src/component/ProductDetail.js
@@ -0,0 +1,32 @@
+import React from 'react'; 
+function ProductDetail(props){
+    return ( 
+        // {props.product.name}
+                    <div className="col-sm-4 col-lg-4 col-md-4">
+                    <div className="thumbnail">
+                        {/* <img src="http://placehold.it/320x150" alt=""/> */}
+                        <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> {props.product.description} </p>
+                            {/* <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> {props.product.rating} </p>
+                            <p className="pull-right">{props.product.reviews} 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>
+        )      
+    }
+export default ProductDetail;
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index e58303d..75daae2 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 da47ec37648f20b4c9fba960745a3e960a31b16a Mon Sep 17 00:00:00 2001
From: Aaron Austin <aaronaustin@aarons-mbp.home>
Date: Thu, 25 Jan 2018 04:12:21 -0600
Subject: [PATCH 2/4] commit for work1

---
 src/App.js                     | 18 +++++++++++++----
 src/component/Carousel.js      | 36 ++++++++++++++++++++++++++++++++++
 src/component/Footer.js        | 13 ++++++++++++
 src/component/ProductDetail.js |  6 +++++-
 4 files changed, 68 insertions(+), 5 deletions(-)
 create mode 100644 src/component/Carousel.js
 create mode 100644 src/component/Footer.js

diff --git a/src/App.js b/src/App.js
index ff84fb3..fd540e5 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,8 +3,15 @@ import logo from './logo.svg';
 import './App.css';
 import Header from './component/Header'; 
 import ProductDetail from './component/ProductDetail'; 
+import Carousel from './component/Carousel';
+import Footer from './component/Footer';
 
 function App(props) {
+    var productDivs = [];
+    productDivs = props.products.map((p)=> {
+        return <ProductDetail product={p} />;
+    });   
+console.log("heey", productDivs);
     return (
       <div className="App">
      
@@ -21,6 +28,7 @@ function App(props) {
                 </button>
                 <a className="navbar-brand" href="#">Start Bootstrap</a>
             </div>
+            </div>
            */}
             <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                 <ul className="nav navbar-nav">
@@ -55,7 +63,8 @@ function App(props) {
             </div>
 
             <div className="col-md-9">
-
+                <Carousel />
+{/* 
                 <div className="row carousel-holder">
 
                     <div className="col-md-12">
@@ -86,8 +95,9 @@ function App(props) {
                     </div>
 
                 </div>
-
+  */}
                 <div className="row">
+                {productDivs}
                 <ProductDetail product={props.products[4]}/>
 
 {/* 
@@ -221,11 +231,11 @@ function App(props) {
 
         <hr/>
 
-      
+        <Footer />      
         <footer>
             <div className="row">
                 <div className="col-lg-12">
-                    <p>Copyright &copy; Your Website 2014</p>
+                    <p>Copyright &copy; 2018</p>
                 </div>
             </div>
         </footer>
diff --git a/src/component/Carousel.js b/src/component/Carousel.js
new file mode 100644
index 0000000..33fed89
--- /dev/null
+++ b/src/component/Carousel.js
@@ -0,0 +1,36 @@
+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;
\ No newline at end of file
diff --git a/src/component/Footer.js b/src/component/Footer.js
new file mode 100644
index 0000000..d089234
--- /dev/null
+++ b/src/component/Footer.js
@@ -0,0 +1,13 @@
+import React from 'react'; 
+function Footer(){
+    return (        
+    <footer>
+        <div className="row">
+            <div className="col-lg-12">
+                <p>Copyright &copy; SpacePandaShop 2018</p>
+            </div>
+        </div>
+    </footer>
+    )
+}
+export default Footer;
\ No newline at end of file
diff --git a/src/component/ProductDetail.js b/src/component/ProductDetail.js
index 87af62c..d98fca5 100644
--- a/src/component/ProductDetail.js
+++ b/src/component/ProductDetail.js
@@ -1,5 +1,8 @@
 import React from 'react'; 
 function ProductDetail(props){
+    let starRating = props.product.rating; 
+    let totalStars = '<span className="glyphicon glyphicon-star"></span>';
+
     return ( 
         // {props.product.name}
                     <div className="col-sm-4 col-lg-4 col-md-4">
@@ -15,9 +18,10 @@ function ProductDetail(props){
                             {/* <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> {props.product.rating} </p>
+                            <p> {props.product.rating} {starRating}</p>
                             <p className="pull-right">{props.product.reviews} Reviews</p>
                             <p>
+                                {/* {totalStars} */}
                                 <span className="glyphicon glyphicon-star"></span>
                                 <span className="glyphicon glyphicon-star"></span>
                                 <span className="glyphicon glyphicon-star"></span>

From 2430c841a1c0e1abde48c5200b58a791fa383cb2 Mon Sep 17 00:00:00 2001
From: Aaron Austin <aaronaustin@aarons-mbp.home>
Date: Sat, 27 Jan 2018 13:23:25 -0600
Subject: [PATCH 3/4] commit for Homework1 sat

---
 src/App.js                     |  4 ++--
 src/component/ProductDetail.js | 12 ++++++++----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/App.js b/src/App.js
index fd540e5..3240605 100644
--- a/src/App.js
+++ b/src/App.js
@@ -11,7 +11,7 @@ function App(props) {
     productDivs = props.products.map((p)=> {
         return <ProductDetail product={p} />;
     });   
-console.log("heey", productDivs);
+console.log("LoggingProductDivs", productDivs);
     return (
       <div className="App">
      
@@ -98,7 +98,7 @@ console.log("heey", productDivs);
   */}
                 <div className="row">
                 {productDivs}
-                <ProductDetail product={props.products[4]}/>
+                {/* <ProductDetail product={props.products[4]}/> */}
 
 {/* 
                     <div className="col-sm-4 col-lg-4 col-md-4">
diff --git a/src/component/ProductDetail.js b/src/component/ProductDetail.js
index d98fca5..ee95701 100644
--- a/src/component/ProductDetail.js
+++ b/src/component/ProductDetail.js
@@ -1,7 +1,11 @@
 import React from 'react'; 
 function ProductDetail(props){
     let starRating = props.product.rating; 
-    let totalStars = '<span className="glyphicon glyphicon-star"></span>';
+    let totalStars = [];
+    for(var i=0; i< starRating; i++){ 
+        totalStars.push(<span className="glyphicon glyphicon-star"></span>)
+    }
+
 
     return ( 
         // {props.product.name}
@@ -21,12 +25,12 @@ function ProductDetail(props){
                             <p> {props.product.rating} {starRating}</p>
                             <p className="pull-right">{props.product.reviews} Reviews</p>
                             <p>
-                                {/* {totalStars} */}
-                                <span className="glyphicon glyphicon-star"></span>
-                                <span className="glyphicon glyphicon-star"></span>
+                                 {totalStars} 
+                                {/* <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>

From 6866e9ab0b635270a31c09dabd5cac7c600a2696 Mon Sep 17 00:00:00 2001
From: Aaron Austin <aaronaustin@aarons-mbp.home>
Date: Sat, 27 Jan 2018 15:11:24 -0600
Subject: [PATCH 4/4] commit for Homework1 complete

---
 src/App.js                     | 16 ++++++++--------
 src/component/ProductDetail.js | 10 +++++++---
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/App.js b/src/App.js
index 3240605..40c2408 100644
--- a/src/App.js
+++ b/src/App.js
@@ -54,11 +54,11 @@ console.log("LoggingProductDivs", productDivs);
         <div className="row">
 
             <div className="col-md-3">
-                <p className="lead">Shop Name</p>
+                <p className="lead">SpacePandaArtShop</p>
                 <div className="list-group">
                     <a href="#" className="list-group-item">Category 1</a>
-                    <a href="#" className="list-group-item">Category 2</a>
-                    <a href="#" className="list-group-item">Category 3</a>
+                    <a href="#" className="list-group-item">Music</a>
+                    <a href="#" className="list-group-item">Art For Sale</a>
                 </div>
             </div>
 
@@ -124,7 +124,7 @@ console.log("LoggingProductDivs", productDivs);
                     </div>
  */}
 
-                    <div className="col-sm-4 col-lg-4 col-md-4">
+                    {/* <div className="col-sm-4 col-lg-4 col-md-4">
                         <div className="thumbnail">
                             <img src="http://placehold.it/320x150" alt=""/>
                             <div className="caption">
@@ -210,13 +210,13 @@ console.log("LoggingProductDivs", productDivs);
                                 </p>
                             </div>
                         </div>
-                    </div>
+                    </div> */}
 
                     <div className="col-sm-4 col-lg-4 col-md-4">
-                        <h4><a href="#">Like this template?</a>
+                        <h4><a href="#">Like this?</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>
+                        <p>If you like this, then check out <a target="_blank" href="http://maxoffsky.com/code-blog/laravel-shop-tutorial-1-building-a-review-system/">this link</a> on how to build 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</a>
                     </div>
 
                 </div>
diff --git a/src/component/ProductDetail.js b/src/component/ProductDetail.js
index ee95701..27fd0bd 100644
--- a/src/component/ProductDetail.js
+++ b/src/component/ProductDetail.js
@@ -2,10 +2,14 @@ import React from 'react';
 function ProductDetail(props){
     let starRating = props.product.rating; 
     let totalStars = [];
+    let emptyStarsNum = 5 - starRating;
+    let emptyStars = [];
     for(var i=0; i< starRating; i++){ 
         totalStars.push(<span className="glyphicon glyphicon-star"></span>)
     }
-
+    for(var j=0; j< emptyStarsNum; j++){
+        emptyStars.push(<span className="glyphicon glyphicon-star-empty"></span>)
+    }
 
     return ( 
         // {props.product.name}
@@ -22,10 +26,10 @@ function ProductDetail(props){
                             {/* <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> {props.product.rating} {starRating}</p>
+                            <p> {starRating} Star Rating</p>
                             <p className="pull-right">{props.product.reviews} Reviews</p>
                             <p>
-                                 {totalStars} 
+                                 {totalStars} {emptyStars}
                                 {/* <span className="glyphicon glyphicon-star"></span>
                                 <span className="glyphicon glyphicon-star"></span>
                                 <span className="glyphicon glyphicon-star"></span>