285 lines
11 KiB
JavaScript
285 lines
11 KiB
JavaScript
import { useEffect, useState, useCallback } from "react";
|
|
import { NavLink } from "react-router-dom";
|
|
import axios from "axios";
|
|
import Navbar from "./Navbar";
|
|
import Footer from "./Footer";
|
|
import "../searchmysqlresults.css";
|
|
|
|
const SearchMysql = () => {
|
|
const [properties, setProperties] = useState([]);
|
|
const [totalRecords, setTotalRecords] = useState(0);
|
|
const [page, setPage] = useState(0); // Page number
|
|
const [limit] = useState(10); // Items per page
|
|
const [search, setSearch] = useState(""); // Search query state
|
|
const [loading, setLoading] = useState(false); // Loader state
|
|
|
|
// Fetch properties from API
|
|
const fetchProperties = async () => {
|
|
setLoading(true);
|
|
try {
|
|
const res = await axios.get(
|
|
`${import.meta.env.VITE_REACT_APP_SECRET}/mysql/searchmysql`,
|
|
{
|
|
params: { limit, offset: page * limit, search },
|
|
headers: { "Cache-Control": "no-cache" }, // Disable caching
|
|
}
|
|
);
|
|
setProperties(res.data.data); // Set properties
|
|
setTotalRecords(res.data.totalRecords); // Set total records
|
|
} catch (err) {
|
|
console.log("Error fetching data:", err);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
// Debounce the search input
|
|
const debounce = (func, delay) => {
|
|
let timer;
|
|
return (...args) => {
|
|
clearTimeout(timer);
|
|
timer = setTimeout(() => func(...args), delay);
|
|
};
|
|
};
|
|
|
|
// Debounced fetch properties
|
|
const debouncedFetchProperties = useCallback(
|
|
debounce(() => {
|
|
if (search.trim() === "") {
|
|
fetchProperties(); // Fetch default properties when search is empty
|
|
} else {
|
|
fetchProperties(); // Fetch properties with new search term
|
|
}
|
|
}, 3000), // 3 seconds delay
|
|
[search, page]
|
|
);
|
|
|
|
// Handle search input change
|
|
const handleSearchChange = (e) => {
|
|
setSearch(e.target.value);
|
|
// Trigger search only if input is non-empty
|
|
if (e.target.value.trim() === "") {
|
|
setPage(0); // Reset to first page
|
|
fetchProperties(); // Fetch default properties immediately
|
|
}
|
|
};
|
|
|
|
// Handle key press events (Enter)
|
|
const handleKeyPress = (e) => {
|
|
if (e.key === "Enter") {
|
|
e.preventDefault();
|
|
if (search.trim()) {
|
|
debouncedFetchProperties(); // Fetch properties on Enter key
|
|
}
|
|
}
|
|
};
|
|
|
|
// Handle input blur to fetch results after typing
|
|
const handleBlur = () => {
|
|
if (search.trim() !== "") {
|
|
debouncedFetchProperties(); // Fetch properties after typing is complete
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
// Fetch default properties when the component mounts or page changes
|
|
if (search.trim() === "") {
|
|
fetchProperties(); // Fetch default properties
|
|
}
|
|
}, [page]);
|
|
|
|
const totalPages = Math.ceil(totalRecords / limit);
|
|
|
|
return (
|
|
<>
|
|
<Navbar />
|
|
<br /> <br /> <br /> <br /> <br /> <br />
|
|
{/* Display properties */}
|
|
<div className="container col-12">
|
|
<div className="row">
|
|
<div className="col-lg-12 card-margin col-12">
|
|
<div className="card search-form col-12">
|
|
<div className="card-body p-0">
|
|
<form id="search-form">
|
|
<div className="row">
|
|
<div className="col-12">
|
|
<div className="row no-gutters">
|
|
<div className="col-lg-8 col-md-6 col-sm-12 p-0">
|
|
<input
|
|
type="text"
|
|
placeholder="Enter the keyword and hit ENTER button..."
|
|
className="form-control"
|
|
id="search"
|
|
name="search"
|
|
value={search}
|
|
onChange={handleSearchChange}
|
|
onKeyDown={handleKeyPress}
|
|
onBlur={handleBlur} // Trigger search on blur
|
|
/>
|
|
</div>
|
|
<div className="col-lg-1 col-md-3 col-sm-12 p-0"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="row">
|
|
<div className="col-12">
|
|
<div className="card card-margin">
|
|
<div className="card-body">
|
|
{loading ? (
|
|
<div className="loader" style={{color:"#fda417"}}><span style={{color:"#fda417", fontSize: "25px"}}>Loading...</span></div>
|
|
) : (
|
|
<div className="row search-body">
|
|
<div className="col-lg-12">
|
|
<div className="search-result col-12">
|
|
<div className="result-header">
|
|
<div className="row">
|
|
<div className="col-lg-6">
|
|
<div className="records">
|
|
{/* Pagination Controls */}
|
|
<div>
|
|
<button
|
|
onClick={() => setPage(page - 1)}
|
|
disabled={page === 0}
|
|
style={{
|
|
backgroundColor: "#fda417",
|
|
border: "#fda417",
|
|
}}
|
|
>
|
|
Previous
|
|
</button>
|
|
<span>
|
|
{" "}
|
|
Page {page + 1} of {totalPages}{" "}
|
|
</span>
|
|
<button
|
|
onClick={() => setPage(page + 1)}
|
|
disabled={page + 1 >= totalPages}
|
|
style={{
|
|
backgroundColor: "#fda417",
|
|
border: "#fda417",
|
|
}}
|
|
>
|
|
Next
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="result-body">
|
|
<div className="table-responsive">
|
|
<table className="table widget-26">
|
|
{/* Add table headers */}
|
|
<thead style={{color:"#fda417", fontSize: "15px"}}>
|
|
<tr>
|
|
<th>Details</th>
|
|
<th>Total Living Square Foot</th>
|
|
<th>Year Built</th>
|
|
<th>Cost per Square Foot</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{properties.length > 0 ? (
|
|
properties.map((property, index) => (
|
|
<tr key={index}>
|
|
<td>
|
|
<div className="widget-26-job-title">
|
|
<NavLink
|
|
to={`/properties/${property.house_id}`}
|
|
className="link-primary text-decoration-none"
|
|
>
|
|
{property.address}
|
|
</NavLink>
|
|
<p className="m-0">
|
|
<span className="employer-name">
|
|
<i
|
|
className="fa fa-map-marker"
|
|
style={{ color: "#F74B02" }}
|
|
/>
|
|
{property.city}, {property.county},
|
|
{property.state}
|
|
</span>{" "}
|
|
<p className="text-muted m-0">
|
|
House Id: {property.house_id}
|
|
</p>
|
|
</p>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div className="widget-26-job-info">
|
|
<p className="m-0">
|
|
{property.total_living_sqft}
|
|
</p>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div className="widget-26-job-info">
|
|
<p className="m-0">
|
|
{property.year_built}
|
|
</p>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div className="widget-26-job-salary">
|
|
$ {property.cost_per_sqft}/sqft
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))
|
|
) : (
|
|
<tr>
|
|
<td colSpan="4">No results found</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
{/* Pagination Controls */}
|
|
<div>
|
|
<button
|
|
onClick={() => setPage(page - 1)}
|
|
disabled={page === 0}
|
|
style={{
|
|
backgroundColor: "#fda417",
|
|
border: "#fda417",
|
|
}}
|
|
>
|
|
Previous
|
|
</button>
|
|
<span>
|
|
{" "}
|
|
Page {page + 1} of {totalPages}{" "}
|
|
</span>
|
|
<button
|
|
onClick={() => setPage(page + 1)}
|
|
disabled={page + 1 >= totalPages}
|
|
style={{
|
|
backgroundColor: "#fda417",
|
|
border: "#fda417",
|
|
}}
|
|
>
|
|
Next
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Footer />
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default SearchMysql;
|