refactor: split MapPage into components

frontend/src/components/Map/index.tsx

@@ -0,0 +1,98 @@
+import React, {useState, useCallback, useMemo, useEffect} from 'react'
+import _ from 'lodash'
+import ReactMapGl, {WebMercatorViewport, AttributionControl, NavigationControl} from 'react-map-gl'
+import turfBbox from '@turf/bbox'
+import {useHistory, useLocation} from 'react-router-dom'
+
+import {useConfig} from 'config'
+
+import {basemap} from '../../mapstyles'
+
+const EMPTY_VIEWPORT = {longitude: 0, latitude: 0, zoom: 0}
+
+function parseHash(v) {
+  if (!v) return null
+  const m = v.match(/^#([0-9\.]+)\/([0-9\.]+)\/([0-9\.]+)$/)
+  if (!m) return null
+  return {
+    zoom: Number.parseFloat(m[1]),
+    latitude: Number.parseFloat(m[2]),
+    longitude: Number.parseFloat(m[3]),
+  }
+}
+
+function buildHash(v) {
+  return `${v.zoom.toFixed(2)}/${v.latitude}/${v.longitude}`
+}
+
+function useViewportFromUrl() {
+  const history = useHistory()
+  const location = useLocation()
+  const value = useMemo(() => parseHash(location.hash), [location.hash])
+  const setter = useCallback(
+    (v) => {
+      history.replace({
+        hash: buildHash(v),
+      })
+    },
+    [history]
+  )
+  return [value || EMPTY_VIEWPORT, setter]
+}
+
+
+export default function Map({
+  viewportFromUrl,
+  children,
+  boundsFromJson,
+  ...props
+}: {
+  viewportFromUrl?: boolean
+  children: React.ReactNode
+  boundsFromJson: GeoJSON.Geometry
+}) {
+  const [viewportState, setViewportState] = useState(EMPTY_VIEWPORT)
+  const [viewportUrl, setViewportUrl] = useViewportFromUrl()
+
+  const [viewport, setViewport] = viewportFromUrl ? [viewportUrl, setViewportUrl] : [viewportState, setViewportState]
+
+  const config = useConfig()
+  useEffect(() => {
+    if (config?.mapHome && viewport.latitude === 0 && viewport.longitude === 0 && !boundsFromJson) {
+      setViewport(config.mapHome)
+    }
+  }, [config, boundsFromJson])
+
+  useEffect(() => {
+    if (boundsFromJson) {
+      const [minX, minY, maxX, maxY] = turfBbox(boundsFromJson)
+      const vp = new WebMercatorViewport({width: 1000, height: 800}).fitBounds(
+        [
+          [minX, minY],
+          [maxX, maxY],
+        ],
+        {
+          padding: 20,
+          offset: [0, -100],
+        }
+      )
+      setViewport(_.pick(vp, ['zoom', 'latitude', 'longitude']))
+    }
+  }, [boundsFromJson])
+
+  return (
+    <ReactMapGl mapStyle={basemap} width="100%" height="100%" onViewportChange={setViewport} {...viewport} {...props}>
+      <AttributionControl
+        style={{right: 0, bottom: 0}}
+        customAttribution={[
+          '<a href="https://openstreetmap.org/copyright" target="_blank" rel="nofollow noopener noreferrer">© OpenStreetMap contributors</a>',
+          '<a href="https://openmaptiles.org/" target="_blank" rel="nofollow noopener noreferrer">© OpenMapTiles</a>',
+          '<a href="https://openbikesensor.org/" target="_blank" rel="nofollow noopener noreferrer">© OpenBikeSensor</a>',
+        ]}
+      />
+      <NavigationControl style={{left: 10, top: 10}} />
+
+      {children}
+    </ReactMapGl>
+  )
+}

frontend/src/components/index.js

@@ -3,6 +3,7 @@ export {default as FileDrop} from './FileDrop'
 export {default as FileUploadField} from './FileUploadField'
 export {default as FormattedDate} from './FormattedDate'
 export {default as LoginButton} from './LoginButton'
+export {default as Map} from './Map'
 export {default as Page} from './Page'
 export {default as Stats} from './Stats'
 export {default as StripMarkdown} from './StripMarkdown'

frontend/src/pages/HomePage.tsx

@@ -6,10 +6,9 @@ import {of, from} from 'rxjs'
 import {map, switchMap} from 'rxjs/operators'
 
 import api from 'api'
-import {Stats, Page} from 'components'
+import {Stats, Page, Map} from 'components'
 
 import {TrackListItem} from './TracksPage'
-import {CustomMap} from './MapPage'
 import styles from './HomePage.module.less'
 
 function MostRecentTrack() {
@@ -47,7 +46,7 @@ export default function HomePage() {
         <Grid.Row>
           <Grid.Column width={10}>
             <div className={styles.welcomeMap}>
-              <CustomMap mode='roads' />
+              <Map />
             </div>
           </Grid.Column>
           <Grid.Column width={6}>

frontend/src/pages/MapPage/RoadInfo.tsx

@@ -1,109 +1,13 @@
-import React, {useState, useCallback, useMemo, useEffect} from 'react'
+import React, {useState, useCallback} from 'react'
 import _ from 'lodash'
 import {Segment, Menu, Header, Label, Icon, Table} from 'semantic-ui-react'
-import ReactMapGl, {WebMercatorViewport, AttributionControl, NavigationControl, Layer, Source} from 'react-map-gl'
+import {Layer, Source} from 'react-map-gl'
-import turfBbox from '@turf/bbox'
-import {useHistory, useLocation} from 'react-router-dom'
 import {of, from, concat} from 'rxjs'
 import {useObservable} from 'rxjs-hooks'
 import {switchMap, distinctUntilChanged} from 'rxjs/operators'
 
-import {Page} from 'components'
-import {useConfig} from 'config'
 import api from 'api'
 
-import {roadsLayer, basemap} from '../mapstyles'
-
-import styles from './MapPage.module.less'
-
-const EMPTY_VIEWPORT = {longitude: 0, latitude: 0, zoom: 0}
-
-function parseHash(v) {
-  if (!v) return null
-  const m = v.match(/^#([0-9\.]+)\/([0-9\.]+)\/([0-9\.]+)$/)
-  if (!m) return null
-  return {
-    zoom: Number.parseFloat(m[1]),
-    latitude: Number.parseFloat(m[2]),
-    longitude: Number.parseFloat(m[3]),
-  }
-}
-
-function buildHash(v) {
-  return `${v.zoom.toFixed(2)}/${v.latitude}/${v.longitude}`
-}
-
-function useViewportFromUrl() {
-  const history = useHistory()
-  const location = useLocation()
-  const value = useMemo(() => parseHash(location.hash), [location.hash])
-  const setter = useCallback(
-    (v) => {
-      history.replace({
-        hash: buildHash(v),
-      })
-    },
-    [history]
-  )
-  return [value || EMPTY_VIEWPORT, setter]
-}
-
-export function CustomMap({
-  viewportFromUrl,
-  children,
-  boundsFromJson,
-  ...props
-}: {
-  viewportFromUrl?: boolean
-  children: React.ReactNode
-  boundsFromJson: GeoJSON.Geometry
-}) {
-  const [viewportState, setViewportState] = useState(EMPTY_VIEWPORT)
-  const [viewportUrl, setViewportUrl] = useViewportFromUrl()
-
-  const [viewport, setViewport] = viewportFromUrl ? [viewportUrl, setViewportUrl] : [viewportState, setViewportState]
-
-  const config = useConfig()
-  useEffect(() => {
-    if (config?.mapHome && viewport.latitude === 0 && viewport.longitude === 0 && !boundsFromJson) {
-      setViewport(config.mapHome)
-    }
-  }, [config, boundsFromJson])
-
-  useEffect(() => {
-    if (boundsFromJson) {
-      const [minX, minY, maxX, maxY] = turfBbox(boundsFromJson)
-      const vp = new WebMercatorViewport({width: 1000, height: 800}).fitBounds(
-        [
-          [minX, minY],
-          [maxX, maxY],
-        ],
-        {
-          padding: 20,
-          offset: [0, -100],
-        }
-      )
-      setViewport(_.pick(vp, ['zoom', 'latitude', 'longitude']))
-    }
-  }, [boundsFromJson])
-
-  return (
-    <ReactMapGl mapStyle={basemap} width="100%" height="100%" onViewportChange={setViewport} {...viewport} {...props}>
-      <AttributionControl
-        style={{right: 0, bottom: 0}}
-        customAttribution={[
-          '<a href="https://openstreetmap.org/copyright" target="_blank" rel="nofollow noopener noreferrer">© OpenStreetMap contributors</a>',
-          '<a href="https://openmaptiles.org/" target="_blank" rel="nofollow noopener noreferrer">© OpenMapTiles</a>',
-          '<a href="https://openbikesensor.org/" target="_blank" rel="nofollow noopener noreferrer">© OpenBikeSensor</a>',
-        ]}
-      />
-      <NavigationControl style={{left: 10, top: 10}} />
-
-      {children}
-    </ReactMapGl>
-  )
-}
-
 const UNITS = {distanceOvertaker: 'm', distanceStationary: 'm', speed: 'm/s'}
 const LABELS = {distanceOvertaker: 'Overtaker', distanceStationary: 'Stationary', speed: 'Speed'}
 const ZONE_COLORS = {urban: 'olive', rural: 'brown', motorway: 'purple'}
@@ -144,7 +48,7 @@ function RoadStatsTable({data}) {
   )
 }
 
-function CurrentRoadInfo({clickLocation}) {
+export default function RoadInfo({clickLocation}) {
   const [direction, setDirection] = useState('forwards')
 
   const onClickDirection = useCallback(
@@ -186,7 +90,7 @@ function CurrentRoadInfo({clickLocation}) {
 
   const loading = info == null
 
-  const offsetDirection = info?.road.oneway ? 0 : direction === 'forwards' ? 1 : -1; // TODO: change based on left-hand/right-hand traffic
+  const offsetDirection = info?.road.oneway ? 0 : direction === 'forwards' ? 1 : -1 // TODO: change based on left-hand/right-hand traffic
 
   const content =
     !loading && !info.road ? (
@@ -234,7 +138,7 @@ function CurrentRoadInfo({clickLocation}) {
               'line-width': ['interpolate', ['linear'], ['zoom'], 14, 6, 17, 12],
               'line-color': '#18FFFF',
               'line-opacity': 0.5,
-              ...({
+              ...{
                 'line-offset': [
                   'interpolate',
                   ['exponential', 1.5],
@@ -244,8 +148,7 @@ function CurrentRoadInfo({clickLocation}) {
                   19,
                   offsetDirection * 8,
                 ],
-              })
+              },
-
             }}
           />
         </Source>
@@ -259,41 +162,3 @@ function CurrentRoadInfo({clickLocation}) {
     </>
   )
 }
-
-export default function MapPage() {
-  const {obsMapSource} = useConfig() || {}
-  const [clickLocation, setClickLocation] = useState<{longitude: number; latitude: number} | null>(null)
-
-  const onClick = useCallback(
-    (e) => {
-      let node = e.target
-      while (node) {
-        if (node?.classList?.contains(styles.mapInfoBox)) {
-          return
-        }
-        node = node.parentNode
-      }
-
-      setClickLocation({longitude: e.lngLat[0], latitude: e.lngLat[1]})
-    },
-    [setClickLocation]
-  )
-
-  if (!obsMapSource) {
-    return null
-  }
-
-  return (
-    <Page fullScreen>
-      <div className={styles.mapContainer}>
-        <CustomMap viewportFromUrl onClick={onClick}>
-          <Source id="obs" {...obsMapSource}>
-            <Layer {...roadsLayer} />
-          </Source>
-
-          <CurrentRoadInfo {...{clickLocation}} />
-        </CustomMap>
-      </div>
-    </Page>
-  )
-}

frontend/src/pages/MapPage/index.tsx

@@ -0,0 +1,50 @@
+import React, {useState, useCallback} from 'react'
+import _ from 'lodash'
+import {Layer, Source} from 'react-map-gl'
+
+import {Page, Map} from 'components'
+import {useConfig} from 'config'
+
+import {roadsLayer} from '../../mapstyles'
+
+import RoadInfo from './RoadInfo'
+import styles from './styles.module.less'
+
+
+export default function MapPage() {
+  const {obsMapSource} = useConfig() || {}
+  const [clickLocation, setClickLocation] = useState<{longitude: number; latitude: number} | null>(null)
+
+  const onClick = useCallback(
+    (e) => {
+      let node = e.target
+      while (node) {
+        if (node?.classList?.contains(styles.mapInfoBox)) {
+          return
+        }
+        node = node.parentNode
+      }
+
+      setClickLocation({longitude: e.lngLat[0], latitude: e.lngLat[1]})
+    },
+    [setClickLocation]
+  )
+
+  if (!obsMapSource) {
+    return null
+  }
+
+  return (
+    <Page fullScreen>
+      <div className={styles.mapContainer}>
+        <Map viewportFromUrl onClick={onClick}>
+          <Source id="obs" {...obsMapSource}>
+            <Layer {...roadsLayer} />
+          </Source>
+
+          <RoadInfo {...{clickLocation}} />
+        </Map>
+      </div>
+    </Page>
+  )
+}

frontend/src/pages/TrackPage/TrackMap.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import {Source, Layer} from 'react-map-gl'
 
 import type {TrackData} from 'types'
-import {CustomMap} from '../MapPage'
+import {Map} from 'components'
 
 import {colorByDistance, trackLayer} from '../../mapstyles'
 
@@ -24,7 +24,7 @@ export default function TrackMap({
 
   return (
     <div style={props.style}>
-      <CustomMap boundsFromJson={trackData.track}>
+      <Map boundsFromJson={trackData.track}>
         {showTrack && (
           <Source id="route" type="geojson" data={trackData.track}>
             <Layer id="route" {...trackLayer} />
@@ -73,7 +73,7 @@ export default function TrackMap({
             ))}
           </Source>
         )}
-      </CustomMap>
+      </Map>
     </div>
   )
 }