diff --git a/src/components/space/charts/ActionsMap.tsx b/src/components/space/charts/ActionsMap.tsx index bb35b376..03afad69 100644 --- a/src/components/space/charts/ActionsMap.tsx +++ b/src/components/space/charts/ActionsMap.tsx @@ -5,6 +5,7 @@ import { useTheme } from '@mui/material/styles'; import GoogleMapReact from 'google-map-react'; import useSupercluster from 'use-supercluster'; +import StyledAlert from '@/components/common/StyledAlert'; import { GOOGLE_KEY } from '@/config/env'; import { useAnalyticsTranslation } from '@/config/i18n'; @@ -34,10 +35,6 @@ const ActionsMap = (): JSX.Element | null => { const [zoom, setZoom] = useState(DEFAULT_ZOOM); const { actions, selectedUsers } = useContext(DataContext); - if (!GOOGLE_KEY) { - return null; - } - // actionsToChart is the array converted to GeoJSON Feature objects below // if you remove all names in the react-select dropdown, selectedUsers becomes null // if no users are selected (i.e. selectedUsers.size === 0), show all actions @@ -52,6 +49,11 @@ const ActionsMap = (): JSX.Element | null => { actionsToChart = filterActionsByUsers(actions, selectedUsers); } + // NO Google key + if (!GOOGLE_KEY) { + return null; + } + // GeoJSON Feature objects const points = mapActionsToGeoJsonFeatureObjects(actionsToChart); @@ -78,76 +80,88 @@ const ActionsMap = (): JSX.Element | null => { mapRef.current.panTo({ lng: longitude, lat: latitude }); }; + // no actions for that item + if (!actionsToChart.length) { + return null; + } + return ( <> - - { - mapRef.current = map; - }} - onChange={(map) => { - setZoom(map.zoom); - setBounds([ - map.bounds.nw.lng, - map.bounds.se.lat, - map.bounds.se.lng, - map.bounds.nw.lat, - ]); - }} - > - {clusters.map((cluster) => { - const [longitude, latitude] = cluster.geometry.coordinates; - const { cluster: isCluster, point_count: pointCount } = - cluster.properties; - if (isCluster) { - return ( - - handleClusterZoom(longitude, latitude)} - onKeyDown={(event) => { - if (event.key === ENTER_KEY) { - handleClusterZoom(longitude, latitude); - } - }} - role="button" - tabIndex={0} - > - {pointCount} - - - ); - } - return null; - })} - - + {points.length !== actionsToChart.length && ( + + {t('ACTIONS_MIGHT_HAS_NO_GEOLOCATION')} + + )} + {points.length > 0 && ( + + { + mapRef.current = map; + }} + onChange={(map) => { + setZoom(map.zoom); + setBounds([ + map.bounds.nw.lng, + map.bounds.se.lat, + map.bounds.se.lng, + map.bounds.nw.lat, + ]); + }} + > + {clusters.map((cluster) => { + const [longitude, latitude] = cluster.geometry.coordinates; + const { cluster: isCluster, point_count: pointCount } = + cluster.properties; + if (isCluster) { + return ( + + handleClusterZoom(longitude, latitude)} + onKeyDown={(event) => { + if (event.key === ENTER_KEY) { + handleClusterZoom(longitude, latitude); + } + }} + role="button" + tabIndex={0} + > + {pointCount} + + + ); + } + return null; + })} + + + )} > ); }; diff --git a/src/langs/en.json b/src/langs/en.json index eaa7a412..795e52e5 100644 --- a/src/langs/en.json +++ b/src/langs/en.json @@ -57,5 +57,6 @@ "USER_SWITCH_SWITCH_USER_TEXT": "Sign in with another account", "APPS_ANALYTICS_TITLE": "Applications", "USER_SWITCH_SIGN_IN_TEXT": "Sign In", - "DRAWER_OPEN_ARIA": "Open Sidebar" + "DRAWER_OPEN_ARIA": "Open Sidebar", + "ACTIONS_MIGHT_HAS_NO_GEOLOCATION": "Some actions might have no geolocation records" }