Merge pull request #175 from map-of-pi/configured-the-search-integration

Approved (1) after addtl. adjustments.

Author: swoocn

package-lock.json

@@ -34,7 +34,7 @@
     "leaflet-geosearch": "^3.11.1",
     "loglevel": "^1.9.1",
     "next": "^14.2.4",
-    "next-intl": "^3.17.2",
+    "next-intl": "^3.19.1",
     "next-logger": "^4.0.0",
     "next-themes": "^0.3.0",
     "ngx-logger": "^5.0.12",

package.json

@@ -39,6 +39,8 @@ export default function Index() {
   const [mapCenter, setMapCenter] = useState<{ lat: number; lng: number }>({ lat: 0, lng: 0 });
   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 };
@@ -73,10 +75,16 @@ export default function Index() {
     }
   };
 
+  // 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} />
-      <SearchBar page={'default'} />
+      <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">
           <Button

src/app/[locale]/page.tsx

@@ -1,105 +1,87 @@
-'use client'
+'use client';
 
 import './SearchBar.scss';
 
 import { useTranslations } from 'next-intl';
-
 import { useState, useRef, ChangeEvent, FormEvent } from 'react';
-
-import { FormControl } from '@mui/material';
+import { FormControl, TextField } from '@mui/material';
 import SearchIcon from '@mui/icons-material/Search';
