Fix EntryDetail title

frontend/src/hooks/useEntryDetail.test.tsx

@@ -4,28 +4,38 @@ import type { MockInstance } from "vitest";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { useEntryDetail } from "@/hooks/useEntryDetail";
 import * as UseRoute from "@/hooks/useNavigation";
+import * as UseNavigation from "@/hooks/useNavigation";
 
 vi.mock("swr", () => ({
   default: vi.fn(),
 }));
 
 describe("useEntryDetail", () => {
+  let mockSetOptions: MockInstance;
+  let mockUseNavigation: MockInstance;
   let mockUseRoute: MockInstance;
   let mockUseSWR: MockInstance;
 
   beforeEach(() => {
+    mockSetOptions = vi.fn();
+    mockUseNavigation = vi
+      .spyOn(UseNavigation, "useNavigation")
+      .mockReturnValue({
+        setOptions: mockSetOptions,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      } as any as ReturnType<typeof UseNavigation.useNavigation>);
+    mockUseRoute = vi.spyOn(UseRoute, "useRoute").mockReturnValue({
+      key: "",
+      name: "EntryDetail",
+      params: { date: "2020-01-02" },
+    });
     mockUseSWR = vi.spyOn(Swr, "default").mockReturnValue({
       data: null,
       error: undefined,
       isLoading: true,
       isValidating: false,
       mutate: () => Promise.reject(new Error("mutate is not implemented")),
     });
-    mockUseRoute = vi.spyOn(UseRoute, "useRoute").mockReturnValue({
-      key: "",
-      name: "EntryDetail",
-      params: { date: "2020-01-02" },
-    });
   });
 
   afterEach(() => {
@@ -40,10 +50,19 @@ describe("useEntryDetail", () => {
     const { result } = renderHook(() => useEntryDetail());
     expect(result.current.date).toBe("2020-01-02");
     expect(result.current.entryDetail).toBe(null);
+    expect(mockUseNavigation).toHaveBeenCalledTimes(1);
     expect(mockUseRoute).toHaveBeenCalledTimes(1);
     expect(mockUseSWR).toHaveBeenCalledWith(
       "https://blog.bouzuya.net/2020/01/02.json",
       expect.any(Function),
     );
   });
+
+  it("calls useNavigation setOptions with date", () => {
+    const { result } = renderHook(() => useEntryDetail());
+    expect(result.current.date).toBe("2020-01-02");
+    expect(result.current.entryDetail).toBe(null);
+    expect(mockUseNavigation).toHaveBeenCalledTimes(1);
+    expect(mockSetOptions).toHaveBeenCalledWith({ title: "2020-01-02 " });
+  });
 });

frontend/src/hooks/useEntryDetail.ts

@@ -1,5 +1,6 @@
+import { useEffect } from "react";
 import useSWR from "swr";
-import { useRoute } from "@/hooks/useNavigation";
+import { useNavigation, useRoute } from "@/hooks/useNavigation";
 import type { EntryDetail } from "@/types/EntryDetail";
 
 export function useEntryDetail(): {
@@ -9,11 +10,16 @@ export function useEntryDetail(): {
   const {
     params: { date },
   } = useRoute<"EntryDetail">();
+  const navigation = useNavigation();
 
   const { data: entryDetail } = useSWR<EntryDetail>(
     `https://blog.bouzuya.net/${date.replaceAll("-", "/")}.json`,
     (key: string) => fetch(key).then((res): Promise<EntryDetail> => res.json()),
   );
 
+  useEffect(() => {
+    navigation.setOptions({ title: `${date} ${entryDetail?.title ?? ""}` });
+  }, [date, entryDetail, navigation]);
+
   return { date, entryDetail: entryDetail ?? null };
 }