Mirror/robosats
1
0
Fork 0
mirror of https://github.com/RoboSats/robosats.git synced 2025-01-31 02:21:35 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #1192 from KoalaSat/load-map-json-in-advance

Browse Source 
Load map JSON in advance
This commit is contained in:
Reckless_Satoshi 2024-03-19 01:06:38 +00:00 committed by GitHub
commit 10bc21d239
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 21 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/components/Map/index.tsx
View File

@ -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<UseAppStoreType>(AppContext);
const [worldmap, setWorldmap] = useState<GeoJsonObject | undefined>();
useEffect(() => {
getWorldmapGeojson(apiClient, hostUrl)
.then((data) => {
setWorldmap(data);
})
.catch((error) => {
console.error('Error:', error);
});
}, []);
const { worldmap } = useContext<UseAppStoreType>(AppContext);
const RobotMarker = (
key: string | number,

19
frontend/src/contexts/AppContext.tsx
View File

@ -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<SetStateAction<Favorites>>;
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<UseAppStoreType>(initialAppContext);
@ -187,6 +192,7 @@ export const AppContextProvider = ({ children }: AppContextProviderProps): JSX.E
const [acknowledgedWarning, setAcknowledgedWarning] = useState<boolean>(
initialAppContext.acknowledgedWarning,
);
const [worldmap, setWorldmap] = useState<GeoJsonObject>();
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,
}}
>
<ThemeProvider theme={theme}>{children}</ThemeProvider>