I am trying to send a payload in react to an API and receive back a rating. However when I fill out my input fields on the first page and press next it gives me back a rating, which i am not wanting as I only want it back when both pages have been filled out. I am also receiving a rating back when the lighting cost field is filled out and also then the heating cost and I am unsure as to why.
app.js
import { BrowserRouter as Router, Route ,Link, Routes} from "react-router-dom";
import Home from"./components/Home"
import Energy from "./components/Energy"
import About from "./components/About";
import Help from "./components/Help";
import Map from "./components/Map";
import PropertyDetails from "./components/PropertyDetails";
import "@fontsource/dm-sans";
import './App.css';
import React, { useState, useContext } from "react";
import { MyContext } from "./MyContext";
function App() {
const [state,setState]=useState({'co2emissions':0,'lightingvalue':0,'heatingvalue':0,'watervalue':0,'multiglazevalue':0,'amount':0,'selects':0,'rooms':0,'heatedrooms':0,'lowlightingvalue':0,'co_ords':{'lat':0,'long':0}});
return (
<div className="App">
<Router>
<MyContext.Provider value={{state,setState}}>
<Routes>
<Route exact path="" element={<Home />} />
<Route exact path="Home" element={<Home />} />
<Route exact path="Energy" element={<Energy />} />
<Route exact path="About" element={<About />} />
<Route exact path="Help" element={<Help />} />
<Route exact path="Map" element={<Map />} />
<Route exact path="PropertyDetails" element={<PropertyDetails/>}/>
</Routes>
</MyContext.Provider>
</Router>
</div>
);
}
export default App;
Energy.js
import './Styling.css';
import Nav from './Nav.js';
import CircularSlider from '@fseehawer/react-circular-slider';
import Combo from './Combo.js';
import { Link } from "react-router-dom";
import Resultbar from './Resultbar';
import React, {useContext} from 'react';
import Tooltip from '@mui/material/Tooltip';
import { MyContext } from '../MyContext';
var property_extension_icon = require ('./PropertyExtensionIcon.png');
var floor_details_icon = require ('./FloorDetailsIcon.png');
var rooms_icon = require ('./RoomsIcon.png');
export default function Energy() {
const {state, setState}=useContext(MyContext);
return (
<body>
<div class ="heading">2. Enter Construction Details</div>
<div class= "container">
<Nav/>
<div class = "center">
<div class = "greybox">
<div class = "propertyextension" ><Tooltip title="Extension is an additional floor space added since the initaial construction"><img src ={property_extension_icon}/></Tooltip></div>
<div class = "propertyextensiontext" >Property Extension</div>
<div class = "floordetails">< img src={floor_details_icon}/></div>
<div class = "floordetailstext">Floor Details</div>
<div class = "totalfloorarea">Total floor area</div>
<div class ="floorareainput"><input type="text" placeholder='sq m' onChange={event => {setState(prev=>({...prev,"amount":parseInt(event.target.value)}))}}></input></div>
<div class = "rooms"><img src={rooms_icon}/></div>
<div class = "roomstext">Rooms</div>
<div class = "circleslide"> <CircularSlider
onChange={event => {setState(prev=>({...prev,"rooms":parseInt(event)}))}}
label = "." // Temporary
labelColor = "#343A40"
trackColor = "#B9B9B9"
progressColorTo = "#343A40"
progressColorFrom = "#0F51B4"
knobColor = "FFFFFF"
trackSize = {30}
progressSize = {30}
width = "130"
knobPosition = "top"
valueFontSize = "1.5rem"
labelFontSize = "0.7rem"
max = '20'
min = '0'
labelBottom = {true}
/></div>
<div class = "circleslide2"><CircularSlider
onChange={event => {setState(prev=>({...prev,"heatedRooms":parseInt(event)}))}}
label = "." // Temporary
labelColor = "#343A40"
trackColor = "#B9B9B9"
progressColorTo = "#343A40"
progressColorFrom = "#0F51B4"
knobColor = "FFFFFF"
trackSize = {30}
progressSize = {30}
width = "130"
knobPosition = "top"
valueFontSize = "1.5rem"
labelFontSize = "0.7rem"
max = '20'
min = '0'
labelBottom = {true}
/></div>
<div class = "numberofrooms">No. of rooms</div>
<div class = "numberofheatedrooms">No. of heated rooms</div>
<div class = "extension">Extensions</div>
<div class = "extensionbox"><Combo/></div>
<div> Floor area input: {state.amount}</div>
<div> Number of rooms: {state.rooms}</div>
<div> Heated Rooms: {state.heatedRooms}</div>
</div>
<Link to = "/PropertyDetails">
<div class = "nextbutton"><button>NEXT</button></div>
</Link>
</div>
<Resultbar />
<Resultbar/>
</div>
</body>
);
}
PropertyDetails.js
import './Styling.css';
import React, {useContext} from 'react';
import Nav from './Nav.js';
import { Link } from "react-router-dom";
import Resultbar from './Resultbar';
import { MyContext } from '../MyContext';
var costs_icon = require ('./CostsIcon.png');
var low_energy_lighting_icon = require ('./LowEnergyIcon.png');
var glazing_icon = require ('./GlazingIcon.png');
var co2_icon = require('./CO2.png');
export default function PropertyDetails() {
const {state, setState}=useContext(MyContext);
function PostRequest(co2emissions,lightingvalue,heatingvalue,watervalue,multiglazevalue,amount,selects,rooms,heatedrooms,lowlightingvalue){
const payload={"data":[[1,co2emissions,lightingvalue,heatingvalue,watervalue,multiglazevalue,amount,selects,rooms,heatedrooms,lowlightingvalue]]}
fetch('https://6nqw5c9zgg.execute-api.eu-west-2.amazonaws.com/testing', {
method: 'POST', // or 'PUT'
mode:'cors',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(payload),
})
.then((response) => response.json())
.then((data) => {
console.log('Success:', data);
})
.catch((error) => {
console.error('Error:', error);
});
}
return (
<body>
<div class ="heading">3. Enter Property Details</div>
<div class= "container">
<Nav/>
<div class = "center">
<div class = "greybox">
<div class = "costs"><img src={costs_icon}/></div>
<div class = "coststexts">Costs</div>
<div class = "lowenergylighting"><img src={low_energy_lighting_icon}/></div>
<div class = "lowenergytexts">Low Energy Lighting</div>
<div class = "glazing"><img src = {glazing_icon}/></div>
<div class = "glazingtext">Glazing</div>
<div class = "co2icon"><img src = {co2_icon}/></div>
<div class = "co2text">CO2</div>
<div class = "heatingcost"><input type ="text" placeholder='£'onChange={(event) => {setState(prev=>({...prev,'heatingvalue':parseInt(event.target.value)}))}}/></div>
<div class = "lightingcost"><input type ="text" placeholder='£' onChange={(event) => {setState(prev=>({...prev,'lightingvalue':parseInt(event.target.value)}))}}/></div>
<div class = "watercost"><input type ="text" placeholder='£' onChange={(event) => {setState(prev=>({...prev,'watervalue':parseInt(event.target.value)}))}}/></div>
<div class = "heatingcosttext">Heating</div>
<div class = "lightingcosttext">Lighting</div>
<div class = "watercosttext">Water</div>
<div class = "multiglaze"><input type ="text" placeholder='%' onChange={(event) => {setState(prev=>({...prev,'multiglazevalue':parseInt(event.target.value)}))}}/></div>
<div class = "multiglazetext">Multiglaze</div>
<div class = "percentage"><input type ="text" placeholder='%' onChange={(event) => {setState(prev=>({...prev,'lowlightingvalue':parseInt(event.target.value)}))}}/></div>
<div class = "co2"><input type = "text" placeholder= 'tonnes'onChange={(event) => {setState(prev=>({...prev,'co2emissions':parseInt(event.target.value)}))}}/></div>
<div>heating is:{state.heatingvalue}</div>
<div> lighting is: {state.lightingvalue}</div>
<div> water is: {state.watervalue}</div>
<div> multiglaze is: {state.multiglazevalue}</div>
<div> low energy lighting is: {state.lowlightingvalue}</div>
<div> CO2 is: {state.co2emissions}</div>
<Resultbar />
</div>
<Link to = "/Energy">
<div class = "backbutton"><button>BACK</button></div>
</Link>
<div className='Result'><button onClick={PostRequest(state.co2emissions,state.lightingvalue,state.heatingvalue,state.watervalue,state.multiglazevalue,state.amount,state.selects,state.rooms,state.heatedrooms,state.lowlightingvalue)}>GET RESULT</button></div>
</div>
</div>
</body>
);
}
