done

ef-api/controllers/property.js

@@ -54,7 +54,3 @@ export const getPropertyById = async (req, res) => {
 };
 
 
-
-
-
-

ef-ui/dist/index.html

@@ -45,7 +45,7 @@
 
 
 
-   <script type="module" crossorigin src="/assets/index-CPzwaVf7.js"></script>
+   <script type="module" crossorigin src="/assets/index-TX5YeaKV.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-BtU0nZSp.css">
  </head>
 

ef-ui/src/App.jsx

@@ -16,6 +16,8 @@ import PropertyView from "./components/PropertyView";
 import SearchMysql from "./components/SearchMysql";
 import Services from "./components/Services";
 import PropertyMysqlView from "./components/PropertyMysqlView";
+import EditProperty from "./components/EditProperty";
+
 
 
 const App = () => {
@@ -62,6 +64,16 @@ const App = () => {
         <Route path="/properties/:house_id" element={<PropertyMysqlView />} />
         <Route path="/searchmyproperties" element={<SearchMysql />} />
 
+        
+        <Route
+          path="/editproperty/:id"
+          element={
+      <EditProperty />
+         
+       
+          }
+        />
+
 
       </Routes>
     </BrowserRouter>

ef-ui/src/components/EditProperty.jsx

@@ -0,0 +1,113 @@
+import { useState, useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { fetchPropertyById } from "../redux/features/propertySlice";
+import { useParams } from "react-router-dom";
+
+const EditProperty = () => {
+  const { id } = useParams();
+  const dispatch = useDispatch();
+  const { selectedProperty } = useSelector((state) => state.property);
+
+  const [formData, setFormData] = useState({
+    propertyType: "",
+    title: "",
+    yearBuild: "",
+    totalSqft: "",
+  });
+
+  useEffect(() => {
+    dispatch(fetchPropertyById(id));
+  }, [dispatch, id]);
+
+  useEffect(() => {
+    if (selectedProperty) {
+      setFormData({
+        propertyType: selectedProperty.propertyType,
+        title: selectedProperty.title,
+        yearBuild: selectedProperty.yearBuild,
+        totalSqft: selectedProperty.totalSqft,
+      });
+    }
+  }, [selectedProperty]);
+
+  const handleChange = (e) => {
+    setFormData({ ...formData, [e.target.name]: e.target.value });
+  };
+
+  return (
+    <div className="edit-property-form">
+      <h2>Edit Property</h2>
+      <form>
+        <div>
+          <select
+            className="form-floating mb-3 form-control"
+            name="propertyType"
+            value={formData.propertyType}
+            onChange={handleChange}
+            required
+          >
+            <option value="">Please Select Property Type</option>
+            <option value="Residential">Residential</option>
+            <option value="Land">Land</option>
+            <option value="Commercial">Commercial</option>
+            <option value="Industrial">Industrial</option>
+            <option value="Water">Water</option>
+          </select>
+        </div>
+
+        <div className="col-12">
+          <div className="form-floating mb-3">
+            <input
+              type="text"
+              className="form-control"
+              name="title"
+              value={formData.title}
+              onChange={handleChange}
+              placeholder="Property title"
+              required
+            />
+            <label htmlFor="title" className="form-label">
+              Property Title
+            </label>
+          </div>
+        </div>
+
+        <div className="col-12">
+          <div className="form-floating mb-3">
+            <input
+              type="text"
+              className="form-control"
+              name="yearBuild"
+              value={formData.yearBuild}
+              onChange={handleChange}
+              placeholder="Year build"
+              required
+            />
+            <label htmlFor="yearBuild" className="form-label">
+              Year Build
+            </label>
+          </div>
+        </div>
+
+        <div className="form-floating mb-3">
+          <input
+            type="text"
+            className="form-control"
+            name="totalSqft"
+            value={formData.totalSqft}
+            onChange={handleChange}
+            placeholder="Total SQFT"
+            required
+          />
+          <label htmlFor="totalSqft" className="form-label">
+            Total SQFT
+          </label>
+        </div>
+
+        <button type="submit">Update Property</button>
+      </form>
+    </div>
+  );
+};
+
+export default EditProperty;

ef-ui/src/components/UserProperties.jsx

@@ -25,6 +25,13 @@ const UserProperties = () => {
               <NavLink to={`/property/${property.propertyId}`} target="_blank">
               {property.title}
                                       {"....."}
+
+                                    </NavLink>
+
+                                    <NavLink to={`/editproperty/${property.propertyId}`} target="_blank">
+           Edit
+                                      {"....."}
+                                      
                                     </NavLink>
              
               </li>

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

@@ -1,5 +1,6 @@
 import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
 import * as api from "../api";
+import axios from "axios";
 
 export const submitProperty = createAsyncThunk(
   'property/submitProperty',
@@ -38,6 +39,18 @@ export const fetchPropertyById = createAsyncThunk(
   }
 );
 
+// Update property thunk
+export const updateProperty = createAsyncThunk(
+  'property/updateProperty',
+  async ({ id, updatedData }, { rejectWithValue }) => {
+    try {
+      const response = await axios.patch(`http://localhost:3002/properties/${id}`, updatedData);
+      return response.data;
+    } catch (error) {
+      return rejectWithValue(error.response.data);
+    }
+  }
+);
 
 
 
@@ -92,9 +105,12 @@ const propertySlice = createSlice({
         state.status = "failed";
         state.error = action.payload;
       })
+
+     
+     ;
       
     
-      ;
+      
   },
 });