-import Snackbar from '@mui/material/Snackbar';
-import TextField from '@mui/material/TextField';
+import { fetchSellers } from '@/services/sellerApi';
 
 import logger from '../../../../logger.config.mjs';
 
 interface searchBarProps {
-  onSearch?:(query:string) => void;
-  page: 'map_center' | 'default'; 
+  onSearch?: (query: string, results: any[]) => void;
+  page: 'map_center' | 'default';
 }
 
 const SearchBar: React.FC<searchBarProps> = ({ onSearch, page }) => {
   const t = useTranslations();
+
   const [searchBarValue, setSearchBarValue] = useState('');
-  const [message, setMessage] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const inputRef = useRef<HTMLInputElement>(null);
 
-  // function to get the placeholder text based on the screen
   const getPlaceholderText = (page: 'map_center' | 'default'): string => {
-    switch (page) {
-      case 'map_center':
-        return t('SHARED.MAP_CENTER.SEARCH_BAR_PLACEHOLDER');
-      default:
-        return t('HOME.SEARCH_BAR_PLACEHOLDER');
-    }
+    return page === 'map_center'
+      ? t('SHARED.MAP_CENTER.SEARCH_BAR_PLACEHOLDER')
+      : t('HOME.SEARCH_BAR_PLACEHOLDER');
   };
+
   const placeholder = getPlaceholderText(page);
 
   const handleSearchBarChange = (event: ChangeEvent<HTMLInputElement>) => {
     logger.debug(`Search bar value changed: ${event.target.value}`);
     setSearchBarValue(event.target.value);
   };
-  
-  const inputRef = useRef<HTMLInputElement>(null);
 
   const fetchSearchResults = async (query: string): Promise<any[]> => {
-    logger.debug(`Fetching search results for query: "${query}"`);
-    // fetch logic to be defined here
-    // For now, it returns an empty array
-    return new Promise((resolve) => resolve([]));
+    setLoading(true);
+    try {
+      logger.debug(`Fetching search results for query: "${query}"`);
+      const data = await fetchSellers(undefined, undefined, query);
+      return data || []; // Return response.data or empty array if undefined
+    } catch (error) {
+      logger.error(`Error fetching search results: ${error}`);
+      return [];
+    } finally {
+      setLoading(false);
+    }
   };
 
-  const setSearchQuery = (query: string) => {
-    // setSearchQuery logic here
-  };
-  
   const handleSubmitSearch = async (event: FormEvent) => {
     event.preventDefault();
-    const query = searchBarValue;
-    if (query) {
-      logger.info(`Search query submitted: ${query}`);
-      
-      if (onSearch) {
-        onSearch(query);
-      } else {
-        // Default search handling
-        const searchResults = await fetchSearchResults(query);
-        setSearchQuery(query);
-        logger.info(`Your search found ${searchResults.length} shops`);
-      }
-    } else {
-      logger.warn('Search query is empty');
+    const query = searchBarValue.trim();
+    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
     }
   };
 
   return (
     <div className="w-[90%] m-auto left-0 right-0 max-w-[504px] fixed top-[120px] z-10 flex">
-       <Snackbar
-        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
-        open={!!message}
-        message={message}
-        autoHideDuration={6000}
-        onClose={() => setMessage('')}
-      />
       <div className="w-[100%] m-auto flex items-center">
         <form className="w-full flex items-center gap-2 justify-between" onSubmit={handleSubmitSearch}>
           <FormControl className="flex-grow mr-3">
-            <TextField 
-              id="search-input" 
-              type="text" 
+            <TextField
+              id="search-input"
+              type="text"
               variant="outlined"
               color="success"
               className="bg-white hover:bg-gray-100 w-full rounded"
-              label={ placeholder }
-              value={searchBarValue} 
+              label={placeholder}
+              value={searchBarValue}
               onChange={handleSearchBarChange}
               ref={inputRef}
             />
           </FormControl>
           <button
             aria-label="search"
-            className="bg-primary rounded h-full w-15 p-[15.5px] flex items-center justify-center hover:bg-gray-600" 
-            // onClick={handleSubmitSearch} style={{backgroundColor: 'red'}}
-            >
+            type="submit"
+            className="bg-primary rounded h-full w-15 p-[15.5px] flex items-center justify-center hover:bg-gray-600"
+          >
             <SearchIcon className="text-[#ffc153]" />
           </button>
         </form>

src/components/shared/SearchBar/SearchBar.tsx

@@ -20,14 +20,14 @@ const sanitizeCoordinates = (lat: number, lng: number) => {
   return { lat: sanitizedLat, lng: sanitizedLng };
 };
 
-// Function to fetch seller coordinates based on origin and radius
-const fetchSellerCoordinates = async (origin: LatLngTuple, radius: number): Promise<ISeller[]> => {
+// Function to fetch seller coordinates based on origin, radius, and optional search query
+const fetchSellerCoordinates = async (origin: LatLngTuple, radius: number, searchQuery?: string): Promise<ISeller[]> => {
   const { lat, lng } = sanitizeCoordinates(origin[0], origin[1]);
   const formattedOrigin = toLatLngLiteral([lat, lng]);
 
   try {
-    const sellersData = await fetchSellers(formattedOrigin, radius);
-    const sellersWithCoordinates = sellersData.map((seller: any) => {
+    const sellersData = await fetchSellers(formattedOrigin, radius, searchQuery);
+    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 }: { center: LatLngExpression, zoom: number }) => {
+const Map = ({ center, zoom, searchQuery, searchResults }: { center: LatLngExpression, zoom: number, searchQuery: string, searchResults: ISeller[] }) => {
   const t = useTranslations();
 
   const customIcon = L.icon({
@@ -72,7 +72,7 @@ const Map = ({ center, zoom }: { center: LatLngExpression, zoom: number }) => {
   const [locationError, setLocationError] = useState(false);
   const [isLocationAvailable, setIsLocationAvailable] = useState(false);
   const [initialLocationSet, setInitialLocationSet] = useState(false);
-
+  
   // Fetch initial seller coordinates when component mounts
   useEffect(() => {
     logger.info('Component mounted, fetching initial coordinates..');
@@ -87,6 +87,28 @@ const Map = ({ center, zoom }: { center: LatLngExpression, zoom: number }) => {
     }
   }, [center]);
 
+  useEffect(() => {
+    if (searchQuery) {
+      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, searchResults]);
+
   // Log sellers array for debugging
   useEffect(() => {
     logger.debug('Sellers Array:', { sellers });
@@ -99,7 +121,7 @@ const Map = ({ center, zoom }: { center: LatLngExpression, zoom: number }) => {
     try {
       const originLiteral = toLatLngLiteral(origin);
       const originLatLngTuple: LatLngTuple = [originLiteral.lat, originLiteral.lng];
-      let sellersData = await fetchSellerCoordinates(originLatLngTuple, radius);
+      let sellersData = await fetchSellerCoordinates(originLatLngTuple, radius, searchQuery);
       sellersData = removeDuplicates(sellersData);
       setSellers(sellersData);
     } catch (error) {
@@ -110,7 +132,7 @@ const Map = ({ center, zoom }: { center: LatLngExpression, zoom: number }) => {
     }
   };
 
-  // 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);
@@ -121,7 +143,7 @@ const Map = ({ center, zoom }: { center: LatLngExpression, zoom: number }) => {
     setError(null);
 
     try {
-      let additionalSellers = await fetchSellerCoordinates([newCenter.lat, newCenter.lng], largerRadius);
+      let additionalSellers = await fetchSellerCoordinates([newCenter.lat, newCenter.lng], largerRadius, searchQuery);
       additionalSellers = removeDuplicates(additionalSellers);
 
       logger.info('Fetched additional sellers:', { additionalSellers });
@@ -196,6 +218,7 @@ const Map = ({ center, zoom }: { center: LatLngExpression, zoom: number }) => {
         setPosition(e.latlng);
         setLocationError(false);
         if (!initialLocationSet) {
+          console.log('in location');
           map.setView(e.latlng, zoom, { animate: false });
           setInitialLocationSet(true);
         }