Currently, I am working on an application that allows users to select a frequency unit (like seconds, minutes, hours, or days) and input the corresponding value. The challenge arises when I need to convert this value into seconds before sending it to the server. While sending the value in seconds works perfectly fine, I encounter issues while converting it back to minutes, hours, or days. For instance, if I try to send a value of 10 minutes, the server ends up receiving "10" instead of the correct value of "600" (10 minutes * 60 seconds). Can anyone provide insights or suggestions on what might be causing this discrepancy in my code?
import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { addSensor } from '../actions/sensors';
class AddSensorPage extends Component {
state = {
name: '',
category: '',
frequencyUnit: '',
frequency: '',
minValue: '',
maxValue: ''
}
static propTypes = {
addSensor: PropTypes.func.isRequired
}
handleChange = e => {
this.setState({
[e.target.name]: e.target.value,
})
}
handleCategorySelect = e => {
this.setState({ category: e.target.value })
}
handleFrequencyUnitSelect = e => {
this.setState({ frequencyUnit: e.target.value })
}
handleSubmit = e => {
e.preventDefault();
const { name, category, frequency, frequencyUnit } = this.state;
// Validation
if (frequencyUnit === 'seconds') {
this.setState({
minValue: '30',
maxValue: '21474836',
})
}
if (frequencyUnit === 'minutes') {
this.setState({
minValue: '1',
maxValue: '357913',
frequency: this.state.frequency * 60
})
}
if (this.state.frequencyUnit === 'hours') {
this.setState({
minValue: '1',
maxValue: '5965',
frequency: frequency * 3600
})
}
if (this.state.frequencyUnit === 'days') {
this.setState({
minValue: '1',
maxValue: '248',
frequency: frequency * 86400
})
}
const sensor = { name, category, frequency };
this.props.addSensor(sensor);
this.setState({
name: '',
category: '',
frequencyUnit: '',
frequency: ''
})
}
render() {
return (
<div className="col-md-6 m-auto">
<div className="card card-body mt-5">
<h2 className="text-center">Add sensor</h2>
<form onSubmit={this.handleSubmit}>
<div className="form-group">
<label>Name</label>
<input
type="text"
className="form-control"
name="name"
onChange={this.handleChange}
value={this.state.name}
/>
</div>
<div className="form-group">
<label>Category</label>
<select className="form-control" onChange={this.handleCategorySelect} value={this.state.category}>
<option></option>
<option value="temperature">Temperature sensor</option>
<option value="humidity">Humidity sensor</option>
</select>
</div>
<div className="form-group">
<label>Frequency</label>
<select className="form-control" onChange={this.handleFrequencyUnitSelect} value={this.state.frequencyUnit}>
<option></option>
<option value="seconds">Seconds</option>
<option value="minutes">Minutes</option>
<option value="hours">Hours</option>
<option value="days">Days</option>
</select>
</div>
<div className="form-group">
<input
type="number"
className="form-control"
name="frequency"
onChange={this.handleChange}
value={this.state.frequency}
placeholder="Value..."
min={this.state.minValue}
max={this.state.maxValue}
/>
</div>
<div className="form-group">
<button className="btn btn-primary">Dodaj</button>
</div>
</form>
</div>
</div>
);
}
}
export default connect(null, { addSensor })(AddSensorPage);