npm i query-string
// components/forms/SearchForm.js
import queryString from "query-string";
import axios from "axios";
import { useNavigate } from "react-router-dom";
export default function SearchForm() {
// context
const [search, setSearch] = useSearch();
// hooks
const navigate = useNavigate();
const handleSearch = async (e) => {
setSearch({ ...search, loading: true });
try {
const { results, page, price, ...rest } = search;
const query = queryString.stringify(rest);
const { data } = await axios.get(`/search?${query}`);
if (search?.page !== "/search") {
setSearch((prev) => ({
...prev,
results: data,
loading: false,
}));
navigate("/search");
} else {
setSearch((prev) => ({
...prev,
results: data,
page: window.location.pathname,
loading: false,
}));
}
} catch (err) {
console.log(err);
setSearch({ ...search, loading: false });
}
};
Disable the button while loading is true
<button
disabled={search.loading}
onClick={handleSearch}
className="col-lg-2 btn btn-danger"
>
{search.loading ? "Please wait" : "Search"}
</button>