From af70a1fa54d187dbe645c440730522bb9d242169 Mon Sep 17 00:00:00 2001
From: Ben Anderson <banderson@nisum.com>
Date: Mon, 10 May 2021 14:36:18 -0400
Subject: [PATCH] Fixed routing and data fetching
---
src/component/Main.jsx | 23 ++++++++-----
src/component/Product.jsx | 2 +-
src/component/ProductForm.jsx | 62 ++++++++++++++++++++++++++++-------
src/component/ProductGrid.jsx | 22 +++++++++++--
4 files changed, 85 insertions(+), 24 deletions(-)
diff --git a/src/component/Main.jsx b/src/component/Main.jsx
index 0efe9a9..3192454 100644
--- a/src/component/Main.jsx
+++ b/src/component/Main.jsx
@@ -1,10 +1,10 @@
-import React, { useState, useEffect } 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"
-import PromotionNewFormComponent from './promotionforms/PromotionNewFormComponent'
+import { getAllProducts } from "../actions/apiRequests.js";
+import PromotionNewFormComponent from "./promotionforms/PromotionNewFormComponent";
export default function Main() {
const [productData, setproductData] = useState([]);
@@ -16,21 +16,28 @@ export default function Main() {
const loadProducts = async (event) => {
const data = await getAllProducts();
setproductData(data);
- }
+ };
return (
<div>
<Switch>
<AuthRoute exact path="/products/new">
- <ProductForm />
+ <ProductForm method="POST" />
</AuthRoute>
- <AuthRoute exact path="/promos/new" component={PromotionNewFormComponent}>NEW PROMO</AuthRoute>
- <AuthRoute exact path="/products">PRODUCTS</AuthRoute>
+ <AuthRoute exact path="/products/edit/:sku">
+ <ProductForm method="PUT" />
+ </AuthRoute>
+ <AuthRoute
+ exact
+ path="/promos/new"
+ component={PromotionNewFormComponent}
+ ></AuthRoute>
+ <AuthRoute exact path="/products" component={ProductGrid}></AuthRoute>
<AuthRoute path="/promos">PROMOS</AuthRoute>
<AuthRoute exact path="/">
<Redirect to="/products" />
</AuthRoute>
- <AuthRoute >404 PAGE</AuthRoute>
+ <AuthRoute>404 PAGE</AuthRoute>
</Switch>
</div>
);
diff --git a/src/component/Product.jsx b/src/component/Product.jsx
index 99f9216..509d2e4 100644
--- a/src/component/Product.jsx
+++ b/src/component/Product.jsx
@@ -56,7 +56,7 @@ export default function Product({ product }) {
Delete product
</Button>
- <Button variant="primary" onClick={handleClose}>
+ <Button variant="primary" href={`/products/edit/${product.sku}`}>
Edit Product
</Button>
diff --git a/src/component/ProductForm.jsx b/src/component/ProductForm.jsx
index 77ee35f..0f3de31 100644
--- a/src/component/ProductForm.jsx
+++ b/src/component/ProductForm.jsx
@@ -1,5 +1,6 @@
-import React, { useState } from "react";
-import { useHistory, useLocation } from "react-router";
+import React, { useEffect, useState } from "react";
+import { useHistory, useParams } from "react-router";
+import Config from "../config";
const emptyForm = {
sku: "",
@@ -11,7 +12,7 @@ const emptyForm = {
availableStock: 0,
productDescription: "",
productImageUrl: "",
- productImage: ""
+ productImage: "",
};
ProductForm.defaultProps = {
@@ -19,10 +20,23 @@ ProductForm.defaultProps = {
};
export default function ProductForm(props) {
- const { product } = props;
- const [form, setForm] = useState(product);
+ const { method } = props;
+ const [form, setForm] = useState(emptyForm);
const [errors, setErrors] = useState([]);
const history = useHistory();
+ const { sku } = useParams();
+
+ useEffect(() => {
+ fetch(`${Config.inventoryUrl}/${sku}`).then((res) => {
+ if (res.ok) {
+ res
+ .json()
+ .then((data) =>
+ setForm({ ...data, availableStock: data.stock, productImage: "" })
+ );
+ }
+ });
+ }, [sku]);
const validate = () => {
setErrors([]);
@@ -59,8 +73,12 @@ export default function ProductForm(props) {
if (errors.length === 0) {
// console.log(form);
- fetch("http://localhost:8080/api/products", {
- method: "POST",
+ const url =
+ method === "PUT"
+ ? `${Config.inventoryUrl}/${sku}`
+ : `${Config.inventoryUrl}`;
+ fetch(url, {
+ method,
headers: {
"Content-Type": "application/json",
},
@@ -100,6 +118,7 @@ export default function ProductForm(props) {
SKU
</label>
<input
+ disabled={method === "PUT" ? true : false}
required
name="sku"
type="text"
@@ -137,7 +156,9 @@ export default function ProductForm(props) {
className="form-control"
id="productName"
value={form.productName}
- onChange={(e) => setForm({ ...form, productName: e.target.value })}
+ onChange={(e) =>
+ setForm({ ...form, productName: e.target.value })
+ }
/>
</div>
<div>
@@ -180,7 +201,9 @@ export default function ProductForm(props) {
rows="7"
className="form-control"
value={form.productDescription}
- onChange={(e) => setForm({ ...form, productDescription: e.target.value })}
+ onChange={(e) =>
+ setForm({ ...form, productDescription: e.target.value })
+ }
></textarea>
</div>
</div>
@@ -204,13 +227,16 @@ export default function ProductForm(props) {
Stock
</label>
<input
+ disabled={method === "PUT" ? true : false}
required
name="stock"
type="number"
className="form-control"
id="stock"
value={form.availableStock}
- onChange={(e) => setForm({ ...form, availableStock: e.target.value })}
+ onChange={(e) =>
+ setForm({ ...form, availableStock: e.target.value })
+ }
/>
</div>
</div>
@@ -225,7 +251,13 @@ export default function ProductForm(props) {
type="url"
placeholder="Enter image URL here or upload image below..."
value={form.productImageUrl}
- onChange={(e) => setForm({ ...form, productImageUrl: e.target.value, productImage:""})}
+ onChange={(e) =>
+ setForm({
+ ...form,
+ productImageUrl: e.target.value,
+ productImage: "",
+ })
+ }
></input>
<input
id="productImage"
@@ -233,7 +265,13 @@ export default function ProductForm(props) {
className="form-control form-control-lg"
type="file"
value={form.productImage}
- onChange={(e) => setForm({ ...form, productImage: e.target.value, productImageUrl:"" })}
+ onChange={(e) =>
+ setForm({
+ ...form,
+ productImage: e.target.value,
+ productImageUrl: "",
+ })
+ }
></input>
</div>
diff --git a/src/component/ProductGrid.jsx b/src/component/ProductGrid.jsx
index 0baeb1a..e4bd423 100644
--- a/src/component/ProductGrid.jsx
+++ b/src/component/ProductGrid.jsx
@@ -1,14 +1,30 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
import Product from "./Product.jsx";
import { Col, Container, Row } from "react-bootstrap";
import "./../styles/ProductGrid.css";
+import Config from "../config.js";
+import { set } from "react-hook-form";
export default function ProductGrid({ productData }) {
+ const [products, setProducts] = useState([]);
+
+ const fetchProducts = async () => {
+ const res = await fetch(`${Config.inventoryUrl}`);
+ if (res.ok) {
+ const data = await res.json();
+ setProducts([...data]);
+ }
+ };
+
+ useEffect(() => fetchProducts(), []);
+
return (
<div>
- <h1 id="title" className="text-center" >Inventory</h1>
+ <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) => {
+ {products.map((product) => {
return (
<Col key={product.sku}>
<Product product={product} />
--
2.18.1