From ba510d57a98625d3d305c5d55d256374789d50d7 Mon Sep 17 00:00:00 2001
From: Ru Chern Chong <ruchern.chong@sgcarstrends.com>
Date: Tue, 19 Nov 2024 13:24:51 +0800
Subject: [PATCH] Refactor brand to make

As recommended and sound more professional
---
 .../[brand] => makes/[make]}/TrendChart.tsx   |  0
 .../[brand] => makes/[make]}/columns.tsx      |  0
 .../{brands/[brand] => makes/[make]}/page.tsx | 36 +++++++++----------
 app/sitemap.ts                                |  2 +-
 components/DataTable.tsx                      |  2 +-
 components/Leaderboard.tsx                    |  2 +-
 constants/index.ts                            |  2 +-
 7 files changed, 22 insertions(+), 22 deletions(-)
 rename app/cars/{brands/[brand] => makes/[make]}/TrendChart.tsx (100%)
 rename app/cars/{brands/[brand] => makes/[make]}/columns.tsx (100%)
 rename app/cars/{brands/[brand] => makes/[make]}/page.tsx (82%)

diff --git a/app/cars/brands/[brand]/TrendChart.tsx b/app/cars/makes/[make]/TrendChart.tsx
similarity index 100%
rename from app/cars/brands/[brand]/TrendChart.tsx
rename to app/cars/makes/[make]/TrendChart.tsx
diff --git a/app/cars/brands/[brand]/columns.tsx b/app/cars/makes/[make]/columns.tsx
similarity index 100%
rename from app/cars/brands/[brand]/columns.tsx
rename to app/cars/makes/[make]/columns.tsx
diff --git a/app/cars/brands/[brand]/page.tsx b/app/cars/makes/[make]/page.tsx
similarity index 82%
rename from app/cars/brands/[brand]/page.tsx
rename to app/cars/makes/[make]/page.tsx
index 90b48c5..84ea015 100644
--- a/app/cars/brands/[brand]/page.tsx
+++ b/app/cars/makes/[make]/page.tsx
@@ -1,5 +1,5 @@
-import { TrendChart } from "@/app/cars/brands/[brand]/TrendChart";
-import { columns } from "@/app/cars/brands/[brand]/columns";
+import { TrendChart } from "@/app/cars/makes/[make]/TrendChart";
+import { columns } from "@/app/cars/makes/[make]/columns";
 import { MakeSelector } from "@/app/components/MakeSelector";
 import { StructuredData } from "@/components/StructuredData";
 import Typography from "@/components/Typography";
@@ -24,14 +24,14 @@ export const generateMetadata = async (props: {
   params: Params;
 }): Promise<Metadata> => {
   const params = await props.params;
-  let { brand } = params;
-  brand = decodeURIComponent(brand);
-  const description = `${brand} historical trend`;
-  const images = `/api/og?title=Historical Trend&make=${brand}`;
-  const canonicalUrl = `/cars/brands/${brand}`;
+  let { make } = params;
+  make = decodeURIComponent(make);
+  const description = `${make} historical trend`;
+  const images = `/api/og?title=Historical Trend&make=${make}`;
+  const canonicalUrl = `/cars/makes/${make}`;
 
   return {
-    title: brand,
+    title: make,
     description,
     openGraph: {
       images,
@@ -51,18 +51,18 @@ export const generateMetadata = async (props: {
 };
 
 export const generateStaticParams = async () => {
-  const brands = await fetchApi<Make[]>(`${API_URL}/make`, {
+  const makes = await fetchApi<Make[]>(`${API_URL}/make`, {
     next: { tags: [RevalidateTags.Cars] },
   });
-  return brands.map((brand) => ({ brand }));
+  return makes.map((make) => ({ make }));
 };
 
-const CarBrandPage = async (props: { params: Params }) => {
+const CarMakePage = async (props: { params: Params }) => {
   const params = await props.params;
-  const { brand } = params;
+  const { make } = params;
 
   const [cars, makes]: [Car[], Make[]] = await Promise.all([
-    await fetchApi<Car[]>(`${API_URL}/make/${brand}`, {
+    await fetchApi<Car[]>(`${API_URL}/make/${make}`, {
       next: { tags: [RevalidateTags.Cars] },
     }),
     await fetchApi<Make[]>(`${API_URL}/cars/makes`, {
@@ -72,13 +72,13 @@ const CarBrandPage = async (props: { params: Params }) => {
 
   const filteredCars = mergeCarData(cars);
 
-  const formattedMake = decodeURIComponent(brand);
+  const formattedMake = decodeURIComponent(make);
   const structuredData: WithContext<Dataset> = {
     "@context": "https://schema.org",
     "@type": "Dataset",
     name: `${formattedMake} Car Registrations in Singapore`,
     description: `Historical trend and monthly breakdown of ${formattedMake} car registrations by fuel type and vehicle type in Singapore`,
-    url: `${SITE_URL}/cars/brands/${brand}`,
+    url: `${SITE_URL}/cars/makes/${make}`,
     // TODO: Suggested by Google
     // temporalCoverage: "2016-06/2024-07",
     variableMeasured: [
@@ -118,8 +118,8 @@ const CarBrandPage = async (props: { params: Params }) => {
       <StructuredData data={structuredData} />
       <div className="flex flex-col gap-y-8">
         <div className="flex flex-col justify-between gap-2 lg:flex-row">
-          <Typography.H1>{decodeURIComponent(brand)}</Typography.H1>
-          <MakeSelector makes={makes} selectedMake={brand} />
+          <Typography.H1>{decodeURIComponent(make)}</Typography.H1>
+          <MakeSelector makes={makes} selectedMake={make} />
         </div>
         <Card>
           <CardHeader>
@@ -167,4 +167,4 @@ const mergeCarData = (cars: Car[]): Omit<Car, "importer_type">[] => {
   return Object.values(mergedData);
 };
 
-export default CarBrandPage;
+export default CarMakePage;
diff --git a/app/sitemap.ts b/app/sitemap.ts
index 278f24f..324b023 100644
--- a/app/sitemap.ts
+++ b/app/sitemap.ts
@@ -20,7 +20,7 @@ const sitemap = async (): Promise<MetadataRoute.Sitemap> => {
       lastModified: new Date(),
     })),
     ...makes.map((make) => ({
-      url: `${SITE_URL}/cars/brands/${make}`,
+      url: `${SITE_URL}/cars/makes/${make}`,
       lastModified: new Date(),
     })),
   ];
diff --git a/components/DataTable.tsx b/components/DataTable.tsx
index b787cb6..740f77f 100644
--- a/components/DataTable.tsx
+++ b/components/DataTable.tsx
@@ -47,7 +47,7 @@ export const DataTable = ({ data }: Props) => {
           data.map(({ make, number }, index) => (
             <TableRow key={make}>
               <TableCell>
-                <Link href={`/cars/brands/${make}`}>{make}</Link>
+                <Link href={`/cars/makes/${make}`}>{make}</Link>
               </TableCell>
               <TableCell>{number}</TableCell>
               <TableCell>
diff --git a/components/Leaderboard.tsx b/components/Leaderboard.tsx
index f662961..88b073e 100644
--- a/components/Leaderboard.tsx
+++ b/components/Leaderboard.tsx
@@ -133,7 +133,7 @@ export const Leaderboard = ({ cars }: LeaderboardProps) => {
                     return (
                       <Link
                         key={make}
-                        href={`/cars/brands/${make}`}
+                        href={`/cars/makes/${make}`}
                         className="group block w-full rounded-lg p-2 transition-colors hover:bg-gray-50"
                       >
                         <div className="space-y-2">
diff --git a/constants/index.ts b/constants/index.ts
index 88704bb..a627edd 100644
--- a/constants/index.ts
+++ b/constants/index.ts
@@ -1,7 +1,7 @@
 export const CARS = {
   TABLE: {
     HEADERS: {
-      MAKE: "Brands",
+      MAKE: "Make",
       COUNT: "Count",
       MARKET_SHARE: "Distribution",
     },