Merge branch 'AFP-10' into dev

.gitignore

@@ -24,3 +24,4 @@ yarn-error.log*
 
 
 .env
+yarn.lock

package.json

@@ -6,7 +6,10 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "axios": "^0.21.1",
+    "bootstrap": "^5.0.0",
     "react": "^17.0.2",
+    "react-bootstrap": "^1.5.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",

src/actions/apiRequests.js

+import Config from '../config';
+import axios from 'axios';
+
+export const getAllProducts = async data => {
+    const res = await axios.get(`${Config.inventoryUrl}`);
+    // console.log(res.data);
+    return res.data;
+}
\ No newline at end of file

src/component/Main.jsx

-import React from "react";
+import React, { useState, useEffect } from 'react';
 import { Redirect, Switch } from "react-router";
 import AuthRoute from "./AuthRoute";
 import ProductForm from "./ProductForm";
+import ProductGrid from "./ProductGrid";
+import {getAllProducts} from "../actions/apiRequests.js"
 
 export default function Main() {
+  const [productData, setproductData] = useState([]);
+
+  useEffect(() => {
+    loadProducts();
+  }, []);
+
+  const loadProducts = async (event) => {
+    const data = await getAllProducts();
+    setproductData(data);
+  }
+
   return (
     <div>
       <Switch>
@@ -11,7 +24,9 @@ export default function Main() {
           <ProductForm />
         </AuthRoute>
         <AuthRoute exact path="/promos/new">NEW PROMO</AuthRoute>
-        <AuthRoute exact  path="/products">PRODUCTS</AuthRoute>
+        <AuthRoute exact path="/products">
+          <ProductGrid productData={productData} />
+        </AuthRoute>
         <AuthRoute path="/promos">PROMOS</AuthRoute>
         <AuthRoute exact path="/">
           <Redirect to="/products" />

src/component/Product.jsx

+import React from 'react'
+import './../styles/Product.css'
+
+export default function Product({product}) {
+
+  return (
+    <div>
+        <div className="img-container">
+            <img src={product.productImageUrl} alt={product.productName}/>
+        </div>
+        <div className="prod-info">
+            <h5>{product.productName}</h5>
+            {product.sku}<br/>
+            ${product.price}<br/>
+            In Stock: {product.stock}
+        </div>		
+    </div>
+  )
+}

src/component/ProductGrid.jsx

+import React from "react";
+import Product from "./Product.jsx";
+import { Col, Container, Row } from "react-bootstrap";
+import "./../styles/ProductGrid.css";
+export default function ProductGrid({ productData }) {
+  return (
+    <div>
+      <h1 id="title" className="text-center" >Inventory</h1>
+      <Container id="prod-grid" className="mt-3">
+        <Row xs={1} sm={2} md={3} lg={4}>
+          {productData.map((product) => {
+            return (
+              <Col key={product.sku}>
+                <Product product={product} />
+              </Col>
+            );
+          })}
+        </Row>
+      </Container>
+    </div>
+
+    //uses vanilla bootstrap
+    // <div>
+    //   	<h1 id="title">Inventory</h1>
+    // 	<div className="container" id="prod-grid"  >
+    // 	<div className="row row-cols-4">
+    // 		{productData.map((product) => {
+    // 			return (
+    // 					<div className="col" key={product.sku}>
+    // 						<Product product={product}/>
+    // 					</div>
+
+    // 			)
+    // 		})}
+    // 		</div>
+    // 	</div>
+    // </div>
+  );
+}

src/config.js

+class Config {
+    static inventoryUrl = "http://localhost:8080/api/products";
+    static promotionsUrl = "http://localhost:8081/api/promos";
+}
+
+export default Config;
\ No newline at end of file

src/index.js

 import React from "react";
 import ReactDOM from "react-dom";
+import 'bootstrap/dist/css/bootstrap.css';
 import "./index.css";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";

src/styles/Product.css

+.img-container{
+    position:relative;
+    overflow:hidden;
+    padding-bottom:100%;
+}
+img {
+    position: absolute;
+    max-width: 100%;
+    max-height: 100%;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+}
\ No newline at end of file

src/styles/ProductGrid.css

+#title {
+    margin-left: 1em;
+}
+
+#prod-grid {
+    margin-left: 2em;
+}
\ No newline at end of file