done

ef-api/controllers/property.js

@@ -102,3 +102,12 @@ export const updatePropertyById = async (req, res) => {
     res.status(500).json({ message: "Failed to update property", error: error.message });
   }
 };
+
+export const getProperties = async (req, res) => {
+  try {
+    const properties = await PropertyModal.find(); // Fetch all properties from MongoDB
+    res.status(200).json(properties);
+  } catch (error) {
+    res.status(500).json({ message: "Server error" });
+  }
+};

ef-api/routes/property.js

@@ -1,11 +1,12 @@
 import express from 'express';
 const router = express.Router();
 import auth from '../middleware/auth.js';
-import { createProperty, getUserProperties, getPropertyById, updatePropertyById} from '../controllers/property.js';
+import { createProperty, getUserProperties, getPropertyById, updatePropertyById, getProperties} from '../controllers/property.js';
 
 router.post('/', auth, createProperty);
 router.get('/user/:userId', getUserProperties);
 router.get('/:propertyId', getPropertyById);
 router.put("/:id", updatePropertyById);
+router.get('/', getProperties);
 
 export default router;

ef-ui/dist/index.html

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

ef-ui/src/App.jsx

@@ -13,10 +13,11 @@ import ResetPassword from "./components/ResetPassword";
 // import Addproperty from "./components/Addproperty";
 import Registrationsuccess from "./components/Registrationsuccess";
 import PropertyView from "./components/PropertyView";
-import SearchMysql from "./components/SearchMysql";
+import SearchMysqlProperties from "./components/SearchMysqlProperties";
 import Services from "./components/Services";
 import PropertyMysqlView from "./components/PropertyMysqlView";
 import EditProperty from "./components/EditProperty";
