From 118c01d816b8f440611cc3ed301a09f493012efb Mon Sep 17 00:00:00 2001
From: Juthatip McDevitt <jtp@mcdevitt.tech>
Date: Sat, 16 Mar 2024 16:37:39 -0500
Subject: [PATCH] added footer and listing for homepage

---
 real_estate/client/src/App.jsx               |  2 +
 real_estate/client/src/components/Footer.jsx | 69 ++++++++++++++++
 real_estate/client/src/pages/Home.jsx        | 86 +++++++++++++++++++-
 3 files changed, 156 insertions(+), 1 deletion(-)
 create mode 100644 real_estate/client/src/components/Footer.jsx

diff --git a/real_estate/client/src/App.jsx b/real_estate/client/src/App.jsx
index abf25d3..728711d 100644
--- a/real_estate/client/src/App.jsx
+++ b/real_estate/client/src/App.jsx
@@ -10,6 +10,7 @@ import CreatListing from './pages/CreatListing'
 import UpdateListing from './pages/UpdateListing'
 import Listing from './pages/Listing'
 import SearchProperties from './pages/SearchProperties'
+import Footer from './components/Footer'
 
 
 const App = () => {
@@ -29,6 +30,7 @@ const App = () => {
         <Route path='/signup' element={<SignUp/>}/>
         <Route path='/contact' element={<Contact/>}/>
       </Routes>
+      <Footer/>
     </BrowserRouter>
   )
 }
diff --git a/real_estate/client/src/components/Footer.jsx b/real_estate/client/src/components/Footer.jsx
new file mode 100644
index 0000000..20f4e65
--- /dev/null
+++ b/real_estate/client/src/components/Footer.jsx
@@ -0,0 +1,69 @@
+import { Link } from "react-router-dom"
+import { FaMeta } from "react-icons/fa6";
+import { FaXTwitter } from "react-icons/fa6";
+import { FaThreads } from "react-icons/fa6";
+import { FaInstagram } from "react-icons/fa6";
+import { FaLocationDot } from "react-icons/fa6";
+import { FaPhoneAlt } from "react-icons/fa";
+
+const Footer = () => {
+  return (
+    <footer>
+        <div className="max-w-6xl mx-auto pr-10 pl-10 pb-4">
+            <div className="grid w-full justify-between sm:flex sm:justify-between md:flex md:grid-cols-1">
+                <Link>
+                    <p className="text-blue-900 text-lg uppercase tracking-wide font-serif">Chicagoland</p>
+                </Link>
+                <div className="grid grid-cols-2 gap-10 pt-5 md:grid-cols-3">
+                    <div className="flex flex-col">
+                        <p className="uppercase text-blue-900 font-semibold text-sm">About us</p>
+                        <div className="mt-2">
+                            <p className="text-sm mt-1 text-gray-800">All properties</p>
+                            <p className="text-sm mt-1 text-gray-800">Featured properties</p>
+                            <p className="text-sm mt-1 text-gray-800">About chicago</p>
+                            <p className="text-sm mt-1 text-gray-800">Why us</p>
+                        </div>
+                    </div>
+
+                    <div className="flex flex-col">
+                        <p className="uppercase text-blue-900 font-semibold text-sm">services</p>
+                        <div className="mt-2">
+                            <p className="text-sm mt-1 text-gray-800">Help & FAQs</p>
+                            <p className="text-sm mt-1 text-gray-800">Knowledgebase</p>
+                            <p className="text-sm mt-1 text-gray-800">New Feeds</p>
+                            <p className="text-sm mt-1 text-gray-800">Career</p>
+                        </div>
+                    </div>
+
+                    <div className="flex flex-col">
+                        <p className="uppercase text-blue-900 font-semibold text-sm">Contact</p>
+                        <div className="mt-2">
+                            <div className="flex gap-2 mt-1 text-gray-800">
+                                <FaLocationDot className="text-xs"/>
+                                <p className="text-sm"> 1234 Street Name,<br/>Chicago, IL 98765</p>
+                            </div>
+                            <div className="flex gap-2 mt-1 text-gray-800">
+                                <FaPhoneAlt className="text-xs"/>
+                                <p className="text-sm">(123) 456 - 7890</p>
+                            </div>
+                        </div>    
+                    </div>
+                </div>
+            </div>
+            <div className="border-t-2 mt-6">
+                <div className="w-full sm:flex sm:items-center sm:justify-between">
+                    <div className="text-xs my-6 text-gray-600 tracking-wider">&copy; 2024 Chicagoland</div>
+                    <div className="mt-4 flex space-x-6 sm:mt-0 sm:justify-center">
+                        <Link className="text-gray-600"><FaMeta/></Link>
+                        <Link className="text-gray-600"><FaXTwitter/></Link>
+                        <Link className="text-gray-600"><FaThreads/></Link>
+                        <Link className="text-gray-600"><FaInstagram/></Link>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </footer>
+  )
+}
+
+export default Footer
\ No newline at end of file
diff --git a/real_estate/client/src/pages/Home.jsx b/real_estate/client/src/pages/Home.jsx
index d278ef7..921c25a 100644
--- a/real_estate/client/src/pages/Home.jsx
+++ b/real_estate/client/src/pages/Home.jsx
@@ -1,6 +1,50 @@
+import { useEffect, useState } from "react"
 import Search from "../components/Search"
