done

ef-api/controllers/property.js

@@ -31,6 +31,7 @@ export const createProperty = async (req, res) => {
  
 };
 
+// Fetch property by userId
 export const getUserProperties = async (req, res) => {
   try {
     const userId = req.params.userId;
@@ -40,3 +41,16 @@ export const getUserProperties = async (req, res) => {
     res.status(500).json({ message: "Error retrieving properties", error });
   }
 };
+
+
+
+// Fetch property by ID
+export const getPropertyById = async (req, res) => {
+  const { propertyId } = req.params;
+  try {
+    const property = await PropertyModal.findOne({ propertyId });
+    res.status(200).json(property);
+  } catch (error) {
+    res.status(404).json({ message: "Something went wrong" });
+  }
+};

ef-api/routes/property.js

@@ -1,10 +1,14 @@
 import express from 'express';
 const router = express.Router();
 import auth from '../middleware/auth.js';
-import { createProperty, getUserProperties } from '../controllers/property.js';
+import { createProperty, getUserProperties, getPropertyById } from '../controllers/property.js';
 
 router.post('/', auth, createProperty);
 router.get('/user/:userId', getUserProperties);
+router.get('/:propertyId', getPropertyById);
+
+
+
 
 
 

ef-ui/dist/index.html

@@ -42,7 +42,7 @@
 <!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script> -->
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
 
-   <script type="module" crossorigin src="/assets/index-CzVE7_Kd.js"></script>
+   <script type="module" crossorigin src="/assets/index-BVD7tRJW.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-BrT2kTNU.css">
  </head>
 

ef-ui/src/App.jsx

@@ -10,8 +10,9 @@ import PrivateRoute from "./components/PrivateRoute";
 import VerifyUser from "./components/EmailVerify";
 import ForgotPassword from "./components/ForgotPassword";
 import ResetPassword from "./components/ResetPassword";
-import Addproperty from "./components/Addproperty";
+// import Addproperty from "./components/Addproperty";
 import Registrationsuccess from "./components/Registrationsuccess";
+import PropertyView from "./components/PropertyView";
 
 const App = () => {
   return (
@@ -48,6 +49,9 @@ const App = () => {
 
 {/* <Route path="/addproperty" element={  <PrivateRoute><Addproperty /></PrivateRoute>}></Route> */}
 
+<Route path="/property/:id" element={<PropertyView />} />
+
+
 
 
 

ef-ui/src/components/Dashboard.jsx

@@ -1,24 +1,25 @@
-import { useState,useEffect } from "react";
+import { useState } from "react";
 import Footer from "./Footer";
 import Navbar from "./Navbar";
-import { useSelector, useDispatch } from "react-redux";
+import { useSelector } from "react-redux";
 import profilepic from "../img/samplepic.jpg";
 import Addproperty from "./Addproperty";
-import { fetchUserProperties } from "../redux/features/propertySlice";
+import UserProperties from "./UserProperties";
+// import { fetchUserProperties } from "../redux/features/propertySlice";
 import "../dashboard.css";
     
 const Dashboard = () => {
-  const dispatch = useDispatch();
+  // const dispatch = useDispatch();
   const { user } = useSelector((state) => ({ ...state.auth }));
-  const { userProperties} = useSelector((state) => state.property);
+  // const { userProperties} = useSelector((state) => state.property);
   const [activeTab, setActiveTab] = useState("dashboard");
 
     // Fetch user properties when "Active Properties" tab is selected
-    useEffect(() => {
-      if (activeTab === "activeProperties") {
-        dispatch(fetchUserProperties(user?.result?.userId));
-      }
-    }, [activeTab, dispatch, user?.result?.userId]);
+    // useEffect(() => {
+    //   if (activeTab === "activeProperties") {
+    //     dispatch(fetchUserProperties(user?.result?.userId));
+    //   }
+    // }, [activeTab, dispatch, user?.result?.userId]);
 
   const renderTabContent = () => {
     switch (activeTab) {
@@ -27,7 +28,7 @@ const Dashboard = () => {
       case "activeProperties":
         return   <div>
         <h3>Active Properties</h3>
-        {userProperties.length > 0 ? (
+        {/* {userProperties.length > 0 ? (
           <ul>
             {userProperties.map((property) => (
               <li key={property._id}>{property.title}</li>
@@ -35,7 +36,9 @@ const Dashboard = () => {
           </ul>
         ) : (
           <p>No active properties found.</p>
-        )}
+        )} */}
+      
+        <UserProperties />
       </div>;
       case "closedProperties":
         return <p>These are your closed properties.</p>;

ef-ui/src/components/PropertyView.jsx

@@ -0,0 +1,50 @@
+import { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { useParams } from "react-router-dom";
+import { fetchPropertyById } from "../redux/features/propertySlice";
+
+
+
+const PropertyView = () => {
+  const { id } = useParams(); // Extract the property ID from the route
+  const dispatch = useDispatch();
+  const { selectedProperty, status, error } = useSelector((state) => state.property);
+
+  useEffect(() => {
+    // Fetch the property by ID when the component loads
+    if (id) {
+      dispatch(fetchPropertyById(id));
+    }
+  }, [id, dispatch]);
+
+  if (status === "loading") {
+    return <p>Loading property details...</p>;
+  }
+
+  if (status === "failed") {
+    return <p>Error loading property: {error}</p>;
+  }
+
+//   console.log("selectedProperty", selectedProperty);
+
+  return (
+    <>
+
+      <div className="container property-view">
+        {selectedProperty ? (
+          <div className="property-details">
+            <h1>{selectedProperty.title}</h1>
+
+            <p>Email: {selectedProperty.useremail}</p>
+            {/* Add more property details as needed */}
+          </div>
+        ) : (
+          <p>Property not found.</p>
+        )}
+      </div>
+
+    </>
+  );
+};
+
+export default PropertyView;

ef-ui/src/components/UserProperties.jsx

@@ -0,0 +1,44 @@
+import { useEffect } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { fetchUserProperties } from "../redux/features/propertySlice";
+import { NavLink } from "react-router-dom";
+
+
+const UserProperties = () => {
+    const dispatch = useDispatch();
+    const { user } = useSelector((state) => ({ ...state.auth }));
+    const { userProperties} = useSelector((state) => state.property);
+
+        // Fetch user properties when "Active Properties" tab is selected
+        useEffect(() => {
+            
+              dispatch(fetchUserProperties(user?.result?.userId));
+            
+          }, [dispatch, user?.result?.userId]);
+
+  return (
+    <>
+         {userProperties.length > 0 ? (
+          <ul>
+            {userProperties.map((property) => (
+              <li key={property._id}>
+              <NavLink to={`/property/${property.propertyId}`} target="_blank">
+              {property.title}
+                                      {"....."}
+                                    </NavLink>
+             
+              </li>
+
+            
+
+            ))}
+          </ul>
+        ) : (
+          <p>No active properties found.</p>
+        )}
+
+    </>
+  )
+}
+
+export default UserProperties

ef-ui/src/redux/features/propertySlice.js

@@ -27,6 +27,18 @@ export const fetchUserProperties = createAsyncThunk(
   }
 );
 
+export const fetchPropertyById = createAsyncThunk(
+  "property/fetchPropertyById",
+  async (id, { rejectWithValue }) => {
+    try {
+      const response = await axios.get(`http://localhost:3002/properties/${id}`);
+      return response.data;
+    } catch (error) {
+      return rejectWithValue(error.response.data);
+    }
+  }
+);
+
 const propertySlice = createSlice({
   name: 'property',
   initialState: {
@@ -34,6 +46,7 @@ const propertySlice = createSlice({
     status: 'idle',
     error: null,
     userProperties: [],
+    selectedProperty: null,
   },
   reducers: {},
   extraReducers: (builder) => {
@@ -60,6 +73,18 @@ const propertySlice = createSlice({
       .addCase(fetchUserProperties.rejected, (state, action) => {
         state.status = 'failed';
         state.error = action.payload;
+      })      
+
+      .addCase(fetchPropertyById.pending, (state) => {
+        state.status = "loading";
+      })
+      .addCase(fetchPropertyById.fulfilled, (state, action) => {
+        state.status = "succeeded";
+        state.selectedProperty = action.payload;
+      })
+      .addCase(fetchPropertyById.rejected, (state, action) => {
+        state.status = "failed";
+        state.error = action.payload;
       });
   },
 });