Property search

app/properties/page.jsx

@@ -1,4 +1,5 @@
 import PropertyCard from '@/components/PropertyCard';
+import PropertySearchForm from '@/components/PropertySearchForm';
 import Property from '@/models/Property';
 import connectDB from '@/config/database';
 
@@ -7,19 +8,27 @@ const PropertiesPage = async () => {
   const properties = await Property.find({}).lean();
 
   return (
-    <section className='px-4 py-6'>
+    <>
-      <div className='container-xl lg:container m-auto px-4 py-6'>
+      <section class='bg-blue-700 py-4'>
-        {properties.length === 0 ? (
+        <div class='max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col items-start'>
-          <p>No properties found</p>
+          <PropertySearchForm />
-        ) : (
+        </div>
-          <div className='grid grid-cols-1 md:grid-cols-3 gap-6'>
+      </section>
-            {properties.map((property, index) => (
+      <section className='px-4 py-6'>
-              <PropertyCard property={property} key={index} />
+        <div className='container-xl lg:container m-auto px-4 py-6'>
-            ))}
+          <h1 className='text-2xl mb-4'>Browse Properties</h1>
-          </div>
+          {properties.length === 0 ? (
-        )}
+            <p>No properties found</p>
-      </div>
+          ) : (
-    </section>
+            <div className='grid grid-cols-1 md:grid-cols-3 gap-6'>
+              {properties.map((property, index) => (
+                <PropertyCard property={property} key={index} />
+              ))}
+            </div>
+          )}
+        </div>
+      </section>
+    </>
   );
 };
 

app/properties/search-results/page.jsx

@@ -0,0 +1,67 @@
+import Link from 'next/link';
+import { FaArrowAltCircleLeft } from 'react-icons/fa';
+import PropertyCard from '@/components/PropertyCard';
+import PropertySearchForm from '@/components/PropertySearchForm';
+import connectDB from '@/config/database';
+import Property from '@/models/Property';
+import { convertToSerializeableObject } from '@/utils/convertToObject';
+
+const SearchResultsPage = async ({
+  searchParams: { location, propertyType },
+}) => {
+  await connectDB();
+
+  const locationPattern = new RegExp(location, 'i');
+
+  // Match location pattern against database fields
+  let query = {
+    $or: [
+      { name: locationPattern },
+      { description: locationPattern },
+      { 'location.street': locationPattern },
+      { 'location.city': locationPattern },
+      { 'location.state': locationPattern },
+      { 'location.zipcode': locationPattern },
+    ],
+  };
+
+  // Only check for property if its not 'All'
+  if (propertyType && propertyType !== 'All') {
+    const typePattern = new RegExp(propertyType, 'i');
+    query.type = typePattern;
+  }
+
+  const propertiesQueryResults = await Property.find(query).lean();
+  const properties = convertToSerializeableObject(propertiesQueryResults);
+
+  return (
+    <>
+      <section className='bg-blue-700 py-4'>
+        <div className='max-w-7xl mx-auto px-4 flex flex-col items-start sm:px-6 lg:px-8'>
+          <PropertySearchForm />
+        </div>
+      </section>
+      <section className='px-4 py-6'>
+        <div className='container-xl lg:container m-auto px-4 py-6'>
+          <Link
+            href='/properties'
+            className='flex items-center text-blue-500 hover:underline mb-3'
+          >
+            <FaArrowAltCircleLeft className='mr-2 mb-1' /> Back To Properties
+          </Link>
+          <h1 className='text-2xl mb-4'>Search Results</h1>
+          {properties.length === 0 ? (
+            <p>No search results found</p>
+          ) : (
+            <div className='grid grid-cols-1 md:grid-cols-3 gap-6'>
+              {properties.map((property) => (
+                <PropertyCard key={property._id} property={property} />
+              ))}
+            </div>
+          )}
+        </div>
+      </section>
+    </>
+  );
+};
+export default SearchResultsPage;