Skip to content

Commit

Permalink
fix: lazy import map and leaflet
Browse files Browse the repository at this point in the history
  • Loading branch information
navid-kalaei committed Jul 1, 2024
1 parent 711de73 commit 0d86513
Show file tree
Hide file tree
Showing 7 changed files with 37 additions and 25 deletions.
10 changes: 1 addition & 9 deletions components/Map.tsx
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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
Expand Down
2 changes: 1 addition & 1 deletion components/RouterQueryInitializer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion consts/version.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
const version = 'v1.2.5'
const version = 'v1.2.6'


export default version
14 changes: 14 additions & 0 deletions dtos/MapLocationProps.ts
Original file line number Diff line number Diff line change
@@ -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
6 changes: 3 additions & 3 deletions dtos/MapPageConfigs.ts
Original file line number Diff line number Diff line change
@@ -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({
Expand Down
18 changes: 9 additions & 9 deletions pages/m/[...slug].tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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,
}
}

Expand Down
10 changes: 8 additions & 2 deletions utils/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)
}

Expand Down

0 comments on commit 0d86513

Please sign in to comment.