Feat/map initial design (#2)

* show multiple poi & center seleceted poi

* default export Map & bugfixes

Co-authored-by: Fabian Schmidt <fabian@ds-fs.de>

src/App.tsx

 import React, { useState } from 'react';
-import type { LatLngExpression } from 'leaflet';
-import { TileLayer, MapContainer, Marker, Popup } from 'react-leaflet';
 import './App.css';
 import SidebarListView from './Sidebar/SidebarListView';
 import data from './testData.json';
 import type { PointOfInterest } from './types/PointOfInterest';
 import SidebarSingleView from './Sidebar/SidebarSingleView';
+import Map from './Map/Map';
 
 interface AppProps {}
 
 function App({}: AppProps) {
-  const hamburgCenter: LatLngExpression = [53.550359, 9.986701];
   const [selectedPoi, setSelectedPoi] = useState<null | PointOfInterest>(null);
 
   const handlePoiClick = (id: number) => {
@@ -32,29 +30,7 @@ function App({}: AppProps) {
         <SidebarListView style={{ flex: 1 }} values={data as PointOfInterest[]} onClick={handlePoiClick} />
       )}
 
-      <MapContainer
-        id={'mapid'}
-        className={'h-full w-full'}
-        style={{ flex: 3 }}
-        center={hamburgCenter}
-        zoom={13}
-        scrollWheelZoom={true}
-      >
-        <TileLayer
-          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
-          url="https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}"
-          id="mapbox/streets-v11"
-          tileSize={512}
-          accessToken="pk.eyJ1IjoicHJleWEyayIsImEiOiJja202N2JucGowbGU4MnB1aWtxNGkzMW9jIn0.rVBLRZtohLEgdSLO0nlWng"
-          zoomOffset={-1}
-          maxZoom={18}
-        />
-        <Marker position={hamburgCenter}>
-          <Popup>
-            A pretty CSS3 popup. <br /> Easily customizable.
-          </Popup>
-        </Marker>
-      </MapContainer>
+      <Map values={data as PointOfInterest[]} onSelect={handlePoiClick} selectedEntry={selectedPoi} />
     </div>
   );
 }

src/Map/Map.tsx

+import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet';
+import React from 'react';
+import type { PointOfInterest } from '../types/PointOfInterest';
+import type { LatLngExpression } from 'leaflet';
+import MapViewController from './MapViewController';
+
+interface Props {
+  values: PointOfInterest[];
+  onSelect: (id: number) => void;
+  selectedEntry?: PointOfInterest | null;
+}
+
+const DEFAULT_CENTER: LatLngExpression = [53.550359, 9.986701];
+
+export const Map: React.FC<Props> = (props) => {
+  return (
+    <MapContainer
+      id={'mapid'}
+      className={'h-full w-full'}
+      style={{ flex: 3 }}
+      center={DEFAULT_CENTER}
+      zoom={13}
+      scrollWheelZoom={true}
+    >
+      <TileLayer
+        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+        url="https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}"
+        id="mapbox/streets-v11"
+        tileSize={512}
+        accessToken="pk.eyJ1IjoicHJleWEyayIsImEiOiJja202N2JucGowbGU4MnB1aWtxNGkzMW9jIn0.rVBLRZtohLEgdSLO0nlWng"
+        zoomOffset={-1}
+        maxZoom={18}
+      />
+      <MapViewController center={props.selectedEntry?.latlng ?? DEFAULT_CENTER} zoom={13} />
+      {!!props.selectedEntry && <Marker position={props.selectedEntry.latlng} />}
+      {!props.selectedEntry &&
+        props.values.map((poi) => (
+          <Marker key={poi.id} position={poi.latlng} eventHandlers={{ click: () => props.onSelect(poi.id) }} />
+        ))}
+    </MapContainer>
+  );
+};
+
+export default Map;

src/Map/MapViewController.tsx

+import type { LatLngExpression } from 'leaflet';
+import React, { useEffect } from 'react';
+import { useMap } from 'react-leaflet';
+
+interface Props {
+  center: LatLngExpression;
+  zoom: number;
+}
+
+const MapViewController: React.FC<Props> = ({ center, zoom }) => {
+  const map = useMap();
+
+  useEffect(() => {
+    map.setView(center, zoom);
+  }, [center, zoom]);
+
+  return <></>;
+};
+
+export default MapViewController;