diff --git a/frontend/src/components/Map/index.tsx b/frontend/src/components/Map/index.tsx index 44efb22f..4dd8c0c6 100644 --- a/frontend/src/components/Map/index.tsx +++ b/frontend/src/components/Map/index.tsx @@ -1,12 +1,9 @@ -import React, { useContext, useEffect, useState } from 'react'; -import { apiClient } from '../../services/api'; +import React, { useContext } 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 getWorldmapGeojson from '../../geo/Web'; import MarkerClusterGroup from '@christopherpickering/react-leaflet-markercluster'; import { AppContext, type UseAppStoreType } from '../../contexts/AppContext'; @@ -44,18 +41,7 @@ const Map = ({ interactive = false, }: Props): JSX.Element => { const theme = useTheme(); - const { hostUrl } = useContext(AppContext); - const [worldmap, setWorldmap] = useState(); - - useEffect(() => { - getWorldmapGeojson(apiClient, hostUrl) - .then((data) => { - setWorldmap(data); - }) - .catch((error) => { - console.error('Error:', error); - }); - }, []); + const { worldmap } = useContext(AppContext); const RobotMarker = ( key: string | number, diff --git a/frontend/src/contexts/AppContext.tsx b/frontend/src/contexts/AppContext.tsx index 4d9aa66a..99f91995 100644 --- a/frontend/src/contexts/AppContext.tsx +++ b/frontend/src/contexts/AppContext.tsx @@ -9,6 +9,7 @@ import React, { import { type Page } from '../basic/NavBar'; import { type OpenDialogs } from '../basic/MainDialogs'; import { ThemeProvider } from '@mui/material'; +import { type GeoJsonObject } from 'geojson'; import { Settings, type Version, type Origin, type Favorites } from '../models'; @@ -17,6 +18,8 @@ import { getClientVersion, getHost } from '../utils'; import defaultFederation from '../../static/federation.json'; import { createTheme, type Theme } from '@mui/material/styles'; import i18n from '../i18n/Web'; +import getWorldmapGeojson from '../geo/Web'; +import { apiClient } from '../services/api'; const getWindowSize = function (fontSize: number): { width: number; height: number } { // returns window size in EM units @@ -131,6 +134,7 @@ export interface UseAppStoreType { hostUrl: string; fav: Favorites; setFav: Dispatch>; + worldmap?: GeoJsonObject; } export const initialAppContext: UseAppStoreType = { @@ -156,6 +160,7 @@ export const initialAppContext: UseAppStoreType = { acknowledgedWarning: false, fav: { type: null, currency: 0, mode: 'fiat', coordinator: 'any' }, setFav: () => {}, + worldmap: undefined, }; export const AppContext = createContext(initialAppContext); @@ -187,6 +192,7 @@ export const AppContextProvider = ({ children }: AppContextProviderProps): JSX.E const [acknowledgedWarning, setAcknowledgedWarning] = useState( initialAppContext.acknowledgedWarning, ); + const [worldmap, setWorldmap] = useState(); useEffect(() => { setTheme(makeTheme(settings)); @@ -220,6 +226,18 @@ export const AppContextProvider = ({ children }: AppContextProviderProps): JSX.E }; }, []); + useEffect(() => { + if (page === 'offers' && !worldmap) { + getWorldmapGeojson(apiClient, hostUrl) + .then((data) => { + setWorldmap(data); + }) + .catch((error) => { + console.error('Error:', error); + }); + } + }, [page]); + useEffect(() => { setWindowSize(getWindowSize(theme.typography.fontSize)); }, [theme.typography.fontSize]); @@ -250,6 +268,7 @@ export const AppContextProvider = ({ children }: AppContextProviderProps): JSX.E origin, fav, setFav, + worldmap, }} > {children}