232 lines
10 KiB
JavaScript
232 lines
10 KiB
JavaScript
import { useEffect, useState } from "react";
|
|
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 fetchProperties = async () => {
|
|
try {
|
|
const res = await axios.get(
|
|
`${import.meta.env.VITE_REACT_APP_SECRET}/mysql/searchmysql`,
|
|
{
|
|
params: { limit, offset: page * limit },
|
|
headers: { "Cache-Control": "no-cache" }, // Disable caching
|
|
}
|
|
);
|
|
setProperties(res.data);
|
|
setTotalRecords(res.data.total); // Get total records from backend
|
|
} catch (err) {
|
|
console.log("Error fetching data:", err);
|
|
}
|
|
};
|
|
|
|
// Fetch data when page changes
|
|
useEffect(() => {
|
|
fetchProperties();
|
|
}, [page]);
|
|
|
|
const totalPages = Math.ceil(totalRecords / limit);
|
|
|
|
return (
|
|
<>
|
|
<Navbar />
|
|
<br /> <br /> <br /> <br /> <br /> <br />
|
|
{/* Display properties */}
|
|
{properties.length > 0 ? (
|
|
<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="Search..."
|
|
className="form-control"
|
|
id="search"
|
|
name="search"
|
|
/>
|
|
</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">
|
|
<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}
|
|
>
|
|
Previous
|
|
</button>
|
|
<span>
|
|
{" "}
|
|
Page {page + 1} of {totalPages}{" "}
|
|
</span>
|
|
<button
|
|
onClick={() => setPage(page + 1)}
|
|
disabled={page + 1 >= totalPages}
|
|
>
|
|
Next
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div className="result-body">
|
|
<div className="table-responsive">
|
|
<table className="table widget-26">
|
|
<tbody>
|
|
{properties.map((property, index) => (
|
|
<div key={index} className="property">
|
|
<tr>
|
|
<td>
|
|
<div className="widget-26-job-emp-img">
|
|
<img
|
|
src="https://bootdey.com/img/Content/avatar/avatar2.png"
|
|
alt="Company"
|
|
/>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div className="widget-26-job-title">
|
|
<a href="#">{property.address}</a>
|
|
<p className="m-0">
|
|
<span
|
|
className="employer-name"
|
|
>
|
|
{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="type m-0">Total Living Square foot</p>
|
|
<p className="text-muted m-0">
|
|
is{" "}
|
|
<span className="location">
|
|
{property.total_living_sqft}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div className="widget-26-job-salary">
|
|
$ {property.cost_per_sqft}/sqft
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div className="widget-26-job-info">
|
|
<p className="type m-0">Year built</p>
|
|
<p className="text-muted m-0">
|
|
|
|
<span className="location">
|
|
{property.year_built}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</td>
|
|
|
|
|
|
{/* <td>
|
|
<div className="widget-26-job-starred">
|
|
<a href="#">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width={24}
|
|
height={24}
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth={2}
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
className="feather feather-star"
|
|
>
|
|
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
|
|
</td> */}
|
|
|
|
</tr>
|
|
<hr style={{color: "#fda417"}} />
|
|
</div>
|
|
|
|
))}
|
|
{/* Pagination Controls */}
|
|
<div>
|
|
<button
|
|
onClick={() => setPage(page - 1)}
|
|
disabled={page === 0}
|
|
>
|
|
Previous
|
|
</button>
|
|
<span>
|
|
{" "}
|
|
Page {page + 1} of {totalPages}{" "}
|
|
</span>
|
|
<button
|
|
onClick={() => setPage(page + 1)}
|
|
disabled={page + 1 >= totalPages}
|
|
>
|
|
Next
|
|
</button>
|
|
</div>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<p>No properties found.</p>
|
|
)}
|
|
{/* Pagination Controls */}
|
|
<Footer />
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default SearchMysql;
|