From 09a254b2abc755ad91d08771b682581bf89e63fc Mon Sep 17 00:00:00 2001
From: Ru Chern Chong <ruchern.chong@sgcarstrends.com>
Date: Sat, 9 Nov 2024 18:56:53 +0800
Subject: [PATCH] Update async request APIs for missed pages

---
 app/@breadcrumbs/[...slug]/page.tsx           |  9 +++-----
 app/cars/fuel-types/[fuelType]/page.tsx       | 23 +++++++++++--------
 app/cars/vehicle-types/[vehicleType]/page.tsx | 20 +++++++++-------
 3 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/app/@breadcrumbs/[...slug]/page.tsx b/app/@breadcrumbs/[...slug]/page.tsx
index 8faec0b..fb3bfd2 100644
--- a/app/@breadcrumbs/[...slug]/page.tsx
+++ b/app/@breadcrumbs/[...slug]/page.tsx
@@ -9,11 +9,7 @@ import {
   BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb";
 
-interface Props {
-  params: {
-    slug: string[];
-  };
-}
+type Params = Promise<{ slug: string[] }>;
 
 interface BreadcrumbItem {
   href: string;
@@ -38,7 +34,8 @@ const generateBreadcrumbs = (slug: string[]): BreadcrumbItem[] =>
     isLastItem: index === slug.length - 1,
   }));
 
-const Breadcrumbs = ({ params }: Props) => {
+const Breadcrumbs = async (props: { params: Params }) => {
+  const params = await props.params;
   const breadcrumbs = generateBreadcrumbs(params.slug);
 
   return (
diff --git a/app/cars/fuel-types/[fuelType]/page.tsx b/app/cars/fuel-types/[fuelType]/page.tsx
index 2151f83..b3b9617 100644
--- a/app/cars/fuel-types/[fuelType]/page.tsx
+++ b/app/cars/fuel-types/[fuelType]/page.tsx
@@ -18,15 +18,15 @@ import { mergeCarsByFuelType } from "@/utils/mergeCarsByFuelType";
 import type { Metadata } from "next";
 import type { Dataset, WithContext } from "schema-dts";
 
-interface Props {
-  params: { fuelType: string };
-  searchParams?: { [key: string]: string };
-}
+type Params = Promise<{ fuelType: string }>;
+type SearchParams = Promise<{ [key: string]: string | string[] | undefined }>;
 
-export const generateMetadata = async ({
-  params,
-  searchParams,
-}: Props): Promise<Metadata> => {
+export const generateMetadata = async (props: {
+  params: Params;
+  searchParams: SearchParams;
+}): Promise<Metadata> => {
+  const params = await props.params;
+  const searchParams = await props.searchParams;
   const { fuelType } = params;
   let month = searchParams?.month;
 
@@ -59,7 +59,12 @@ const fuelTypes = ["petrol", "hybrid", "electric", "diesel"];
 export const generateStaticParams = () =>
   fuelTypes.map((fuelType) => ({ fuelType }));
 
-const CarsByFuelTypePage = async ({ params, searchParams }: Props) => {
+const CarsByFuelTypePage = async (props: {
+  params: Params;
+  searchParams: SearchParams;
+}) => {
+  const params = await props.params;
+  const searchParams = await props.searchParams;
   const { fuelType } = params;
 
   const [months, latestMonth]: [Month[], LatestMonth] = await fetchMonths();
diff --git a/app/cars/vehicle-types/[vehicleType]/page.tsx b/app/cars/vehicle-types/[vehicleType]/page.tsx
index d1b0334..737859c 100644
--- a/app/cars/vehicle-types/[vehicleType]/page.tsx
+++ b/app/cars/vehicle-types/[vehicleType]/page.tsx
@@ -18,14 +18,13 @@ import { mergeCarsByVehicleType } from "@/utils/mergeCarsByVehicleType";
 import type { Metadata } from "next";
 import type { Dataset, WithContext } from "schema-dts";
 
-interface Props {
-  params: { vehicleType: string };
-  searchParams?: { [key: string]: string };
-}
+type Params = Promise<{ vehicleType: string }>;
+type SearchParams = Promise<{ [key: string]: string | string[] | undefined }>;
 
-export const generateMetadata = async ({
-  params,
-}: Props): Promise<Metadata> => {
+export const generateMetadata = async (props: {
+  params: Params;
+}): Promise<Metadata> => {
+  const params = await props.params;
   let { vehicleType } = params;
   vehicleType = decodeURIComponent(vehicleType);
   const description = `${capitaliseWords(vehicleType)} historical trends`;
@@ -64,7 +63,12 @@ const vehicleTypes = [
 export const generateStaticParams = () =>
   vehicleTypes.map((vehicleType) => ({ vehicleType }));
 
-const CarsByVehicleTypePage = async ({ params, searchParams }: Props) => {
+const CarsByVehicleTypePage = async (props: {
+  params: Params;
+  searchParams: SearchParams;
+}) => {
+  const params = await props.params;
+  const searchParams = await props.searchParams;
   const { vehicleType } = params;
 
   const [months, latestMonth]: [Month[], LatestMonth] = await fetchMonths();