feat(items page): update items page

src/components/input/index.jsx

@@ -1,4 +1,7 @@
 import clsx from "clsx";
+
+import { cn } from "@/lib/utils";
+
 const Input = ({
     name,
     type,
@@ -8,6 +11,7 @@ const Input = ({
     requiredMessage,
     validation,
     errors,
+    className = "",
 }) => {
     return (
         <>
@@ -24,12 +28,13 @@ const Input = ({
                 })}
                 placeholder={placeholder}
                 type={type}
-                className={clsx(
+                className={cn(
                     "p-2 block w-full border rounded-md focus:outline-none focus:ring-2 focus:ring-green",
                     {
                         "border-red": errors[name],
                         "border-slate-300": !errors[name],
                     },
+                    className,
                 )}
             />
             {errors[name] && (

src/constants/index.js

@@ -101,42 +101,42 @@ export const categories = [
         id: 1,
         title: "Electronics",
         imgSrc: "/images/category_img/category_electronics.webp",
-        href: "/?category=electronics",
+        href: "products/?category=electronics",
     },
     {
         id: 2,
         title: "Academic",
         imgSrc: "/images/category_img/category_academic.webp",
-        href: "/?category=academic",
+        href: "products/?category=academic",
     },
     {
         id: 3,
         title: "Clothes",
         imgSrc: "/images/category_img/category_clothes.webp",
-        href: "/?category=clothes",
+        href: "products/?category=clothes",
     },
     {
         id: 4,
         title: "Dorm",
         imgSrc: "/images/category_img/category_dorm.webp",
-        href: "/?category=dorm",
+        href: "products/?category=dorm",
     },
     {
         id: 5,
         title: "Entertainment",
         imgSrc: "/images/category_img/category_entertainment.webp",
-        href: "/?category=entertainment",
+        href: "products/?category=entertainment",
     },
     {
         id: 6,
         title: "Beauty",
         imgSrc: "/images/category_img/category_beauty.webp",
-        href: "/?category=beauty",
+        href: "products/?category=beauty",
     },
     {
         id: 7,
         title: "Other",
         imgSrc: "/images/category_img/category_other.webp",
-        href: "/?category=other",
+        href: "products/?category=other",
     },
 ];

src/layout/Layout.jsx

@@ -4,7 +4,7 @@ import Navbar from "@/components/navbar/Navbar";
 export default function Layout({ children }) {
     return (
         <div className='w-screen h-screen overflow-x-hidden '>
-            <div className='container mx-auto px-4 lg:px-0 '>
+            <div className='container mx-auto px-4 lg:px-8 '>
                 <Navbar />
                 {children}
             </div>

src/lib/firebase/firestoreFunctions.js

@@ -5,6 +5,8 @@ import {
     doc,
     getDoc,
     getDocs,
+    limit,
+    orderBy,
     query,
     updateDoc,
     where,
@@ -95,3 +97,16 @@ export const getItemByCategory = async (category) => {
 export const deleteDocData = async (collection, docId) => {
     return await deleteDoc(doc(db, collection, docId));
 };
+
+// GET ALL
+export const getAllItems = async () => {
+    const q = query(collection(db, "items"), orderBy("createdAt"), limit(15));
+    const querySnapshot = await getDocs(q);
+    const items = [];
+    querySnapshot.forEach((doc) => {
+        let data = doc.data();
+        data.id = doc.id;
+        items.push(data);
+    });
+    return items;
+};

src/pages/products/index.jsx

@@ -1,13 +1,83 @@
+import { useForm } from "react-hook-form";
+
+import { getAllItems } from "@/lib/firebase/firestoreFunctions";
+
+import Button from "@/components/button/Button";
 import CategoryCard from "@/components/categorycard/CategoryCard";
+import Input from "@/components/input";
+import ItemCard from "@/components/itemcard/ItemCard";
 
 import { categories } from "@/constants";
 
-export default function ProductsPage() {
+export default function ProductsPage({ items }) {
+    const {
+        register,
+        handleSubmit,
+        formState: { errors, isSubmitting },
+    } = useForm();
     return (
-        <div className='my-32 flex justify-between'>
-            {categories.map((category) => {
-                return <CategoryCard key={category.id} {...category} />;
-            })}
+        <div className='my-32'>
+            <div className='my-28'>
+                <h2 className='text-3xl font-semibold mb-10'>
+                    Browse by category:{" "}
+                </h2>
+                <div className='flex justify-between'>
+                    {categories.map((category) => {
+                        return <CategoryCard key={category.id} {...category} />;
+                    })}
+                </div>
+            </div>
+            <div className='flex flex-row justify-start gap-5 items-center'>
+                <Input
+                    className='w-1/3 -ml-5'
+                    name='keyword'
+                    type='text'
+                    labelText=''
+                    placeholder='ex: keyboard'
+                    requiredMessage={false}
+                    register={register}
+                    errors={errors}
+                    validation={{
+                        maxLength: {
+                            value: 30,
+                            message: "30 character max",
+                        },
+                    }}
+                />
+                <Input
+                    className='w-1/5'
+                    name='location'
+                    type='text'
+                    labelText=''
+                    placeholder='ex: Oran'
+                    requiredMessage={false}
+                    register={register}
+                    errors={errors}
+                    validation={{
+                        maxLength: {
+                            value: 30,
+                            message: "30 character max",
+                        },
+                    }}
+                />
+                <Button size='lg'> Search</Button>
+                <Button variant='outlineSecondary'> Add item</Button>
+            </div>
+            <div className='flex flex-wrap justify-between w-full mt-5'>
+                {items.map((item) => (
+                    <ItemCard key={item.id} item={item} />
+                ))}
+            </div>
         </div>
     );
 }
+
+export async function getServerSideProps() {
+    let items = await getAllItems();
+    items = JSON.parse(JSON.stringify(items));
+    return {
+        props: {
+            items,
+        },
+    };
+}