Merge pull request #304 from zigzagdev/chore/create-language-context

feat:Create LanguageContext to eliminate prop drilling for locale switching

Author: zigzagdev

…ts__/to-world-heritage-detail-vm-test.ts …ts__/to-world-heritage-detail-vm.test.tsclient/src/app/features/heritages/mappers/__tests__/to-world-heritage-detail-vm-test.ts renamed to client/src/app/features/heritages/mappers/__tests__/to-world-heritage-detail-vm.test.ts client/src/app/features/heritages/mappers/__tests__/to-world-heritage-detail-vm-test.ts renamed to client/src/app/features/heritages/mappers/__tests__/to-world-heritage-detail-vm.test.ts

@@ -53,7 +53,7 @@ const baseDto = (
 });
 
 describe("toWorldHeritageDetailVm", () => {
-  it("maps base fields and attaches sorted image VMs", () => {
+  it("en: maps base fields and attaches sorted image VMs", () => {
     const dto = baseDto({
       images: [
         img({
@@ -68,13 +68,15 @@ describe("toWorldHeritageDetailVm", () => {
       ],
     });
 
-    const vm: WorldHeritageDetailVm = toWorldHeritageDetailVm(dto);
+    const vm: WorldHeritageDetailVm = toWorldHeritageDetailVm(dto, "en");
 
     expect(vm.id).toBe(dto.id);
-    expect(vm.title).toBe(dto.official_name);
+    expect(vm.title).toBe(dto.name);
     expect(vm.country).toBe(dto.country);
     expect(vm.countryNameJp).toBe(dto.country_name_jp);
     expect(vm.region).toBe(dto.region);
+    expect(vm.displayDescription).toBe(dto.short_description);
+    expect(vm.displaySubName).toBeNull();
 
     // detail
     expect(vm.primaryStatePartyCode).toBe("JPN");
@@ -97,12 +99,23 @@ describe("toWorldHeritageDetailVm", () => {
     expect(vm.images[1].alt).toBe("custom alt 2");
   });
 
+  it("ja: title falls back to heritage_name_jp and displaySubName carries the English name", () => {
+    const dto = baseDto({ images: [] });
+
+    const vm = toWorldHeritageDetailVm(dto, "ja");
+
+    expect(vm.title).toBe(dto.heritage_name_jp);
+    expect(vm.displaySubName).toBe(dto.name);
+    expect(vm.displayDescription).toBe(dto.short_description_jp);
+    expect(vm.country).toBe(dto.country_name_jp);
+  });
+
   it("is stable when images is empty array", () => {
     const dto = baseDto({ images: [] });
 
-    const vm = toWorldHeritageDetailVm(dto);
+    const vm = toWorldHeritageDetailVm(dto, "en");
 
     expect(vm.images).toEqual([]);
-    expect(vm.title).toBe(dto.official_name);
+    expect(vm.title).toBe(dto.name);
   });
 });

client/src/app/features/heritages/mappers/__tests__/to-world-heritage-vm.test.ts

@@ -28,8 +28,8 @@ const base: ApiWorldHeritageDto = {
 };
 
 describe("toWorldHeritageVm", () => {
-  it("maps core fields + derived values correctly (DTO shape: thumbnail string)", () => {
-    const vm = toWorldHeritageVm(base);
+  it("ja: maps core fields + derived values using Japanese labels", () => {
+    const vm = toWorldHeritageVm(base, "ja");
 
     expect(vm).toMatchObject({
       id: 663,
@@ -54,6 +54,7 @@ describe("toWorldHeritageVm", () => {
       criteriaText: "ix, x",
       title: "白神山地",
       subtitle: "日本 · Asia",
+      displayDescription: "ダミー",
       areaText: "442 ha",
       bufferText: "320 ha",
       statePartyCodes: ["日本"],
@@ -63,48 +64,68 @@ describe("toWorldHeritageVm", () => {
     });
 
     expect(vm.criteria).toStrictEqual(["ix", "x"]);
+    // 英名 (Shirakami-Sanchi) は日本語タイトル (白神山地) と異なるので併記対象
+    expect(vm.displaySubName).toBe("Shirakami-Sanchi");
   });
 
-  it("if official_name is empty, uses name as title", () => {
-    const vm = toWorldHeritageVm({ ...base, official_name: "" });
+  it("en: title/country/description fall back to English fields", () => {
+    const vm = toWorldHeritageVm(base, "en");
+
+    expect(vm.title).toBe("Shirakami-Sanchi");
+    expect(vm.country).toBe("Japan");
+    expect(vm.subtitle).toBe("Japan · Asia");
+    expect(vm.displayDescription).toBe("desc");
+    expect(vm.displaySubName).toBeNull();
+  });
+
+  it("ja: if official_name is empty, falls back to heritage_name_jp for title", () => {
+    const vm = toWorldHeritageVm({ ...base, official_name: "" }, "ja");
     expect(vm.title).toBe("白神山地");
   });
 
+  it("ja: if Japanese description is missing, falls back to English short_description", () => {
+    const vm = toWorldHeritageVm({ ...base, short_description_jp: null }, "ja");
+    expect(vm.displayDescription).toBe("desc");
+  });
+
   it("when area/buffer are null, text becomes —", () => {
-    const vm = toWorldHeritageVm({
-      ...base,
-      area_hectares: null,
-      buffer_zone_hectares: null,
-    });
+    const vm = toWorldHeritageVm(
+      {
+        ...base,
+        area_hectares: null,
+        buffer_zone_hectares: null,
+      },
+      "ja",
+    );
 
     expect(vm.areaText).toBe("—");
     expect(vm.bufferText).toBe("—");
   });
 
   it("when thumbnail is null, thumbnailUrl is null", () => {
-    const vm = toWorldHeritageVm({ ...base, thumbnail: null });
+    const vm = toWorldHeritageVm({ ...base, thumbnail: null }, "ja");
     expect(vm.thumbnailUrl).toBeNull();
   });
 
   it("input dto is immutable (criteria not mutated)", () => {
     const dto: ApiWorldHeritageDto = { ...base, criteria: ["x", "ix", "ix"] };
     const snapshot = [...dto.criteria];
 
-    const vm = toWorldHeritageVm(dto);
+    const vm = toWorldHeritageVm(dto, "ja");
 
     expect(dto.criteria).toStrictEqual(snapshot);
     expect(vm.criteria).toStrictEqual(["ix", "x"]);
   });
 
   it("unesco_site_url can be null (mapper should not crash)", () => {
-    const vm = toWorldHeritageVm({ ...base, unesco_site_url: null });
+    const vm = toWorldHeritageVm({ ...base, unesco_site_url: null }, "ja");
     expect(vm.unescoSiteUrl).toBeNull();
   });
 });
 
 describe("toWorldHeritageListVm", () => {
   it("maps dto array into view model array", () => {
-    const vms = toWorldHeritageListVm([base, { ...base, id: 661 }]);
+    const vms = toWorldHeritageListVm([base, { ...base, id: 661 }], "ja");
     expect(vms).toHaveLength(2);
     expect(vms[0].id).toBe(663);
     expect(vms[1].id).toBe(661);

client/src/app/features/heritages/mappers/to-world-heritage-detail-vm.ts

@@ -5,9 +5,13 @@ import type {
   WorldHeritageImageVm,
   WorldHeritageVm,
 } from "../../../../domain/types.ts";
+import type { Locale } from "../../../../domain/criteria.ts";
 import { toWorldHeritageVm } from "./to-world-heritage-vm.ts";
 
-export function toWorldHeritageDetailVm(dto: ApiWorldHeritageDetailDto): WorldHeritageDetailVm {
+export function toWorldHeritageDetailVm(
+  dto: ApiWorldHeritageDetailDto,
+  locale: Locale,
+): WorldHeritageDetailVm {
   const listDto = {
     id: dto.id,
     official_name: dto.official_name,
@@ -25,16 +29,15 @@ export function toWorldHeritageDetailVm(dto: ApiWorldHeritageDetailDto): WorldHe
     area_hectares: dto.area_hectares,
     buffer_zone_hectares: dto.buffer_zone_hectares,
     short_description: dto.short_description,
+    short_description_jp: dto.short_description_jp,
     unesco_site_url: dto.unesco_site_url,
     state_party: dto.state_party,
     state_party_codes: dto.state_party_codes,
     state_parties_meta: dto.state_parties_meta,
     thumbnail: dto.thumbnail_url,
   } satisfies import("../../../../domain/types.ts").ApiWorldHeritageDto;
 
-  // Ensure the reshaped object satisfies ApiWorldHeritageDto at compile time
-
-  const base: WorldHeritageVm = toWorldHeritageVm(listDto);
+  const base: WorldHeritageVm = toWorldHeritageVm(listDto, locale);
 
   const images: WorldHeritageImageVm[] = dto.images
     .slice()

client/src/app/features/heritages/mappers/to-world-heritage-vm.ts

@@ -3,6 +3,7 @@ import {
   type WorldHeritageVm,
   type CriteriaCode,
 } from "../../../../domain/types.ts";
+import type { Locale } from "../../../../domain/criteria.ts";
 import { statePartyLabels } from "@features/constants/state-party-labels.ts";
 import { CRITERIA } from "../../../../domain/types.ts";
 
@@ -19,14 +20,33 @@ const normalizeCriteria = (values: readonly (string | CriteriaCode)[]): Criteria
 const fmtHa = (value: number | null): string =>
   value == null ? "—" : `${Number(value).toLocaleString("en-CA")} ha`;
 
-const titleOf = (data: ApiWorldHeritageDto): string =>
-  data.heritage_name_jp || data.official_name || data.name;
-
-const countryLabelOf = (data: ApiWorldHeritageDto): string | null =>
-  data.country_name_jp || data.country || null;
+const titleOf = (data: ApiWorldHeritageDto, locale: Locale): string =>
+  locale === "ja"
+    ? data.heritage_name_jp || data.official_name || data.name
+    : data.name || data.official_name || data.heritage_name_jp;
+
+const countryLabelOf = (data: ApiWorldHeritageDto, locale: Locale): string | null =>
+  locale === "ja"
+    ? data.country_name_jp || data.country || null
+    : data.country || data.country_name_jp || null;
+
+const subtitleOf = (data: ApiWorldHeritageDto, locale: Locale): string =>
+  [countryLabelOf(data, locale), data.region].filter(Boolean).join(" · ");
+
+// ja の時だけ、日本語名の脇に併記する英名を返す（一致や不在なら null）
+const subNameOf = (data: ApiWorldHeritageDto, locale: Locale): string | null => {
+  if (locale !== "ja") return null;
+  if (!data.heritage_name_jp || !data.name) return null;
+  if (data.heritage_name_jp === data.name) return null;
+  return data.name;
+};
 
-const subtitleOf = (data: ApiWorldHeritageDto): string =>
-  [countryLabelOf(data), data.region].filter(Boolean).join(" · ");
+const descriptionOf = (data: ApiWorldHeritageDto, locale: Locale): string => {
+  if (locale === "ja") {
+    return data.short_description_jp || data.short_description || "";
+  }
+  return data.short_description || "";
+};
 
 const toStatePartyLabelsJp = (codes: readonly string[]): string[] =>
   codes.map((code) => statePartyLabels[code]).filter((label): label is string => Boolean(label));
@@ -49,7 +69,7 @@ const normalizeStatePartiesMeta = (
   );
 };
 
-export function toWorldHeritageVm(data: ApiWorldHeritageDto): WorldHeritageVm {
+export function toWorldHeritageVm(data: ApiWorldHeritageDto, locale: Locale): WorldHeritageVm {
   const criteriaCodes = normalizeCriteria(data.criteria);
   const statePartyCodesRaw = data.state_party_codes ?? [];
   const statePartyLabelsJp = toStatePartyLabelsJp(statePartyCodesRaw);
@@ -66,7 +86,7 @@ export function toWorldHeritageVm(data: ApiWorldHeritageDto): WorldHeritageVm {
     name: data.name,
     heritageNameJp: data.heritage_name_jp,
 
-    country: data.country_name_jp,
+    country: countryLabelOf(data, locale) ?? "",
     countryNameJp: data.country_name_jp,
     region: data.region,
     stateParty,
@@ -86,8 +106,10 @@ export function toWorldHeritageVm(data: ApiWorldHeritageDto): WorldHeritageVm {
     statePartiesMeta: normalizeStatePartiesMeta(data.state_parties_meta),
     primaryStatePartyCode: null,
 
-    title: titleOf(data),
-    subtitle: subtitleOf(data),
+    title: titleOf(data, locale),
+    subtitle: subtitleOf(data, locale),
+    displaySubName: subNameOf(data, locale),
+    displayDescription: descriptionOf(data, locale),
     areaText: fmtHa(data.area_hectares),
     bufferText: fmtHa(data.buffer_zone_hectares),
     criteriaText: criteriaCodes.join(", "),
@@ -97,5 +119,7 @@ export function toWorldHeritageVm(data: ApiWorldHeritageDto): WorldHeritageVm {
   };
 }
 
-export const toWorldHeritageListVm = (list: ApiWorldHeritageDto[]): WorldHeritageVm[] =>
-  list.map(toWorldHeritageVm);
+export const toWorldHeritageListVm = (
+  list: ApiWorldHeritageDto[],
+  locale: Locale,
+): WorldHeritageVm[] => list.map((data) => toWorldHeritageVm(data, locale));

client/src/app/features/search/components/SearchResultsPage.tsx

@@ -8,7 +8,7 @@ import { Pagination } from "@features/top/components/Pagination.tsx";
 import { BreadcrumbList } from "@shared/components/BreadcrumbList.tsx";
 import { SearchResultMapComponent } from "@features/search/components/SearchResultMapComponent.tsx";
 
-export type SearchResultsPageProps = {
+type Props = {
   header?: ReactNode;
   items: WorldHeritageVm[];
   pagination: SearchResultsPagination | null;
@@ -30,7 +30,7 @@ export default function SearchResultsPage({
   errorMessage,
   onPageChange,
   onBackToAllSites,
-}: SearchResultsPageProps) {
+}: Props) {
   return (
     <main className="mx-auto max-w-7xl px-4 py-12">
       <div className="sticky top-0 z-20 -mx-4 border-b border-zinc-200 bg-white/95 px-4 py-3 backdrop-blur">