-
Notifications
You must be signed in to change notification settings - Fork 4
/
webmap.tsx
45 lines (38 loc) · 1.36 KB
/
webmap.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
import styles from '../styles/WebMap.module.css'
import Layout from '../components/layout'
import { ReactElement, useEffect, useRef } from 'react'
import { useRouter } from 'next/router'
import { useAppSelector, useAppDispatch } from '../app/hooks'
import { updateSelected } from '../features/plants/plantsSlice'
async function loadMap(container: HTMLDivElement, filter: string) {
const { initialize } = await import('../data/mapping')
return initialize(container, filter)
}
const WebMap = () => {
const mapRef = useRef<HTMLDivElement>(null)
const router = useRouter()
const { type } = router.query
const selected = useAppSelector((state) => state.plants.selected)
const dispatch = useAppDispatch()
useEffect(() => {
dispatch(updateSelected(type))
}, [type, dispatch])
useEffect(() => {
let asyncCleanup: Promise<(() => void)>
if (mapRef.current && selected) {
asyncCleanup = loadMap(mapRef.current, selected)
}
return () => {
asyncCleanup && asyncCleanup.then((cleanup) => cleanup())
}
}, [mapRef, selected])
return (
<div className={styles.container}>
<div className={styles.viewDiv} ref={mapRef}></div>
</div>
)
}
WebMap.getLayout = function getLayout(page: ReactElement) {
return <Layout>{page}</Layout>
}
export default WebMap