Merge branch 'AFP-10' into dev

src/component/Main.jsx

-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 ProductIndex from "./ProductIndex";
 import SearchResults from "./SearchResults";
-import { getAllProducts } from "../actions/apiRequests.js";
 import PromotionNewFormComponent from "./promotionforms/PromotionNewFormComponent";
 import PromotionIndexComponent from "./promo_index/PromotionsIndexComponent";
 
 export default function Main() {
-  const [productData, setproductData] = useState([]);
-
-  useEffect(() => {
-    loadProducts();
-  }, []);
-
-  const loadProducts = async (event) => {
-    const data = await getAllProducts();
-    setproductData(data);
-  };
 
   return (
     <div>
@@ -34,7 +22,7 @@ export default function Main() {
           path="/promos/new"
           component={PromotionNewFormComponent}
         ></AuthRoute>
-        <AuthRoute exact path="/products" component={ProductGrid}></AuthRoute>
+        <AuthRoute exact path="/products" component={ProductIndex}></AuthRoute>
         <AuthRoute path="/promos">
           <PromotionIndexComponent />
         </AuthRoute>

src/component/ProductForm.jsx

@@ -31,7 +31,7 @@ export default function ProductForm(props) {
             }
           });
           console.log(data);
-          setForm({ ...data, availableStock: data.stock });
+          setForm({ ...data });
         });
       }
     });

src/component/ProductGrid.jsx → src/component/ProductIndex.jsx

 import React, { useEffect, useState } from "react";
-import Product from "./Product.jsx";
-import { Col, Container, Row } from "react-bootstrap";
-import "./../styles/ProductGrid.css";
+import ProductTable from "./ProductTable.jsx"
 import Config from "../config.js";
 import { Link } from "react-router-dom";
-import { deleteProduct } from "../actions/apiRequests";
 
