Merge pull request #252 from map-of-pi/feature/lazy-loading-modification

Approved (1).

Author: swoocn

context/AppContextProvider.tsx

@@ -68,7 +68,7 @@ const AppContextProvider = ({ children }: AppContextProviderProps) => {
           logger.info('User authenticated successfully.');
           setTimeout(() => {
             setIsSigningInUser(false); // hide the splash screen after the delay
-          }, 5000);
+          }, 2500);
         } else if (res.status === 500) {
           setCurrentUser(null);
           logger.error('User authentication failed.');
@@ -94,7 +94,7 @@ const AppContextProvider = ({ children }: AppContextProviderProps) => {
         setCurrentUser(res.data);
         setTimeout(() => {
           setIsSigningInUser(false); // hide the splash screen after the delay
-        }, 5000);
+        }, 2500);
       } else {
         setCurrentUser(null);
         logger.warn('Auto-login failed.');

src/app/[locale]/page.tsx

@@ -1,13 +1,16 @@
 'use client';
 
+import L from 'leaflet';
+
 import { useTranslations } from 'next-intl';
 import dynamic from 'next/dynamic';
 import Image from 'next/image';
 import Link from 'next/link';
-import { useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useState, useRef } from 'react';
 
 import { Button } from '@/components/shared/Forms/Buttons/Buttons';
 import SearchBar from '@/components/shared/SearchBar/SearchBar';
+import { fetchSellers } from '@/services/sellerApi';
 import { fetchUserLocation } from '@/services/userSettingsApi';
 
 import { AppContext } from '../../../context/AppContextProvider';
@@ -18,6 +21,7 @@ export default function Index() {
   const DynamicMap = dynamic(() => import('@/components/shared/map/Map'), {
     ssr: false,
   });
+  const mapRef = useRef<L.Map | null>(null);
 
   const [mapCenter, setMapCenter] = useState<{ lat: number; lng: number }>({
     lat: 0,
@@ -71,17 +75,29 @@ export default function Index() {
   };
 
   // handle search query update from SearchBar and associated results
-  const handleSearch = (query: string, results: any[]) => {
+  const handleSearch = async (query: string) => {
     setSearchQuery(query);
     setSearchClicked(true);
-    setSearchResults(results);
+
+    // Fetch sellers based on current map bounds and search query
+    try {
+      const mapInstance = mapRef.current;
+      if (mapInstance) {
+        const bounds = mapInstance.getBounds();
+        const results = await fetchSellers(bounds, query); // Use API to fetch sellers
+        setSearchResults(results || []); // Update searchResults
+      }
+    } catch (error) {
+      logger.error('Failed to fetch sellers for search query.', { error });
+    }
   };
 
   return (
     <>
       <DynamicMap
         center={[mapCenter.lat, mapCenter.lng]}
         zoom={zoomLevel}
+        mapRef={mapRef}
         searchQuery={searchQuery}
         isSearchClicked={isSearchClicked}
         searchResults={searchResults || []}

src/components/shared/SearchBar/SearchBar.tsx

@@ -3,29 +3,23 @@
 import './SearchBar.scss';
 
 import { useTranslations } from 'next-intl';
-import { useContext, useState, useRef, ChangeEvent, FormEvent } from 'react';
+import { useContext, useState, ChangeEvent, FormEvent } from 'react';
 import { FormControl, TextField } from '@mui/material';
 import SearchIcon from '@mui/icons-material/Search';
-import { fetchSellers } from '@/services/sellerApi';
-
 import logger from '../../../../logger.config.mjs';
 import { AppContext } from '../../../../context/AppContextProvider';
 
-interface searchBarProps {
-  onSearch?: (query: string, results: any[]) => void;
+interface SearchBarProps {
+  onSearch?: (query: string) => void;
   page: 'map_center' | 'default';
 }
 
-const SearchBar: React.FC<searchBarProps> = ({ onSearch, page }) => {
+const SearchBar: React.FC<SearchBarProps> = ({ onSearch, page }) => {
   const t = useTranslations();
 
   const [searchBarValue, setSearchBarValue] = useState('');
-  const [loading, setLoading] = useState(false);
-
   const { isSigningInUser } = useContext(AppContext);
 
-  const inputRef = useRef<HTMLInputElement>(null);
-
   const getPlaceholderText = (page: 'map_center' | 'default'): string => {
     return page === 'map_center'
       ? t('SHARED.MAP_CENTER.SEARCH_BAR_PLACEHOLDER')
@@ -39,47 +33,36 @@ const SearchBar: React.FC<searchBarProps> = ({ onSearch, page }) => {
     setSearchBarValue(event.target.value);
   };
 
-  const fetchSearchResults = async (query: string): Promise<any[]> => {
-    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 handleSubmitSearch = async (event: FormEvent) => {
+  const handleSubmitSearch = (event: FormEvent) => {
     event.preventDefault();
     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
+      onSearch(query); // Pass the query to the parent component
     }
   };
 
   return (
     <div className="w-[90%] m-auto left-0 right-0 max-w-[504px] fixed top-[120px] z-10 flex">
       <div className="w-[100%] m-auto flex items-center">
-        <form className="w-full flex items-center gap-2 justify-between" onSubmit={handleSubmitSearch}>
+        <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"
-                variant="outlined"
-                color="success"
-                className={`w-full rounded ${isSigningInUser ? 'bg-gray-200' : 'bg-white hover:bg-gray-100'}`}
-                label={`${isSigningInUser ? '' : placeholder}`}
-                value={searchBarValue}
-                onChange={handleSearchBarChange}
-                ref={inputRef}
-                disabled={isSigningInUser}
-                InputLabelProps={{ className: 'custom-label' }}
+              id="search-input"
+              type="text"
+              variant="outlined"
+              color="success"
+              className={`w-full rounded ${
+                isSigningInUser ? 'bg-gray-200' : 'bg-white hover:bg-gray-100'
+              }`}
+              label={isSigningInUser ? '' : placeholder}
+              value={searchBarValue}
+              onChange={handleSearchBarChange}
+              disabled={isSigningInUser}
+              InputLabelProps={{ className: 'custom-label' }}
             />
           </FormControl>
           <button
@@ -89,7 +72,7 @@ const SearchBar: React.FC<searchBarProps> = ({ onSearch, page }) => {
               ${isSigningInUser ? 'bg-tertiary' : 'bg-primary hover:bg-gray-500'}`}
             disabled={isSigningInUser}
           >
-            <SearchIcon fontSize={"large"} className=" text-[#ffc153]" />
+            <SearchIcon fontSize={'large'} className="text-[#ffc153]" />
           </button>
         </form>
       </div>