Changes inventory to table from grid

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/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();
   };
 
@@ -16,27 +17,19 @@ export default function Product({ product, handleDelete }) {
     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.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>
@@ -47,11 +40,11 @@ export default function Product({ product, handleDelete }) {
           <div className="modal-img">
             <img src={product.productImageUrl} alt={product.productName} />
           </div>
-          <h5>{product.sku}</h5>${product.price}
-          <br />
-          {product.productDescription}
-          <br />
-          In Stock: {product.stock}
+          <h5>{product.sku}</h5>${product.price}<br />
+          {product.productDescription}<br />
+          In Stock: {product.availableStock}<br />
+          Blocked Stock: {product.blockedStock}<br />
+          Fulfilled Stock: {product.fulfilledStock}
         </Modal.Body>
 
         <Modal.Footer>
@@ -62,7 +55,6 @@ export default function Product({ product, handleDelete }) {
           >
             Delete product
           </Button>
-
           <Button variant="primary" href={`/products/edit/${product.sku}`}>
             Edit Product
           </Button>
@@ -77,6 +69,6 @@ export default function Product({ product, handleDelete }) {
           </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>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";
+import { Container } from "react-bootstrap";
+// import "./../styles/ProductGrid.css";
+import ProductTable from "./ProductTable.jsx";
 export default class SearchResults extends React.Component{
 
     constructor(props){
@@ -16,19 +16,10 @@ export default class SearchResults extends React.Component{
             <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>
+                {this.state.results.length > 0 ? 
+                  <ProductTable productData={this.state.results}/>
+                : <p>Unable to find any matching products.</p>
                 }
-                </Row>
               </Container>
             </div>
           );

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