Skip to content

Commit e8cf1a6

Browse files
sumedhkumar96sumedhkumar96
committed
further restructred the code to reduce code duplication
1 parent eb120fe commit e8cf1a6

5 files changed

Lines changed: 209 additions & 206 deletions

File tree

‎src/components/BMDashboard/InteractiveMap/BaseInteractiveMap.jsx‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import { MapContainer, TileLayer } from 'react-leaflet';
2+
import MarkerClusterGroup from '@changey/react-leaflet-markercluster';
3+
import { MapThemeUpdater, ProjectMarkers, MapLegend, ProjectCounter } from './MapSharedComponents';
4+
5+
function BaseInteractiveMap({
6+
orgs = [],
7+
filteredOrgs = [],
8+
loading = false,
9+
darkMode = false,
10+
onProjectClick,
11+
showFilters = false,
12+
isEmbed = false,
13+
mapKey = 0,
14+
center = [20, 0],
15+
zoom = 1,
16+
minZoom = 1,
17+
maxClusterRadius = 80,
18+
markerRadius = 8,
19+
position = 'bottomleft',
20+
}) {
21+
// Use filteredOrgs if provided, otherwise fall back to orgs
22+
const displayOrgs = filteredOrgs.length > 0 ? filteredOrgs : orgs;
23+
24+
if (loading) {
25+
return (
26+
<div
27+
style={{
28+
padding: '40px',
29+
textAlign: 'center',
30+
color: darkMode ? 'white' : '#222',
31+
background: darkMode ? '#0d1b2a' : 'white',
32+
}}
33+
>
34+
Loading…
35+
</div>
36+
);
37+
}
38+
39+
return (
40+
<div
41+
style={{
42+
width: '100%',
43+
height: '100%',
44+
position: 'relative',
45+
overflow: 'hidden',
46+
background: darkMode ? '#0d1b2a' : 'white',
47+
}}
48+
>
49+
<ProjectCounter
50+
count={displayOrgs.length}
51+
total={showFilters ? orgs.length : undefined}
52+
darkMode={darkMode}
53+
position={position}
54+
isEmbed={isEmbed}
55+
/>
56+
57+
{!isEmbed && <MapLegend position="bottomright" darkMode={darkMode} isEmbed={isEmbed} />}
58+
59+
{isEmbed && <MapLegend position="bottomleft" darkMode={darkMode} isEmbed={isEmbed} />}
60+
61+
<MapContainer
62+
key={mapKey}
63+
center={center}
64+
maxBounds={
65+
isEmbed
66+
? [
67+
[-90, -180],
68+
[90, 180],
69+
]
70+
: undefined
71+
}
72+
maxBoundsViscosity={isEmbed ? 1.0 : undefined}
73+
zoom={zoom}
74+
minZoom={minZoom}
75+
scrollWheelZoom
76+
style={{
77+
width: '100%',
78+
height: '100%',
79+
borderRadius: isEmbed ? '8px' : '0',
80+
}}
81+
worldCopyJump={isEmbed}
82+
>
83+
<MapThemeUpdater darkMode={darkMode} />
84+
<TileLayer
85+
noWrap={false}
86+
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
87+
url={
88+
darkMode
89+
? 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'
90+
: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
91+
}
92+
minZoom={minZoom}
93+
maxZoom={15}
94+
/>
95+
<MarkerClusterGroup
96+
disableClusteringAtZoom={13}
97+
spiderfyOnMaxZoom={true}
98+
chunkedLoading={true}
99+
maxClusterRadius={maxClusterRadius}
100+
>
101+
<ProjectMarkers
102+
orgs={displayOrgs}
103+
darkMode={darkMode}
104+
onProjectClick={onProjectClick}
105+
markerRadius={markerRadius}
106+
/>
107+
</MarkerClusterGroup>
108+
</MapContainer>
109+
</div>
110+
);
111+
}
112+
113+
export default BaseInteractiveMap;

‎src/components/BMDashboard/InteractiveMap/EmbedInteractiveMap.jsx‎

