From 180e69c4515aba42892cd52b4668857ac93138ca Mon Sep 17 00:00:00 2001
From: CGottschallJ <Cameron.Gottschall@gmail.com>
Date: Wed, 18 Oct 2017 19:27:43 -0500
Subject: [PATCH 1/3] Initial: through static component setup

---
 src/App.js                    | 306 ++++++++++++----------------------
 src/components/Footer.js      |  52 ++++++
 src/components/Header.js      |  26 ++-
 src/components/ImageSlider.js |  16 ++
 src/components/SubHeader.js   |  22 +++
 src/components/TopNav.js      |  18 ++
 6 files changed, 240 insertions(+), 200 deletions(-)
 create mode 100644 src/components/Footer.js
 create mode 100644 src/components/ImageSlider.js
 create mode 100644 src/components/SubHeader.js
 create mode 100644 src/components/TopNav.js

diff --git a/src/App.js b/src/App.js
index 4513d4b..71001db 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,209 +1,117 @@
 import React from "react";
 import "./App.css";
+import Header from './components/Header.js';
+import Footer from './components/Footer.js';
+import ImageSlider from './components/ImageSlider.js';
+import SubHeader from './components/SubHeader.js';
+import TopNav from './components/TopNav.js';
 
 function App(props) {
     return (
       <div className="App">
         	<div className="wrap">
-	
-			<div className="header">
-	
-			<div className="top-header">
-				<div className="top-header-left">
-					<ul>
-						<li className="active"><a href="#">Home</a></li>
-						<li><a href="#">Specials</a></li>
-						<li><a href="#">Delivery</a></li>
-						<li><a href="#">Contact</a></li>
-					</ul>
-				</div>
-				<div className="top-header-right">
-					<ul>
-						<li><a href="#">CURRENCY:</a></li>
-						<li>
-							<select>
-								<option>Dollar</option>
-								<option>Euro</option>
-								<option>Pound</option>
-							</select>
-						</li>
-					</ul>
-				</div>
-				<div className="clear"> </div>
-			</div>
-			<div className="clear"> </div>
-			<div className="sub-header">
-				<div className="logo">
-					<a href="index.html"><img src="images/logo.png" title="logo" /></a>
-				</div>
-				<div className="sub-header-right">
-					<ul>
-						<li><a href="#">log in</a></li>
-						<li><a href="#">Your account</a></li>
-						<li><a href="#">CART: (EMPTY) <img src="images/cart.png" title="cart" /></a></li>
-					</ul>
-					<input type="text" /><input type="submit"  value="search" />
-				</div>
-				<div className="clear"> </div>
-			</div>
-			<div className="clear"> </div>
-			<div className="top-nav">
-				<ul>
-					<li><a href="carlights.html">car lights</a></li>
-					<li><a href="carwheels.html">Car wheels</a></li>
-					<li><a href="carbumpers.html">car bumpers</a></li>
-					<li><a href="caradsystem.html">car audiosystem</a></li>
-					<li><a href="truckbumpers.html">Truck bumpers</a></li>
-					<li><a href="contact.html">Feedback</a></li>
-					<div className="clear"> </div>
-				</ul>
-			</div>
-		
-			</div>
-			
-		
-					<div className="image-slider">
-				
-					    <ul className="rslides" id="slider1">
-					      <li><img src="images/slider1.jpg" alt="" /></li>
-					      <li><img src="images/slider3.jpg" alt="" /></li>
-					      <li><img src="images/slider1.jpg" alt="" /></li>
-					    </ul>
-					
-					</div>
-				
-				<div className="content">
-					<div className="products-box">
-					<div className="products">
-						<h5><span>FEATURED</span> PRODUCTS</h5>
-						<div className="section group">
-							<div className="grid_1_of_5 images_1_of_5">
-								 <img src="images/g3.png" />
-								 <h3>Lorem Ipsum is simply </h3>
-								 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
-								 <h4>$512.00</h4>
-							     <div className="button"><span><a href="singlepage.html">Read More</a></span></div>
-						   </div>
-							<div className="grid_1_of_5 images_1_of_5">
-								 <img src="images/g1.jpg" />
-								 <h3>Lorem Ipsum is simply </h3>
-								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
-								<h4>$300.00</h4>
-							     <div className="button"><span><a href="singlepage.html">Read More</a></span></div>
-						    </div>
-							<div className="grid_1_of_5 images_1_of_5">
-								<img src="images/g2.jpg" />
-								 <h3>Lorem Ipsum is simply </h3>
-								 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
-								 <h4>$120.00</h4>
-							     <div className="button"><span><a href="singlepage.html">Read More</a></span></div>
-							</div>
-							<div className="grid_1_of_5 images_1_of_5">
-								 <img src="images/g3.png" />
-								 <h3>Lorem Ipsum is simply </h3>
-								 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
-								 <h4>$500.00</h4>
-							     <div className="button"><span><a href="singlepage.html">Read More</a></span></div>
-							</div>
-							<div className="grid_1_of_5 images_1_of_5">
-								 <img src="images/g4.jpg" />
-								 <h3>Lorem Ipsum is simply</h3>
-								 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
-								 <h4>$120.00</h4>
-							     <div className="button"><span><a href="singlepage.html">Read More</a></span></div>
-							</div>
-						</div>
-					</div>
-					<div className="products products-secondbox">
-						<h5><span>Our</span> Specials</h5>
-						<div className="section group">
-							<div className="grid_1_of_5 images_1_of_5">
-								 <img src="images/g1.jpg" />
-								 <h3>Lorem Ipsum is simply </h3>
-								 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
-								 <h4><span>$600.00</span>$512.00</h4>
-							     <div className="button"><span><a href="singlepage.html">Read More</a></span></div>
-						   </div>
-							<div className="grid_1_of_5 images_1_of_5">
-								 <img src="images/g6.jpg" />
-								 <h3>Lorem Ipsum is simply </h3>
-								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
-								 <h4><span>$400.00</span>$352.00</h4>
-							     <div className="button"><span><a href="singlepage.html">Read More</a></span></div>
-						    </div>
-							<div className="grid_1_of_5 images_1_of_5">
-								<img src="images/g7.png" />
-								 <h3>Lorem Ipsum is simply </h3>
-								 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
-								  <h4><span>$300.00</span>$202.00</h4>
-							     <div className="button"><span><a href="singlepage.html">Read More</a></span></div>
-							</div>
-							<div className="grid_1_of_5 images_1_of_5">
-								 <img src="images/g8.png" />
-								 <h3>Lorem Ipsum is simply </h3>
-								 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
-								 <h4><span>$400.00</span>$322.00</h4>
-							     <div className="button"><span><a href="singlepage.html">Read More</a></span></div>
-							</div>
-							<div className="grid_1_of_5 images_1_of_5">
-								 <img src="images/g1.jpg" />
-								 <h3>Lorem Ipsum is simply</h3>
-								 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
-								 <h4><span>$700.00</span>$602.00</h4>
-							     <div className="button"><span><a href="singlepage.html">Read More</a></span></div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<div className="clear"> </div>
-			<div className="footer">
-				<div className="section group">
-				<div className="col_1_of_4 span_1_of_4">
-					<h3>INFORMATION</h3>
-					<ul>
-						<li><a href="#">About us</a></li>
-						<li><a href="#">Sitemap</a></li>
-						<li><a href="#">Contact</a></li>
-						<li><a href="#">Terms and conditions</a></li>
-						<li><a href="#">Legal Notice</a></li>
-					</ul>
-				</div>
-				<div className="col_1_of_4 span_1_of_4">
-					<h3>OUR OFFERS</h3>
-					<ul>
-						<li><a href="#">New products</a></li>
-						<li><a href="#">top sellers</a></li>
-						<li><a href="#">Specials</a></li>
-						<li><a href="#">Products</a></li>
-						<li><a href="#">Comments</a></li>
-					</ul>
-				</div>
-				<div className="col_1_of_4 span_1_of_4">
-					<h3>YOUR ACCOUNT</h3>
-					<ul>
-						<li><a href="#">Your Account</a></li>
-						<li><a href="#">Personal info</a></li>
-						<li><a href="#">Prices</a></li>
-						<li><a href="#">Address</a></li>
-						<li><a href="#">Locations</a></li>
-					</ul>
-				</div>
-				<div className="col_1_of_4 span_1_of_4 footer-lastgrid">
-					<h3>Get in touch</h3>
-					<ul>
-						<li><a href="#"><img src="images/facebook.png" title="facebook" /></a></li>
-						<li><a href="#"><img src="images/twitter.png" title="Twiiter" /></a></li>
-						<li><a href="#"><img src="images/rss.png" title="Rss" /></a></li>
-						<li><a href="#"><img src="images/gpluse.png" title="Google+" /></a></li>
-					</ul>
-					<p>Design by <a href="#">W3layouts</a></p>
-				</div>
-			</div>
-			</div>
-		</div>
-	
-      </div>
+
+  			<div className="header">
+          <Header />
+
+  			<div className="clear"> </div>
+  			   <SubHeader />
+  			<div className="clear"> </div>
+  			<TopNav />
+
+  			</div>
+        <ImageSlider />
+
+
+
+  				<div className="content">
+  					<div className="products-box">
+  					<div className="products">
+  						<h5><span>FEATURED</span> PRODUCTS</h5>
+  						<div className="section group">
+  							<div className="grid_1_of_5 images_1_of_5">
+  								 <img src="images/g3.png" />
+  								 <h3>Lorem Ipsum is simply </h3>
+  								 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
+  								 <h4>$512.00</h4>
+  							     <div className="button"><span><a href="singlepage.html">Read More</a></span></div>
+  						   </div>
+  							<div className="grid_1_of_5 images_1_of_5">
+  								 <img src="images/g1.jpg" />
+  								 <h3>Lorem Ipsum is simply </h3>
+  								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
+  								<h4>$300.00</h4>
+  							     <div className="button"><span><a href="singlepage.html">Read More</a></span></div>
+  						    </div>
+  							<div className="grid_1_of_5 images_1_of_5">
+  								<img src="images/g2.jpg" />
+  								 <h3>Lorem Ipsum is simply </h3>
+  								 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
+  								 <h4>$120.00</h4>
+  							     <div className="button"><span><a href="singlepage.html">Read More</a></span></div>
+  							</div>
+  							<div className="grid_1_of_5 images_1_of_5">
+  								 <img src="images/g3.png" />
+  								 <h3>Lorem Ipsum is simply </h3>
+  								 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
+  								 <h4>$500.00</h4>
+  							     <div className="button"><span><a href="singlepage.html">Read More</a></span></div>
+  							</div>
+  							<div className="grid_1_of_5 images_1_of_5">
+  								 <img src="images/g4.jpg" />
+  								 <h3>Lorem Ipsum is simply</h3>
+  								 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
+  								 <h4>$120.00</h4>
+  							     <div className="button"><span><a href="singlepage.html">Read More</a></span></div>
+  							</div>
+  						</div>
+  					</div>
+  					<div className="products products-secondbox">
+  						<h5><span>Our</span> Specials</h5>
+  						<div className="section group">
+  							<div className="grid_1_of_5 images_1_of_5">
+  								 <img src="images/g1.jpg" />
+  								 <h3>Lorem Ipsum is simply </h3>
+  								 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
+  								 <h4><span>$600.00</span>$512.00</h4>
+  							     <div className="button"><span><a href="singlepage.html">Read More</a></span></div>
+  						   </div>
+  							<div className="grid_1_of_5 images_1_of_5">
+  								 <img src="images/g6.jpg" />
+  								 <h3>Lorem Ipsum is simply </h3>
+  								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
+  								 <h4><span>$400.00</span>$352.00</h4>
+  							     <div className="button"><span><a href="singlepage.html">Read More</a></span></div>
+  						    </div>
+  							<div className="grid_1_of_5 images_1_of_5">
+  								<img src="images/g7.png" />
+  								 <h3>Lorem Ipsum is simply </h3>
+  								 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
+  								  <h4><span>$300.00</span>$202.00</h4>
+  							     <div className="button"><span><a href="singlepage.html">Read More</a></span></div>
+  							</div>
+  							<div className="grid_1_of_5 images_1_of_5">
+  								 <img src="images/g8.png" />
+  								 <h3>Lorem Ipsum is simply </h3>
+  								 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
+  								 <h4><span>$400.00</span>$322.00</h4>
+  							     <div className="button"><span><a href="singlepage.html">Read More</a></span></div>
+  							</div>
+  							<div className="grid_1_of_5 images_1_of_5">
+  								 <img src="images/g1.jpg" />
+  								 <h3>Lorem Ipsum is simply</h3>
+  								 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
+  								 <h4><span>$700.00</span>$602.00</h4>
+  							     <div className="button"><span><a href="singlepage.html">Read More</a></span></div>
+  							</div>
+  						</div>
+  					</div>
+  				</div>
+  			</div>
+  			<div className="clear"> </div>
+        <Footer />
+  			</div>
+  		</div>
     );
 }
 
