this is my first StackOverflow question:
So I have a form called datepicker, and the idea is that a user can put in a date in YYYY-MM-DD format.
Upon the submission of the entry in the field (onSubmit handler), the user is to be redirected to a /guage/:date route, that displays a guage chart component (rendered via google charts).
This guage chart is based on data pre-fetched from an API endpoint, but the {date} parameter for the API endpoint needs to be dynamic.
Meaning, when a user inputs 2022-06-09 to the date field in calendarPicker.js, there should be a redirect on submit, to the web page /guage/2022-06-09.
The problem I am having, is that the form renders, I enter a YYY-MM-DD date, the state is saved, but the handleSubmit is never triggered, and no re-direct to 'guage/:date' takes place.
Here is CalendarPicker.JS:
import React from 'react';
import { Link, Navigate } from 'react-router-dom';
export default class CalendarPicker extends React.Component {
constructor(props) {
super(props);
this.state = {
input:''
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({[event.target.name]: event.target.value});
}
handleSubmit(event) {
return(
<Navigate
to={{
pathname: '/guage/:input',
state: {input: this.state.input}
}}
/>)
}
render() {
return (
<div>
<form>
<label>date
<input type="text" name="input" value={this.state.input} onChange={this.handleChange} placeholder="input" required="true" />
<button variant="primary" type="submit" onClick={this.handleSubmit}>
Submit
</button>
</label>
</form>
</div>
);
}
}
Here is DelayGuage.JS (this is where i draw the guage chart):
//guage/2022-06-09
//const data = await Promise.resolve(resolution);
//parse URL using use params from react router
//in order to have application that scales, you need to reduce coupling between components, de-bounding components to URLs
//in order to have less coupled component and be able to render multiple components at once, using an abstraction layer,
//known as react router, using the useparams hook, you extract the parameters without knowledge of the URL structure
import React from "react";
import { Chart } from "react-google-charts";
import axios from "axios";
import { QueryClient, QueryClientProvider, useQuery } from 'react-query';
import { Link, useLocation, useParams } from "react-router-dom";
async function fetchPosts() {
const {data} = await axios.get(
"http://102.12.11.102:5000/reports/{date}/agencies"
);
const parsedData = data.agencies[0].kpis.map((r) => [
"Delay Index",
r.kpi_value * 100
]);
return [["Label", "Value"], ...parsedData];
}
export const options = {
width: 480,
height: 480,
redFrom: 90,
redTo: 100,
yellowFrom: 75,
yellowTo: 90,
minorTicks: 5
};
export function DelayGuage() {
const { data, status } = useQuery("data", fetchPosts);
return (
status === "success" && (
<Chart
chartType="Gauge"
width="100%"
height="400px"
data={data}
options={options}
/>
)
);
}
export default DelayGuage