Merge pull request #272 from zigzagdev/feat/insert-result-mapping-into-page

feat: insert component into Result Page

Author: zigzagdev

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

@@ -1,7 +1,9 @@
-import { MapContainer, TileLayer, CircleMarker, Tooltip } from "react-leaflet";
+import { MapContainer, TileLayer, CircleMarker, Tooltip, useMap } from "react-leaflet";
 import { useNavigate } from "react-router-dom";
 import type { WorldHeritageVm } from "../../../../domain/types.ts";
 import "leaflet/dist/leaflet.css";
+import { useEffect } from "react";
+import type { LatLngBoundsExpression } from "leaflet";
 
 type Props = {
   items: WorldHeritageVm[];
@@ -18,6 +20,23 @@ const getColor = (category: string): string => CATEGORY_COLOR[category] ?? "#636
 const isValidCoordinate = (lat: number | null, lng: number | null): lat is number =>
   lat !== null && lng !== null && lat !== 0 && lng !== 0;
 
+function FitBounds({ items }: { items: WorldHeritageVm[] }) {
+  const map = useMap();
+
+  useEffect(() => {
+    if (items.length === 0) return;
+
+    const bounds: LatLngBoundsExpression = items.map((item) => [
+      item.latitude as number,
+      item.longitude as number,
+    ]);
+
+    map.fitBounds(bounds, { padding: [40, 40] });
+  }, [items, map]);
+
+  return null;
+}
+
 export function SearchResultMapComponent({ items }: Props) {
   const navigate = useNavigate();
 
@@ -28,33 +47,36 @@ export function SearchResultMapComponent({ items }: Props) {
   }
 
   return (
-    <MapContainer
-      center={[20, 0]}
-      zoom={2}
-      style={{ height: "360px", width: "100%" }}
-      scrollWheelZoom={false}
-    >
-      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
-      {validItems.map((item) => (
-        <CircleMarker
-          key={item.id}
-          center={[item.latitude as number, item.longitude as number]}
-          radius={7}
-          pathOptions={{
-            color: getColor(item.category),
-            fillColor: getColor(item.category),
-            fillOpacity: 0.8,
-          }}
-          eventHandlers={{
-            click: () => navigate(`/heritages/${item.id}`),
-          }}
-        >
-          <Tooltip>
-            <div className="text-xs font-semibold">{item.name}</div>
-            <div className="text-xs text-zinc-500">{item.category}</div>
-          </Tooltip>
-        </CircleMarker>
-      ))}
-    </MapContainer>
+    <div className={"my-8"}>
+      <MapContainer
+        center={[20, 0]}
+        zoom={2}
+        style={{ height: "360px", width: "100%" }}
+        scrollWheelZoom={false}
+      >
+        <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
+        <FitBounds items={validItems} />
+        {validItems.map((item) => (
+          <CircleMarker
+            key={item.id}
+            center={[item.latitude as number, item.longitude as number]}
+            radius={7}
+            pathOptions={{
+              color: getColor(item.category),
+              fillColor: getColor(item.category),
+              fillOpacity: 0.8,
+            }}
+            eventHandlers={{
+              click: () => navigate(`/heritages/${item.id}`),
+            }}
+          >
+            <Tooltip>
+              <div className="text-xs font-semibold">{item.name}</div>
+              <div className="text-xs text-zinc-500">{item.category}</div>
+            </Tooltip>
+          </CircleMarker>
+        ))}
+      </MapContainer>
+    </div>
   );
 }

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

@@ -3,6 +3,7 @@ import type { WorldHeritageVm } from "../../../../domain/types";
 import { HeritageCard } from "@features/top/cards/HeritageCard";
 import { Pagination } from "@features/top/components/Pagination.tsx";
 import { BreadcrumbList } from "@shared/components/BreadcrumbList.tsx";
+import { SearchResultMapComponent } from "@features/search/components/SearchResultMapComponent.tsx";
 
 type SearchResultsPagination = {
   current_page: number;
@@ -13,7 +14,7 @@ type SearchResultsPagination = {
 
 export type SearchResultsPageProps = {
   header?: ReactNode;
-  items: ReadonlyArray<WorldHeritageVm>;
+  items: WorldHeritageVm[];
   pagination: SearchResultsPagination | null;
   rangeText: string;
   onClickItem?: (id: number) => void;
@@ -109,6 +110,8 @@ export default function SearchResultsPage({
       <div className="pt-8">
         <BreadcrumbList />
 
+        <SearchResultMapComponent items={items} />
+
         {items.length === 0 ? (
           <div className="py-20 text-center">
             <p className="text-sm text-zinc-600">No sites found.</p>