add listings added

2022-12-02 08:14:14 +02:00
parent 8cc369bfe6
commit 5c96af8b6c
9 changed files with 574 additions and 11 deletions
@@ -0,0 +1,86 @@
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import {
+  collection,
+  getDocs,
+  query,
+  where,
+  orderBy,
+  limit,
+  startAfter,
+} from "firebase/firestore";
+import { db } from "../firebase.config";
+import { toast } from "react-toastify";
+import Spinner from "../components/Spinner";
+import { async } from "@firebase/util";
+import Listing from "../components/ListingItem";
+import ListingItem from "../components/ListingItem";
+
+function Category() {
+  const [listings, setListings] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  const params = useParams();
+
+  useEffect(() => {
+    const fetchListings = async () => {
+      try {
+        const listingsRef = collection(db, "listings");
+        const q = query(
+          listingsRef,
+          where("type", "==", params.categoryName),
+          orderBy("timestamp", "desc"),
+          limit(10)
+        );
+        const querySnap = await getDocs(q);
+        let listings = [];
+        querySnap.forEach((doc) => {
+          return listings.push({
+            id: doc.id,
+            data: doc.data(),
+          });
+        });
+
+        setListings(listings);
+        setLoading(false);
+      } catch (error) {
+        console.log(error)
+        toast.error("could not fetch listings");
+      }
+    };
+
+    fetchListings();
+  }, [params.categoryName]);
+
+  return (
+    <div className="category">
+      <header>
+        <p className="pageHeader">
+          {params.categoryName === "rent"
+            ? "Places for rent"
+            : "Places for sale"}
+        </p>
+      </header>
+      {loading ? (
+        <Spinner />
+      ) : listings && listings.length > 0 ? (
+        <>
+          <main>
+            <ul className="categoryListings">
+              {listings.map((listing) => (
+                <ListingItem
+                  listing={listing.data}
+                  id={listing.id}
+                  key={listing.id}
+                />
+              ))}
+            </ul>
+          </main>
+        </>
+      ) : (
+        <p>No listings for {params.categoryName}</p>
+      )}
+    </div>
+  );
+}
+export default Category;