Revert "store data client side"

JaylyDev · JaylyDev · commit 39c0195965fb · 2025-08-28T14:40:53.000+08:00
This reverts commit eabfa53.
diff --git a/public/api/hk-tunnels-tolls/public_holidays.json b/public/api/hk-tunnels-tolls/public_holidays.json
diff --git a/public/api/hk-tunnels-tolls/tolls.json b/public/api/hk-tunnels-tolls/tolls.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.4.0",
+  "version": "0.3.7",
   "tunnels": {
     "western": {
       "name": "西隧",
@@ -278,20 +278,27 @@
   "vehicleTypes": {
     "privateCar": {
       "name": "私家車",
-      "hasTimeVaryingToll": true
+      "hasTimeVaryingToll": true,
+      "fixedTolls": {
+        "tates_cairn": 20
+      }
     },
     "motorcycle": {
       "name": "電單車",
       "hasTimeVaryingToll": true,
-      "multiplier": 0.4
+      "multiplier": 0.4,
+      "fixedTolls": {
+        "tates_cairn": 15
+      }
     },
     "taxi": {
       "name": "的士",
       "hasTimeVaryingToll": false,
       "fixedTolls": {
         "western": 25,
         "cross_eastern": 25,
-        "tai_lam": 28
+        "tai_lam": 28,
+        "tates_cairn": 20
       }
     },
     "commercial": {
diff --git a/src/app/hk-tunnels-tolls/page.tsx b/src/app/hk-tunnels-tolls/page.tsx
@@ -2,12 +2,10 @@
 
 import "@/styles/components/card.css";
 import { StatsCollection, SiteFooter, SiteHeader } from "@/components/SiteFormat";
-import { useState, useEffect, Suspense } from "react";
+import { useState, useEffect, memo, Suspense } from "react";
 import { Button, HeroUIProvider } from "@heroui/react";
 import { ThemeProvider } from "next-themes";
 import { useSearchParams } from "next/navigation";
-import * as PublicHolidayData from "./data/public_holidays.json";
-import * as tollData from "./data/tolls.json";
 
 interface NumberRange {
   range: number[];
@@ -34,18 +32,16 @@ interface HKTunnel {
 }
 
 interface VehicleType {
-  name: VehicleTypeIdentifier | string;
+  name: VehicleTypeIdentifier;
   hasTimeVaryingToll: boolean;
   fixedTolls?: Record<HKTunnelIdentifier, number | undefined>;
   multiplier?: number;
   description?: string;
 }
 
-type DateTimeRange = [string, { value: string }];
-
 interface PublicHoliday {
-  dtstart: DateTimeRange;
-  dtend: DateTimeRange;
+  dtstart: [string, { value: string }];
+  dtend: [string, { value: string }];
   summary: string;
   uid: string;
 }
@@ -69,6 +65,7 @@ interface TollCardProps {
   tunnel: HKTunnel;
   vehicle: VehicleTypeIdentifier;
   priceAlert?: string;
+  tollData: TollData | null;
   currentDate: Date;
   isPublicHoliday: boolean;
 }
@@ -105,16 +102,19 @@ function timeToMinutes(time: string): number {
 
 // Function to get current toll for a specific tunnel
 function getCurrentTollForTunnel(
+  tollData: TollData | null,
   selectedVehicle: VehicleTypeIdentifier,
   tunnelKey: HKTunnelIdentifier,
   currentTime: Date,
   isPublicHoliday: boolean
 ): string {
+  if (!tollData) return "載入中...";
+
   const vehicle = tollData.vehicleTypes[selectedVehicle];
   const tunnel = tollData.tunnels[tunnelKey];
 
   // Fixed toll vehicles
-  if ("fixedTolls" in vehicle && tunnelKey in vehicle.fixedTolls) {
+  if (vehicle.fixedTolls && tunnelKey in vehicle.fixedTolls) {
     return `$${vehicle.fixedTolls[tunnelKey]}`;
   }
 
@@ -140,17 +140,18 @@ function getCurrentTollForTunnel(
       if (typeof tollForTunnel === "object" && "range" in tollForTunnel) {
         // Transition period - show range
         const [min, max] = tollForTunnel.range;
-        if ("multiplier" in vehicle) {
+        if (vehicle.multiplier) {
           const minMoto = Math.round(min * vehicle.multiplier * 10) / 10;
           const maxMoto = Math.round(max * vehicle.multiplier * 10) / 10;
           return `$${minMoto} - $${maxMoto}`;
         }
         return `$${min} - $${max}`;
-      } // Apply multiplier for motorcycles
-      else if ("multiplier" in vehicle) {
-        const motorcycleToll = Math.round(tollForTunnel * vehicle.multiplier * 10) / 10;
-        return `$${motorcycleToll}`;
       } else {
+        // Apply multiplier for motorcycles
+        if (vehicle.multiplier) {
+          const motorcycleToll = Math.round(tollForTunnel * vehicle.multiplier * 10) / 10;
+          return `$${motorcycleToll}`;
+        }
         return `$${tollForTunnel}`;
       }
     }
@@ -160,15 +161,15 @@ function getCurrentTollForTunnel(
 }
 
 function HKTollCard(props: TollCardProps): JSX.Element {
-  const { tunnelKey, tunnel, priceAlert, vehicle, currentDate, isPublicHoliday } = props;
+  const { tunnelKey, tunnel, priceAlert, vehicle, tollData, currentDate, isPublicHoliday } = props;
 
   return (
     <div key={tunnelKey} className="border-b border-black dark:border-white pb-1 last:border-b-0">
       <div className="flex flex-col sm:flex-row sm:justify-between sm:items-start sm:gap-2">
         <span className="text-3xl md:text-2xl font-medium text-center sm:text-left">{tunnel.name}</span>
         <div className="text-center sm:text-right">
           <p className="text-5xl py-1 md:py-2 font-bold text-green-600">
-            {getCurrentTollForTunnel(vehicle, tunnelKey, currentDate, isPublicHoliday)}
+            {getCurrentTollForTunnel(tollData, vehicle, tunnelKey, currentDate, isPublicHoliday)}
           </p>
           {priceAlert && (
             <span className="text-[1.45rem] md:text-lg bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200 px-3 rounded-md font-medium inline-block text-center">
@@ -184,18 +185,28 @@ function HKTollCard(props: TollCardProps): JSX.Element {
 function HKTunnelsTollsApp(): JSX.Element {
   const [selectedVehicle, setSelectedVehicle] = useState<VehicleTypeIdentifier>("privateCar");
   const [currentTime, setCurrentTime] = useState<Date>(new Date());
+  const [tollData, setTollData] = useState<TollData | null>(null);
+  const [publicHolidays, setPublicHolidays] = useState<Set<string>>(new Set());
   const [isPublicHoliday, setIsPublicHoliday] = useState<boolean>(false);
   const searchParams = useSearchParams();
 
   // Load public holidays data
-  const publicHolidays = new Set<string>();
-  if (PublicHolidayData.vcalendar && PublicHolidayData.vcalendar[0] && PublicHolidayData.vcalendar[0].vevent) {
-    PublicHolidayData.vcalendar[0].vevent.forEach((event) => {
-      // Extract date from dtstart format "20240101"
-      const dateStr = event.dtstart[0] as string;
-      publicHolidays.add(dateStr);
-    });
-  }
+  useEffect(() => {
+    fetch("/api/hk-tunnels-tolls/public_holidays.json")
+      .then((response) => response.json())
+      .then((data: PublicHolidayData) => {
+        const holidays = new Set<string>();
+        if (data.vcalendar && data.vcalendar[0] && data.vcalendar[0].vevent) {
+          data.vcalendar[0].vevent.forEach((event) => {
+            // Extract date from dtstart format "20240101"
+            const dateStr = event.dtstart[0];
+            holidays.add(dateStr);
+          });
+        }
+        setPublicHolidays(holidays);
+      })
+      .catch((error) => console.error("載入公眾假期資料失敗:", error));
+  }, []);
 
   // Check if current date is a public holiday
   useEffect(() => {
@@ -204,6 +215,14 @@ function HKTunnelsTollsApp(): JSX.Element {
     setIsPublicHoliday(publicHolidays.has(dateStr));
   }, [currentTime, publicHolidays]);
 
+  // Load toll data
+  useEffect(() => {
+    fetch("/api/hk-tunnels-tolls/tolls.json")
+      .then((response) => response.json())
+      .then((data) => setTollData(data))
+      .catch((error) => console.error("載入收費資料失敗:", error));
+  }, []);
+
   // Update current time every minute
   useEffect(() => {
     const timer = setInterval(() => {
@@ -276,18 +295,20 @@ function HKTunnelsTollsApp(): JSX.Element {
 
       if (typeof nextToll === "object" && "range" in nextToll) {
         const [min, max] = nextToll.range;
-        if ("multiplier" in vehicle) {
+        if (vehicle.multiplier) {
           const minMoto = Math.round(min * vehicle.multiplier * 10) / 10;
           const maxMoto = Math.round(max * vehicle.multiplier * 10) / 10;
           nextTollDisplay = `$${minMoto} - $${maxMoto}`;
         } else {
           nextTollDisplay = `$${min} - $${max}`;
         }
-      } else if ("multiplier" in vehicle) {
-        const motorcycleToll = Math.round(nextToll * vehicle.multiplier * 10) / 10;
-        nextTollDisplay = `$${motorcycleToll}`;
       } else {
-        nextTollDisplay = `$${nextToll}`;
+        if (vehicle.multiplier) {
+          const motorcycleToll = Math.round(nextToll * vehicle.multiplier * 10) / 10;
+          nextTollDisplay = `$${motorcycleToll}`;
+        } else {
+          nextTollDisplay = `$${nextToll}`;
+        }
       }
 
       return `${nextPeriod.timeRange.split(" - ")[0]} 變為 ${nextTollDisplay}`;
@@ -311,7 +332,7 @@ function HKTunnelsTollsApp(): JSX.Element {
       {/* Current Toll Display */}
       <div className="card-base-min mb-4">
         <h3 className="text-xl md:text-lg font-semibold">
-          目前收費 - {vehicleType.name} {"description" in vehicleType ? `(${vehicleType.description})` : ""}
+          目前收費 - {vehicleType.name} {vehicleType.description ? `(${vehicleType.description})` : ""}
         </h3>
         <div>
           <div className="space-y-2">
@@ -328,9 +349,10 @@ function HKTunnelsTollsApp(): JSX.Element {
                 <HKTollCard
                   key={key}
                   tunnelKey={key}
-                  tunnel={tunnel as HKTunnel}
+                  tunnel={tunnel}
                   priceAlert={priceAlert}
                   vehicle={selectedVehicle}
+                  tollData={tollData}
                   currentDate={hkTime}
                   isPublicHoliday={isPublicHoliday}
                 />
@@ -362,9 +384,7 @@ function HKTunnelsTollsApp(): JSX.Element {
       {/* Cross-Harbour Tunnels Time Periods Table */}
       <div className="card-base-min mb-4">
         <h3 className="text-2xl md:text-lg font-semibold border-b">
-          過海隧道收費時段表 (
-          <span suppressHydrationWarning>{hkTime.getDay() === 0 || isPublicHoliday ? "星期日及公眾假期" : "平日"}</span>
-          )
+          過海隧道收費時段表 ({hkTime.getDay() === 0 || isPublicHoliday ? "星期日及公眾假期" : "平日"})
         </h3>
         <div className="overflow-x-auto">
           <table className="w-full">
@@ -437,12 +457,12 @@ function HKTunnelsTollsApp(): JSX.Element {
                     <td className="px-6 py-4 whitespace-nowrap">{period.timeRange}</td>
                     <td className="px-6 py-4 whitespace-nowrap">
                       {vehicle.hasTimeVaryingToll
-                        ? formatToll("western", period, "multiplier" in vehicle ? vehicle.multiplier : undefined)
+                        ? formatToll("western", period, vehicle.multiplier)
                         : getFixedToll("western", vehicle)}
                     </td>
                     <td className="px-6 py-4 whitespace-nowrap">
                       {vehicle.hasTimeVaryingToll
-                        ? formatToll("cross_eastern", period, "multiplier" in vehicle ? vehicle.multiplier : undefined)
+                        ? formatToll("cross_eastern", period, vehicle.multiplier)
                         : getFixedToll("cross_eastern", vehicle)}
                     </td>
                   </tr>
@@ -455,9 +475,7 @@ function HKTunnelsTollsApp(): JSX.Element {
       {/* Tai Lam Tunnel Time Periods Table */}
       <div className="card-base-min mb-8">
         <h3 className="text-2xl md:text-lg font-semibold border-b">
-          大欖隧道收費時段表 (
-          <span suppressHydrationWarning>{hkTime.getDay() === 0 || isPublicHoliday ? "星期日及公眾假期" : "平日"}</span>
-          )
+          大欖隧道收費時段表 ({hkTime.getDay() === 0 || isPublicHoliday ? "星期日及公眾假期" : "平日"})
         </h3>
         <div className="overflow-x-auto">
           <table className="w-full">
@@ -520,9 +538,7 @@ function HKTunnelsTollsApp(): JSX.Element {
                     <td className="px-6 py-4 whitespace-nowrap font-medium">{period.name}</td>
                     <td className="px-6 py-4 whitespace-nowrap">{period.timeRange}</td>
                     <td className="px-6 py-4 whitespace-nowrap">
-                      {vehicle.hasTimeVaryingToll
-                        ? formatToll(period, "multiplier" in vehicle ? vehicle.multiplier : undefined)
-                        : getFixedToll(vehicle)}
+                      {vehicle.hasTimeVaryingToll ? formatToll(period, vehicle.multiplier) : getFixedToll(vehicle)}
                     </td>
                   </tr>
                 ));
@@ -559,17 +575,15 @@ function HKTunnelsTollsApp(): JSX.Element {
         </p>
         <p>
           最後更新：
-          <span suppressHydrationWarning>
-            {hkTime.toLocaleString("zh-HK", {
-              year: "numeric",
-              month: "2-digit",
-              day: "2-digit",
-              hour: "2-digit",
-              minute: "2-digit",
-              second: "2-digit",
-              hour12: false,
-            })}
-          </span>
+          {hkTime.toLocaleString("zh-HK", {
+            year: "numeric",
+            month: "2-digit",
+            day: "2-digit",
+            hour: "2-digit",
+            minute: "2-digit",
+            second: "2-digit",
+            hour12: false,
+          })}
         </p>
       </div>
     </div>
