Merge pull request #213 from kartevonmorgen/develop

fix: lazy import map and leaflet

components/Map.tsx

@@ -1,6 +1,5 @@
 import { FC } from 'react'
 import { MapContainer, TileLayer, ZoomControl } from 'react-leaflet'
-import z from 'zod'
 import MapEventsListener from './MapEventsListener'
 import MapLocationInitializer from './MapLocationInitializer'
 import SearchEventsListener from './SearchEventsListener'
@@ -15,17 +14,10 @@ import MapColorStyle from './MapColorStyle'
 import SidebarCollapseButton from './SidebarCollapseButton'
 import 'leaflet/dist/leaflet.css'
 import MapColorModeButton from './MapColorModeButton'
+import MapLocationProps from '../dtos/MapLocationProps'
 
 
 
-export const MapLocationPropsSchema = z.object({
-  lat: z.number(),
-  lng: z.number(),
-  zoom: z.number(),
-})
-
-export type MapLocationProps = z.infer<typeof MapLocationPropsSchema>
-
 const Map: FC<MapLocationProps> = (props) => {
 
   const {lat, lng, zoom} = props

components/RouterQueryInitializer.tsx

@@ -2,7 +2,6 @@ import { FC, useEffect } from 'react'
 import { useRouter } from 'next/router'
 import lodashToString from 'lodash/toString'
 import { convertQueryParamToFloat, convertQueryParamToString, updateRoutingQuery } from '../utils/utils'
-import { MapLocationProps } from './Map'
 import { MapColorModes } from './MapColorStyle'
 import {
   createSlugPathFromQueryAndRemoveSlug, getOptionalEntrySlugActionFromRoot,
@@ -12,6 +11,7 @@ import {
 import { convertLatLngToString, getOptionalEntityLocation, LatLng } from '../utils/geolocation'
 import { RootSlugEntity, SlugAction } from '../utils/types'
 import MAP_CONSTANTS from '../consts/map'
+import MapLocationProps from '../dtos/MapLocationProps'
 
 
 interface RouterQueryInitializerProps {

consts/version.ts

@@ -1,4 +1,4 @@
-const version = 'v1.2.5'
+const version = 'v1.2.6'
 
 
 export default version

dtos/MapLocationProps.ts

@@ -0,0 +1,14 @@
+import z from 'zod'
+
+
+export const MapLocationPropsSchema = z.object({
+  lat: z.number(),
+  lng: z.number(),
+  zoom: z.number(),
+})
+
+
+type MapLocationProps = z.infer<typeof MapLocationPropsSchema>
+
+
+export default MapLocationProps

dtos/MapPageConfigs.ts

@@ -1,7 +1,7 @@
 import z from 'zod'
-import { MapLocationProps, MapLocationPropsSchema } from '../components/Map'
-import { MapColorModes, MapColorModesEnums } from '../components/MapColorStyle'
-import PopularTagsRequest, { PopularTagsRequestSchema } from './PopularTagsRequest'
+import { MapColorModesEnums } from '../components/MapColorStyle'
+import { PopularTagsRequestSchema } from './PopularTagsRequest'
+import { MapLocationPropsSchema } from './MapLocationProps'
 
 
 export const MapConfigsSchema = z.object({

pages/m/[...slug].tsx

@@ -3,16 +3,14 @@ import { GetServerSideProps } from 'next'
 import dynamic from 'next/dynamic'
 import { useToggle } from 'ahooks'
 import { Layout, Spin } from 'antd'
-import { AxiosInstance } from '../../api'
-import MapPageConfigs, { SidebarConfigs } from '../../dtos/MapPageConfigs'
-import API_ENDPOINTS from '../../api/endpoints'
+import { SidebarConfigs } from '../../dtos/MapPageConfigs'
 import { convertQueryParamToArray } from '../../utils/utils'
 import RouterQueryInitializer from '../../components/RouterQueryInitializer'
-import { MapLocationProps } from '../../components/Map'
 import { TagsCount } from '../../dtos/TagCount'
 import Sidebar from '../../components/Sidebar'
 import { MapColorModes } from '../../components/MapColorStyle'
 import { parseConfigFile } from '../api/v0/maps/[project]/config'
+import MapLocationProps from '../../dtos/MapLocationProps'
 
 
 const { Content } = Layout
@@ -89,13 +87,15 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
   const sidebarConfigs = pageConfigs.sidebar
   const initMapColorStyle = pageConfigs.map.colorStyle
 
+  const props = {
+    mapLocationProps,
+    sidebarConfigs,
+    initMapColorStyle,
+  }
+
   // todo: move the re-validate value to constants
   return {
-    props: {
-      mapLocationProps,
-      sidebarConfigs,
-      initMapColorStyle,
-    },
+    props,
   }
 }
 

utils/utils.ts

@@ -117,17 +117,23 @@ export const updateRoutingQueryWithoutDynamicParams = (
   )
 }
 
-export const convertBBoxToString = (bbox: LatLngBounds): string => {
+export const convertBBoxToCoords = (bbox: LatLngBounds): [number, number, number, number] => {
   const sw = bbox.getSouthWest()
   const ne = bbox.getNorthEast()
 
-  const bboxCoords = [
+  const bboxCoords: [number, number, number, number] = [
     sw.lat,
     sw.lng,
     ne.lat,
     ne.lng,
   ]
 
+  return bboxCoords
+}
+
+export const convertBBoxToString = (bbox: LatLngBounds): string => {
+  const bboxCoords = convertBBoxToCoords(bbox)
+
   return toString(bboxCoords)
 }