Update to the products page

Ibidapo-Ayo · Oct 19, 2024 · 8dc77e8 · 8dc77e8
1 parent 98e7b7a
commit 8dc77e8
Show file tree

Hide file tree

Showing 16 changed files with 169 additions and 120 deletions.
diff --git a/.env b/.env
@@ -6,4 +6,5 @@ NEXT_API_KEY=standard_61986c691bb3db5f137473b337b983d85e6da821389eac76e0e4e8a3ee
 CART_ID=66fbbf55001d80dc88fb
 PRODUCT_ID=66fbc024002a7e15733f
 BUCKET_ID=66fbcb40001a0f7d3fdf
-ADMIN_PIN=384938
+ADMIN_PIN=384938
+WISHLIST_COLLECTION=67064dc4000c0666a6b5
diff --git a/app/(home)/accounts/components/ProfileUploader.tsx b/app/(home)/accounts/components/ProfileUploader.tsx
diff --git a/app/(home)/accounts/page.tsx b/app/(home)/accounts/page.tsx
diff --git a/app/(home)/layout.tsx b/app/(home)/layout.tsx
@@ -8,13 +8,13 @@ export default function MainLayout({ children }: {
 }) {
     return (
         <ProductProvider>
-            <div>
-                <div className='md:px-20 px-5 bg-white'>
-                    <Header />
-                </div>
-                {children}
-                <Footer />
+            <div className="w-full md:px-20 px-5">
+                <Header />
             </div>
+            <div className='md:px-20 px-5 bg-white'>
+            </div>
+            {children}
+            <Footer />
         </ProductProvider>
     )
 }
diff --git a/app/(home)/page.tsx b/app/(home)/page.tsx
@@ -1,12 +1,19 @@
 
 import LandingPage from '@/components/landing-page/landing-page'
 import React from 'react'
+import Head from 'next/head';
+
 
 const Page = () => {
   return (
-    <main className="w-full">
-    <LandingPage />
-    </main>
+    <>
+      <Head>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <main className="w-full">
+        <LandingPage />
+      </main>
+    </>
   )
 }
 

diff --git a/app/(home)/products/[productId]/page.tsx b/app/(home)/products/[productId]/page.tsx
@@ -1,13 +1,9 @@
 
 import PriceCard from '@/components/PriceCard'
-import SubmitButton from '@/components/SubmitButton'
-import { Button } from '@/components/ui/button'
 import Image from 'next/image'
 import React from 'react'
