diff --git a/src/App.js b/src/App.js index 4513d4b..b91b731 100644 --- a/src/App.js +++ b/src/App.js @@ -1,84 +1,57 @@ -import React from "react"; +import React, { Component } from "react"; import "./App.css"; +import Header from "./components/Header"; +import Footer from "./components/Footer"; +import ImageSlider from "./components/ImageSlider"; +import SubHeader from "./components/SubHeader"; +import TopNav from "./components/TopNav"; +import ProductDetail from "./components/ProductDetail"; function App(props) { + + let allProducts = props.state.products; + //console.log("All Products:",allProducts); + function filterByCat(item) { + if (item.category == props.currentCategory){ + return true; + } + } + + console.log("Products filtered:",allProducts.filter(filterByCat)); + + let filterProducts = allProducts.filter(filterByCat); + + let prodDetails = filterProducts.map((product)=> { + //console.log("Product (map input):",product); + //console.log("App props.state:",props.state); + return ; + }); + return (
- +
- -
-
- -
-
-
    -
  • CURRENCY:
    • -
  • - -
    • -
-
-
-
+ +
+
-
-
- -
- -
-
+
- - + +
- - -
- -
    -
    • -
    • -
    • -
- -
- + + +
FEATURED PRODUCTS
- + {prodDetails} + {/*

Lorem Ipsum is simply

Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.

$512.00

@@ -150,59 +123,17 @@ function App(props) {

Lorem Ipsum is simply

Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.

$700.00$602.00

- + */}
-
-
-
-

INFORMATION

- -
-
-

OUR OFFERS

- -
-
-

YOUR ACCOUNT

- -
-
-

Get in touch

-
    -
    • -
    • -
    • -
    • -
-

Design by W3layouts

-
-
-
+
+
- +
); } diff --git a/src/components/Footer.js b/src/components/Footer.js new file mode 100644 index 0000000..0b9d6c1 --- /dev/null +++ b/src/components/Footer.js @@ -0,0 +1,54 @@ +import React from "react"; + +function Footer(props) { + return ( + +
+
+
+

INFORMATION

+ +
+
+

OUR OFFERS

+ +
+
+

YOUR ACCOUNT

+ +
+
+

Get in touch

+
    +
    • +
    • +
    • +
    • +
+

Design by W3layouts

+
+
+
+ + ); +} + +export default Footer; diff --git a/src/components/Header.js b/src/components/Header.js index f882be0..ed46da0 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -1,7 +1,33 @@ import React from "react"; -function Header() { - return (
); +function Header(props) { + return ( + +
+
+ +
+
+
    +
  • CURRENCY:
    • +
  • + +
    • +
+
+
+
+ + ); } export default Header; diff --git a/src/components/ImageSlider.js b/src/components/ImageSlider.js new file mode 100644 index 0000000..a191ac4 --- /dev/null +++ b/src/components/ImageSlider.js @@ -0,0 +1,19 @@ +import React from "react"; + +function ImageSlider(props) { + return ( + +
+ +
    +
    • +
    • +
    • +
+ +
+ + ); +} + +export default ImageSlider; diff --git a/src/components/ProductDetail.js b/src/components/ProductDetail.js new file mode 100644 index 0000000..24dcd47 --- /dev/null +++ b/src/components/ProductDetail.js @@ -0,0 +1,17 @@ +import React from "react"; + +function ProductDetail(props) { + return ( + +
+ +

{props.prod.name}

+

{props.prod.description}

+

{props.prod.price}

+
Read More
+
+ + ); +} + +export default ProductDetail; diff --git a/src/components/SubHeader.js b/src/components/SubHeader.js new file mode 100644 index 0000000..4e62de9 --- /dev/null +++ b/src/components/SubHeader.js @@ -0,0 +1,24 @@ +import React from "react"; + +function SubHeader(props) { + return ( + +
+
+ +
+
+ + +
+
+
+ + ); +} + +export default SubHeader; diff --git a/src/components/TopNav.js b/src/components/TopNav.js new file mode 100644 index 0000000..5df58b7 --- /dev/null +++ b/src/components/TopNav.js @@ -0,0 +1,53 @@ +import React from "react"; + +function TopNav(props) { + + function noHash(e){ + e.preventDefault(); + alert("hi"); + } + + return ( + +
+ +
+ + ); +} + +export default TopNav; diff --git a/src/index.js b/src/index.js index 34d8803..fc61ecf 100644 --- a/src/index.js +++ b/src/index.js @@ -4,11 +4,20 @@ import App from "./App"; import "./index.css"; import state from "./state"; +//let currentCategory = "tires"; + +function changeCategory(category) { + state.currentCategory = category; + console.log("currentCategory in changeCategory:",state.currentCategory); + render(); +} + function render() { + console.log("currentCategory in render:",state.currentCategory); ReactDOM.render( - , + , document.getElementById("root") ); } -render(); +render(); diff --git a/src/state.js b/src/state.js index 4f52c2c..4c04750 100644 --- a/src/state.js +++ b/src/state.js @@ -1,4 +1,5 @@ export default { + currentCategory: "tires", products:[{ "id": 1, "name": "Namfix", @@ -269,4 +270,4 @@ export default { "category": "tires", "rating": 2, "reviews": 1 -}]}; \ No newline at end of file +}]};