+import { Link } from "react-router-dom";
+import ListingCard from '../components/ListingCard'
 
 const Home = () => {
+  const [offerListings, setOfferListings] = useState([]);
+  const [saleListings, setSaleListings] = useState([]);
+  const [rentListings, setRentListings] = useState([]);
+
+  useEffect(() => {
+    const fetchOfferListings = async () => {
+      try{
+        const res = await fetch('/server/listing/get?offer=true&limit=4');
+        const data = await res.json();
+        setOfferListings(data);
+        fetchRentListings();
+
+      }catch (error) {
+        console.log(error)
+      }
+    };
+    const fetchRentListings = async () => {
+      try {
+        const res = await fetch('/server/listing/get?type=rent&limit=4');
+        const data = await res.json();
+        setRentListings(data);
+        fetchSaleListings();
+
+      } catch (error) {
+        console.log(error)
+      }
+    };
+    const fetchSaleListings = async () => {
+      try {
+        const res = await fetch('/server/listing/get?type=sale&limit=4');
+        const data = await res.json();
+        setSaleListings(data);
+
+      } catch (error) {
+        console.log(error)
+      }
+    };
+    fetchOfferListings();
+  }, []);
+
+
   return (
     <>
     <div className="relative flex items-center justify-center h-[80vh]">
@@ -10,7 +54,47 @@ const Home = () => {
         <p className="text-shadow-DEFAULT shadow-black">Lorem ipsum dolor sit, amet consectetur adipisicing elit. <br />Alias dolorem error atque aut, asperiores et tempore iste quaerat pariatur maxime?</p>
         <Search/> 
       </div>
-      
+    </div>
+    <div className="max-w-6xl mx-auto p-10 flex flex-col gap-4 my-10">
+      {offerListings && offerListings.length > 0 && (
+        <div className=''>
+          <div className='my-3'>
+            <h2 className='text-2xl font-semibold text-blue-900'>Recent offers</h2>
+            <Link className='text-sm font-semibold hover:underline' to={'/search?offer=true'}>Show more offers</Link>
+          </div>
+          <div className='flex flex-wrap gap-4'>
+            {offerListings.map((listing) => (
+              <ListingCard listing={listing} key={listing._id} />
+            ))}
+          </div>
+        </div>
+      )}
+      {rentListings && rentListings.length > 0 && (
+        <div className=''>
+          <div className='my-3'>
+            <h2 className='text-2xl font-semibold text-blue-900'>Recent places for rent</h2>
+            <Link className='text-sm font-semibold hover:underline' to={'/search?type=rent'}>Show more places for rent</Link>
+          </div>
+          <div className='flex flex-wrap gap-4'>
+            {rentListings.map((listing) => (
+              <ListingCard listing={listing} key={listing._id} />
+            ))}
+          </div>
+        </div>
+      )}
+      {saleListings && saleListings.length > 0 && (
+        <div className=''>
+          <div className='my-3'>
+            <h2 className='text-2xl font-semibold text-blue-900'>Recent places for sale</h2>
+            <Link className='text-sm font-semibold hover:underline' to={'/search?type=sale'}>Show more places for sale</Link>
+          </div>
+          <div className='flex flex-wrap gap-4'>
+            {saleListings.map((listing) => (
+              <ListingCard listing={listing} key={listing._id} />
+            ))}
+          </div>
+        </div>
+      )}
     </div>
   </>
   )