Skip to content

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

Merge branch 'AFP-14' into 'master' 

Afp 14

See merge request !3
parents f58a2572 fcd0852e
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 2068 additions and 1624 deletions
.gitignore
View file @ d0873a5d
......@@ -21,3 +21,6 @@
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.env
package.json
View file @ d0873a5d
......@@ -8,6 +8,7 @@
"@testing-library/user-event": "^12.1.10",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
......
public/index.html
View file @ d0873a5d
......@@ -2,6 +2,12 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0"
crossorigin="anonymous"
/>
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
......
src/App.js
View file @ d0873a5d
import logo from './logo.svg';
import './App.css';
import "./App.css";
import Header from "./component/Header";
import Main from "./component/Main";
import AuthRoute from "./component/AuthRoute";
import { Switch } from "react-router";
import Login from "./component/Login";
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
<div>
<Switch>
<AuthRoute path="/login">
<Login />
</AuthRoute>
<AuthRoute>
<Header />
<Main />
</AuthRoute>
</Switch>
</div>
);
}
......
src/component/AuthRoute.jsx 0 → 100644
View file @ d0873a5d
import React from "react";
import { Redirect, Route } from "react-router";
export default function AuthRoute({ children, ...rest }) {
// TODO: replace with actual Auth data from redux later
const auth = true;
return (
<Route
{...rest}
render={({ location }) => {
console.log(location);
if (auth) {
if (location.pathname === "/login") {
return <Redirect to="/" />;
} else {
return children;
}
} else if (location.pathname !== "/login") {
return <Redirect to="/login" />;
}
return children;
}}
/>
);
}
src/component/Header.jsx 0 → 100644
View file @ d0873a5d
import React, { useState } from "react";
import { Link } from "react-router-dom";
const Header = () => {
const [show, setShow] = useState(false);
return (
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
<div className="container-fluid">
<Link className="navbar-brand" to="/">
Ascend Inventory
</Link>
<button
className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
onClick={() => setShow((prev) => !prev)}
>
<span className="navbar-toggler-icon"></span>
</button>
<div
className={`collapse navbar-collapse ${show ? "show" : ""}`}
id="navbarSupportedContent"
>
<ul className="navbar-nav me-auto mb-2 mb-lg-0">
<li className="nav-item">
<Link className="nav-link" to="/products">
Products
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/promos">
Promotions
</Link>
</li>
</ul>
<form className="d-flex">
<input
type="search"
className="form-control me-2"
placeholder="search"
/>
<button className="btn btn-light" type="submit">
GO
</button>
</form>
</div>
</div>
</nav>
);
};
export default Header;
src/component/Login.jsx 0 → 100644
View file @ d0873a5d
import React from 'react'
export default function Login() {
return (
<div>
LOGIN
</div>
)
}
src/component/Main.jsx 0 → 100644
View file @ d0873a5d
import React from "react";
import { Redirect, Switch } from "react-router";
import AuthRoute from "./AuthRoute";
import ProductForm from "./ProductForm";
export default function Main() {
return (
<div>
<Switch>
<AuthRoute exact path="/products/new">
<ProductForm method="POST" />
</AuthRoute>
<AuthRoute path="/products/edit/:productId">
<ProductForm method="PUT" />
</AuthRoute>
<AuthRoute exact path="/promos/new">
NEW PROMO
</AuthRoute>
<AuthRoute exact path="/products">
PRODUCTS
</AuthRoute>
<AuthRoute path="/promos">PROMOS</AuthRoute>
<AuthRoute exact path="/">
<Redirect to="/products" />
</AuthRoute>
<AuthRoute>404 PAGE</AuthRoute>
</Switch>
</div>
);
}
src/component/ProductForm.jsx 0 → 100644
View file @ d0873a5d
import React, { useEffect, useState } from "react";
import { useHistory, useParams } from "react-router";
import emptyProduct from "../emptProduct";
const emptyForm = {
...emptyProduct,
imageFile: "",
};
ProductForm.defaultProps = {
product: { ...emptyForm },
};
export default function ProductForm(props) {
const { method } = props;
const [form, setForm] = useState({ ...emptyForm });
const [imageMode, setImageMode] = useState("url");
const [errors, setErrors] = useState([]);
const history = useHistory();
const { productId } = useParams("productId");
useEffect(() => {
fetch(`http://localhost:8080/api/products/${productId}/`).then((res) => {
if (res.ok) {
console.log(res);
res.json().then((data) => {
Object.keys(data).forEach((key) => {
if (data[key] === null) {
data[key] = "";
}
});
console.log(data);
setForm({ ...data, availableStock: data.stock });
});
}
});
}, [productId]);
const validate = () => {
setErrors([]);
const errs = [];
console.log(form)
if (form.sku.length < 3) {
errs.push("SKU must be at least 3 characters");
}
if (form.upc.length < 3) {
errs.push("UPC must be at least 3 characters");
}
if (form.productName.length === 0) {
errs.push("Please enter a product name");
}
if (form.brand.length === 0) {
errs.push("Please enter a brand");
}
if (form.category.length === 0) {
errs.push("Please specify a category");
}
if (Number(form.price) <= 0) {
errs.push("Price must be greater than 0");
}
if (Number(form.availableStock) <= 0) {
errs.push("Stock must be greater than 0");
}
setErrors([...errs]);
};
const onSubmit = (e) => {
e.preventDefault();
validate();
if (imageMode === "url") {
delete form.imageFile;
} else {
delete form.prodImgUrl;
}
if (errors.length === 0) {
// console.log(form);
const url =
method === "PUT"
? `http://localhost:8080/api/products/${productId}`
: "http://localhost:8080/api/products";
fetch(url, {
method,
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(form),
})
.then((res) => {
if (res.ok) {
res.json().then((data) => console.log(data));
history.push("/products");
} else {
setErrors([
"The provided SKU was found on an existing object, please try another",
]);
}
})
.catch((err) => {
setErrors([err.message]);
});
}
};
return (
<div className="container mt-3">
{errors.length ? (
<ul className="list-group">
{errors.map((error, i) => (
<li key={i} className="list-group-item list-group-item-danger">
{error}
</li>
))}
</ul>
) : null}
<form onSubmit={onSubmit}>
<div className="row mt-3">
<div className="col">
<label htmlFor="productSku" className="form-label">
SKU
</label>
<input
required
name="sku"
type="text"
className="form-control"
id="productSku"
disabled={method === "PUT" ? true : false}
value={form.sku}
onChange={(e) => setForm({ ...form, sku: e.target.value })}
/>
</div>
<div className="col">
<label htmlFor="productUpc" className="form-label">
UPC
</label>
<input
required
name="upc"
type="text"
className="form-control"
id="productUpc"
value={form.upc}
onChange={(e) => setForm({ ...form, upc: e.target.value })}
/>
</div>
</div>
<div className="row mt-3">
<div className="col-6">
<div>
<label htmlFor="productName" className="form-label">
Name
</label>
<input
required
name="productName"
type="text"
className="form-control"
id="productName"
value={form.productName}
onChange={(e) =>
setForm({ ...form, productName: e.target.value })
}
/>
</div>
<div>
<label htmlFor="brand" className="form-label">
Brand
</label>
<input
required
name="brand"
type="text"
className="form-control"
id="brand"
value={form.brand}
onChange={(e) => setForm({ ...form, brand: e.target.value })}
/>
</div>
<div>
<label htmlFor="category" className="form-label">
Category
</label>
<input
required
name="category"
type="text"
className="form-control"
id="category"
value={form.category}
onChange={(e) => setForm({ ...form, category: e.target.value })}
/>
</div>
</div>
<div className="col-6">
<label htmlFor="productDesc" className="form-label">
Description
</label>
<textarea
name="productDesciption"
id="productDesc"
cols="40"
rows="7"
className="form-control"
value={form.productDescription}
onChange={(e) =>
setForm({ ...form, productDescription: e.target.value })
}
></textarea>
</div>
</div>
<div className="row mt-3">
<div>
<label htmlFor="price" className="form-label">
Price
</label>
<input
required
name="price"
type="number"
className="form-control"
id="price"
value={form.price}
onChange={(e) => setForm({ ...form, price: e.target.value })}
/>
</div>
<div>
<label htmlFor="stock" className="form-label">
Stock
</label>
<input
required
name="availableStock"
type="number"
className="form-control"
id="stock"
value={form.availableStock}
onChange={(e) => setForm({ ...form, availableStock: e.target.value })}
/>
</div>
</div>
{imageMode === "upload" ? (
<div className="row mt-3">
<div>
<label htmlFor="productImage" className="form-label">
Image File
</label>
<input
id="productImage"
name="imageFile"
className="form-control form-control-lg"
type="file"
value={form.imageFile}
onChange={(e) =>
setForm({ ...form, imageFile: e.target.value })
}
></input>
<button
type="button"
className="btn btn-outline-primary mt-3"
onClick={() => {
setForm({ ...form, imageFile: "" });
setImageMode("url");
}}
>
Specify Image URL
</button>
</div>
</div>
) : null}
{imageMode === "url" ? (
<div className="row mt-3">
<div>
<label htmlFor="prodImgUrl" className="form-label">
Image URL
</label>
<input
name="productImageUrl"
type="text"
className="form-control"
id="prodImgUrl"
value={form.productImageUrl}
onChange={(e) =>
setForm({ ...form, productImageUrl: e.target.value })
}
/>
<button
type="button"
className="btn btn-outline-primary mt-3"
onClick={() => setImageMode("upload")}
>
Upload Image
</button>
</div>
</div>
) : null}
<div className="row mt-3">
<div className="col-12">
<button type="submit" className="btn btn-primary mt-3">
Submit
</button>
</div>
</div>
</form>
</div>
);
}
src/emptProduct.js 0 → 100644
View file @ d0873a5d
const emptyProduct = {
sku: "",
upc: "",
productName: "",
brand: "",
category: "",
price: 0.0,
availableStock: 0,
productDesciption: "",
productImageUrl: "",
};
export default emptyProduct;
src/index.js
View file @ d0873a5d
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
<React.StrictMode>
<App />
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
document.getElementById("root")
);
// If you want to start measuring performance in your app, pass a function
......
yarn.lock
View file @ d0873a5d
This diff is collapsed.
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