Added state management and reconstruction from url params

Author: Yukthiw

Eplant/views/WorldEFP/MapContainer.tsx

@@ -1,9 +1,7 @@
-import { useCallback } from 'react'
+import { useEffect } from 'react'
 
-import { ViewDispatch } from '@eplant/View'
 import { useTheme } from '@mui/material'
 import {
-  APIProvider,
   Map,
   MapCameraChangedEvent,
   MapEvent,
@@ -15,33 +13,32 @@ import GeneDistributionChart from '../eFP/Viewer/GeneDistributionChart'
 import Legend from '../eFP/Viewer/legend'
 
 import MapMarker from './MapMarker'
-import { WorldEFPAction, WorldEFPData, WorldEFPState } from './types'
+import { WorldEFPData, WorldEFPState } from './types'
 
 interface MapContainerProps {
   activeData: WorldEFPData
   state: WorldEFPState
-  dispatch: ViewDispatch<WorldEFPAction>
+  setState: (state: WorldEFPState) => void
 }
-const MapContainer = ({ activeData, state, dispatch }: MapContainerProps) => {
+const MapContainer = ({ activeData, state, setState }: MapContainerProps) => {
   const theme = useTheme()
   const map = useMap('WorldEFP')
 
+  // set map state on load from cache, url or default
+  useEffect(() => {
+    map?.moveCamera({ zoom: state.zoom, center: state.position })
+  }, [map])
+
   const hangleDragEnd = (event: MapEvent) => {
     const mapPos = map?.getCenter()
     if (!mapPos) return
 
     const coords = { lat: mapPos.lat(), lng: mapPos.lng() }
-    dispatch({
-      type: 'set-map-position',
-      position: coords,
-    })
+    setState({ ...state, position: coords })
   }
 
   const handleZoom = (event: MapCameraChangedEvent) => {
-    dispatch({
-      type: 'set-map-zoom',
-      zoom: event.detail.zoom,
-    })
+    setState({ ...state, zoom: event.detail.zoom })
   }
 
   return (

Eplant/views/WorldEFP/WorldEFP.tsx

@@ -74,13 +74,7 @@ export const WorldEFPView = () => {
   return (
     <>
       <APIProvider apiKey={import.meta.env.VITE_MAPS_API_KEY} version='beta'>
-        <MapContainer
-          activeData={data}
-          state={state}
-          dispatch={(action: WorldEFPAction) => {
-            // TODO: implement reducer logic
-          }}
-        />
+        <MapContainer activeData={data} state={state} setState={setState} />
       </APIProvider>
       <MaskModal
         isVisible={state.maskModalVisible}

Eplant/views/WorldEFP/types.tsx

@@ -5,12 +5,10 @@ import { EFPData } from '../eFP/types'
 export type Coordinates = { lat: number; lng: number }
 
 export const WorldEFPStateSchema = z.object({
-  position: z
-    .object({
-      lat: z.number().min(-90).max(90),
-      lng: z.number().min(-180).max(180),
-    })
-    .default({ lat: 25, lng: 0 }),
+  position: z.object({
+    lat: z.number().default(25),
+    lng: z.number().default(0),
+  }),
   zoom: z.number().min(0).max(22).default(2),
   mapTypeId: z
     .enum(['roadmap', 'satellite', 'hybrid', 'terrain'])