Merge pull request #154 from sgcarstrends/hotfix/152-handle-non-valid…

…-fuel-types

Fix pages with invalid data

app/cars/[type]/page.tsx

@@ -1,6 +1,7 @@
 import { Suspense } from "react";
 import Link from "next/link";
 import { CarOverviewTrends } from "@/app/components/CarOverviewTrends";
+import { EmptyData } from "@/components/EmptyData";
 import { LinkWithParams } from "@/components/LinkWithParams";
 import { MonthSelector } from "@/components/MonthSelector";
 import { StructuredData } from "@/components/StructuredData";
@@ -95,6 +96,11 @@ const CarsByFuelTypePage = async ({ params, searchParams }: Props) => {
       next: { tags: [RevalidateTags.Cars] },
     },
   );
+
+  if (cars.length === 0) {
+    return <EmptyData />;
+  }
+
   const filteredCars = mergeCarsByFuelType(cars);
 
   const structuredData: WithContext<Dataset> = {

app/vehicle-type/[type]/page.tsx

@@ -1,6 +1,7 @@
 import { Suspense } from "react";
 import Link from "next/link";
 import { CarOverviewTrends } from "@/app/components/CarOverviewTrends";
+import { EmptyData } from "@/components/EmptyData";
 import { LinkWithParams } from "@/components/LinkWithParams";
 import { MonthSelector } from "@/components/MonthSelector";
 import { StructuredData } from "@/components/StructuredData";
@@ -95,6 +96,10 @@ const CarsByVehicleTypePage = async ({ params, searchParams }: Props) => {
     },
   );
 
+  if (cars.length === 0) {
+    return <EmptyData />;
+  }
+
   const filteredCars = mergeCarsByVehicleType(cars);
 
   const structuredData: WithContext<Dataset> = {

components/EmptyData.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { usePathname, useRouter } from "next/navigation";
+import { AlertCircle, Home, RotateCcw } from "lucide-react";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+
+export const EmptyData = () => {
+  const router = useRouter();
+  const pathname = usePathname();
+
+  return (
+    <div className="flex flex-col items-center justify-center gap-4">
+      <Alert variant="destructive">
+        <AlertCircle className="h-4 w-4" />
+        <AlertTitle>Error</AlertTitle>
+        <AlertDescription>
+          The requested page <code>&quot;{pathname}&quot;</code> does not exist
+          or is not available.
+        </AlertDescription>
+      </Alert>
+      <div className="flex gap-2">
+        <Button variant="outline" onClick={() => router.push("/")}>
+          <Home className="mr-2 h-4 w-4" />
+          Go Home
+        </Button>
+        <Button variant="outline" onClick={() => router.back()}>
+          <RotateCcw className="mr-2 h-4 w-4" />
+          Go Back
+        </Button>
+      </div>
+    </div>
+  );
+};

components/ui/alert.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sgcarstrends/web",
   "description": "Statistics for car trends in Singapore. Data provided by Land Transport Authority (LTA)",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "license": "MIT",
   "scripts": {
     "build": "next build",