Skip to content

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

Revert "fix merge conflicts for promo list" 

This reverts merge request !8
parent 56bf62ee
Hide whitespace changes
Inline Side-by-side
Showing with 6 additions and 277 deletions
src/component/Main.jsx
View file @ 8caf1066
......@@ -5,9 +5,6 @@ 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([]);
......@@ -30,14 +27,13 @@ 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 exact path="/promos/:promotionId/update" component={PromotionUpdateFormComponent}></AuthRoute>
<AuthRoute path="/promos">PROMOS</AuthRoute>
<AuthRoute exact path="/">
<Redirect to="/products" />
</AuthRoute>
......
src/component/promo_index/PromotionsIndexComponent.jsx deleted 100644 → 0
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 deleted 100644 → 0
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 @ 8caf1066
......@@ -5,7 +5,7 @@ import { NavLink } from 'react-router-dom';
import Config from '../../config';
import { useHistory } from 'react-router'
export default function PromotionNewFormComponent (props) {
export default function PromotionNewFormComponent () {
const { register, handleSubmit, formState: { errors } } = useForm();
const history = useHistory();
const [serverErrors, setErrors] = useState([]);
......@@ -29,6 +29,7 @@ export default function PromotionNewFormComponent (props) {
<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> : ""}
......@@ -43,7 +44,8 @@ export default function PromotionNewFormComponent (props) {
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 @ 8caf1066
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 @ 8caf1066
......@@ -6,6 +6,7 @@
}
.promo-form-title {
text-align: center;
background-color: #212529;
......@@ -17,11 +18,6 @@
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