Skip to content

I
inventory-promotion-react
Commit 694b3040 authored by John Lam's avatar John Lam
Browse files
Options

fix pull

parents 8d6ed355 bf59eb91
Hide whitespace changes
Inline Side-by-side
Showing with 217 additions and 73 deletions
src/component/Main.jsx
View file @ 694b3040
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
View file @ 694b3040
......@@ -31,7 +31,7 @@ export default function ProductForm(props) {
}
});
console.log(data);
setForm({ ...data, availableStock: data.stock });
setForm({ ...data });
});
}
});
......@@ -128,7 +128,6 @@ export default function ProductForm(props) {
type="text"
className="form-control"
id="productSku"
disabled={method === "PUT" ? true : false}
value={form.sku}
onChange={(e) => setForm({ ...form, sku: e.target.value })}
/>
......
src/component/ProductGrid.jsx → src/component/ProductIndex.jsx
View file @ 694b3040
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 [displayProducts, setDisplayProducts] = useState([]);
const [categories, setCategories] = useState([]);
const [activeCategory, setActiveCategory] = useState("");
console.log(displayProducts);
const fetchProducts = async () => {
const res = await fetch(`${Config.inventoryUrl}`);
if (res.ok) {
const data = await res.json();
setProducts([...data]);
setDisplayProducts([...data]);
setCategories([
...data.reduce((acc, prod) => {
if (!acc.includes(prod.category)) {
acc.push(prod.category);
}
return acc;
}, []),
]);
}
};
const handleDelete = (sku) => {
deleteProduct(sku)
.then(() => {
fetchProducts();
});
}
useEffect(() => fetchProducts(), []);
return (
......@@ -36,34 +39,36 @@ 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 ? (
<>
<select
className="form-select w-25 mt-1"
id="category-select"
onChange={(e) => {
if (e.target.value === "") {
setDisplayProducts([...products]);
return;
}
const filtered = products.filter(
(prod) => prod.category === e.target.value
);
setDisplayProducts([...filtered]);
}}
>
<option value="">Select Category</option>
{categories.map((category, i) => (
<option key={i + 679}>{category}</option>
))}
</select>
<ProductTable
productData={displayProducts}
fetchProducts={fetchProducts}
products={displayProducts}
/>
</>
) : (
<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
View file @ 694b3040
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 0 → 100644
View file @ 694b3040
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({ fetchProducts, products }) {
// 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
View file @ 694b3040
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 { deleteProduct } from "../actions/apiRequests";
import { withRouter } from "react-router";
constructor(props){
super(props);
this.state = {
results: this.props.history.location.state.results
}
}
class SearchResults extends React.Component {
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>
);
constructor(props) {
super(props);
this.state = {
results: this.props.history.location.state.results
}
this.handleDelete = this.handleDelete.bind(this);
}
handleDelete(sku){
deleteProduct(sku)
.then(() => {
const newResults = this.state.results.filter(product => product.sku !== sku);
this.setState({results: newResults});
this.props.history.push("/searchResults", this.state);
});
}
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} handleDelete={() => this.handleDelete(product.sku)} />
);
})}
</tbody>
</Table>
:
<p>Unable to find any matching products.</p>
}
</div>
);
}
}
}
\ No newline at end of file
export default withRouter(SearchResults);
\ No newline at end of file
src/component/promo_index/PromotionsIndexComponent.jsx
View file @ 694b3040
......@@ -3,7 +3,6 @@ import Config from '../../config';
import "./promolistStyle.css";
import { NavLink } from 'react-router-dom';
export default function PromotionIndexComponent () {
const [promoData, setPromoData] = useState([]);
......
src/styles/ProductGrid.css → src/styles/ProductIndex.css
View file @ 694b3040
......@@ -2,6 +2,6 @@
margin-left: 1em;
}
#prod-grid {
margin-left: 2em;
#prod-table {
margin-left: 5em;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment