Merge branch 'main' of https://github.com/sgcarstrends/web

sgcarstrends · Sep 22, 2024 · 5650752 · 5650752
2 parents 121234a + d28817f
commit 5650752
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 13 deletions.
diff --git a/app/cars/[type]/page.tsx b/app/cars/[type]/page.tsx
@@ -2,6 +2,7 @@ import { Suspense } from "react";
 import Link from "next/link";
 import { TrendChart } from "@/app/cars/[type]/TrendChart";
 import { DataTable } from "@/components/DataTable";
+import { LinkWithParams } from "@/components/LinkWithParams";
 import { MonthSelector } from "@/components/MonthSelector";
 import { StructuredData } from "@/components/StructuredData";
 import Typography from "@/components/Typography";
@@ -167,15 +168,13 @@ const CarsByFuelTypePage = async ({ params, searchParams }: Props) => {
         </div>
         <Tabs defaultValue={type}>
           <TabsList>
-            {Object.entries(tabItems).map(([title, href]) => {
-              return (
-                <Link key={title} href={href}>
-                  <TabsTrigger value={title}>
-                    {capitaliseWords(title)}
-                  </TabsTrigger>
-                </Link>
-              );
-            })}
+            {Object.entries(tabItems).map(([title, href]) => (
+              <LinkWithParams key={title} href={href}>
+                <TabsTrigger value={title}>
+                  {capitaliseWords(title)}
+                </TabsTrigger>
+              </LinkWithParams>
+            ))}
           </TabsList>
         </Tabs>
         <div className="grid grid-cols-1 gap-4">

diff --git a/app/vehicle-type/[type]/page.tsx b/app/vehicle-type/[type]/page.tsx
@@ -2,6 +2,7 @@ import { Suspense } from "react";
 import Link from "next/link";
 import { TrendChart } from "@/app/cars/[type]/TrendChart";
 import { DataTable } from "@/components/DataTable";
+import { LinkWithParams } from "@/components/LinkWithParams";
 import { MonthSelector } from "@/components/MonthSelector";
 import { StructuredData } from "@/components/StructuredData";
 import Typography from "@/components/Typography";
@@ -65,7 +66,7 @@ const tabItems: Record<string, string> = {
   "multi-purpose vehicle": "/vehicle-type/multi-purpose vehicle",
   "station-wagon": "/vehicle-type/station-wagon",
   "sports utility vehicle": "/vehicle-type/sports utility vehicle",
-  "coupe/ convertible": "/vehicle-type/coupe%2F convertible",
+  "coupe/convertible": "/vehicle-type/coupe%2Fconvertible",
 };
 
 export const generateStaticParams = () =>
@@ -172,11 +173,11 @@ const CarsByVehicleTypePage = async ({ params, searchParams }: Props) => {
             <TabsList>
               {Object.entries(tabItems).map(([title, href]) => {
                 return (
-                  <Link key={title} href={href}>
+                  <LinkWithParams key={title} href={href}>
                     <TabsTrigger value={title}>
                       {capitaliseWords(title)}
                     </TabsTrigger>
-                  </Link>
+                  </LinkWithParams>
                 );
               })}
             </TabsList>

diff --git a/components/LinkWithParams.tsx b/components/LinkWithParams.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import type { PropsWithChildren } from "react";
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
+
+interface Props extends PropsWithChildren {
+  href: string;
+}
+
+export const LinkWithParams = ({ href, children }: Props) => {
+  const params = useSearchParams();
+  const query = params.toString();
+
+  return <Link href={{ pathname: href, query }}>{children}</Link>;
+};
diff --git a/config/index.ts b/config/index.ts
@@ -96,7 +96,7 @@ export const VEHICLE_TYPE_LINKS: LinkItem[] = [
   },
   {
     label: "Coupe/Convertible",
-    href: `/vehicle-type/${encodeURIComponent("coupe/ convertible")}`,
+    href: `/vehicle-type/${encodeURIComponent("coupe/convertible")}`,
   },
 ].sort((a, b) => a.label.localeCompare(b.label));