From ce1980bca03fb8c164f92f50dcc0d7bf73333835 Mon Sep 17 00:00:00 2001 From: Muttakin Islam Hasib <muttakinislamhasib@gmail.com> Date: Thu, 22 Feb 2024 13:16:06 +0600 Subject: [PATCH] Update API logging and add product showcase component --- apps/web/next.config.js | 5 ++++ apps/web/src/api/index.ts | 8 +++--- apps/web/src/app/(public)/page.tsx | 15 +++++++++-- apps/web/src/app/error.tsx | 9 +++++++ apps/web/src/components/index.ts | 1 + apps/web/src/components/product/index.tsx | 2 +- apps/web/src/components/showcase/index.ts | 1 + .../components/showcase/product.showcase.tsx | 27 +++++++++++++++++++ 8 files changed, 61 insertions(+), 7 deletions(-) create mode 100644 apps/web/src/app/error.tsx create mode 100644 apps/web/src/components/showcase/index.ts create mode 100644 apps/web/src/components/showcase/product.showcase.tsx diff --git a/apps/web/next.config.js b/apps/web/next.config.js index e793678..153f25e 100644 --- a/apps/web/next.config.js +++ b/apps/web/next.config.js @@ -16,6 +16,11 @@ const nextConfig = { }, ], }, + logging: { + fetches: { + fullUrl: true, + }, + }, }; module.exports = nextConfig; diff --git a/apps/web/src/api/index.ts b/apps/web/src/api/index.ts index b62ab4f..d3d56c8 100644 --- a/apps/web/src/api/index.ts +++ b/apps/web/src/api/index.ts @@ -19,18 +19,18 @@ api.interceptors.response.use( return response.data; }, async (error) => { - if (error.response.data.message) { - if (isArray(error.response.data.message)) { + if (error.response?.data?.message) { + if (isArray(error.response?.data?.message)) { error.response.data.message.forEach((message: string) => toast.error(capitalize(message)) ); } } - if (error.response.status === 401 || error.response.status === 403) { + if (error.response?.status === 401 || error.response?.status === 403) { // window.location.reload() } - return Promise.reject(error.response.data); + return Promise.reject(error.response?.data); } ); diff --git a/apps/web/src/app/(public)/page.tsx b/apps/web/src/app/(public)/page.tsx index abdb3cc..9a3a93b 100644 --- a/apps/web/src/app/(public)/page.tsx +++ b/apps/web/src/app/(public)/page.tsx @@ -1,10 +1,21 @@ -import { Slideshow } from "@/components"; +import { baseURL } from "@/api"; +import { ProductShowCase, Slideshow } from "@/components"; +import { PRODUCTS } from "@/constants"; +import { IProduct } from "@/types"; import React from "react"; -const HomePage = () => { +const getProducts = async (): Promise<IProduct[]> => { + const response = await fetch(baseURL + PRODUCTS + "?"); + console.log("🚀 ~ getProducts ~ baseURL:", baseURL); + return await response.json(); +}; + +const HomePage = async () => { + const products = await getProducts(); return ( <React.Fragment> <Slideshow /> + <ProductShowCase title="Popular Product" {...{ products }} /> </React.Fragment> ); }; diff --git a/apps/web/src/app/error.tsx b/apps/web/src/app/error.tsx new file mode 100644 index 0000000..0e00b93 --- /dev/null +++ b/apps/web/src/app/error.tsx @@ -0,0 +1,9 @@ +"use client"; + +import React from "react"; + +const ErrorPage = () => { + return <div>ErrorPage</div>; +}; + +export default ErrorPage; diff --git a/apps/web/src/components/index.ts b/apps/web/src/components/index.ts index 09b5304..02e0e9d 100644 --- a/apps/web/src/components/index.ts +++ b/apps/web/src/components/index.ts @@ -8,3 +8,4 @@ export * from "./loader"; export * from "./ui"; export * from "./breadcrumb"; export * from "./product"; +export * from "./showcase"; diff --git a/apps/web/src/components/product/index.tsx b/apps/web/src/components/product/index.tsx index 5093b91..aba701c 100644 --- a/apps/web/src/components/product/index.tsx +++ b/apps/web/src/components/product/index.tsx @@ -13,7 +13,7 @@ interface Props { export const ProductCard = memo(({ product }: Props) => { return ( - <div className="w-[calc((100%-60px)/4)] shadow-box bg-white rounded-sm relative group flex flex-col"> + <div className="w-[calc((100%-40px)/3)] xl:w-[calc((100%-60px)/4)] shadow-box bg-white rounded-sm relative group flex flex-col"> <div className="absolute top-0 right-0 z-50 flex flex-col overflow-hidden"> <button type="button" diff --git a/apps/web/src/components/showcase/index.ts b/apps/web/src/components/showcase/index.ts new file mode 100644 index 0000000..4319132 --- /dev/null +++ b/apps/web/src/components/showcase/index.ts @@ -0,0 +1 @@ +export * from "./product.showcase"; diff --git a/apps/web/src/components/showcase/product.showcase.tsx b/apps/web/src/components/showcase/product.showcase.tsx new file mode 100644 index 0000000..3f5e936 --- /dev/null +++ b/apps/web/src/components/showcase/product.showcase.tsx @@ -0,0 +1,27 @@ +import { IProduct } from "@/types"; +import React from "react"; +import { ProductCard } from ".."; + +type Props = { + title: string; + products: IProduct[]; +}; + +export const ProductShowCase = (props: Props) => { + const { title, products } = props; + + return ( + <div className="bg-white py-16"> + <div className="container space-y-5"> + <div className="flex items-center justify-between pb-2 border-b-2 gap-5 border-gray-100"> + <h4 className="text-xl font-bold">{title}</h4> + </div> + <div className="flex flex-wrap"> + {products?.map((product) => ( + <ProductCard key={product.id} {...{ product }} /> + ))} + </div> + </div> + </div> + ); +};