Merge pull request #76 from 202306-NEA-DZ-FEW/4-single-product-page

4 single product page
202306-NEA-DZ-FEW · Nov 1, 2023 · 41d3d7d · 41d3d7d
2 parents e2418e1 + 567b5ea
commit 41d3d7d
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 27 deletions.
diff --git a/src/components/itemcard/ItemCard.jsx b/src/components/itemcard/ItemCard.jsx
@@ -1,30 +1,33 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import React from "react";
+/* eslint-disable @next/next/no-img-element */
+import Link from "next/link";
+import { MdLocationPin } from "react-icons/md";
 const ItemCard = ({ item }) => {
+    const { id, title, description, location, imagesList } = item;
     return (
-        <div className='bg-white shadow-md rounded-xl ml-2 mr-2 mb-2 mt-2 px-2 py-2 overflow-hidden'>
-            <div className='relative '>
-                <img
-                    src={item.image}
-                    alt={item.title}
-                    className='w-full h-48 object-cover rounded-xl'
-                />
+        <Link href={`/item/${id}`} className='cursor-pointer'>
+            <div className='flex flex-col border border-gray my-4 w-full md:w-[18rem]  h-fit shadow-lg rounded-xl p-1'>
+                <div className='w-full h-[13rem] mb-4'>
+                    <img
+                        src={imagesList[0]}
+                        alt={title}
+                        className='w-full h-full object-cover rounded-xl'
+                    />
+                </div>
+                <div className='flex flex-col justify-start items-start text-black px-2'>
+                    <h2 className='text-2xl font-bold '>
+                        {title.slice(0, 18) +
+                            `${title.length > 18 ? "..." : ""}`}
+                    </h2>
+                    <p className='w-full h-[4rem]'>
+                        {description.slice(0, 80) + "..."}
+                    </p>
+                    <div className='flex items-center my-2 self-end h-16'>
+                        <MdLocationPin className='text-red text-3xl' />
+                        <p className='text-md font-semibold '>{location}</p>
+                    </div>
+                </div>
             </div>
-            <div className='p-6'>
-                <p className='ml-0 text-2xl px-3 py-2'>
-                    <FontAwesomeIcon
-                        icon='fa-solid fa-location-dot'
-                        style={{ color: "#ff0000" }}
-                    />{" "}
-                    {item.location}
-                </p>
-
-                <h3 className='text-2xl  font-semibold text-gray-800 mb-2 '>
-                    {item.title}
-                </h3>
-                <p className='text-gray-700'>{item.description}</p>
-            </div>
-        </div>
+        </Link>
     );
 };
 

diff --git a/src/layout/Layout.jsx b/src/layout/Layout.jsx
@@ -4,7 +4,7 @@ import Navbar from "@/components/navbar/Navbar";
 export default function Layout({ children }) {
     return (
         <>
-            <div className='container mx-auto '>
+            <div className='container mx-auto px-4 lg:px-0'>
                 <Navbar />
                 {children}
             </div>

diff --git a/src/lib/firebase/firestoreFunctions.js b/src/lib/firebase/firestoreFunctions.js
@@ -73,11 +73,16 @@ export const getItemsByUser = async (userId) => {
 };
 
 export const getItemByCategory = async (category) => {
-    const q = query(collection(db, "items"), where("category", "==", category));
+    const q = query(
+        collection(db, "items"),
+        where("categories", "==", category),
+    );
     const querySnapshot = await getDocs(q);
     const items = [];
     querySnapshot.forEach((doc) => {
-        items.push(doc.data());
+        let data = doc.data();
+        data.id = doc.id;
+        items.push(data);
     });
     return items;
 };
diff --git a/src/pages/item/[id].jsx b/src/pages/item/[id].jsx
@@ -0,0 +1,66 @@
+import {
+    getDocData,
+    getItemByCategory,
+} from "@/lib/firebase/firestoreFunctions";
+
+import ItemCard from "@/components/itemcard/ItemCard";
+import SingleItemCard from "@/components/singleitemcard/SingleItemCard";
+
+function ItemPage({ item, otherItems }) {
+    // otherItems = [otherItems[0], otherItems[1], otherItems[0], otherItems[1]];
+    const {
+        title,
+        description,
+        updatedAt,
+        categories,
+        imagesList,
+        location,
+        userData,
+        userId,
+    } = item;
+    return (
+        <>
+            <SingleItemCard
+                images={imagesList}
+                title={title}
+                description={description}
+                location={location}
+                name={userData.name}
+                phone={userData.phone}
+                email={userData.email}
+            />
+            <div className='mt-12 border-t border-slate-300'>
+                <h2 className='text-4xl font-semi my-4'>Related items</h2>
+                <div className='flex flex-wrap gap-5 justify-start '>
+                    {otherItems.map((element) => (
+                        <ItemCard item={element} key={element.id} />
+                    ))}
+                </div>
+            </div>
+        </>
+    );
+}
+
+export async function getStaticProps({ params }) {
+    let item = await getDocData("items", params.id);
+    item = JSON.parse(JSON.stringify(item));
+
+    let otherItems = await getItemByCategory(item.categories);
+    otherItems = JSON.parse(JSON.stringify(otherItems));
+
+    return {
+        props: {
+            item,
+            otherItems,
+        },
+
+        revalidate: 10,
+    };
+}
+
+export async function getStaticPaths() {
+    const paths = [{ params: { id: "51ODFz5Jd1DAQlM2CpMH" } }];
+    return { paths, fallback: "blocking" };
+}
+
+export default ItemPage;