updated search, creating listings, update listings and profile page UI

api/controllers/listing.controller.js

@@ -34,18 +34,19 @@ export const getListings = async (req,res,next) =>{
 
 
       const searchTerm = req.query.searchTerm || '';
-      const filterTerm = req.query.filterTerm || '';
-      const levelTerm = req.query.levelTerm || '';
+      const loacationTerm = req.query.loacationTerm || '';
 
       const sort = req.query.sort || 'createdAt';
 
       const order = req.query.order || 'desc';
 
       const listings = await Listing.find({
-        message:{$regex: searchTerm, $options: 'i'},
-        resourceId:{$regex: filterTerm, $options: 'i'},
-        level:{$regex: levelTerm, $options: 'i'},
-
+        name:{$regex: loacationTerm, $options: 'i'},
+        address: {$regex: searchTerm, $options:'i'},
+        offer,
+        furnished,
+        parking,
+        type,
       }).sort(
         {[sort]:order}
       ).limit(limit).skip(startIndex)

api/models/listing.model.js

@@ -30,8 +30,17 @@ const listingSchema = new mongoose.Schema(
       type: String,
       required: true,
     },
-    metadata: {
-      type: Object,
+    depositPrice:{
+      type: String,
+      required: true,
+    },
+    offer: {
+      type: Boolean,
+      required: true,
+    },
+    imageUrls: {
+      type: Array,
+      required: true,
     },
     parentId:{
       type: String,

client/package.json

@@ -16,6 +16,7 @@
     "@mui/material": "^5.14.18",
     "@reduxjs/toolkit": "^1.9.7",
     "firebase": "^10.6.0",
+    "headlessui": "^0.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.11.0",

client/src/components/Header.jsx

@@ -0,0 +1,94 @@
+import React, { useEffect, useState } from "react";
+import { FaSearch } from "react-icons/fa";
+import { Link, useNavigate } from "react-router-dom";
+import { useSelector } from "react-redux";
+
+const Header = () => {
+  const { currentUser } = useSelector((state) => state.user);
+  const [searchTerm, setSearchTerm] = useState("");
+  const navigate = useNavigate();
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    const urlParams = new URLSearchParams(window.location.search);
+    urlParams.set("searchTerm", searchTerm);
+    const searchQuery = urlParams.toString();
+    navigate(`/search?${searchQuery}`);
+  };
+
+  useEffect(() => {
+    const urlParams = new URLSearchParams(location.search);
+    const searchTermFromUrl = urlParams.get("searchTerm");
+    if (searchTermFromUrl) {
+      setSearchTerm(searchTermFromUrl);
+    }
+  }, [location.search]);
+  return (
+    <header className=" ">
+      <div className="flex justify-between items-center max-w-6xl mx-auto p-3">
+        <Link to="/">
+          <div className="logo__section w-28 sm:w-48">
+            <img src="./logo.png" alt="img" />
+          </div>
+        </Link>
+        <form
+          onSubmit={handleSubmit}
+          className="bg-slate-100 p-3 rounded-lg flex items-center"
+        >
+          <input
+            type="text"
+            placeholder="Search your location..."
+            className="bg-transparent text-black focus:outline-none w-24 sm:w-64"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+          <button>
+            <FaSearch className="text-black" />
+          </button>
+        </form>
+        <div className="flex gap-4">
+          <Link to="/" className="hidden md:inline">
+            <button
+              type="button"
+              className="p-2 px-5 border rounded-lg uppercase hover:bg-white hover:text-black transition ease-in-out delay-150"
+            >
+              Home
+            </button>
+          </Link>
+          {currentUser && (
+            <Link to="/create-listing" className="none md:inline">
+              <button
+                type="button"
+                className="uppercase hidden md:inline p-2 px-5 border rounded-lg hover:bg-white hover:text-black transition ease-in-out delay-150"
+              >
+                List Property
+              </button>
+            </Link>
+          )}
+
+          <Link to="/profile">
+            {currentUser ? (
+              <div className="avatar ">
+              <div className="w-11 h-11 rounded-full ring ring-white ring-offset-base-100 ring-offset-0">
+                <img src={currentUser.avatar} />
+              </div>
+            </div>
+              // <img
+              //   className="rounded-full h-10 w-10 object-cover"
+              //   src={currentUser.avatar}
+              //   alt="profile pic"
+              // />
+            ) : (
+              <button className="uppercase p-2 px-5 border rounded-lg hover:bg-white hover:text-black transition ease-in-out delay-150 ">
+                {" "}
+                Sing in
+              </button>
+            )}
+          </Link>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default Header;