fix: use mapState

This tries to track the current map state into a context so that it can
be consumed by newly initialised maps on differnt views. Fixes #1248
todo:
- [ ] use this in the edit form for updating loo position
- [ ] fix fresh loads of individual loo pages so thay are centered

package.json

@@ -89,7 +89,7 @@
     "@mapbox/geojson-area": "0.2.2",
     "@mapbox/geojson-rewind": "0.5.1",
     "@types/jest": "27.0.2",
-    "@types/leaflet": "1.7.5",
+    "@types/leaflet": "1.7.6",
     "@types/leaflet.markercluster": "1.4.5",
     "@types/lodash": "4.14.175",
     "@types/node": "16.10.9",

src/components/Header/Header.tsx

@@ -11,7 +11,7 @@ import Logo from '../Logo';
 
 import MainMenu from './MainMenu';
 
-const Header = ({ mapCenter, children }) => {
+const Header = ({ children }) => {
   const [isMenuVisible, setIsMenuVisible] = useState(false);
 
   return (
@@ -48,17 +48,14 @@ const Header = ({ mapCenter, children }) => {
             </button>
 
             <Drawer visible={isMenuVisible} zIndex={200}>
-              <MainMenu
-                mapCenter={mapCenter}
-                onMenuItemClick={() => setIsMenuVisible(false)}
-              >
+              <MainMenu onMenuItemClick={() => setIsMenuVisible(false)}>
                 {children}
               </MainMenu>
             </Drawer>
           </Media>
 
           <Media greaterThan="sm">
-            <MainMenu mapCenter={mapCenter}>{children}</MainMenu>
+            <MainMenu>{children}</MainMenu>
           </Media>
         </Box>
       </Box>

src/components/Header/MainMenu.tsx

@@ -5,6 +5,7 @@ import Box from '../Box';
 import Text from '../Text';
 import { Media } from '../Media';
 import { useUser } from '@auth0/nextjs-auth0';
+import { useMapState } from '../MapState';
 
 const StyledNavLink = styled(Link)<
   LinkProps & {
@@ -29,6 +30,7 @@ interface IMainMenu {
 // Todo: Contact link
 const MainMenu = ({ mapCenter, onMenuItemClick, children }: IMainMenu) => {
   const { user } = useUser();
+  const [mapState] = useMapState();
 
   return (
     <Text
@@ -56,8 +58,8 @@ const MainMenu = ({ mapCenter, onMenuItemClick, children }: IMainMenu) => {
           <Box as="li" mt={[3, 0]} ml={[0, 4]}>
             <StyledNavLink
               href={
-                mapCenter
-                  ? `/loos/add?lat=${mapCenter.lat}&lng=${mapCenter.lng}`
+                mapState?.center
+                  ? `/loos/add?lat=${mapState.center.lat}&lng=${mapState.center.lng}`
                   : `/loos/add`
               }
             >

src/components/LooMap/LooMap.tsx

@@ -1,19 +1,38 @@
-import { MapContainer, TileLayer, ZoomControl } from 'react-leaflet';
+import { useMapState } from '../MapState';
+import {
+  MapContainer,
+  TileLayer,
+  ZoomControl,
+  useMapEvents,
+} from 'react-leaflet';
 import 'leaflet/dist/leaflet.css';
 import { css } from '@emotion/react';
 import Box from '../Box';
 import { Media } from '../Media';
 import Markers from './Markers';
 import CurrentLooMarker from './CurrentLooMarker';
 import { Loo } from '../../api-client/graphql';
+
+const MapTracker = () => {
+  const [, setMapState] = useMapState();
+  const map = useMapEvents({
+    moveend: () => {
+      setMapState({ center: map.getCenter() });
+    },
+    zoomend: () => {
+      setMapState({ zoom: map.getZoom() });
+    },
+  });
+  return null;
+};
+
 interface Props {
   focus?: Loo;
   center: { lat: number; lng: number };
   zoom?: number;
   minZoom?: number;
   maxZoom?: number;
   staticMap?: boolean;
-  onViewportChanged?: () => void;
   controlsOffset?: number;
   showCrosshair?: boolean;
   withAccessibilityOverlays?: boolean;
@@ -122,6 +141,7 @@ const LooMap: React.FC<Props> = ({
           <ZoomControl position="bottomright" />
         </Media>
         {/* <LocateMapControl position="bottomright" /> */}
+        <MapTracker />
       </MapContainer>
     </Box>
   );

src/components/MapState.tsx

@@ -11,9 +11,6 @@ interface MapState {
     lng: number;
   };
   zoom?: number;
-  radius?: number;
-  geolocation?: any;
-  loos?: Loo[];
   filters?: Filter[];
 }
 
@@ -34,9 +31,6 @@ export const MapStateProvider = ({ children, loos = [] }) => {
   const [state, setState] = React.useReducer(reducer, {
     center: config.fallbackLocation,
     zoom: 16,
-    radius: 1000,
-    geolocation: null,
-    loos: loos,
     filters: initialFilterState,
   });
 

src/components/PageLayout.tsx

@@ -20,14 +20,14 @@ interface IPageLayout {
   children: React.ReactNode;
 }
 
-const PageLayout = ({ mapCenter, layoutMode, children }: IPageLayout) => {
+const PageLayout = ({ layoutMode, children }: IPageLayout) => {
   return (
     <ThemeProvider theme={theme}>
       <MediaContextProvider>
         {globalStyles}
 
         <Box display="flex" flexDirection="column" height="100%">
-          <Header mapCenter={mapCenter}>
+          <Header>
             <Footer />
           </Header>
 

src/pages/index.tsx

@@ -45,7 +45,6 @@ const HomePage = () => {
         <LooMap
           center={mapState.center}
           zoom={mapState.zoom}
-          onViewportChanged={setMapState}
           controlsOffset={0}
         />
       </Box>

src/pages/loos/[id]/index.tsx

@@ -57,7 +57,6 @@ const LooPage: PageFindLooByIdComp = (props) => {
         <LooMap
           center={mapState.center}
           zoom={mapState.zoom}
-          onViewportChanged={setMapState}
           controlsOffset={0}
           focus={props?.data?.loo}
         />

src/pages/loos/add.tsx

@@ -35,7 +35,7 @@ const LooMap = dynamic(() => import('../../components/LooMap'), {
   ssr: false,
 });
 
-const AddPage = (props) => {
+const AddPage = () => {
   const { user, error, isLoading } = useUser();
   const [mapState, setMapState] = useMapState();
 
@@ -48,8 +48,8 @@ const AddPage = (props) => {
     if (lat && lng) {
       setMapState({
         center: {
-          lat: parseFloat(lat),
-          lng: parseFloat(lng),
+          lat: parseFloat(lat as string),
+          lng: parseFloat(lng as string),
         },
       });
     }
@@ -102,7 +102,6 @@ const AddPage = (props) => {
           showCrosshair
           controlsOffset={20}
           withAccessibilityOverlays={false}
-          onViewportChanged={setMapState}
         />
 
         <Box position="absolute" top={0} left={0} m={3}>

yarn.lock

@@ -2314,13 +2314,20 @@
   dependencies:
     "@types/leaflet" "*"
 
-"@types/leaflet@*", "@types/leaflet@1.7.5":
+"@types/leaflet@*":
   version "1.7.5"
   resolved "https://registry.yarnpkg.com/@types/leaflet/-/leaflet-1.7.5.tgz#7b2bcf1271fb7b8c305e3c468eaad65b6dbac472"
   integrity sha512-+Myo00Yb5OuvUyrH+vUwn9DRgOaBJsF/etIMdMcNhWGBMo58Mo1cxLInvCd0ZpvItju/AeDYFB/Od2pLiHB3VA==
   dependencies:
     "@types/geojson" "*"
 
+"@types/leaflet@1.7.6":
+  version "1.7.6"
+  resolved "https://registry.yarnpkg.com/@types/leaflet/-/leaflet-1.7.6.tgz#6580f4babb648972c5af3abc3d66866753fa9311"
+  integrity sha512-Emkz3V08QnlelSbpT46OEAx+TBZYTOX2r1yM7W+hWg5+djHtQ1GbEXBDRLaqQDOYcDI51Ss0ayoqoKD4CtLUDA==
+  dependencies:
+    "@types/geojson" "*"
+
 "@types/lodash@4.14.175":
   version "4.14.175"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.175.tgz#b78dfa959192b01fae0ad90e166478769b215f45"