Misc PR adjustments based on sandbox testing.

Author: swoocn

src/app/[locale]/page.tsx

@@ -40,6 +40,7 @@ export default function Index() {
   const [zoomLevel, setZoomLevel] = useState(2);
   const [locationError, setLocationError] = useState<string | null>(null);
   const [searchQuery, setSearchQuery] = useState<string>('');
+  const [searchResults, setSearchResults] = useState<any[]>([]);
 
   // Default map center (example: New York City)
   const defaultMapCenter = { lat: 20, lng: -74.0060 };
@@ -74,14 +75,15 @@ export default function Index() {
     }
   };
 
-  // handle search query update from SearchBar
-  const handleSearch = (query: string) => {
+  // handle search query update from SearchBar and associated results
+  const handleSearch = (query: string, results: any[]) => {
     setSearchQuery(query);
+    setSearchResults(results);
   }
 
   return (
     <>
-      <DynamicMap center={[mapCenter.lat, mapCenter.lng]} zoom={zoomLevel} searchQuery={searchQuery} />
+      <DynamicMap center={[mapCenter.lat, mapCenter.lng]} zoom={zoomLevel} searchQuery={searchQuery} searchResults={searchResults || []} />
       <SearchBar page={'default'} onSearch={handleSearch} />
       <div className="absolute bottom-8 z-10 flex justify-between gap-[22px] px-6 right-0 left-0 m-auto">
         <Link href="/seller/registration">

src/components/shared/SearchBar/SearchBar.tsx

@@ -11,7 +11,7 @@ import { fetchSellers } from '@/services/sellerApi';
 import logger from '../../../../logger.config.mjs';
 
 interface searchBarProps {
-  onSearch?: (query: string) => void;
+  onSearch?: (query: string, results: any[]) => void;
   page: 'map_center' | 'default';
 }
 
@@ -53,15 +53,10 @@ const SearchBar: React.FC<searchBarProps> = ({ onSearch, page }) => {
   const handleSubmitSearch = async (event: FormEvent) => {
     event.preventDefault();
     const query = searchBarValue.trim();
-
-    if (query) {
-      logger.debug(`Search query submitted: ${query}`);
-      const results = await fetchSearchResults(query);
-      if (onSearch) {
-        onSearch(query);  // notify parent of the search query to update map
-      }
-    } else {
-      logger.warn('Search query is empty');
+    logger.debug(`Search query submitted: ${query}`);
+    const results = await fetchSearchResults(query);
+    if (onSearch) {
+      onSearch(query, results);  // notify parent of the search query to update map
     }
   };
 

src/components/shared/map/Map.tsx

@@ -27,7 +27,7 @@ const fetchSellerCoordinates = async (origin: LatLngTuple, radius: number, searc
 
   try {
     const sellersData = await fetchSellers(formattedOrigin, radius, searchQuery);
-    const sellersWithCoordinates = sellersData.map((seller: any) => {
+    const sellersWithCoordinates = sellersData?.map((seller: any) => {
       const [lng, lat] = seller.sell_map_center.coordinates;
       return {
         ...seller,
@@ -53,7 +53,7 @@ const removeDuplicates = (sellers: ISeller[]): ISeller[] => {
   return Object.values(uniqueSellers);
 };
 
-const Map = ({ center, zoom, searchQuery }: { center: LatLngExpression, zoom: number, searchQuery: string }) => {
+const Map = ({ center, zoom, searchQuery, searchResults }: { center: LatLngExpression, zoom: number, searchQuery: string, searchResults: ISeller[] }) => {
   const t = useTranslations();
 
   const customIcon = L.icon({
@@ -87,12 +87,27 @@ const Map = ({ center, zoom, searchQuery }: { center: LatLngExpression, zoom: nu
     }
   }, [center]);
 
-  // Update map markers when searchQuery prop changes
   useEffect(() => {
     if (searchQuery) {
-      fetchInitialCoordinates();
+      setLoading(true);
+  
+      const sellersWithCoordinates = searchResults
+        .map((seller: any) => {
+          const [lng, lat] = seller.sell_map_center.coordinates;
+          return {
+            ...seller,
+            coordinates: [lat, lng] as LatLngTuple
+          };
+        });
+            
+      // Remove duplicates
+      const uniqueSellers = removeDuplicates(sellersWithCoordinates);
+  
+      // Update the sellers state
+      setSellers(uniqueSellers);
+      setLoading(false);
     }
-  }, [searchQuery, origin, radius]);
+  }, [searchQuery, searchResults]);
 
   // Log sellers array for debugging
   useEffect(() => {
@@ -117,7 +132,7 @@ const Map = ({ center, zoom, searchQuery }: { center: LatLngExpression, zoom: nu
     }
   };
 
-  // Function to handle map interactions (zoom and move)
+  // Function to handle map interactions (zoom and move); lazy-loading implementation
   const handleMapInteraction = async (newBounds: L.LatLngBounds, mapInstance: L.Map) => {
     const newCenter = newBounds.getCenter();
     const newRadius = calculateRadius(newBounds, mapInstance);