Merge pull request #47 from ruchernchong/46-display-details-by-make

46 display details by make

app/components/DataTable.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import Link from "next/link";
 import { Progress } from "@/app/components/Progress";
 import {
   Table,
@@ -68,7 +69,9 @@ export const DataTable = ({ data, fuelType }: DataTableProps) => {
           return (
             <TableRow key={item._id}>
               <TableCell>{MEDAL_MAPPING[serial] || serial}</TableCell>
-              <TableCell>{item.make}</TableCell>
+              <TableCell>
+                <Link href={`/make/${item.make}`}>{item.make}</Link>
+              </TableCell>
               <TableCell>{item.number}</TableCell>
               <TableCell>
                 <Progress value={getWeight(item.number)}>

app/make/[make]/page.tsx

@@ -0,0 +1,80 @@
+import { API_URL } from "@/config";
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { fetchApi } from "@/utils/fetchApi";
+import { capitaliseWords } from "@/utils/capitaliseWords";
+import type { Car } from "@/types";
+import Link from "next/link";
+
+interface Props {
+  params: { make: string };
+  searchParams: { month: string };
+}
+
+const CarMakePage = async ({ params, searchParams }: Props) => {
+  const { make } = params;
+  const { month } = searchParams;
+
+  const cars = await fetchApi<Car[]>(`${API_URL}/make/${make}?month=${month}`);
+
+  const excludeHeaders = ["_id", "make", "importer_type"];
+  const tableHeaders = Object.keys(cars[0])
+    .filter((item) => !excludeHeaders.includes(item))
+    .map((header) => capitaliseWords(header));
+
+  return (
+    <section className="flex flex-col gap-y-8">
+      <div className="flex items-end gap-x-2">
+        <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
+          {decodeURIComponent(make)}
+        </h1>
+        <p className="text-xl text-muted-foreground">Registrations</p>
+      </div>
+      <Table>
+        <TableCaption>Historical trends for {make}</TableCaption>
+        <TableHeader>
+          <TableRow>
+            <TableHead>#</TableHead>
+            {tableHeaders.map((header) => (
+              <TableHead key={header}>{header}</TableHead>
+            ))}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {cars.map((car, index) => {
+            const serial = index + 1;
+            return (
+              <TableRow key={car._id}>
+                <TableCell>{serial}</TableCell>
+                <TableCell>{car.month}</TableCell>
+                <TableCell>
+                  <Link
+                    href={`/cars/${car.fuel_type.toLowerCase()}?month=${car.month}`}
+                    className="hover:underline"
+                  >
+                    {car.fuel_type}
+                  </Link>
+                </TableCell>
+                <TableCell>{car.vehicle_type}</TableCell>
+                <TableCell>{car.number}</TableCell>
+              </TableRow>
+            );
+          })}
+        </TableBody>
+        <TableFooter>
+          <TableRow></TableRow>
+        </TableFooter>
+      </Table>
+    </section>
+  );
+};
+
+export default CarMakePage;

jest.config.js → jest.config.ts

@@ -1,10 +1,12 @@
-const nextJest = require("next/jest");
+import type { Config } from "jest";
+import nextJest from "next/jest";
 
 // Providing the path to your Next.js app which will enable loading next.config.js and .env files
 const createJestConfig = nextJest({ dir: "./" });
 
 // Any custom config you want to pass to Jest
-const customJestConfig = {
+const customJestConfig: Config = {
+  collectCoverage: true,
   setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
 };
 

package.json

@@ -67,6 +67,7 @@
     "prettier-plugin-tailwindcss": "^0.5.6",
     "sst": "^2.32.2",
     "tailwindcss": "^3",
+    "ts-node": "^10.9.2",
     "typescript": "^5"
   }
 }