+import SearchProperties from "./components/SearchProperties";
 
 const App = () => {
   return (
@@ -60,7 +61,8 @@ const App = () => {
 
         <Route path="/property/:id" element={<PropertyView />} />
         <Route path="/properties/:house_id" element={<PropertyMysqlView />} />
-        <Route path="/searchmyproperties" element={<SearchMysql />} />
+        <Route path="/searchmyproperties" element={<SearchMysqlProperties />} />
+        <Route path="/searchproperties" element={<SearchProperties />} />
 
         <Route path="/editproperty/:id" element={<EditProperty />} />
       </Routes>

ef-ui/src/components/Navbar.jsx

@@ -5,12 +5,10 @@ import { NavLink } from "react-router-dom";
 import { setLogout } from "../redux/features/authSlice";
 import { useNavigate } from "react-router-dom";
 
-
 const Navbar = () => {
   const { user } = useSelector((state) => ({ ...state.auth }));
   const dispatch = useDispatch();
   const navigate = useNavigate();
-  
 
   const handleLogout = () => {
     dispatch(setLogout());
@@ -55,7 +53,16 @@ const Navbar = () => {
           <div className="collapse navbar-collapse" id="navbarSupportedContent">
             <ul className="navbar-nav ml-auto">
               <li className="nav-item active">
-                <NavLink to="/" className="nav-link">
+                <NavLink
+                  to="/"
+                  className="nav-link"
+                  style={{
+                    color: "#fda417",
+                    border: "#fda417",
+                    fontSize: "20px",
+                    fontWeight: "normal",
+                  }}
+                >
                   Home
                 </NavLink>
               </li>
@@ -65,8 +72,17 @@ const Navbar = () => {
                 </NavLink>
               </li>
               <li className="nav-item">
-                <NavLink to="/searchmyproperties" className="nav-link">
-                  Search
+                <NavLink
+                  to="/searchmyproperties"
+                  className="nav-link"
+                  style={{
+                    color: "#fda417",
+                    border: "#fda417",
+                    fontSize: "20px",
+                    fontWeight: "normal",
+                  }}
+                >
+                  Search Database
                 </NavLink>
               </li>
               <li className="nav-item">
@@ -74,7 +90,21 @@ const Navbar = () => {
                   About
                 </NavLink>
               </li>
-     
+
+              <li className="nav-item">
+                <NavLink
+                  to="/searchproperties"
+                  className="nav-link"
+                  style={{
+                    color: "#fda417",
+                    border: "#fda417",
+                    fontSize: "20px",
+                    fontWeight: "normal",
+                  }}
+                >
+                  Search properties
+                </NavLink>
+              </li>
 
               <li className="nav-item">
                 <NavLink to="/contact" className="nav-link">
@@ -88,32 +118,49 @@ const Navbar = () => {
                             </div>
                            
                           </div> */}
-
-         
-         
-
-             
-         
-
-
             </ul>
 
             {user?.result?._id ? (
-              <NavLink to="/dashboard">Dashboard</NavLink>
+              <NavLink
+                to="/dashboard"
+                style={{
+                  fontWeight: "bold",
+                }}
+              >
+                Dashboard
+              </NavLink>
             ) : (
-              <NavLink to="/register" className="nav-link">
+              <NavLink
+                to="/register"
+                className="nav-link"
+                style={{
+                  fontWeight: "bold",
+                }}
+              >
                 Register
               </NavLink>
             )}
 
             {user?.result?._id ? (
               <NavLink to="/login">
-                <p className="header-text" onClick={handleLogout}>
+                <p
+                  className="header-text"
+                  onClick={handleLogout}
+                  style={{
+                    fontWeight: "bold",
+                  }}
+                >
                   Logout
                 </p>
               </NavLink>
             ) : (
-              <NavLink to="/login" className="nav-link">
+              <NavLink
+                to="/login"
+                className="nav-link"
+                style={{
+                  fontWeight: "bold",
+                }}
+              >
                 Login
               </NavLink>
             )}

ef-ui/src/components/SearchMysqlProperties.jsx

@@ -5,7 +5,7 @@ import Navbar from "./Navbar";
 import Footer from "./Footer";
 import "../searchmysqlresults.css";
 
-const SearchMysql = () => {
+const SearchMysqlProperties = () => {
   const [properties, setProperties] = useState([]);
   const [totalRecords, setTotalRecords] = useState(0);
   const [page, setPage] = useState(0);
@@ -68,7 +68,7 @@ const SearchMysql = () => {
   return (
     <>
       <Navbar />
-      <br />      <br />      <br />      <br />      <br />      <br />
+      <br /> <br /> <br /> <br /> <br /> <br />
       <div className="container col-12">
         <div className="row">
           <div className="col-lg-12 card-margin col-12">
@@ -104,8 +104,10 @@ const SearchMysql = () => {
               <div className="card-body">
                 {showResultsMessage && properties.length > 0 && (
                   <div>
-                    Showing search results for the keyword <span style={{ color: "#fda417", fontSize: "25px" }}>{search}</span>
-                    
+                    Showing search results for the keyword{" "}
+                    <span style={{ color: "#fda417", fontSize: "25px" }}>
+                      {search}
+                    </span>
                   </div>
                 )}
                 <div className="table-responsive">
@@ -155,9 +157,7 @@ const SearchMysql = () => {
                             </td>
                             <td>
                               <div className="widget-26-job-info">
-                                <p className="m-0">
-                                  {property.year_built}
-                                </p>
+                                <p className="m-0">{property.year_built}</p>
                               </div>
                             </td>
                             <td>
@@ -212,4 +212,4 @@ const SearchMysql = () => {
   );
 };
 
-export default SearchMysql;
+export default SearchMysqlProperties;

ef-ui/src/components/SearchProperties.jsx

@@ -0,0 +1,121 @@
+import { useEffect, useState } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { getProperties } from "../redux/features/propertySlice"; // Redux action to fetch properties
+import Navbar from "./Navbar";
+import Footer from "./Footer";
+import "../searchmysqlresults.css";
+
+const SearchProperties = () => {
+  const dispatch = useDispatch();
+  const { properties, loading } = useSelector((state) => state.property); // Get loading and properties state from Redux
+  const [searchTerm, setSearchTerm] = useState(""); // For storing search keyword
+  const [filteredProperties, setFilteredProperties] = useState([]);
+
+  // Dispatch getProperties to load properties on mount
+  useEffect(() => {
+    dispatch(getProperties());
+  }, [dispatch]);
+
+  console.log("properties", properties);
+
+  // Filter properties based on search term
+  useEffect(() => {
+    if (searchTerm) {
+      const filtered = properties.filter((property) =>
+        property.details.toLowerCase().includes(searchTerm.toLowerCase())
+      );
+      setFilteredProperties(filtered);
+    } else {
+      setFilteredProperties(properties); // Show all properties if no search term
+    }
+  }, [searchTerm, properties]);
+
+  const handleSearch = (e) => {
+    if (e.key === "Enter") {
+      setSearchTerm(e.target.value);
+    }
+  };
+
+  return (
+    <>
+      <Navbar />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <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"
+                            onKeyDown={handleSearch}
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Display the properties */}
+        <div className="row">
+          <div className="col-12">
+            <div className="card card-margin">
+              <div className="card-body">
+                {loading ? (
+                  <div>Loading...</div>
+                ) : (
+                  <div className="table-responsive">
+                    <table className="table widget-26">
+                      <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>
+                        {filteredProperties.length > 0 ? (
+                          filteredProperties.map((property) => (
+                            <tr key={property.id}>
+                              {/* <td>{property.details}</td> */}
+                              <td>{property.address}</td>
+                              {/* <td>{property.yearBuilt}</td>
+                              <td>{property.costPerSqFt}</td> */}
+                            </tr>
+                          ))
+                        ) : (
+                          <tr>
+                            <td colSpan="4">No properties found.</td>
+                          </tr>
+                        )}
+                      </tbody>
+                    </table>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <Footer />
+    </>
+  );
+};
+
+export default SearchProperties;

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",
@@ -63,6 +64,11 @@ export const updateProperty = createAsyncThunk(
   }
 );
 
+export const getProperties = createAsyncThunk("property/getProperties", async () => {
+  const response = await axios.get("http://localhost:3002/properties"); // Backend endpoint
+  return response.data;
+});
+
 const propertySlice = createSlice({
   name: "property",
   initialState: {
@@ -74,6 +80,7 @@ const propertySlice = createSlice({
     totalPages: 0,
     currentPage: 1,
     loading: false,
+    properties: [],
   },
   reducers: {},
   extraReducers: (builder) => {
@@ -125,7 +132,20 @@ const propertySlice = createSlice({
       .addCase(updateProperty.rejected, (state, action) => {
         state.status = "failed";
         state.error = action.payload;
-      });
+      })
+
+      .addCase(getProperties.pending, (state) => {
+        state.loading = true;
+      })
+      .addCase(getProperties.fulfilled, (state, action) => {
+        state.loading = false;
+        state.properties = action.payload;
+      })
+      .addCase(getProperties.rejected, (state, action) => {
+        state.loading = false;
+        state.error = action.error.message;
+      })
+      ;
   },
 });