Skip to content

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

fix merge conflicts for promo list

parents fecdf38d 744924f5
Hide whitespace changes
Inline Side-by-side
Showing with 277 additions and 6 deletions
src/component/Main.jsx
View file @ 56bf62ee
......@@ -5,6 +5,9 @@ import ProductForm from "./ProductForm";
import ProductGrid from "./ProductGrid";
import { getAllProducts } from "../actions/apiRequests.js";
import PromotionNewFormComponent from "./promotionforms/PromotionNewFormComponent";
import PromotionIndexComponent from './promo_index/PromotionsIndexComponent';
import PromotionUpdateFormComponent from './promotionforms/UpdatePromotionForm';
export default function Main() {
const [productData, setproductData] = useState([]);
......@@ -27,13 +30,14 @@ export default function Main() {
<AuthRoute exact path="/products/edit/:productId">
<ProductForm method="PUT" />
</AuthRoute>
<AuthRoute path="/promos" component={PromotionIndexComponent}>PROMOS</AuthRoute>
<AuthRoute
exact
path="/promos/new"
component={PromotionNewFormComponent}
></AuthRoute>
<AuthRoute exact path="/products" component={ProductGrid}></AuthRoute>
<AuthRoute path="/promos">PROMOS</AuthRoute>
<AuthRoute exact path="/promos/:promotionId/update" component={PromotionUpdateFormComponent}></AuthRoute>
<AuthRoute exact path="/">
<Redirect to="/products" />
</AuthRoute>
......
src/component/promo_index/PromotionsIndexComponent.jsx 0 → 100644
View file @ 56bf62ee
import {useState, useEffect} from 'react';
import Config from '../../config';
import "./promolistStyle.css";
import { NavLink } from 'react-router-dom';
export default function PromotionIndexComponent ({}) {
const [promoData, setPromoData] = useState([]);
useEffect(async () => {
loadPromotions();
}, [])
const loadPromotions = async () => {
const response = await fetch(`${Config.promotionsUrl}`);
const data = await response.json();
setPromoData(data);
}
const deletePromotion = (promoId) => {
fetch(`${Config.promotionsUrl}/${promoId}`, {
method: "DELETE",
})
.then(res => loadPromotions())
.catch(err => console.log("error"))
}
return (
<div>
<div className="promo-container">
<div className="promo-list-container">
<div className="promo-header">
<h1 className="promo-title"> Promotions</h1>
<NavLink className="add-navLink" to='/promos/new'><button className="btn-primary">+ New Promotion</button></NavLink>
</div>
<table className="promo-index-list">
<thead className="promo-table-title">
<tr>
<th>
Promotion Id
</th>
<th>
Product SKU
</th>
<th>
Discount
</th>
<th>
Minimum Quanitity
</th>
<th>
</th>
<th>
</th>
</tr>
</thead>
<tbody>
{promoData.reverse().map((promo, key) => {
return (
<tr key={key}>
<td>
{promo.promotionId}
</td>
<td>
{promo.productSku}
</td>
<td>
{promo.discountPercentage}%
</td>
<td>
{promo.minimumQuantity}
</td>
<td>
<NavLink className="edit-navLink" to={{
pathname: `/promos/${promo.promotionId}/update`,
state: {promo}
}}>
<button className="btn-primary">Update</button>
</NavLink>
</td>
<td>
<button className="btn-danger btn-sm" onClick={() => deletePromotion(promo.promotionId)}>Delete</button>
</td>
</tr>
)
})}
</tbody>
</table>
</div>
</div>
</div>
)
}
\ No newline at end of file
src/component/promo_index/promolistStyle.css 0 → 100644
View file @ 56bf62ee
.promo-container {
margin: 30px auto;
padding: 0 16px;
}
.promo-header {
background-color: #212529;
display: flex;
justify-content: space-between;
padding-left: 10px;
padding-right: 10px;
}
.promo-title {
color: white;
padding: 8px;
}
.add-navLink {
align-self: center;
}
table {
border-collapse: collapse;
width: 100%;
}
td, th {
text-align: left;
padding: 8px;
}
tr td {
height: 40px;
}
tr {
box-sizing: border-box;
}
tr:nth-child(even) {
background-color: #dddddd;
}
thead th {
background-color: #dddddd;
height: 35px;
}
tr:hover {
background-color: lightblue;
}
\ No newline at end of file
src/component/promotionforms/PromotionNewFormComponent.jsx
View file @ 56bf62ee
......@@ -5,7 +5,7 @@ import { NavLink } from 'react-router-dom';
import Config from '../../config';
import { useHistory } from 'react-router'
export default function PromotionNewFormComponent () {
export default function PromotionNewFormComponent (props) {
const { register, handleSubmit, formState: { errors } } = useForm();
const history = useHistory();
const [serverErrors, setErrors] = useState([]);
......@@ -29,7 +29,6 @@ export default function PromotionNewFormComponent () {
<div className="promo-container">
<div className="promo-form-container">
<h1 className="promo-form-title">Add Promotion</h1>
<form className="promo-form" onSubmit={handleSubmit(onSubmit)}>
{serverErrors.length ? <p className="form-error">{serverErrors}</p> : ""}
......@@ -44,8 +43,7 @@ export default function PromotionNewFormComponent () {
className="form-control"
placeholder="eg. PROMO-403"
/>
{errors.promotionId && <p className="form-error">{errors.promotionId.message}</p>}
{errors.promotionId && <p className="form-error">{errors.promotionId.message}</p>}
</div>
<div className="form-group">
......
src/component/promotionforms/UpdatePromotionForm.jsx
View file @ 56bf62ee
import { useState } from "react";
import { useForm } from "react-hook-form";
import "./promoStyle.css";
import { NavLink } from 'react-router-dom';
import Config from '../../config';
import { useHistory } from 'react-router'
export default function PromotionUpdateFormComponent(props) {
const { register, handleSubmit, formState: { errors } } = useForm();
const history = useHistory();
const [serverErrors, setErrors] = useState([]);
const onSubmit = (data) => {
console.log(data)
fetch(`${Config.promotionsUrl}/${data.promotionId}`, {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
})
.then(res => res.ok ? history.push("/promos") : setErrors(["error"]))
.catch(err => setErrors([err.message]))
};
console.log(props.location.state.promo.promotionId)
return (
<div>
<div className="promo-container">
<div className="promo-form-container">
<h1 className="promo-form-title">Update Promotion</h1>
<form className="promo-form" onSubmit={handleSubmit(onSubmit)}>
{serverErrors.length ? <p className="form-error">{serverErrors}</p> : ""}
<div className="form-group">
<label>Promotion Id</label>
<input
{...register("promotionId", {
value: props.location.state.promo.promotionId,
required: "promotion id is required",
maxLength: { value: 10, message: "You exceeded the maximum value" },
})}
readOnly
id="promotionId"
className="form-control"
placeholder="eg. PROMO-403"
/>
{errors.promotionId && <p className="form-error">{errors.promotionId.message}</p>}
</div>
<div className="form-group">
<label>Product Sku</label>
<input
{...register("productSku", {
value: props.location.state.promo.productSku,
required: "product sku required",
maxLength: { value: 10, message: "You exceeded the maximum value" }
})}
id="productSku"
className="form-control"
/>
{errors.productSku && <p className="form-error">{errors.productSku.message}</p>}
<br></br>
</div>
<div className="form-group">
<label>Enter % off</label>
<div className="input-group">
<div className="input-group-prepend">
<span className="input-group-text">%</span></div>
<input
{...register("discountPercentage", {
valueAsNumber: true,
value: props.location.state.promo.discountPercentage,
required: "% off required",
min: { value: 0, message: "% must be greater than or equal to 0" },
max: { value: 100, message: "% must be less than or equal to 100" },
})}
id="discountPercentage"
className="form-control"
placeholder={props.location.state.promo.discountPercentage }
type="number"
/>
</div>
{errors.discountPercentage && <p className="form-error">{errors.discountPercentage.message}</p>}
</div>
<div className="form-group">
<label>Applies at Minimum Quantity</label>
<input
{...register("minimumQuantity", {
valueAsNumber: true,
value: props.location.state.promo.minimumQuantity,
required: "minimum quantity is required",
min: { value: 1, message: "discount percentage must be greater than 0" },
})}
id="minimumQuantity"
className="form-control"
type="number"
min="1"
placeholder={props.location.state.promo.minimumQuantity}
/>
{errors.minimumQuantity && <p className="form-error">{errors.minimumQuantity.message}</p>}
</div>
<input className="promo-submit" type="submit" value="Update Promotion" />
<NavLink className="promo-cancel" to="/promos">Cancel</NavLink>
</form>
</div>
</div>
</div>
);
}
src/component/promotionforms/promoStyle.css
View file @ 56bf62ee
......@@ -6,7 +6,6 @@
}
.promo-form-title {
text-align: center;
background-color: #212529;
......@@ -18,6 +17,11 @@
border: 1px solid #212529;
}
label {
font-weight: bold;
padding-bottom: 7px;
}
.promo-form {
padding: 50px;
......
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