Merge pull request #273 from zigzagdev/feat/pin-map-into-search-result-page

Feat/pin map into search result page

Author: zigzagdev

client/package-lock.json

@@ -21,8 +21,10 @@
     "@emotion/styled": "^11.14.1",
     "@mui/icons-material": "7.3.7",
     "@mui/material": "^7.3.7",
+    "leaflet": "^1.9.4",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
+    "react-leaflet": "^5.0.0",
     "react-router-dom": "^7.9.5",
     "vitest": "^4.0.8"
   },
@@ -31,6 +33,7 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@types/jest": "^29.5.14",
+    "@types/leaflet": "^1.9.21",
     "@types/node": "^24.6.0",
     "@types/react": "^19.1.16",
     "@types/react-dom": "^19.1.9",

client/package.json

@@ -0,0 +1,10 @@
+import type { StudyRegion } from "../../../domain/types.ts";
+
+export const REGION_CENTRES: Record<StudyRegion, [number, number]> = {
+  Africa: [8.7832, 34.5085],
+  Asia: [34.0479, 100.6197],
+  Europe: [54.526, 15.2551],
+  "North America": [40.4637, -86.6735],
+  "South America": [-8.7832, -55.4915],
+  Oceania: [-25.2744, 133.7751],
+};

client/src/app/features/constants/region-centres.ts

