Axios Get request sometimes doesn't go through - reactjs

Question

recently i have been working on my react project. my code is working fine most of the time.
import React, { useState, useEffect } from "react";
import Axios from "axios";
import { Navigate, Link } from "react-router-dom";
import API from "../backend";
import { isAutheticated } from "../auth";
import ReactPaginate from "react-paginate";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import Spinner from "react-bootstrap/Spinner";
const Body = () => {
// set values (got from api)
const [values, setValues] = useState({
bookingId: "",
email: "",
status: "",
error: "",
success: "",
});
// set api response as array, so that i can loop through using map
const [data, setData] = useState([]);
// if some click submit
const [didsubmit, setDidSumbit] = useState(false);
// set and get default booking status
const [myValue, setMyValue] = useState("");
// if something changes
const [didChange, setDidChange] = useState(false);
// for pagination
const [pageChange, setPageChange] = useState(false);
// total pages in pagination
const [allTotalPages, setAllTotalPages] = useState("");
// default page number (used in api get response)
const [num, setNum] = useState(1);
// used for searching
const [details, setDetails] = useState({
email: false,
});
// search state
const [search, setSearch] = useState(false);
// if site is loading
const [loading, setLoading] = useState(true);
// destructuring token from localstorage
const { token } = isAutheticated();
// dataObject for api call
const tokenKey = {
headers: {
authorization: `Bearer ${token}`,
},
};
// api call
const axiosGetCall = async () => {
try {
let res;
if (search === true) {
res = await Axios.get(
`${API}/allorders?page=${num}&useremail=${details.email}`,
tokenKey
);
setSearch(false);
} else {
res = await Axios.get(`${API}/allorders?page=${num}`, tokenKey);
}
setValues({ ...values, success: "", error: "" });
const data = await res.data.bookings;
const totalItems = await res.data.Total;
setData(data);
const totalPages = Math.ceil(totalItems / 5);
setAllTotalPages(totalPages);
setPageChange(false);
setLoading(false);
} catch (error) {
setSearch(false);
setLoading(false);
setValues({ ...values, success: "", error: "" });
}
};
//GET API NORMAL FOR FIRST LOAD
useEffect(() => {
axiosGetCall();
// eslint-disable-next-line
}, []);
//GET API IF DID CHANGE
useEffect(() => {
if (didChange === true) {
// if there is something in details do this
if (details.email === false) {
axiosGetCall();
} else {
setSearch(true);
axiosGetCall();
}
}
// eslint-disable-next-line
}, [didChange]);
//GET API IF DID Search
useEffect(() => {
if (search === true) {
axiosGetCall();
}
// eslint-disable-next-line
}, [search]);
//GET API WHEN PAGE CHANGES
useEffect(() => {
if (pageChange === true) {
setValues({ ...values, success: "", error: "" });
// if there is something in details do this
if (details.email === false) {
axiosGetCall();
} else {
setSearch(true);
axiosGetCall();
}
}
// eslint-disable-next-line
}, [pageChange]);
const onSubmit = (event, id, mail, val) => {
event.preventDefault();
setValues({
...values,
bookingId: id,
email: mail,
status: val,
success: "",
error: "",
});
setMyValue(val);
setDidSumbit(true);
};
const newStatus = {
status: myValue,
id: values.bookingId,
};
// POST API
useEffect(() => {
const axiosUpdateCall = async () => {
try {
const res = await Axios.post(`${API}/changeorder`, newStatus, tokenKey);
setDidSumbit(false);
setDidChange(false);
setValues({ ...values, success: "Changed Successfully", error: "" });
} catch (error) {
setValues({
...values,
error: error.response.data.error[0],
success: "",
});
setDidChange(false);
}
};
if (didChange) {
axiosUpdateCall();
}
}, [didChange]);
// Error Toast
const errorToast = () => {
toast.error(`${values.error}`, {
position: "top-right",
autoClose: 8000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "dark",
});
};
// Sucess Toast
const successToast = () => {
toast.success(`${values.success}`, {
position: "top-right",
autoClose: true,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "dark",
});
};
// pagination stuff
const handlePageClick = async (data) => {
let currentPagex = data.selected + 1;
setNum(currentPagex);
setPageChange(true);
setLoading(true);
setValues({ ...values, success: "", error: "" });
};
// search stuff
const onSearch = (event) => {
event.preventDefault();
setSearch(true);
setLoading(true);
setValues({ ...values, success: "", error: "" });
};
// handling changes on pages
const onHandleChange = (val) => (event) => {
setDetails({ ...details, [val]: event.target.value });
setValues({ ...values, success: "", error: "" });
};
return (
<>
<ToastContainer
position="top-right"
autoClose={5000}
hideProgressBar={false}
newestOnTop={false}
closeOnClick={false}
rtl={false}
pauseOnFocusLoss
draggable
pauseOnHover
theme="dark"
/>
{values.error && errorToast()}
{values.success && successToast()}
<div style={{ display: didsubmit ? "none" : "block" }}>
<section className="section dashboard">
<div className="row justify-content-md-center">
<div className="col-lg-6">
<div className="input-group">
<input
type="search"
className="form-control rounded"
placeholder="example#gmail.com"
aria-label="Search"
aria-describedby="search-addon"
onChange={onHandleChange("email")}
/>
<button
type="button"
className="btn btn-outline-primary"
onClick={onSearch}
disabled={search}
>
{search === true ? "Loading.." : "Search"}
</button>
<a href="/main" className="btn btn-outline-primary">
Reload
</a>
</div>
</div>
</div>
</section>
</div>
<main id="main" className="main">
<section className="section dashboard ">
<div className="row justify-content-md-center">
<div className={didsubmit ? "col-lg-6" : "col-lg-12"}>
<div className="row">
{/* */}
<div className="col-12">
<div className="card recent-sales overflow-auto">
<div className="card-body">
<h3 className="card-title">
{didsubmit === true
? "Change Booking Status"
: "Recent Bookings "}
<span></span>
</h3>
{loading === true ? (
<>
{" "}
<Spinner animation="border" role="status">
<span className="visually-hidden">Loading...</span>
</Spinner>
</>
) : (
<>
<table className="table table-borderless datatable">
{didsubmit === true ? (
<></>
) : (
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">User Email</th>
<th scope="col">Customer Phone</th>
<th scope="col">Payment Recept</th>
<th scope="col">Order id</th>
<th scope="col">Package Name</th>
<th scope="col">Total Kids</th>
<th scope="col">Total Adults</th>
<th scope="col">Total Price</th>
<th scope="col">BookedFor</th>
<th scope="col">created On</th>
<th scope="col">Status</th>
</tr>
</thead>
)}
{/* */}
<tbody>
{didsubmit === true ? (
<>
<tr>
<td>
{" "}
<p>Email: {values.email}</p>
<p>Current Status: {values.status}</p>
<div className="col-3">
<select
onChange={(e) =>
setMyValue(e.target.value)
}
defaultValue={values.status}
>
<option>Pending</option>
<option>Unpaid</option>
<option>Bank</option>
<option>Bank-Paid</option>
<option>Success</option>
</select>
</div>
<div className="float-end">
<button
className="btnx btn-primary"
disabled={didChange}
onClick={() => {
setDidSumbit(false);
}}
>
Back
</button>
<button
className="btnx btn-primary"
disabled={didChange}
onClick={() => {
setDidChange(true);
}}
>
{didChange
? "Loading.."
: "Change Status"}
</button>
</div>
</td>
</tr>
</>
) : (
<>
{data.map((e, i) => (
<tr key={e._id}>
<td scope="row">
{e.tourDetails[0].username}
</td>
<td scope="row">
<p>{e.tourDetails[0].email}</p>
</td>
<td scope="row">
<p>{e.tourDetails[0].userphone}</p>
</td>
<td scope="row">
<p>{e.paymentid}</p>
</td>
<td scope="row">
<p>{e.orderId}</p>
</td>
<td>{e.tourDetails[0].name}</td>
<td>{e.Childquantity}</td>
<td>{e.Adultquantity}</td>
<td>₹{e.overAllTotal}</td>
<td>
<span className="text-primary">
{e.bookedFor}
</span>
</td>
<td>{e.createdAt.slice(0, 10)}</td>
<td>
{e.orderStatus === "Success" && (
<span className="badge bg-success">
{e.orderStatus}
</span>
)}
{e.orderStatus === "Bank" && (
<span className="badge bg-dark">
{e.orderStatus}
</span>
)}
{e.orderStatus === "Bank-Paid" && (
<span className="badge bg-secondary">
{e.orderStatus}
</span>
)}
{e.orderStatus === "Unpaid" && (
<span className="badge bg-danger">
{e.orderStatus}
</span>
)}
{e.orderStatus === "Pending" && (
<span className="badge bg-warning">
{e.orderStatus}
</span>
)}
</td>
<td>
<button
className="btnx btn-primary"
disabled={didsubmit}
onClick={(event) => {
onSubmit(
event,
e._id,
e.tourDetails[0].email,
e.orderStatus
);
}}
>
{didsubmit
? "loading.."
: "Change Status"}
</button>
</td>
</tr>
))}
</>
)}
</tbody>
{/* */}
</table>
</>
)}
</div>
</div>
</div>
</div>
</div>
{/* */}
</div>
</section>
</main>
{/* */}
<div style={{ display: didsubmit ? "none" : "block" }}>
<ReactPaginate
previousLabel={"previous"}
nextLabel={"next"}
breakLabel={"..."}
pageCount={allTotalPages}
marginPagesDisplayed={2}
pageRangeDisplayed={3}
onPageChange={handlePageClick}
containerClassName={"pagination justify-content-center"}
pageClassName={"page-item"}
pageLinkClassName={"page-link"}
previousClassName={"page-item"}
previousLinkClassName={"page-link"}
nextClassName={"page-item"}
nextLinkClassName={"page-link"}
breakClassName={"page-item"}
breakLinkClassName={"page-link"}
activeClassName={"active"}
/>
</div>
</>
);
};
export default Body;
this is the whole code, here most of the time my get response works fine. sometimes it doesn't hit the route.
sometimes Get request doesn't hit after post request
POST "http://127.0.0.1:4000/api/changeorder".
GET "http://127.0.0.1:4000/api/allorders?page=1".
I guess my Get request is loading before post request so the virtual dom isn't updating.