diff --git a/TODO.md b/TODO.md index 9beca34..edda55c 100644 --- a/TODO.md +++ b/TODO.md @@ -25,6 +25,10 @@ - Remake Product Form Radio with HeadlessUI RadioGroup - Remake ReactHotToast with HeadlessUI Popover +# Next 15 updates + +- Do I still need to use useEffect to stop SSR? + # Finalizations - Manual A11y testing diff --git a/app/(routes)/product/[product]/page.tsx b/app/(routes)/product/[product]/page.tsx index 105fe69..64d0182 100644 --- a/app/(routes)/product/[product]/page.tsx +++ b/app/(routes)/product/[product]/page.tsx @@ -6,15 +6,16 @@ import { Container } from '@/components/ui/container'; import { getProductPage } from '@/lib/api'; export type ProductPageProps = { - params: { + params: Promise<{ product: string; - }; - searchParams?: { + }>; + searchParams?: Promise<{ [key: string]: string | string[] | undefined; - }; + }>; }; -export async function generateMetadata({ params }: { params: { product: string } }): Promise { +export async function generateMetadata(props: { params: Promise<{ product: string }> }): Promise { + const params = await props.params; const product = await getProductPage({ name: params.product }); return { @@ -32,24 +33,13 @@ export async function generateMetadata({ params }: { params: { product: string } } export default async function ProductPage(props: ProductPageProps) { - const { color: selectedColor, size: selectedSize } = props.searchParams as { [key: string]: string }; - const product = await getProductPage({ name: props.params.product }); + const { color: selectedColor, size: selectedSize } = (await props.searchParams) as { [key: string]: string }; + const product = await getProductPage({ name: (await props.params).product }); return (
-
+
diff --git a/app/(routes)/search/[category]/page.tsx b/app/(routes)/search/[category]/page.tsx index bbc0527..e6e82ac 100644 --- a/app/(routes)/search/[category]/page.tsx +++ b/app/(routes)/search/[category]/page.tsx @@ -5,15 +5,16 @@ import { getCategory, getCategoryPage } from '@/lib/api'; import { sorting } from '@/lib/constants'; export type CategoryPageProps = { - params: { + params: Promise<{ category: string; - }; - searchParams?: { + }>; + searchParams?: Promise<{ [key: string]: string | string[] | undefined; - }; + }>; }; -export async function generateMetadata({ params }: { params: { category: string } }): Promise { +export async function generateMetadata(props: CategoryPageProps): Promise { + const params = await props.params; const category = await getCategory({ name: params.category }); return { title: category.name, @@ -23,11 +24,12 @@ export async function generateMetadata({ params }: { params: { category: string export default async function CategoryPage(props: CategoryPageProps) { const { params, searchParams } = props; - const { sort } = searchParams as { [key: string]: string }; + const { category: categoryParam } = await params; + const { sort } = (await searchParams) as { [key: string]: string }; const selectedSort = sorting.find((item) => item.slug === sort); const category = await getCategoryPage({ - name: params.category, + name: categoryParam, sortKey: selectedSort?.sortKey, order: selectedSort?.order, }); diff --git a/app/(routes)/search/page.tsx b/app/(routes)/search/page.tsx index 502ee13..c6f450d 100644 --- a/app/(routes)/search/page.tsx +++ b/app/(routes)/search/page.tsx @@ -8,12 +8,13 @@ export const metadata = { }; export type SearchPageProps = { - searchParams?: { + searchParams?: Promise<{ [key: string]: string | string[] | undefined; - }; + }>; }; -export default async function SearchPage({ searchParams }: SearchPageProps) { +export default async function SearchPage(props: SearchPageProps) { + const searchParams = await props.searchParams; const { q: searchValue, sort } = searchParams as { [key: string]: string }; const selectedSort = sorting.find((item) => item.slug === sort); diff --git a/app/layout.tsx b/app/layout.tsx index 57d1f40..f2e86fe 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -49,7 +49,7 @@ export const metadata: Metadata = { export default async function RootLayout({ children }: { children: React.ReactNode }) { return ( - + diff --git a/components/cart/add-to-cart/index.tsx b/components/cart/add-to-cart/index.tsx index 3e894ae..4555790 100644 --- a/components/cart/add-to-cart/index.tsx +++ b/components/cart/add-to-cart/index.tsx @@ -54,21 +54,7 @@ export function AddToCart(props: AddToCartProps) { return ( diff --git a/components/cart/cart-checkout-button/index.tsx b/components/cart/cart-checkout-button/index.tsx index 0f3d354..e7418b1 100644 --- a/components/cart/cart-checkout-button/index.tsx +++ b/components/cart/cart-checkout-button/index.tsx @@ -16,18 +16,7 @@ export function CartCheckoutButton() { }, []); if (!isMounted) { - return ( -
- ); + return
; } const handleCheckout = () => { @@ -40,19 +29,7 @@ export function CartCheckoutButton() { return ( diff --git a/components/layout/search/product-list/product-image.tsx b/components/layout/search/product-list/product-image.tsx index 126377e..cab6806 100644 --- a/components/layout/search/product-list/product-image.tsx +++ b/components/layout/search/product-list/product-image.tsx @@ -8,13 +8,7 @@ export function ProductImage({ product }: { product: ProductWithColor }) { const featuredImage = colors[0]; return ( -
+
{featuredImage?.altText inv.colorId === newColor?.id && inv.sizeId === newSize?.id); return ( -
-

+
+

{product.name}

diff --git a/components/product/radio.tsx b/components/product/radio.tsx index 7aa7168..31dd8d1 100644 --- a/components/product/radio.tsx +++ b/components/product/radio.tsx @@ -25,21 +25,7 @@ export function Radio(props: RadioProps) { const isChecked = searchParams.get(props.name) === props.value; return ( -