CORE: map hot fix

modules/map/map.jsx

@@ -1,11 +1,13 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import L from 'leaflet'
 
 import 'leaflet.markercluster'
 import styles from './styles.module.css'
 
 import { getAssetsPath } from 'utils/helpers'
 
+const KEY_MOVE = 'moveend'
+
 const centerPosition = new L.LatLng(26.523257520856546, -43.10211013159716)
 
 const markerIcon = L.icon({
@@ -16,12 +18,20 @@ const markerIcon = L.icon({
 })
 
 const CustomMap = ({ locations }) => {
+  const [visibleMarkers, setVisibleMarkers] = useState([])
   const mapRef = useRef(null)
-  const markerClusterGroupRef = useRef(null)
 
-  // Initialize the map only once
+  const loadVisibleMarkers = () => {
+    const bounds = mapRef.current.getBounds()
+    const inViewMarkers = locations.filter((loc) =>
+      bounds.contains(new L.LatLng(loc.latitude, loc.longitude))
+    )
+    setVisibleMarkers(inViewMarkers)
+  }
+
   useEffect(() => {
-    if (!mapRef.current) {
+    // Initialize the map
+    if (locations.length > 0 && !mapRef.current) {
       mapRef.current = L.map('map', {
         center: centerPosition,
         zoom: 2,
@@ -34,26 +44,39 @@ const CustomMap = ({ locations }) => {
           }),
         ],
       })
+      // Handle map movements to load new markers
+      mapRef.current.on(KEY_MOVE, loadVisibleMarkers)
+    }
+
+    // Initialize marker cluster group
+    const markerClusterGroup = new L.MarkerClusterGroup()
+    mapRef.current.addLayer(markerClusterGroup)
+
+    // Load visible markers initially
+    loadVisibleMarkers()
 
-      markerClusterGroupRef.current = new L.MarkerClusterGroup()
-      mapRef.current.addLayer(markerClusterGroupRef.current)
+    return () => {
+      // Cleanup the map and markers
+      mapRef.current.off(KEY_MOVE, loadVisibleMarkers)
+      mapRef.current.remove()
+      mapRef.current = null
     }
   }, [])
 
-  // Update markers when locations change
   useEffect(() => {
-    if (markerClusterGroupRef.current) {
-      markerClusterGroupRef.current.clearLayers()
-      locations.forEach(({ name, href, latitude, longitude }) => {
-        const marker = L.marker([latitude, longitude], {
-          icon: markerIcon,
-        }).bindPopup(
-          href ? `<a href=${href} target="_blank">${name}</a>` : name
-        )
-        markerClusterGroupRef.current.addLayer(marker)
-      })
-    }
-  }, [locations])
+    const markerClusterGroup = new L.MarkerClusterGroup()
+    // Create and add markers
+    visibleMarkers.forEach(({ name, href, latitude, longitude }) => {
+      const marker = L.marker([latitude, longitude], {
+        icon: markerIcon,
+      }).bindPopup(href ? `<a href=${href} target="_blank">${name}</a>` : name)
+      markerClusterGroup.addLayer(marker)
+    })
+
+    mapRef.current.addLayer(markerClusterGroup)
+
+    return () => markerClusterGroup.clearLayers()
+  }, [visibleMarkers])
 
   return <div id="map" className={styles.map} />
 }

pages/search/index.jsx

@@ -48,7 +48,7 @@ export const getServerSideProps = async ({ query: searchParams }) => {
       const response = await fetchWorks(body)
 
       const transformedWorks = await Promise.all(
-        response.results.map(async (work) => {
+        response?.results?.map(async (work) => {
           const articleWithUrls = findUrlsByType(work)
           return {
             ...articleWithUrls,

templates/data-provider/index.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { classNames } from '@oacore/design/lib/utils'
 import { DataProviderLogo } from '@oacore/design/lib/elements/logo'
 
@@ -37,7 +37,7 @@ const DataProviderTemplate = ({ data, onSearch, className, ...restProps }) => {
     email: data.email,
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
     search.setSortOptions(data.sort)
     search.setWorks(data.results)
     search.setQuery(data.query)

templates/data-providers/index.jsx

@@ -18,7 +18,7 @@ const filterAndMapDataProviders = (dataProviders) =>
         dataProviderLocation?.longitude != null &&
         name
     )
-    .map(({ id, name, dataProviderLocation }) => ({
+    ?.map(({ id, name, dataProviderLocation }) => ({
       name,
       href: `/data-providers/${id}`,
       latitude: dataProviderLocation?.latitude,
@@ -70,7 +70,7 @@ const SearchResults = ({
 
   return (
     <Search.Main>
-      {results.slice(0, dataProvidersSize).map((el) => (
+      {results?.slice(0, dataProvidersSize)?.map((el) => (
         <ResultCard
           key={el.id}
           repoId={el.id}
@@ -113,7 +113,7 @@ const DataProvidersSearchTemplate = React.memo(
     const getSuggestions = useCallback(
       (term) => {
         const matches = searchDataProviders(encodeURI(term))
-        return matches.slice(0, 10).map((dataProvider) => ({
+        return matches?.slice(0, 10)?.map((dataProvider) => ({
           id: dataProvider.id,
           value: dataProvider.name,
           icon: '#magnify',