I'm creating an App in react and I have an array parsed from a JSON file which gives me a maximum number of peripherals for each "bundle" of products. What I essentially need to happen is for the max value of the inputs to update once the maximum number of inputs has been reached so that a user cannot add any more products to the package. Would anyone know a way to do this in React/Javascript.
My Code is as follows
import React, { Component } from "react";
import "./App.css";
import productdata from "./catalog.json";
import productSort from "./OrderDetails";
class App extends Component {
constructor(props) {
super(props);
this.state = {
BundleVal: "",
ProductCounter: [],
PeripheralCounter: 0,
InstallationCounter: [],
forenameVal: "",
surnnameVal: "",
addressoneVal: "",
addresstwoVal: "",
cityVal: "",
countyVal: "",
postcodeVal: "",
phoneVal: "",
emailVal: "",
dobVal: ""
};
}
forenameUpdate = (val) => {
this.setState({
forenameVal: val
})
};
surnameUpdate = (val) => {
this.setState({
surnameVal: val
})
};
addressoneUpdate = (val) => {
this.setState({
addressoneVal: val
})
};
addresstwoUpdate = (val) => {
this.setState({
addresstwoVal: val
})
};
cityUpdate = (val) => {
this.setState({
cityVal: val
})
};
countyUpdate = (val) => {
this.setState({
countyVal: val
})
};
postcodeUpdate = (val) => {
this.setState({
postcodeVal: val
})
};
phoneUpdate = (val) => {
this.setState({
phoneVal: val
})
};
emailUpdate = (val) => {
this.setState({
emailVal: val
})
};
dobUpdate = (val) => {
this.setState({
dobVal: val
})
};
installationUpdate = (val) => {
this.setState({
installVal: val
})
};
updateBundle = val => {
this.setState({
BundleVal: val
});
};
updateQuantity = e => {
var pCounter = this.state.ProductCounter;
var el = parseInt(e.target.id.split("_")[1], 10);
pCounter[el] = parseInt(e.target.value, 10);
this.setState({ ProductCounter: pCounter });
};
render() {
let bname = null;
let maxperipherals = null;
if (this.state.BundleVal === "1") {
bname = productdata.data.bundles[0].name;
maxperipherals = productdata.data.bundles[0].maximumPeripherals;
} else if (this.state.BundleVal === "2") {
bname = productdata.data.bundles[1].name;
maxperipherals = productdata.data.bundles[1].maximumPeripherals;
} else if (this.state.BundleVal === "3") {
bname = productdata.data.bundles[2].name;
maxperipherals = productdata.data.bundles[2].maximumPeripherals;
} else if (this.state.BundleVal === "4") {
bname = productdata.data.bundles[3].name;
maxperipherals = productdata.data.bundles[3].maximumPeripherals;
} else {
bname = null;
maxperipherals = "N/A";
}
const BundleProducts = [].concat(productSort).map((item, i) =>
<div key={item.id}>
{item.id} <br />
{item.name} <br />
{item.description} <br />
Installation: £{item.price.installation} <br />
Monthly: £{item.price.recurring} <br />
<input
type="number"
onChange={this.updateQuantity}
value={this.state.ProductCounter[item.id] || 0}
id={"product_" + item.id}
/>
<br />
{this.state.ProductCounter[item.id] || 0}<br />
<hr />
</div>
);
if (this.state.PeripheralCounter >= maxperipherals) {
alert ("You Cannot Add any more Peripherals");
this.state.ProductCounter;
}
var installationTotal = 0; // Variable to hold your total
for(var t = 0, instalen = BundleProducts.length; t < instalen; t++) {
installationTotal += BundleProducts[t].props.children[19] * BundleProducts[t].props.children[10];
}
var installTotal = parseFloat(installationTotal, 10).toFixed(2)
var recurringTotal = 0; // Variable to hold your total
for(var r = 0, recurlen = BundleProducts.length; r < recurlen; r++) {
recurringTotal += BundleProducts[r].props.children[19] * BundleProducts[r].props.children[14];
}
var monthlyTotal = parseFloat(recurringTotal, 10).toFixed(2)
this.state.PeripheralCounter = this.state.ProductCounter
.filter(function(qty, pid) {
pid = String(pid);
for (var i = 0; i < productSort.length; i++) {
var p = productSort[i];
if (p.isPeripheral === true && p.id === pid) {
return true;
}
}
return false;
})
.reduce(function(count, carry) {
return count + carry;
}, 0);
return (
<div>
<h2>Order</h2>
Chosen Bundle: {bname}
<br />
Number of Peripherals: {this.state.PeripheralCounter}
<br />
Maximum Number of Peripherals: {maxperipherals}
<br />
Peripherals Installation Cost Total: £{installTotal}
<br />
Peripherals Monthly Cost Total: £{monthlyTotal}
<br />
Customer Name: {this.state.forenameVal} {this.state.surnameVal}
<br />
Customer Address:
{this.state.addressoneVal}
{this.state.addresstwoVal}
{this.state.cityVal}
{this.state.countyVal}
{this.state.postcodeVal}
<br />
Customer Phone: {this.state.phoneVal}
<br />
Customer Email: {this.state.emailVal}
<br />
Customer Date of Birth: {this.state.dobVal}
<Bundle updateBundle={this.updateBundle} />
<h3>Products</h3>
{BundleProducts}
<br/>
<Customer
forenameUpdate={this.forenameUpdate}
surnameUpdate={this.surnameUpdate}
addressoneUpdate={this.addressoneUpdate}
addresstwoUpdate={this.addresstwoUpdate}
cityUpdate={this.cityUpdate}
countyUpdate={this.countyUpdate}
postcodeUpdate={this.postcodeUpdate}
phoneUpdate={this.phoneUpdate}
emailUpdate={this.emailUpdate}
dobUpdate={this.dobUpdate}
/>
</div>
);
}
}
class Bundle extends React.Component {
constructor(props) {
super(props);
this.state = {
BundleVal: ""
};
}
updatebundle = e => {
this.props.updateBundle(e.target.value);
this.setState({ BundleVal: e.target.value });
};
render() {
return (
<div>
<h4>Bundle</h4>
<input
type="radio"
value="1"
onChange={this.updatebundle}
checked={this.state.BundleVal === "1"}
/>
Indoor Camera RAPID
<input
type="radio"
value="2"
onChange={this.updatebundle}
checked={this.state.BundleVal === "2"}
/>
Alarm Only RAPID
<input
type="radio"
value="3"
onChange={this.updatebundle}
checked={this.state.BundleVal === "3"}
/>
Outdoor Camera RAPID
<input
type="radio"
value="4"
onChange={this.updatebundle}
checked={this.state.BundleVal === "4"}
/>
Build Your Own Bundle
</div>
);
}
}
class Customer extends React.Component {
constructor(props) {
super(props);
this.state = {
forenameVal: "",
surnnameVal: "",
addressoneVal: "",
addresstwoVal: "",
cityVal: "",
countyVal: "",
postcodeVal: "",
phoneVal: "",
emailVal: "",
dobVal: ""
}
}
updateForename = (e) => {
this.props.forenameUpdate(e.target.value);
this.setState({forenameVal: e.target.value});
};
updateSurname = (e) => {
this.props.surnameUpdate(e.target.value);
this.setState({surnameVal: e.target.value});
};
updateAddressone = (e) => {
this.props.addressoneUpdate(e.target.value);
this.setState({addressoneVal: e.target.value});
};
updateAddresstwo = (e) => {
this.props.addresstwoUpdate(e.target.value);
this.setState({addresstwoVal: e.target.value});
};
updateCity = (e) => {
this.props.cityUpdate(e.target.value);
this.setState({cityVal: e.target.value});
};
updateCounty = (e) => {
this.props.countyUpdate(e.target.value);
this.setState({countyVal: e.target.value});
};
updatePostcode = (e) => {
this.props.postcodeUpdate(e.target.value);
this.setState({postcodeVal: e.target.value});
};
updatePhone = (e) => {
this.props.phoneUpdate(e.target.value);
this.setState({phoneVal: e.target.value});
};
updateEmail = (e) => {
this.props.emailUpdate(e.target.value);
this.setState({emailVal: e.target.value});
};
updateDob = (e) => {
this.props.dobUpdate(e.target.value);
this.setState({dobVal: e.target.value});
};
render() {
return (
<div>
<h4>Customer</h4>
First Name: <input
type="text"
placeholder="type here"
onChange={this.updateForename}
value={this.state.forenameVal}
/>
<br />
Last Name: <input
type="text"
placeholder="type here"
onChange={this.updateSurname}
value={this.state.surnameVal}
/>
<br />
Address Line One: <input
type="text"
placeholder="type here"
onChange={this.updateAddressone}
value={this.state.addressoneVal}
/>
<br />
Address Line Two: <input
type="text"
placeholder="type here"
onChange={this.updateAddresstwo}
value={this.state.addresstwoVal}
/>
<br />
Town/City: <input
type="text"
placeholder="type here"
onChange={this.updateCity}
value={this.state.cityVal}
/>
<br />
County: <input
type="text"
placeholder="type here"
onChange={this.updateCounty}
value={this.state.countyVal}
/>
<br />
Postcode: <input
type="text"
placeholder="type here"
onChange={this.updatePostcode}
value={this.state.cpostcodeVal}
/>
<br />
Phone: <input
type="text"
placeholder="type here"
onChange={this.updatePhone}
value={this.state.phoneVal}
/>
<br />
Email: <input
type="text"
placeholder="type here"
onChange={this.updateEmail}
value={this.state.emailVal}
/>
<br />
Date of Birth: <input
type="date"
placeholder="type here"
onChange={this.updateDob}
value={this.state.dobVal}
/>
</div>
)
}
}
export default App;
And an example of the JSON file I am parsing is as follows
{
"timestamp": 1502121471,
"data": {
"adverts": [],
"bundles": [{
"id": "1",
"name": "Bundle 1",
"description": "Bundle 1 Description",
"maximumPeripherals": 32,
"available": true,
"count": 0,
"price": {
"installation": "99.99",
"recurring": "23.99"
},
"image": {
"file": "bundle-one.png",
},
"products": ["1", "2", "3"]
}, {
"id": "2",
"name": "Bundle 2",
"description": "Bundle 2 Description",
"maximumPeripherals": 32,
"available": true,
"count": 0,
"price": {
"installation": "99.99",
"recurring": "23.99"
},
"image": {
"file": "bundle-two.png",
},
"products": ["1", "2", "2", "2", "2"]
}],
"products": [{
"id": "1",
"name": "Product 1",
"description": "Product 1 Description",
"maximumQuantity": 1,
"isPeripheral": false,
"isAvailable": true,
"price": {
"upfront": null,
"installation": "0.00",
"recurring": "0.00"
},
"image": {
"file": "product-one.png",
}
}, {
"id": "2",
"name": "Product 2",
"description": "Product 2 Description",
"maximumQuantity": null,
"isPeripheral": true,
"isAvailable": true,
"count": 0,
"price": {
"upfront": "60.00",
"installation": "9.60",
"recurring": "1.25"
},
"image": {
"file": "product-two.png",
}
}, {
"id": "3",
"name": "Product Three",
"description": "Product Three Description",
"maximumQuantity": null,
"isPeripheral": true,
"isAvailable": true,
"count": 0,
"price": {
"upfront": "132.00",
"installation": "9.60",
"recurring": "2.75"
},
"image": {
"file": "product-three.png",
}
}]
}
}
Any advice would be greatly appreciated
Aucun commentaire:
Enregistrer un commentaire