-export default function ProductGrid({ productData }) {
+export default function ProductIndex() {
   const [products, setProducts] = useState([]);
 
   const fetchProducts = async () => {
@@ -17,13 +14,6 @@ export default function ProductGrid({ productData }) {
     }
   };
 
-  const handleDelete = (sku) => {
-    deleteProduct(sku)
-    .then(() => {
-      fetchProducts();
-    });
-  }
-
   useEffect(() => fetchProducts(), []);
 
   return (
@@ -36,34 +26,10 @@ export default function ProductGrid({ productData }) {
           + New Product
         </Link>
       </div>
-      <Container id="prod-grid" className="mt-3 mx-auto">
-        <Row xs={1} sm={2} md={3} lg={4}>
-          {products.map((product) => {
-            return (
-              <Col key={product.sku}>
-                <Product product={product} handleDelete={() => handleDelete(product.sku)} />
-              </Col>
-            );
-          })}
-        </Row>
-      </Container>
+      {products.length > 0
+      ? <ProductTable productData={products} />
+      : <p>No products found.</p>
+      }
     </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/component/Product.jsx → src/component/ProductRow.jsx

 import React, { useState } from "react";
-import "./../styles/Product.css";
+import "./../styles/ProductRow.css";
 import { Modal, Button, Alert } from "react-bootstrap";
 
-export default function Product({ product, handleDelete }) {
+export default function ProductRow({ product, handleDelete }) {
   const [show, setShow] = useState(false);
   const [showConfirm, setShowConfirm] = useState(false);
 
   const handleClose = () => {
     setShow(false);
+    console.log({ show });
     handleCloseConfirm();
   };
 
   const handleCloseDelete = (sku) => {
-    handleDelete(sku)
+    handleDelete(sku);
     handleClose();
-  }
-
+  };
 
   const handleShow = () => setShow(true);
   const handleShowConfirm = () => setShowConfirm(true);
   const handleCloseConfirm = () => setShowConfirm(false);
 
   return (
-    <div>
-      <div className="img-container" onClick={handleShow}>
-        <img
-          className="grid-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>
+    <tr>
+      <td onClick={handleShow}>{product.sku}</td>
+      <td onClick={handleShow}>{product.upc}</td>
+      <td onClick={handleShow}>{product.productName}</td>
+      <td onClick={handleShow}>${product.price}</td>
+      <td onClick={handleShow}>{product.category}</td>
+      <td onClick={handleShow}>{product.availableStock}</td>
+      <td onClick={handleShow}>{product.blockedStock}</td>
+      <td onClick={handleShow}>{product.fulfilledStock}</td>
 
       <Modal show={show} onHide={handleClose}>
         <Modal.Header closeButton>
@@ -51,7 +45,11 @@ export default function Product({ product, handleDelete }) {
           <br />
           {product.productDescription}
           <br />
-          In Stock: {product.stock}
+          In Stock: {product.availableStock}
+          <br />
+          Blocked Stock: {product.blockedStock}
+          <br />
+          Fulfilled Stock: {product.fulfilledStock}
         </Modal.Body>
 
         <Modal.Footer>
@@ -62,7 +60,6 @@ export default function Product({ product, handleDelete }) {
           >
             Delete product
           </Button>
-
           <Button variant="primary" href={`/products/edit/${product.sku}`}>
             Edit Product
           </Button>
@@ -73,10 +70,15 @@ export default function Product({ product, handleDelete }) {
               Cancel
             </Button>
             &nbsp;&nbsp;
-            <Button variant="danger" onClick={() => handleCloseDelete(product.sku)}>Yes, delete</Button>
+            <Button
+              variant="danger"
+              onClick={() => handleCloseDelete(product.sku)}
+            >
+              Yes, delete
+            </Button>
           </Alert>
         </Modal.Footer>
       </Modal>
-    </div>
+    </tr>
   );
 }

src/component/ProductTable.jsx

+import React, { useState, useEffect } from "react";
+import ProductRow from "./ProductRow.jsx";
+import { Container, Table } from "react-bootstrap";
+import Config from "../config.js";
+import { deleteProduct } from "../actions/apiRequests";
+
+export default function ProductTable({ productData }) {
+  const [products, setProducts] = useState([productData]);
+
+  const fetchProducts = async () => {
+    const res = await fetch(`${Config.inventoryUrl}`);
+    if (res.ok) {
+      const data = await res.json();
+      setProducts([...data]);
+    }
+  };
+
+  const handleDelete = (sku) => {
+    deleteProduct(sku)
+      .then(() => {
+        fetchProducts();
+      });
+  }
+
+  useEffect(() => fetchProducts(), []);
+
+  return (
+    <Container id="prod-table" className="mt-3 mx-auto">
+      <Table>
+        <thead>
+          <tr>
+            <th>SKU</th>
+            <th>UPC</th>
+            <th>Product Name</th>
+            <th>Price</th>
+            <th>Category</th>
+            <th>Available Stock</th>
+            <th>Blocked Stock</th>
+            <th>Fulfilled Stock</th>
+          </tr>
+        </thead>
+        <tbody>
+          {products.map((product) => {
+            return (
+              <ProductRow key={product.sku} product={product} handleDelete={() => handleDelete(product.sku)} />
+            );
+          })}
+        </tbody>
+      </Table>
+    </Container>
+  );
+}

src/component/SearchResults.jsx

 import React from "react";
-import Product from "./Product.jsx";
-import { Col, Container, Row } from "react-bootstrap";
-import "./../styles/ProductGrid.css";
-export default class SearchResults extends React.Component{
+import ProductRow from "./ProductRow.jsx";
+import { Table } from "react-bootstrap";
+// import "./../styles/ProductTable.css";
+export default class SearchResults extends React.Component {
 
-    constructor(props){
-        super(props);
-        this.state = {
-            results: this.props.history.location.state.results
-        }
+  constructor(props) {
+    super(props);
+    this.state = {
+      results: this.props.history.location.state.results
     }
+  }
 
-    render(){
-        return (
-            <div>
-              <h1 id="title" className="text-center" >Search Results</h1>
-              <Container id="prod-grid" className="mt-3">
-                <Row xs={1} sm={2} md={3} lg={4}>
-                  {this.state.results.length > 0 ? this.state.results.map((product) => {
-                    return (
-                      <Col key={product.sku}>
-                        <Product product={product} />
-                      </Col>
-                    );
-                  }) :
-                  <Col>
-                    <p>Unable to find any matching products.</p>
-                  </Col>
-                }
-                </Row>
-              </Container>
-            </div>
-          );
-    }
+  render() {
+    return (
+      <div className="container flex-column d-flex justify-content-center">
+        <h1 id="title" className="text-center" >Search Results</h1>
+        {this.state.results.length > 0 ?
+          <Table>
+            <thead>
+              <tr>
+                <th>SKU</th>
+                <th>Product Name</th>
+                <th>Price</th>
+                <th>Category</th>
+                <th>Available Stock</th>
+                <th>Blocked Stock</th>
+                <th>Fulfilled Stock</th>
+              </tr>
+            </thead>
+            <tbody>
+              {this.state.results.map((product) => {
+                return (
+                  <ProductRow key={product.sku} product={product} />
+                );
+              })}
+            </tbody>
+          </Table>
+          :
+          <p>Unable to find any matching products.</p>
+        }
+      </div>
+    );
+  }
 
 }
\ No newline at end of file

src/component/promo_index/PromotionsIndexComponent.jsx

@@ -2,8 +2,6 @@ import {useState, useEffect} from 'react';
 import Config from '../../config';
 import "./promolistStyle.css";
 import { NavLink } from 'react-router-dom';
-import { getAllProducts } from "../../actions/apiRequests.js";
-
 
 export default function PromotionIndexComponent () {
 

src/styles/ProductGrid.css → src/styles/ProductIndex.css

@@ -2,6 +2,6 @@
     margin-left: 1em;
 }
 
-#prod-grid {
-    margin-left: 2em;
+#prod-table {
+    margin-left: 5em;
 }
\ No newline at end of file