diff --git a/frontend/src/components/Map/index.tsx b/frontend/src/components/Map/index.tsx index 42072a38..e7e74be7 100644 --- a/frontend/src/components/Map/index.tsx +++ b/frontend/src/components/Map/index.tsx @@ -1,11 +1,14 @@ -import React, { useContext } from 'react'; +import React, { useContext, useEffect, useState } from 'react'; import { MapContainer, GeoJSON, useMapEvents, TileLayer, Tooltip, Marker } from 'react-leaflet'; import { useTheme, LinearProgress } from '@mui/material'; +import { type GeoJsonObject } from 'geojson'; import { DivIcon, type LeafletMouseEvent } from 'leaflet'; import { type PublicOrder } from '../../models'; import OrderTooltip from '../Charts/helpers/OrderTooltip'; import MarkerClusterGroup from 'react-leaflet-markercluster'; import { AppContext, type UseAppStoreType } from '../../contexts/AppContext'; +import getWorldmapGeojson from '../../geo/Web'; +import { apiClient } from '../../services/api'; interface MapPinProps { fillColor: string; @@ -41,7 +44,18 @@ const Map = ({ interactive = false, }: Props): React.JSX.Element => { const theme = useTheme(); - const { worldmap } = useContext(AppContext); + const { hostUrl } = useContext(AppContext); + const [worldmap, setWorldmap] = useState(); + + useEffect(() => { + getWorldmapGeojson(apiClient, hostUrl) + .then((data) => { + setWorldmap(data); + }) + .catch((error) => { + console.error('Error:', error); + }); + }, []); const RobotMarker = ( key: string | number, @@ -112,8 +126,8 @@ const Map = ({ attributionControl={false} style={{ height: '100%', width: '100%', backgroundColor: theme.palette.background.paper }} > - {!useTiles && worldmap == null && } - {!useTiles && worldmap != null && ( + {!useTiles && !worldmap && } + {!useTiles && worldmap && ( >; - worldmap?: GeoJsonObject; client: 'mobile' | 'web' | 'desktop' | string; view: 'basic' | 'pro' | string; } @@ -219,7 +215,6 @@ export const AppContextProvider = ({ children }: AppContextProviderProps): React const [acknowledgedWarning, setAcknowledgedWarning] = useState( initialAppContext.acknowledgedWarning, ); - const [worldmap, setWorldmap] = useState(); useEffect(() => { setTheme(makeTheme(settings)); @@ -251,18 +246,6 @@ export const AppContextProvider = ({ children }: AppContextProviderProps): React }; }, []); - useEffect(() => { - if (['offers', 'create'].includes(page) && !worldmap) { - getWorldmapGeojson(apiClient, hostUrl) - .then((data) => { - setWorldmap(data); - }) - .catch((error) => { - console.error('Error:', error); - }); - } - }, [page]); - useEffect(() => { setWindowSize(getWindowSize(theme.typography.fontSize)); }, [theme.typography.fontSize]); @@ -293,7 +276,6 @@ export const AppContextProvider = ({ children }: AppContextProviderProps): React origin, fav, setFav, - worldmap, client, view, }}