@@ -35,7 +35,7 @@ describe("toWorldHeritageVm", () => {
       officialName: "Shirakami-Sanchi",
       name: "Shirakami-Sanchi",
       heritageNameJp: "白神山地",
-      country: "Japan",
+      country: "日本",
       countryNameJp: "日本",
       region: "Asia",
       stateParty: "JPN",

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

@@ -1,7 +1,7 @@
-import type {
-  ApiWorldHeritageDto,
-  WorldHeritageVm,
-  CriteriaCode,
+import {
+  type ApiWorldHeritageDto,
+  type WorldHeritageVm,
+  type CriteriaCode,
 } from "../../../../domain/types.ts";
 import { statePartyLabels } from "@features/constants/state-party-labels.ts";
 import { CRITERIA } from "../../../../domain/types.ts";
@@ -66,7 +66,7 @@ export function toWorldHeritageVm(data: ApiWorldHeritageDto): WorldHeritageVm {
     name: data.name,
     heritageNameJp: data.heritage_name_jp,
 
-    country: data.country,
+    country: data.country_name_jp,
     countryNameJp: data.country_name_jp,
     region: data.region,
     stateParty,

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

@@ -0,0 +1,98 @@
+import { describe, it, expect, beforeEach, jest } from "@jest/globals";
+import { createRegionCountApi } from "./region-count-api.ts";
+import type { RegionCount } from "../../../../domain/types.ts";
+
+type MockResponse = Pick<Response, "ok" | "status" | "json">;
+
+let fetchSpy: jest.MockedFunction<typeof fetch>;
+
+const API_BASE = "http://localhost:8700";
+const ENDPOINT = `${API_BASE}/api/v1/heritages/region-count`;
+
+const makeOkResponse = (body: unknown): MockResponse => ({
+  ok: true,
+  status: 200,
+  json: async () => body,
+});
+
+const makeNgResponse = (status: number): MockResponse => ({
+  ok: false,
+  status,
+  json: async () => ({}),
+});
+
+const makeRegionCountResponse = (data: RegionCount[]) => ({
+  status: "success",
+  data,
+});
+
+const MOCK_REGION_COUNTS: RegionCount[] = [
+  { region: "Africa", count: 92 },
+  { region: "Asia", count: 263 },
+  { region: "Europe", count: 542 },
+  { region: "North America", count: 87 },
+  { region: "South America", count: 103 },
+  { region: "Oceania", count: 35 },
+];
+
+describe("createRegionCountApi", () => {
+  let api: ReturnType<typeof createRegionCountApi>;
+
+  beforeEach(() => {
+    fetchSpy = jest.fn() as jest.MockedFunction<typeof fetch>;
+    api = createRegionCountApi({ apiBase: API_BASE, fetchImpl: fetchSpy });
+  });
+
+  describe("fetchRegionCount", () => {
+    it("calls the correct endpoint", async () => {
+      fetchSpy.mockResolvedValue(
+        makeOkResponse(makeRegionCountResponse(MOCK_REGION_COUNTS)) as Response,
+      );
+
+      await api.fetchRegionCount();
+
+      expect(fetchSpy).toHaveBeenCalledWith(
+        ENDPOINT,
+        expect.objectContaining({
+          headers: expect.objectContaining({ Accept: "application/json" }),
+        }),
+      );
+    });
+
+    it("returns RegionCount[] when status is success", async () => {
+      fetchSpy.mockResolvedValue(
+        makeOkResponse(makeRegionCountResponse(MOCK_REGION_COUNTS)) as Response,
+      );
+
+      const result = await api.fetchRegionCount();
+
+      expect(result).toEqual(MOCK_REGION_COUNTS);
+    });
+
+    it("passes signal when provided", async () => {
+      fetchSpy.mockResolvedValue(
+        makeOkResponse(makeRegionCountResponse(MOCK_REGION_COUNTS)) as Response,
+      );
+
+      const abortController = new AbortController();
+      await api.fetchRegionCount({ signal: abortController.signal });
+
+      expect(fetchSpy).toHaveBeenCalledWith(
+        ENDPOINT,
+        expect.objectContaining({ signal: abortController.signal }),
+      );
+    });
+
+    it("throws on HTTP error", async () => {
+      fetchSpy.mockResolvedValue(makeNgResponse(500) as Response);
+
+      await expect(api.fetchRegionCount()).rejects.toThrow("HTTP 500");
+    });
+
+    it("throws when API status is not success", async () => {
+      fetchSpy.mockResolvedValue(makeOkResponse({ status: "error", data: [] }) as Response);
+
+      await expect(api.fetchRegionCount()).rejects.toThrow("API status is not success: error");
+    });
+  });
+});

client/src/app/features/map/apis/index.test.ts

@@ -0,0 +1,11 @@
+import { createRegionCountApi } from "./region-count-api";
+
+const apiBase = import.meta.env.VITE_API_BASE_URL;
+
+if (!apiBase) {
+  throw new Error("VITE_API_BASE_URL is not set");
+}
+
+const regionCountApi = createRegionCountApi({ apiBase });
+
+export const fetchRegionCount = regionCountApi.fetchRegionCount;

client/src/app/features/map/apis/index.ts

@@ -0,0 +1,43 @@
+import type { RegionCount } from "../../../../domain/types.ts";
+
+export type RegionCountApiDeps = {
+  apiBase: string;
+  fetchImpl?: typeof fetch;
+};
+
+type RegionCountResponse = {
+  status: string;
+  data: RegionCount[];
+};
+
+const normalizeApiBase = (apiBase: string): string => {
+  return apiBase.replace(/\/+$/, "");
+};
+
+export const createRegionCountApi = ({ apiBase, fetchImpl = fetch }: RegionCountApiDeps) => {
+  const normalizedApiBase = normalizeApiBase(apiBase);
+  const endpoint = `${normalizedApiBase}/api/v1/heritages/region-count`;
+
+  return {
+    async fetchRegionCount(init?: RequestInit): Promise<RegionCount[]> {
+      const res = await fetchImpl(endpoint, {
+        ...init,
+        headers: {
+          Accept: "application/json",
+          ...(init?.headers ?? {}),
+        },
+      });
+
+      if (!res.ok) {
+        throw new Error(`HTTP ${res.status}`);
+      }
+
+      const json = (await res.json()) as RegionCountResponse;
+      if (json.status !== "success") {
+        throw new Error(`API status is not success: ${json.status}`);
+      }
+
+      return json.data;
+    },
+  };
+};