Fetch data between two dates in React from Django API - reactjs

Question

I am trying to filter data between two dates and display it in a table. Currently, my table shows all the data from the database but I want the user to be able to select from that date to this date, and data between the specified dates to be displayed in the table.
My code:
import React from "react";
import APIHandler from "../utils/APIHandler";
import _ from "lodash";
import moment from "moment";
import DatePicker from "react-datepicker";
import { initiateGetTransactions } from "../components/Transactions";
import ReactHTMLTableToExcel from "react-html-table-to-excel";
class FarmerStatementComponent extends React.Component {
constructor(props) {
super(props);
console.log(props.match.params.id);
}
state = {
errorRes: false,
errorMessage: "",
btnMessage: 0,
sendData: false,
orders: [],
startDate: new Date(),
endDate: new Date(),
dataLoaded: false,
formSubmitted: false,
name: "",
id: "",
};
componentDidMount() {
this.fetchFarmerData().then(response => {
console.log(response.data);
this.setState({
orders: response.data
});
});
}
handleStartDateChange = (date) => {
this.setState({
startDate: date
});
}
handleEndDateChange = (date) => {
this.setState({
endDate: date
});
}
handleSubmit = (event) => {
debugger;
event.preventDefault();
const data = { startDate:this.state.startDate, endDate:this.state.endDate};
}
async fetchFarmerData() {
var apihandler = new APIHandler();
var farmerdata = await apihandler.fetchFarmerDetails(this.props.match.params.id);
console.log(farmerdata);
this.setState({ orders: farmerdata.data.data.orders });
this.setState({ name: farmerdata.data.data.name });
this.setState({ phone: farmerdata.data.data.phone });
this.setState({ dataLoaded: true });
}
print() {
window.print();
}
render() {
return (
<section className="content">
<div className="container-fluid">
<div className="block-header">
<h2>FARMER STATEMENT</h2>
</div>
<div className="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div className="card">
<div className="header">
<h2>
{this.state.name}'S STATEMENT
</h2>
<div className="header-dropdown m-r--5">
<h2>
{this.state.id}
</h2>
</div>
</div>
<div className="body">
<div className="table-responsive">
<div id="DataTables_Table_1_wrapper" className="dataTables_wrapper form-inline dt-bootstrap">
<div className="dt-buttons">
<a className="dt-button buttons-csv buttons-html5" tabIndex="0" aria-controls="DataTables_Table_1" href="#">
<span>
<ReactHTMLTableToExcel
className="btn btn-success"
tabIndex="0"
aria-controls="DataTables_Table_1"
table="DataTables_Table_1"
filename="FarmerStatement"
sheet="Sheet"
buttonText="Excel"
/>
</span>
</a>
<a className="dt-button buttons-print" tabIndex="0" aria-controls="DataTables_Table_1" href="#" onClick={this.print}>
<span onClick={() => this.print()}>Print</span>
</a>
<br/>
<form onSubmit={this.handleSubmit}>
<button type="submit" className="btn btn-info" >
Generate Report
</button>
</form>
</div>
<div id="DataTables_Table_1_filter" className="dataTables_filter">
<form onSubmit={this.handleSubmit}>
<label>
<i className="material-icons">date_range</i>Start Date:
<DatePicker
selected={this.state.startDate}
className="form-control datepicker"
name="Start Date: 30/07/2022"
aria-controls="DataTables_Table_1"
value={this.state.startDate}
onChange={this.handleStartDateChange}
/>
</label>
<br/>
<label>
<i className="material-icons">date_range</i>End Date:
<DatePicker
selected={this.state.endDate}
className="form-control datepicker"
name="End Date: 30/07/2022"
aria-controls="DataTables_Table_1"
value={this.state.endDate}
onChange={this.handleEndDateChange}
/>
</label>
</form>
</div>
{this.state.dataLoaded === false ? (
<div className="text-center">
<div className="preloader pl-size-xl">
<div className="spinner-layer">
<div className="circle-clipper left">
<div className="circle"></div>
</div>
<div className="circle-clipper right">
<div className="circle"></div>
</div>
</div>
</div>
</div>
) : ""}
<table className="table table-bordered table-striped table-hover dataTable js-exportable" id="DataTables_Table_1" role="grid" aria-describedby="DataTables_Table_1_info">
<thead>
<tr role="row">
<th className="sorting_asc" tabIndex="0" aria-controls="DataTables_Table_1" rowSpan="1" colSpan="1" aria-sort="ascending" aria-label="Name: activate to sort column descending" style={{width: "40px"}}>
#ORDER NO
</th>
<th className="sorting" tabIndex="0" aria-controls="DataTables_Table_1" rowSpan="1" colSpan="1" aria-label="Position: activate to sort column ascending" style={{width: "150px"}}>
CUSTOMER NAME
</th>
<th className="sorting" tabIndex="0" aria-controls="DataTables_Table_1" rowSpan="1" colSpan="1" aria-label="Office: activate to sort column ascending" style={{width: "101px"}}>
KILOS
</th>
<th className="sorting" tabIndex="0" aria-controls="DataTables_Table_1" rowSpan="1" colSpan="1" aria-label="Age: activate to sort column ascending" style={{width: "100px"}}>
PRICE PER KG
</th>
<th className="sorting" tabIndex="0" aria-controls="DataTables_Table_1" rowSpan="1" colSpan="1" aria-label="Start date: activate to sort column ascending" style={{width: "115px"}}>
ORDERED ON
</th>
</tr>
</thead>
<tbody>
{this.state.orders.map((farmer) => (
<tr role="row" className="odd" key={farmer.id}>
<td className="sorting_1">{farmer.id}</td>
<td className="sorting_1">{farmer.customer.name}</td>
<td className="sorting_1">{farmer.kgs}</td>
<td className="sorting_1">{farmer.price}</td>
<td className="sorting_1">{new Date(farmer.added_on).toLocaleString()}</td>
</tr>
))}
</tbody>
</table>
<div className="dataTables_info" id="DataTables_Table_1_info" role="status" aria-live="polite">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
);
}
}
export default FarmerStatementComponent;

Answer 1

You can add filter in query or you can do filter to incoming data from database before passing to table