import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
const ShoppingListItem = props => {
const label = props.label;
const price = props.price.toFixed(2);
const quantity = props.quantity;
const labelStyles = {
fontWeight: "bolder"
};
return (
<div className="line-item">
<span
style={{
paddingRight: "5px"
}}
>
{quantity}
</span>
<span style={labelStyles}>{label}</span>=
<span>${(quantity * price).toFixed(2)}</span>
</div>
);
};
const ShoppingList = props => {
const shoppinglist = props.shoppinglist;
console.log(shoppinglist)
let total = 0;
const ShoppingListItems = [];
for (let item of shoppinglist) {
console.log(item);
total += item.price * item.quantity;
ShoppingListItems.push(
<ShoppingListItem
key={item.label}
label={item.label}
price={item.price}
quantity={item.quantity}
/>
);
}
return (
<div>
{ShoppingListItems}
TOTAL: ${total}
</div>
);
};
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
label: "",
price: 0,
quantity: 0,
currentTotal: null,
shoppingList: [],
};
}
addToList() {
const shoppingList = this.state.shoppingList;
shoppingList.push({
"label": this.state.label,
"price": parseFloat(this.state.price, 10),
"quantity": parseInt(this.state.quantity, 10),
})
// make DB call to POST / PUT here
this.setState({
label: "",
price: 0,
quantity: 0,
currentTotal: null,
shoppingList: shoppingList,
})
}
updateState(e, name) {
const oldState = this.state;
oldState[name] = e.target.value;
if (oldState.price && oldState.quantity) {
oldState.currentTotal = oldState.price * oldState.quantity
}
else {
oldState.currentTotal = null;
}
this.setState(oldState)
}
render() {
const inputStyle = {
padding: '10px',
fontSize: '14px',
margin: '5px',
display: 'block',
width: '100%'
}
const buttonStyle = {
width: '100%',
border: 'none',
fontSize: '14px',
fontWeight: 'bolder',
backgroundColor: 'black',
color: 'white',
margin: '5px',
padding: '10px',
}
const currentTotal = this.state.currentTotal ? ("$" + this.state.currentTotal): null
console.log(this.state.shoppingList)
return (
<div className="App">
<input style={inputStyle} onChange={(e) => this.updateState(e, "label")} type="text" placeholder="Shopping Item Label" />
<input style={inputStyle} onChange={(e) => this.updateState(e, "price")} type="number" step="0.01" placeholder="Shopping Item Price" />
<input style={inputStyle} onChange={(e) => this.updateState(e, "quantity")} type="number" placeholder="Shopping Item Quantity" />
<span>{currentTotal}</span>
<button onClick={() => this.addToList()} style={buttonStyle}>Add!</button>
<ShoppingList shoppinglist={this.state.shoppingList} />
</div>
);
}
}
// const shoppinglistArr = [
// {
// label: "Eggs",
// price: 1.99,
// quantity: 1
// },
// {
// label: "Coffee",
// price: 8.99,
// quantity: 5,
// },
// {
// label: "chicken",
// price: 5.99,
// quantity: 10,
// }
// ];
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);