Fix UTC / timezone in unit tests and in display

src/pages/history/History.tsx

@@ -1,5 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
-import { addHours, format, parseISO } from "date-fns";
+import { format, parseISO } from "date-fns";
 import { useMemo, useState } from "react";
 import { InView } from "react-intersection-observer";
 
@@ -15,6 +15,13 @@ import HistoryItem from "./components/HistoryItem";
 import SearchHeader from "./components/SearchHeader";
 import TimelineView from "./components/TimelineView";
 
+const formatHourDisplay = (dateStr: string, hourStr: string) => {
+  const fullDateTime = `${dateStr}T${hourStr}:00:00Z`;
+  const date = new Date(fullDateTime);
+  // Format just the hour in local time
+  return format(date, "HH:00");
+};
+
 const History = () => {
   const [searchQuery, setSearchQuery] = useState("");
   const { debouncedValue: debouncedSearchQuery } = useDebounce(
@@ -64,35 +71,42 @@ const History = () => {
                 <h2 className="mt-10 text-lg font-bold">
                   {format(parseISO(date), "EEEE, yyyy-MM-dd")}
                 </h2>
-                {Array.from(hours.entries()).map(([hour, items]) => (
-                  <InView
-                    key={`${date}_${hour}`}
-                    as="div"
-                    onChange={(inView) => {
-                      if (inView) {
-                        setActiveHour(hour);
-                        setActiveDay(date);
-                      }
-                    }}
-                  >
-                    <div className="flex items-center justify-between gap-4">
-                      <h3 className="my-4 font-medium text-black/80">
-                        {hour}:00
-                      </h3>
-                      <button
-                        onClick={() => {
-                          alert("TODO: Delete the history range");
-                        }}
-                        className="rounded-md bg-gray-50 px-1.5 py-0.5 text-xs border border-gray-200 duration-150 hover:border-black hover:bg-black hover:text-white focus-visible:ring-2 ring-offset-2 ring-gray-300 outline-none"
-                      >
-                        Delete
-                      </button>
-                    </div>
-                    {items.map((item) => (
-                      <HistoryItem key={item.id} {...item} />
-                    ))}
-                  </InView>
-                ))}
+                {Array.from(hours.entries()).map(([hour, items]) => {
+                  const setAsActive = () => {
+                    setActiveDay(date);
+                    setActiveHour(hour);
+                  };
+
+                  return (
+                    <InView
+                      key={`${date}_${hour}`}
+                      as="div"
+                      onMouseEnter={setAsActive}
+                      onChange={(inView) => {
+                        if (inView) {
+                          setAsActive();
+                        }
+                      }}
+                    >
+                      <div className="flex items-center justify-between gap-4">
+                        <h3 className="my-4 font-medium text-black/80">
+                          {formatHourDisplay(date, hour)}
+                        </h3>
+                        <button
+                          onClick={() => {
+                            alert("TODO: Delete the history range");
+                          }}
+                          className="rounded-md border border-gray-200 bg-gray-50 px-1.5 py-0.5 text-xs outline-none ring-gray-300 ring-offset-2 duration-150 hover:border-black hover:bg-black hover:text-white focus-visible:ring-2"
+                        >
+                          Delete
+                        </button>
+                      </div>
+                      {items.map((item) => (
+                        <HistoryItem key={item.id} {...item} />
+                      ))}
+                    </InView>
+                  );
+                })}
               </section>
             ))}
           </div>

src/pages/history/components/HistoryItem.tsx

@@ -6,6 +6,7 @@ import { getFavicon } from "@/src/utils";
 
 const formatTime = (timestamp: number) => {
   const date = new Date(timestamp);
+
   return format(date, "HH:mm:ss");
 };
 

src/services/history/organiseHistory.test.ts

@@ -16,9 +16,7 @@ describe("organiseHistory", () => {
       { id: "2", lastVisitTime: new Date("2024-10-18T00:00:00Z").getTime() },
       { id: "3", lastVisitTime: new Date("2024-10-19T00:00:00Z").getTime() },
     ];
-
     const result = organiseHistory(history);
-
     expect(result.size).toBe(3);
     expect(result.has("2024-10-19")).toBe(true);
     expect(result.has("2024-10-18")).toBe(true);
@@ -32,17 +30,15 @@ describe("organiseHistory", () => {
       { id: "3", lastVisitTime: new Date("2024-10-17T02:00:00Z").getTime() },
       { id: "4", lastVisitTime: new Date("2024-10-17T02:34:00Z").getTime() },
     ];
-
     const result = organiseHistory(history);
-
     expect(result.size).toBe(1);
     expect(result.get("2024-10-17")?.size).toBe(3);
 
     const hours = result.get("2024-10-17");
 
+    expect(hours?.has("00")).toBe(true);
+    expect(hours?.has("01")).toBe(true);
     expect(hours?.has("02")).toBe(true);
-    expect(hours?.has("03")).toBe(true);
-    expect(hours?.has("04")).toBe(true);
-    expect(hours?.get("04")?.length).toBe(2);
+    expect(hours?.get("02")?.length).toBe(2);
   });
 });

src/services/history/organiseHistory.ts

@@ -8,7 +8,7 @@ export const organiseHistory = (history: HistoryItem[]): OrganisedHistory => {
   const grouped = history.reduce<OrganisedHistory>((acc, item) => {
     const date = new Date(item.lastVisitTime || 0);
     const [dateString] = date.toISOString().split("T");
-    const hourString = date.getHours().toString().padStart(2, "0");
+    const hourString = date.getUTCHours().toString().padStart(2, "0");
 
     if (!acc.has(dateString)) {
       acc.set(dateString, new Map());