diff --git a/src/components/Footer.js b/src/components/Footer.js
new file mode 100644
index 0000000..ff6f224
--- /dev/null
+++ b/src/components/Footer.js
@@ -0,0 +1,52 @@
+import React from 'react';
+
+function Footer(){
+  return (
+    <div className="footer">
+      <div className="section group">
+      <div className="col_1_of_4 span_1_of_4">
+        <h3>INFORMATION</h3>
+        <ul>
+          <li><a href="#">About us</a></li>
+          <li><a href="#">Sitemap</a></li>
+          <li><a href="#">Contact</a></li>
+          <li><a href="#">Terms and conditions</a></li>
+          <li><a href="#">Legal Notice</a></li>
+        </ul>
+      </div>
+      <div className="col_1_of_4 span_1_of_4">
+        <h3>OUR OFFERS</h3>
+        <ul>
+          <li><a href="#">New products</a></li>
+          <li><a href="#">top sellers</a></li>
+          <li><a href="#">Specials</a></li>
+          <li><a href="#">Products</a></li>
+          <li><a href="#">Comments</a></li>
+        </ul>
+      </div>
+      <div className="col_1_of_4 span_1_of_4">
+        <h3>YOUR ACCOUNT</h3>
+        <ul>
+          <li><a href="#">Your Account</a></li>
+          <li><a href="#">Personal info</a></li>
+          <li><a href="#">Prices</a></li>
+          <li><a href="#">Address</a></li>
+          <li><a href="#">Locations</a></li>
+        </ul>
+      </div>
+      <div className="col_1_of_4 span_1_of_4 footer-lastgrid">
+        <h3>Get in touch</h3>
+        <ul>
+          <li><a href="#"><img src="images/facebook.png" title="facebook" /></a></li>
+          <li><a href="#"><img src="images/twitter.png" title="Twiiter" /></a></li>
+          <li><a href="#"><img src="images/rss.png" title="Rss" /></a></li>
+          <li><a href="#"><img src="images/gpluse.png" title="Google+" /></a></li>
+        </ul>
+        <p>Design by <a href="#">W3layouts</a></p>
+      </div>
+    </div>
+    </div>
+  )
+}
+
+export default Footer;
diff --git a/src/components/Header.js b/src/components/Header.js
index f882be0..0222ec6 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -1,7 +1,31 @@
 import React from "react";
 
 function Header() {
-  return (<div />);
+  return (
+    <div className="top-header">
+      <div className="top-header-left">
+        <ul>
+          <li className="active"><a href="#">Home</a></li>
+          <li><a href="#">Specials</a></li>
+          <li><a href="#">Delivery</a></li>
+          <li><a href="#">Contact</a></li>
+        </ul>
+      </div>
+      <div className="top-header-right">
+        <ul>
+          <li><a href="#">CURRENCY:</a></li>
+          <li>
+            <select>
+              <option>Dollar</option>
+              <option>Euro</option>
+              <option>Pound</option>
+            </select>
+          </li>
+        </ul>
+      </div>
+      <div className="clear"> </div>
+    </div>
+  );
 }
 
 export default Header;