Lines changed: 16 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -1,125 +1,31 @@
1-
/* eslint-disable */
2-
import { useState, useEffect } from 'react';
31
import { useSelector } from 'react-redux';
42
import { useHistory } from 'react-router-dom';
5-
import { MapContainer, TileLayer } from 'react-leaflet';
6-
import MarkerClusterGroup from '@changey/react-leaflet-markercluster';
7-
import axios from 'axios';
8-
import { ENDPOINTS } from '../../../utils/URL';
9-
import {
10-
MapThemeUpdater,
11-
ProjectMarkers,
12-
MapUtils,
13-
MapLegend,
14-
ProjectCounter,
15-
} from './MapSharedComponents';
3+
import { useProjectsData } from '../../../hooks/useProjectsData';
4+
import BaseInteractiveMap from './BaseInteractiveMap';
165

176
function EmbedInteractiveMap() {
187
const darkMode = useSelector(state => state.theme.darkMode);
198
const history = useHistory();
20-
const [orgs, setOrgs] = useState([]);
21-
const [loading, setLoading] = useState(true);
22-
23-
const fetchOrgs = async () => {
24-
try {
25-
let response;
26-
try {
27-
response = await axios.get(ENDPOINTS.BM_PROJECTS_WITH_LOCATION);
28-
} catch (projectError) {
29-
console.log('Projects with location endpoint not available, using organization data');
30-
response = await axios.get(ENDPOINTS.BM_ORGS_WITH_LOCATION);
31-
}
32-
33-
const data = response.data.data || [];
34-
35-
if (data.length === 0) {
36-
console.log('No data from backend, using pseudo data');
37-
const pseudoData = MapUtils.getPseudoOrgs();
38-
setOrgs(pseudoData);
39-
} else {
40-
setOrgs(data);
41-
}
42-
return data;
43-
} catch (error) {
44-
console.error('Error fetching project/org data:', error);
45-
const pseudoData = MapUtils.getPseudoOrgs();
46-
setOrgs(pseudoData);
47-
return [];
48-
} finally {
49-
setLoading(false);
50-
}
51-
};
9+
const { orgs, loading } = useProjectsData();
5210

5311
const handleProjectClick = org => {
5412
history.push(`/bmdashboard/projects/${org.orgId}`);
5513
};
5614

57-
useEffect(() => {
58-
fetchOrgs();
59-
}, []);
60-
6115
return (
62-
<div
63-
style={{
64-
width: '100%',
65-
height: '100%',
66-
position: 'relative',
67-
overflow: 'hidden',
68-
background: darkMode ? '#0d1b2a' : 'white',
69-
}}
70-
>
71-
<ProjectCounter
72-
count={orgs.length}
73-
darkMode={darkMode}
74-
position="bottomleft"
75-
isEmbed={true}
76-
/>
77-
<MapLegend position="bottomleft" darkMode={darkMode} isEmbed={true} />
78-
79-
<MapContainer
80-
center={[20, 0]}
81-
maxBounds={[
82-
[-90, -180],
83-
[90, 180],
84-
]}
85-
maxBoundsViscosity={1.0}
86-
zoom={1}
87-
minZoom={1}
88-
scrollWheelZoom
89-
style={{
90-
width: '100%',
91-
height: '100%',
92-
borderRadius: '8px',
93-
}}
94-
worldCopyJump
95-
>
96-
<MapThemeUpdater darkMode={darkMode} />
97-
<TileLayer
98-
noWrap={false}
99-
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
100-
url={
101-
darkMode
102-
? 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'
103-
: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
104-
}
105-
minZoom={1}
106-
maxZoom={15}
107-
/>
108-
<MarkerClusterGroup
109-
disableClusteringAtZoom={13}
110-
spiderfyOnMaxZoom={true}
111-
chunkedLoading={true}
112-
maxClusterRadius={80}
113-
>
114-
<ProjectMarkers
115-
orgs={orgs}
116-
darkMode={darkMode}
117-
onProjectClick={handleProjectClick}
118-
markerRadius={6}
119-
/>
120-
</MarkerClusterGroup>
121-
</MapContainer>
122-
</div>
16+
<BaseInteractiveMap
17+
orgs={orgs}
18+
loading={loading}
19+
darkMode={darkMode}
20+
onProjectClick={handleProjectClick}
21+
isEmbed={true}
22+
center={[20, 0]}
23+
zoom={1}
24+
minZoom={1}
25+
maxClusterRadius={80}
26+
markerRadius={6}
27+
position="bottomleft"
28+
/>
12329
);
12430
}
12531

0 commit comments

Comments
 (0)