-import ProductSize from './components/ProductSize'
-import RatingStar from '@/components/RatingStar'
-import { getProduct, getProducts } from '@/appwrite/product.actions'
-import ProductCard from './components/ProductCard'
+import { getProduct } from '@/appwrite/product.actions'
+import AddToCartBtn from '@/components/add-to-cart-btn'
 
 interface ProductPageProps {
     params: {
@@ -16,12 +12,33 @@ interface ProductPageProps {
 }
 
 const ProductPage = async ({ params }: ProductPageProps) => {
-    const { productId } = params
+    const { productId } = await params
     const product = await getProduct(productId!)
 
+    if (!product) {
+        throw new Error("Something went wrong")
+    }
+
     return (
-        <div className='py-10 bg-white md:px-20 px-5 flex 2xl:flex-row xl:flex-row lg:flex-col flex-col xl:items-start lg:items-center items-center justify-center'>
-           <ProductCard product={product} />
+        <div className='max-w-6xl grid grid-cols-1 justify-center  gap-10 my-20'>
+            <div className="rounded-md shadow-md p-4 grid grid-cols-[400px,1fr] gap-5 items-start">
+                <div className='w-full shadow-md rounded-md'>
+                    <Image src={`${product!.imageUrl}`} alt={product?.product.name + "image"} width={1000} height={1000} className='object-cover w-full h-full' />
+                </div>
+
+                <div className='w-full'>
+                    <div className='flex flex-col gap-5'>
+                        <h3 className='font-semibold'>{product.product.name}</h3>
+                        <p className='text-sm text-secondary'>{product.product.description}</p>
+
+                        <PriceCard price={product.product.price} striked_price={product.product.strikedPrice} />
+
+                        <div className='flex flex-col justify-end items-end h-52 w-52'>
+                            <AddToCartBtn productId={product.product.$id} />
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
     )
 }

diff --git a/app/(home)/products/components/Products.tsx b/app/(home)/products/components/Products.tsx
@@ -5,6 +5,7 @@ import { generateProductLink } from '@/lib/utils'
 import { ProductsProps } from '@/types'
 import { ArrowRight } from 'lucide-react'
 import React from 'react'
+import NoProduct from './no-product'
 
 
 const Products = ({ products }: {
@@ -26,11 +27,12 @@ const Products = ({ products }: {
         <div className='w-full h-11 px-2 py-1 bg-gray-200 rounded-md flex'>
 
         </div>
-        <div className='grid 2xl:grid-cols-4 xl:grid-cols-3 lg:grid-cols-3 md:grid-cols-3 grid-cols-1 gap-4'>
-          {products?.length === 0 || !products ? (
-            <div>No Products</div>
-          ) : (
-            products!.map(async (product, index) => (
+
+        {products?.length === 0 || !products ? (
+          <NoProduct />
+        ) : (
+          <div className='grid 2xl:grid-cols-4 xl:grid-cols-3 lg:grid-cols-3 md:grid-cols-3 grid-cols-1 gap-4 w-full'>
+            {products!.map(async (product, index) => (
               <ItemsCard
                 key={index}
                 image={product.productImageUrl}
@@ -43,9 +45,10 @@ const Products = ({ products }: {
                 addToCart={true}
                 productId={product.$id}
               />
-            ))
-          )}
-        </div>
+            ))}
+          </div>
+        )}
+
       </div>
     </div>
   )

diff --git a/app/(home)/products/error.tsx b/app/(home)/products/error.tsx
@@ -0,0 +1,24 @@
+"use client"
+import { Button } from '@/components/ui/button'
+import React from 'react'
+
+type ErrorProps = {
+    error: Error & { digest?: string },
+    reset: () => void
+}
+
+const Error = ({ error, reset, }: ErrorProps) => {
+    return (
+        <div className='flex justify-center items-center flex-col space-y-4 h-screen'>
+            <h3 className="text-xl tracking-wide font-semibold">Oops! something went wrong! </h3>
+            <p className='text-xs'>Please click on the button below to try again</p>
+            <Button variant={"ghost"} size={"lg"} className='bg-secondary-green-60 hover:bg-secondary-green-50 rounded-full text-white hover:text-white' onClick={
+                () => reset()
+            }>
+                Try again
+            </Button>
+        </div>
+    )
+}
+
+export default Error
diff --git a/app/(home)/products/page.tsx b/app/(home)/products/page.tsx
@@ -5,8 +5,16 @@ import { Button } from '@/components/ui/button'
 import { ArrowUpDown, ListFilter } from 'lucide-react'
 import { getProducts } from '@/appwrite/product.actions'
 
-const Page = async() => {
-  const products = await getProducts()
+
+type SearchParams = Promise<{ [key: string]: string |  undefined }>
+
+const Page = async (props: {
+  searchParams: SearchParams
+}) => {
+
+  const searchParams = await props.searchParams
+  const products = await getProducts(searchParams?.category)
+
   return (
     <div className='w-full py-10 bg-white md:px-20 px-5'>
       <h2 className="font-semibold text-xl tracking-tighter">All Products</h2>

diff --git a/app/context/product-context.tsx b/app/context/product-context.tsx
@@ -1,6 +1,6 @@
 "use client"
 import { getCart } from "@/appwrite/product.actions"
-import { Actions, ActionType, Cart, ContextProps, State } from "@/types"
+import { Actions, ActionType, ContextProps, State } from "@/types"
 import Image from "next/image"
 import React, { createContext, useContext, useEffect, useReducer, useState } from "react"
 

diff --git a/appwrite/product.actions.ts b/appwrite/product.actions.ts
@@ -6,18 +6,31 @@ import { ID, Query } from "node-appwrite";
 import { revalidatePath } from "next/cache";
 import { cookies } from "next/headers";
 
-const { DATABASE_ID, PRODUCT_ID, BUCKET_ID, CART_ID, USER_COLLECTION_ID } = process.env
+const { DATABASE_ID, PRODUCT_ID, BUCKET_ID, CART_ID, WISHLIST_COLLECTION } = process.env
 
 
-export const getProducts = async () => {
+export const getProducts = async (category?: string) => {
     try {
 
         const { databases } = await createAdminClient()
-        const products = await databases.listDocuments<ProductsProps>(
-            DATABASE_ID!,
-            PRODUCT_ID!
-        )
-        return products.documents
+
+        if (category) {
+            const categoryProducts = await databases.listDocuments(
+                DATABASE_ID!,
+                PRODUCT_ID!,
+                [Query.contains("category", category.toLowerCase())]
+            );
+
+            return categoryProducts.documents
+        } else {
+            const products = await databases.listDocuments<ProductsProps>(
+                DATABASE_ID!,
+                PRODUCT_ID!
+            )
+
+            return products.documents
+        }
+
     } catch (error) {
         console.log(error);
     }
@@ -64,8 +77,8 @@ export const getProduct = async (productId: string) => {
 }
 
 export const searchProducts = async (searchString: string) => {
-
-    const { databases } = await createSessionClient(cookies().get("session")?.value)
+    const cookieStore = await cookies()
+    const { databases } = await createSessionClient(cookieStore.get("session")?.value)
 
     try {
         const result = await databases.listDocuments(
@@ -136,9 +149,10 @@ export const updateProducts = async (productId: string, data: {
 
 // TODO: simplify this apis
 export const getCart = async () => {
-    const userId = cookies().get("userId")?.value
+    const cookieStore = await cookies()
+    const userId = cookieStore.get("userId")?.value
     try {
-        const { databases } = await createSessionClient(cookies().get("session")?.value)
+        const { databases } = await createSessionClient(cookieStore.get("session")?.value)
         const data = await databases.listDocuments(
             DATABASE_ID!,
             CART_ID!,
@@ -154,9 +168,10 @@ export const getCart = async () => {
 }
 
 export const AddProductToCart = async (productId?: string, quantity?: number) => {
-    const userId = cookies().get("userId")?.value
+    const cookieStore = await cookies()
+    const userId = cookieStore.get("userId")?.value
     try {
-        const { databases } = await createSessionClient(cookies().get("session")?.value)
+        const { databases } = await createSessionClient(cookieStore.get("session")?.value)
 
         if (!userId) {
             throw new Error("no-user")
@@ -184,8 +199,9 @@ export const AddProductToCart = async (productId?: string, quantity?: number) =>
 }
 
 export const updateCarts = async (cartId: string, quantity: number) => {
+    const cookieStore = await cookies()
     try {
-        const { databases } = await createSessionClient(cookies().get("session")?.value)
+        const { databases } = await createSessionClient(cookieStore.get("session")?.value)
         await databases.updateDocument(
             DATABASE_ID!,
             CART_ID!,
@@ -203,9 +219,41 @@ export const updateCarts = async (cartId: string, quantity: number) => {
     }
 }
 
+export const addToWishList = async (productId: string, userId: string) => {
+    try {
+        const cookieStore = await cookies()
+
+        const { databases } = await createSessionClient(cookieStore.get("session")?.value)
+
+        await databases.createDocument(
+            DATABASE_ID!,
+            WISHLIST_COLLECTION!,
+            ID.unique(),
+
+            {
+                product: productId,
+                user: userId
+            }
+        )
+
+        const wishLists = await databases.listDocuments(
+            DATABASE_ID!,
+            WISHLIST_COLLECTION!
+        )
+
+        return wishLists.documents
+    } catch (error) {
+        if (error instanceof Error) {
+            console.log(error.message);
+
+        }
+    }
+}
+
 export const deleteCarts = async (cartId: string) => {
+    const cookieStore = await cookies()
     try {
-        const { databases } = await createSessionClient(cookies().get("session")?.value)
+        const { databases } = await createSessionClient(cookieStore.get("session")?.value)
         await databases.deleteDocument(
             DATABASE_ID!,
             CART_ID!,