Refactoring (in progress) to put most of the logic in Redux reducers.

src/components/map/map.tsx

@@ -1,72 +1,35 @@
-import react, { useMemo, useEffect } from 'react';
+import react, { useMemo, useEffect, Fragment } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import { mapActions } from '../../store/map';
 import _ from 'lodash';
-import { MapState, mapActions } from '../../store/map';
-import { slippyActions } from '../../store/slippy';
-import { lat2tile, lon2tile } from '../../lib/geo';
-import Tile from './tile';
 
-import '../../theme/map.css';
-
-export const tileSize = 256;
+import Layer from '../slippy/layer';
+import Slippy from '../slippy/slippy';
+import TiledMap from './tiled-map';
 
 const Map: react.FC<{}> = (props: {}) => {
-  const dispatch = useDispatch();
-
-  const mapState = useSelector((state: { map: MapState }) => state.map);
-
-  console.log(`mapState: ${JSON.stringify(mapState)}`);
-
-  const resizeHandler = () => {
-    dispatch(mapActions.resize());
-  };
-  const debouncedResizeHandler = useMemo(
-    () => _.debounce(resizeHandler, 500),
-    []
-  );
-
-  useEffect(() => {
-    window.addEventListener('resize', debouncedResizeHandler);
-  }, []);
-
-  const nbTilesY = _.ceil(mapState.viewport.height / tileSize) + 3;
-  const nbTilesX = _.ceil(mapState.viewport.width / tileSize) + 3;
-  const [tileCenterY, reminderY] = lat2tile(
-    mapState.scope.center.lat,
-    mapState.scope.zoom
-  );
-  const [tileCenterX, reminderX] = lon2tile(
-    mapState.scope.center.lon,
-    mapState.scope.zoom
-  );
-  const firstTileY = tileCenterY - _.round(nbTilesY / 2);
-  const firstTileX = tileCenterX - _.round(nbTilesX / 2);
-  const locationY = (tileCenterY + reminderY - firstTileY) * tileSize;
-  const locationX = (tileCenterX + reminderX - firstTileX) * tileSize;
-  const targetLocationY = mapState.viewport.height / 2;
-  const targetLocationX = mapState.viewport.width / 2;
-  const deltaY = targetLocationY - locationY;
-  const deltaX = targetLocationX - locationX;
-
-  dispatch(slippyActions.set({ scale: 1, translation: { x: deltaX, y: deltaY } }));
+    const dispatch = useDispatch();
+    
+    const resizeHandler = () => {
+        dispatch(mapActions.resize());
+      };
+      const debouncedResizeHandler = useMemo(
+        () => _.debounce(resizeHandler, 500),
+        []
+      );
+    
+      useEffect(() => {
+        window.addEventListener('resize', debouncedResizeHandler);
+      }, []);
+    
 
   return (
-    <div className='tiles'>
-      {_.range(nbTilesY).map((iy) => (
-        <div key={'y' + iy} className='tilesRow'>
-          {_.range(nbTilesX).map((ix) => (
-            <Tile
-              key={'x' + ix + 'y' + iy}
-              iy={iy}
-              ix={ix}
-              x={firstTileX + ix}
-              y={firstTileY + iy}
-              zoom={mapState.scope.zoom}
-            />
-          ))}
-        </div>
-      ))}
-    </div>
+    <Fragment>
+      <Slippy />
+      <Layer>
+        <TiledMap />
+      </Layer>
+    </Fragment>
   );
 };
 

src/components/map/tile.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { tileSize } from './map';
 
 const tileProvider = (zoom: number, x: number, y: number) =>
   'https://tile.openstreetmap.org/' + zoom + '/' + x + '/' + y + '.png';

src/components/map/tiled-map.tsx

@@ -0,0 +1,37 @@
+import react from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { MapState } from '../../store/map';
+import Tile from './tile';
+
+import '../../theme/map.css';
+import _ from 'lodash';
+
+export const tileSize = 256;
+
+const TiledMap: react.FC<{}> = (props: {}) => {
+  const dispatch = useDispatch();
+
+  const tilesState = useSelector((state: { map: MapState }) => state.map.tiles);
+  console.log(`tilesState: ${JSON.stringify(tilesState)}`);
+
+  return (
+    <div className='tiles'>
+      {_.range(tilesState.nb.y).map((iy) => (
+        <div key={'y' + iy} className='tilesRow'>
+          {_.range(tilesState.nb.y).map((ix) => (
+            <Tile
+              key={'x' + ix + 'y' + iy}
+              iy={iy}
+              ix={ix}
+              x={tilesState.first.x + ix}
+              y={tilesState.first.y + iy}
+              zoom={tilesState.zoom}
+            />
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default TiledMap;