diff --git a/src/components/ImageSlider.js b/src/components/ImageSlider.js
new file mode 100644
index 0000000..290df65
--- /dev/null
+++ b/src/components/ImageSlider.js
@@ -0,0 +1,16 @@
+import React from 'react';
+
+function ImageSlider() {
+  return (
+    <div className="image-slider">
+
+        <ul className="rslides" id="slider1">
+          <li><img src="images/slider1.jpg" alt="" /></li>
+          <li><img src="images/slider3.jpg" alt="" /></li>
+          <li><img src="images/slider1.jpg" alt="" /></li>
+        </ul>
+
+    </div>
+  )
+}
+export default ImageSlider;
diff --git a/src/components/SubHeader.js b/src/components/SubHeader.js
new file mode 100644
index 0000000..b3a6076
--- /dev/null
+++ b/src/components/SubHeader.js
@@ -0,0 +1,22 @@
+import React from 'react';
+
+function SubHeader() {
+  return (
+    <div className="sub-header">
+      <div className="logo">
+        <a href="index.html"><img src="images/logo.png" title="logo" /></a>
+      </div>
+      <div className="sub-header-right">
+        <ul>
+          <li><a href="#">log in</a></li>
+          <li><a href="#">Your account</a></li>
+          <li><a href="#">CART: (EMPTY) <img src="images/cart.png" title="cart" /></a></li>
+        </ul>
+        <input type="text" /><input type="submit"  value="search" />
+      </div>
+      <div className="clear"> </div>
+    </div>
+  )
+}
+
+export default SubHeader;
diff --git a/src/components/TopNav.js b/src/components/TopNav.js
new file mode 100644
index 0000000..97374d3
--- /dev/null
+++ b/src/components/TopNav.js
@@ -0,0 +1,18 @@
+import React from 'react';
+
+function TopNav() {
+  return (
+    <div className="top-nav">
+      <ul>
+        <li><a href="carlights.html">car lights</a></li>
+        <li><a href="carwheels.html">Car wheels</a></li>
+        <li><a href="carbumpers.html">car bumpers</a></li>
+        <li><a href="caradsystem.html">car audiosystem</a></li>
+        <li><a href="truckbumpers.html">Truck bumpers</a></li>
+        <li><a href="contact.html">Feedback</a></li>
+        <div className="clear"> </div>
+      </ul>
+    </div>
+  )
+}
+export default TopNav;

