This commit is contained in:
omkieit 2024-09-25 17:11:19 +05:30
parent cd02a6405b
commit 51b0ef91a6
6 changed files with 171 additions and 29 deletions

View File

@ -23,6 +23,7 @@ const propertySchema = mongoose.Schema({
parcel: { type: String, required: true },
subdivision: { type: String, required: true },
legal: { type: String, required: true },
costpersqft: { type: String, required: true },
propertyType: { type: String, required: true },
lotacres: { type: String, required: true },
yearBuild: { type: String, required: true },

File diff suppressed because one or more lines are too long

View File

@ -45,7 +45,7 @@
<script type="module" crossorigin src="/assets/index-Bapz8xqd.js"></script>
<script type="module" crossorigin src="/assets/index-Rr-EF2Cj.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-DepkKhoc.css">
</head>

View File

@ -31,6 +31,7 @@ const Addproperty = () => {
parcel: "",
subdivision: "",
legal: "",
costpersqft: "",
propertyType: "",
lotacres: "",
yearBuild: "",
@ -120,6 +121,7 @@ const Addproperty = () => {
formData.parcel &&
formData.subdivision &&
formData.legal &&
formData.costpersqft &&
formData.propertyType &&
formData.lotacres &&
formData.yearBuild &&
@ -443,6 +445,21 @@ const Addproperty = () => {
/>
</div>
</div>
<div className="col-md-4">
<div className="form-floating mb-3">
Cost per SQFT
<input
type="text"
className="form-control"
name="costpersqft"
value={formData.costpersqft}
onChange={handleInputChange}
placeholder="Cost per SQFT"
required
/>
</div>
</div>
</div>
<div className="row gy-3">

View File

@ -1,7 +1,10 @@
import { useEffect } from "react";
import { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useParams } from "react-router-dom";
import { fetchPropertyById } from "../redux/features/propertySlice";
import propertydummy from "../img/propertydummy.jpg";
import Navbar from "./Navbar";
import Footer from "./Footer";
@ -9,11 +12,13 @@ const PropertyView = () => {
const { id } = useParams(); // Extract the property ID from the route
const dispatch = useDispatch();
const { selectedProperty, status, error } = useSelector((state) => state.property);
const [loading, setLoading] = useState(true); // Loader state
useEffect(() => {
// Fetch the property by ID when the component loads
if (id) {
dispatch(fetchPropertyById(id));
setLoading(false);
}
}, [id, dispatch]);
@ -30,18 +35,137 @@ const PropertyView = () => {
return (
<>
<div className="container property-view">
{selectedProperty ? (
<div className="property-details">
<h1>{selectedProperty.title}</h1>
<Navbar />
<br /> <br /> <br /> <br />
<p>Email: {selectedProperty.useremail}</p>
{/* Add more property details as needed */}
<div className="container col-12">
{loading ? (
<div className="loader">Loading...</div> // Loader
) : selectedProperty ? (
<div className="py-3 py-md-5 bg-light">
{/* <div className="container"> */}
<div className="card-header bg-white">
<div className="row">
<div className="col-md-5 mt-3">
<div className="bg-white border">
<img
src={propertydummy}
className="w-70"
alt="Img"
style={{
marginTop: "0px",
maxWidth: "450px",
maxHeight: "450px",
}}
/>
</div>
</div>
<div className="col-md-7 mt-3">
<div className="product-view">
<h4
className="product-name"
style={{ color: "#fda417", fontSize: "25px" }}
>
{selectedProperty.address}
<label className="label-stock bg-success">
Verified Property
</label>
</h4>
<hr />
<p className="product-path">
<span style={{ color: "#fda417", fontSize: "15px" }}>
city:{" "}
</span>{" "}
{selectedProperty.city} /
<span style={{ color: "#fda417", fontSize: "15px" }}>
County:{" "}
</span>{" "}
{selectedProperty.county} /
<span style={{ color: "#fda417", fontSize: "15px" }}>
State:{" "}
</span>{" "}
{selectedProperty.state} /
<span style={{ color: "#fda417", fontSize: "15px" }}>
Zipcode:
</span>{" "}
{selectedProperty.zip}
</p>
<div>
<span
className="selling-price"
style={{ color: "#fda417", fontSize: "15px" }}
>
Total Living Square Foot:{" "}
</span>
{selectedProperty.totallivingsqft}
<p></p>
<span
className=""
style={{ color: "#fda417", fontSize: "15px" }}
>
Cost per Square Foot:{" "}
</span>
${selectedProperty.costpersqft}/sqft
<p></p>
<span
className=""
style={{ color: "#fda417", fontSize: "15px" }}
>
Year Built:{" "}
</span>
{selectedProperty.yearBuild}
</div>
<div className="mt-3 card bg-white">
<h5 className="mb-0" style={{ color: "#fda417", fontSize: "15px" }}>
Legal Description
</h5>
<span>
{selectedProperty.legal
? selectedProperty.legal
: "No data available"}
</span>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-md-12 mt-3">
<div className="card">
<div className="card-header bg-white">
<h4
className="product-name"
style={{ color: "#fda417", fontSize: "25px" }}
>
Description
</h4>
</div>
<div className="card-body">
<p>
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and
more recently with desktop publishing software like
Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
) : (
<p>Property not found.</p>
<p>No property details found.</p>
)}
</div>
<Footer />
</>
);

View File

@ -51,7 +51,7 @@ const UserProperties = () => {
to={`/property/${property.propertyId}`}
target="_blank"
>
{property.title}
{property.address}
{"....."}
</NavLink>
</h5>