From f708f46ec6ba662788702f8b18fe8582d0379291 Mon Sep 17 00:00:00 2001
From: CGottschallJ <Cameron.Gottschall@gmail.com>
Date: Wed, 18 Oct 2017 21:25:21 -0500
Subject: [PATCH 2/3] second: through map, filter remains

---
 src/App.js                      | 92 ++++++---------------------------
 src/components/ProductDetail.js | 22 ++++++++
 src/components/TopNav.js        | 12 ++---
 src/index.js                    | 14 ++++-
 4 files changed, 55 insertions(+), 85 deletions(-)
 create mode 100644 src/components/ProductDetail.js

diff --git a/src/App.js b/src/App.js
index 71001db..33cd486 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,8 +5,20 @@ import Footer from './components/Footer.js';
 import ImageSlider from './components/ImageSlider.js';
 import SubHeader from './components/SubHeader.js';
 import TopNav from './components/TopNav.js';
+import ProductDetail from './components/ProductDetail.js';
 
 function App(props) {
+  const productProps = props.state.products.map((product, idx) => {
+    return <ProductDetail product={product} index = {idx} />;
+  });
+
+  // const handleCategoryChange = productProps.filter((catgeory) => {
+  //   if(productProps.category === )
+  //
+  // });
+
+
+  console.log(productProps)
     return (
       <div className="App">
         	<div className="wrap">
@@ -17,10 +29,10 @@ function App(props) {
   			<div className="clear"> </div>
   			   <SubHeader />
   			<div className="clear"> </div>
-  			<TopNav />
+  			   <TopNav changeCategory = {props.changeCategory} />
 
   			</div>
-        <ImageSlider />
+          <ImageSlider />
 
 
 
@@ -29,81 +41,7 @@ function App(props) {
   					<div className="products">
   						<h5><span>FEATURED</span> PRODUCTS</h5>
   						<div className="section group">
-  							<div className="grid_1_of_5 images_1_of_5">
-  								 <img src="images/g3.png" />
-  								 <h3>Lorem Ipsum is simply </h3>
-  								 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
-  								 <h4>$512.00</h4>
-  							     <div className="button"><span><a href="singlepage.html">Read More</a></span></div>
-  						   </div>
-  							<div className="grid_1_of_5 images_1_of_5">
-  								 <img src="images/g1.jpg" />
-  								 <h3>Lorem Ipsum is simply </h3>
-  								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
-  								<h4>$300.00</h4>
-  							     <div className="button"><span><a href="singlepage.html">Read More</a></span></div>
-  						    </div>
-  							<div className="grid_1_of_5 images_1_of_5">
-  								<img src="images/g2.jpg" />
-  								 <h3>Lorem Ipsum is simply </h3>
-  								 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
-  								 <h4>$120.00</h4>
-  							     <div className="button"><span><a href="singlepage.html">Read More</a></span></div>
-  							</div>
-  							<div className="grid_1_of_5 images_1_of_5">
-  								 <img src="images/g3.png" />
-  								 <h3>Lorem Ipsum is simply </h3>
-  								 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
-  								 <h4>$500.00</h4>
-  							     <div className="button"><span><a href="singlepage.html">Read More</a></span></div>
-  							</div>
-  							<div className="grid_1_of_5 images_1_of_5">
-  								 <img src="images/g4.jpg" />
-  								 <h3>Lorem Ipsum is simply</h3>
-  								 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
-  								 <h4>$120.00</h4>
-  							     <div className="button"><span><a href="singlepage.html">Read More</a></span></div>
-  							</div>
-  						</div>
-  					</div>
-  					<div className="products products-secondbox">
-  						<h5><span>Our</span> Specials</h5>
-  						<div className="section group">
-  							<div className="grid_1_of_5 images_1_of_5">
-  								 <img src="images/g1.jpg" />
-  								 <h3>Lorem Ipsum is simply </h3>
-  								 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
-  								 <h4><span>$600.00</span>$512.00</h4>
-  							     <div className="button"><span><a href="singlepage.html">Read More</a></span></div>
-  						   </div>
-  							<div className="grid_1_of_5 images_1_of_5">
-  								 <img src="images/g6.jpg" />
-  								 <h3>Lorem Ipsum is simply </h3>
-  								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
-  								 <h4><span>$400.00</span>$352.00</h4>
-  							     <div className="button"><span><a href="singlepage.html">Read More</a></span></div>
-  						    </div>
-  							<div className="grid_1_of_5 images_1_of_5">
-  								<img src="images/g7.png" />
-  								 <h3>Lorem Ipsum is simply </h3>
-  								 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
-  								  <h4><span>$300.00</span>$202.00</h4>
-  							     <div className="button"><span><a href="singlepage.html">Read More</a></span></div>
-  							</div>
-  							<div className="grid_1_of_5 images_1_of_5">
-  								 <img src="images/g8.png" />
-  								 <h3>Lorem Ipsum is simply </h3>
-  								 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
-  								 <h4><span>$400.00</span>$322.00</h4>
-  							     <div className="button"><span><a href="singlepage.html">Read More</a></span></div>
-  							</div>
-  							<div className="grid_1_of_5 images_1_of_5">
-  								 <img src="images/g1.jpg" />
-  								 <h3>Lorem Ipsum is simply</h3>
-  								 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
-  								 <h4><span>$700.00</span>$602.00</h4>
-  							     <div className="button"><span><a href="singlepage.html">Read More</a></span></div>
-  							</div>
+              {productProps}
   						</div>
   					</div>
   				</div>
diff --git a/src/components/ProductDetail.js b/src/components/ProductDetail.js
new file mode 100644
index 0000000..59a6827
--- /dev/null
+++ b/src/components/ProductDetail.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function ProductDetail(props) {
+  const {id, name, description, price, imgUrl, category, rating, reviews} = props.product;
+
+    return(
+      <div className="grid_1_of_5 images_1_of_5">
+         <img src={imgUrl} />
+         <h3>{name}</h3>
+         <p>{description}</p>
+         <h4>{price}</h4>
+           <div className="button"><span><a href="singlepage.html">Read More</a></span></div>
+      </div>
+    );
+}
+
+ProductDetail.propTypes = {
+  product: PropTypes.object.isRequired
+}
+
+export default ProductDetail;
diff --git a/src/components/TopNav.js b/src/components/TopNav.js
index 97374d3..2de500d 100644
--- a/src/components/TopNav.js
+++ b/src/components/TopNav.js
@@ -4,12 +4,12 @@ function TopNav() {
   return (
     <div className="top-nav">
       <ul>
-        <li><a href="carlights.html">car lights</a></li>
-        <li><a href="carwheels.html">Car wheels</a></li>
-        <li><a href="carbumpers.html">car bumpers</a></li>
-        <li><a href="caradsystem.html">car audiosystem</a></li>
-        <li><a href="truckbumpers.html">Truck bumpers</a></li>
-        <li><a href="contact.html">Feedback</a></li>
+        <li><a href="#">car lights</a></li>
+        <li><a href="#">Car wheels</a></li>
+        <li><a href="#">car bumpers</a></li>
+        <li><a href="#">car audiosystem</a></li>
+        <li><a href="#">Truck bumpers</a></li>
+        <li><a href="#">Feedback</a></li>
         <div className="clear"> </div>
       </ul>
     </div>
diff --git a/src/index.js b/src/index.js
index 34d8803..ed95e53 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,11 +4,21 @@ import App from "./App";
 import "./index.css";
 import state from "./state";
 
+let currentCategory = 'tires';
+
+const changeCategory = (category) => {
+  currentCategory = category;
+  render;
+}
+
 function render() {
   ReactDOM.render(
-    <App state={state} />,
+    <App
+      state={state}
+      currentCategory = {currentCategory}
+      changeCategory = {changeCategory}
+  />,
     document.getElementById("root")
   );
 }
 render();
-

From a363f88e09e055cc7927b911d3d324e096b0ece1 Mon Sep 17 00:00:00 2001
From: CGottschallJ <Cameron.Gottschall@gmail.com>
Date: Sun, 22 Oct 2017 14:38:20 -0500
Subject: [PATCH 3/3] Final Commit

---
 src/App.js               | 18 +++++++++++++++---
 src/components/TopNav.js | 14 +++++++-------
 src/index.js             |  2 +-
 3 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/App.js b/src/App.js
index 33cd486..aab8129 100644
--- a/src/App.js
+++ b/src/App.js
@@ -8,9 +8,21 @@ import TopNav from './components/TopNav.js';
 import ProductDetail from './components/ProductDetail.js';
 
 function App(props) {
-  const productProps = props.state.products.map((product, idx) => {
-    return <ProductDetail product={product} index = {idx} />;
-  });
+
+  // const productDisplay = props.state.product
+  //   .filter(
+  //     (product) => props.currentCategory === ''
+  //   )
+
+
+const productProps  = props.state.products
+  .filter(
+    (product) => product.category === props.currentCategory? true: false
+  )
+  .map(
+    (product, idx) => <ProductDetail product={product} key = {idx} />
+  )
+
 
   // const handleCategoryChange = productProps.filter((catgeory) => {
   //   if(productProps.category === )
diff --git a/src/components/TopNav.js b/src/components/TopNav.js
index 2de500d..9ae04ae 100644
--- a/src/components/TopNav.js
+++ b/src/components/TopNav.js
@@ -1,15 +1,15 @@
 import React from 'react';
 
-function TopNav() {
+function TopNav(props) {
   return (
     <div className="top-nav">
       <ul>
-        <li><a href="#">car lights</a></li>
-        <li><a href="#">Car wheels</a></li>
-        <li><a href="#">car bumpers</a></li>
-        <li><a href="#">car audiosystem</a></li>
-        <li><a href="#">Truck bumpers</a></li>
-        <li><a href="#">Feedback</a></li>
+        <li><a href="#" onClick={(e)=> {e.preventDefault(); props.changeCategory("headlights")}}>car lights</a></li>
+        <li><a href="#" onClick={(e)=> {e.preventDefault(); props.changeCategory("tires")}}>Car wheels</a></li>
+        <li><a href="#" onClick={(e)=> {e.preventDefault(); props.changeCategory("bumpers")}}>car bumpers</a></li>
+        <li><a href="#" onClick={(e)=> {e.preventDefault(); props.changeCategory("audio")}}>car audiosystem</a></li>
+        <li><a href="#" onClick={(e)=> {e.preventDefault(); props.changeCategory("bumpers")}}>Truck bumpers</a></li>
+        <li><a href="contact.html">Feedback</a></li>
         <div className="clear"> </div>
       </ul>
     </div>
diff --git a/src/index.js b/src/index.js
index ed95e53..81e95aa 100644
--- a/src/index.js
+++ b/src/index.js
@@ -8,7 +8,7 @@ let currentCategory = 'tires';
 
 const changeCategory = (category) => {
   currentCategory = category;
-  render;
+  render();
 }
 
 function render() {