Merge pull request #280 from map-of-pi/findme-geolocation

Approved (1).

Author: swoocn

.env.development

@@ -8,4 +8,4 @@ NEXT_PUBLIC_API_URL=http://localhost:8001/api/v1
 NEXT_PUBLIC_PI_SDK_URL=https://sdk.minepi.com/pi-sdk.js
 
 NEXT_PUBLIC_SENTRY_DSN="ADD YOUR SENTRY DSN"
-NEXT_PUBLIC_IMAGE_PLACEHOLDER_URL="ADD YOUR IMAGE PLACEHOLDER URL"
+NEXT_PUBLIC_IMAGE_PLACEHOLDER_URL="ADD YOUR IMAGE PLACEHOLDER URL"

src/app/[locale]/page.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import L from 'leaflet';
-
 import { useTranslations } from 'next-intl';
 import dynamic from 'next/dynamic';
 import Image from 'next/image';
@@ -11,7 +10,9 @@ 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 { fetchUserSettings } from '@/services/userSettingsApi';
+import { DeviceLocationType, IUserSettings } from '@/constants/types';
+import { userLocation } from '@/utils/geolocation';
 
 import { AppContext } from '../../../context/AppContextProvider';
 import logger from '../../../logger.config.mjs';
@@ -23,58 +24,92 @@ export default function Index() {
   });
   const mapRef = useRef<L.Map | null>(null);
 
-  const [mapCenter, setMapCenter] = useState<{ lat: number; lng: number }>({
-    lat: 0,
-    lng: 0,
-  });
+  // State management with proper typing
+  const [mapCenter, setMapCenter] = useState<{ lat: number; lng: number } | null>(null);
+  const [searchCenter, setSearchCenter] = useState<{ lat: number; lng: number } | null>(null);
+  const [findme, setFindme] = useState<DeviceLocationType>(DeviceLocationType.SearchCenter);
+  const [dbUserSettings, setDbUserSettings] = useState<IUserSettings | null>(null);
   const [zoomLevel, setZoomLevel] = useState(2);
   const [locationError, setLocationError] = useState<string | null>(null);
   const [searchQuery, setSearchQuery] = useState<string>('');
   const [isSearchClicked, setSearchClicked] = useState(false);
   const [searchResults, setSearchResults] = useState<any[]>([]);
 
-  const { isSigningInUser } = useContext(AppContext);
-
-  // Default map center (example: New York City)
-  const defaultMapCenter = { lat: 20, lng: -74.006 };
+  const { isSigningInUser, currentUser, autoLoginUser, reload, setReload } = useContext(AppContext);
 
   useEffect(() => {
-    const fetchLocationOnLoad = async () => {
+    setReload(false)
+    if (!currentUser) {
+      logger.info("User not logged in; attempting auto-login..");
+      autoLoginUser();
+    }
+
+    const getUserSettingsData = async () => {
       try {
-        const location = await fetchUserLocation();
-        setMapCenter(location.origin);
-        setZoomLevel(location.radius);
-        logger.info('User location obtained successfully on initial load:', {
-          location,
-        });
+        const data = await fetchUserSettings();
+        if (data) {
+          logger.info('Fetched user settings data successfully:', { data });
+          setDbUserSettings(data);
+          if (data.search_map_center?.coordinates) {
+            setSearchCenter({
+              lat: data.search_map_center.coordinates[1],
+              lng: data.search_map_center.coordinates[0],
+            });
+          }
+        } else {
+          logger.warn('User Settings not found.');
+          setDbUserSettings(null);
+          setSearchCenter(null)
+        }
       } catch (error) {
-        logger.error('Error getting location on initial load.', { error });
-        setMapCenter(defaultMapCenter);
-        setZoomLevel(2);
+        logger.error('Error fetching user settings data:', { error });
       }
     };
 
-    fetchLocationOnLoad();
-  }, [isSigningInUser]);
+    getUserSettingsData();   
+  }, [currentUser, reload]);
+
+  useEffect(() => {
+    const resolveLocation = async () => {
+      if (dbUserSettings && dbUserSettings.findme !== DeviceLocationType.SearchCenter) {
+        const loc = await userLocation(dbUserSettings);
+        if (loc) {
+          setSearchCenter({ lat: loc[0], lng: loc[1] });
+        }
+        else{
+          setSearchCenter(null)
+        }
+      }
+    };
+    resolveLocation();
+  }, [dbUserSettings]);
 
   const handleLocationButtonClick = async () => {
-    try {
-      const location = await fetchUserLocation();
-      setMapCenter(location.origin);
-      setZoomLevel(location.radius);
-      setLocationError(null);
-      logger.info('User location obtained successfully on button click:', {
-        location,
-      });
-    } catch (error) {
-      logger.error('Error getting location on button click.', { error });
-      setLocationError(
-        t('HOME.LOCATION_SERVICES.ENABLE_LOCATION_SERVICES_MESSAGE'),
-      );
+    if (dbUserSettings) {
+      const loc = await userLocation(dbUserSettings);
+      if (loc) {
+        setSearchCenter({ lat: loc[0], lng: loc[1] });
+        logger.info('User location obtained successfully on button click:', { location });
+      }
+      else{
+        setSearchCenter(null)
+      }
     }
+    // try {
+    //   setReload(true);
+    //   setLocationError(null);
+    //   logger.info('User location obtained successfully on button click:', { location });
+    // } catch (error) {
+    //   setReload(false)
+    //   logger.error('Error getting location on button click.', { error });
+    //   setLocationError(t('HOME.LOCATION_SERVICES.ENABLE_LOCATION_SERVICES_MESSAGE'));
+    // }
+    // finally{
+    //   setReload(false);
+    // }
   };
 
-  // handle search query update from SearchBar and associated results
+  // Handle search query update from SearchBar and associated results
   const handleSearch = async (query: string) => {
     setSearchQuery(query);
     setSearchClicked(true);
@@ -95,15 +130,15 @@ export default function Index() {
   return (
     <>
       <DynamicMap
-        center={[mapCenter.lat, mapCenter.lng]}
+        center={searchCenter}
         zoom={zoomLevel}
         mapRef={mapRef}
         searchQuery={searchQuery}
         isSearchClicked={isSearchClicked}
         searchResults={searchResults || []}
       />
       <SearchBar page={'default'} onSearch={handleSearch} />
-      <div className="absolute bottom-8 z-10   right-0 left-0 m-auto pointer-events-none">
+      <div className="absolute bottom-8 z-10 right-0 left-0 m-auto pointer-events-none">
         <div className="w-[90%] lg:w-full lg:px-6 mx-auto flex items-center justify-between">
           {/* Add Seller Button */}
           <div className="pointer-events-auto">

src/components/shared/map/Map.tsx

@@ -57,9 +57,10 @@ const Map = ({
   isSearchClicked,
   searchResults,
 }: {
-  center: LatLngExpression;
+  center: LatLngExpression | null;
   zoom: number;
-  mapRef: React.MutableRefObject<L.Map | null>;   searchQuery: string;
+  mapRef: React.MutableRefObject<L.Map | null>;   
+  searchQuery: string;
   isSearchClicked: boolean;
   searchResults: ISeller[];
 }) => {
@@ -72,22 +73,21 @@ const Map = ({
     popupAnchor: [1, -34],
   });
 
+  // Define the crosshair icon for the center of the map
+  const crosshairIcon = new L.Icon({
+    iconUrl: '/images/icons/crosshair.png',
+    iconSize: [100, 100],
+    iconAnchor: [60, 60],
+  });
+
   const [position, setPosition] = useState<L.LatLng | null>(null);
   const [sellers, setSellers] = useState<ISellerWithSettings[]>([]);
-  const [origin, setOrigin] = useState(center);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [locationError, setLocationError] = useState(false);
   const [isLocationAvailable, setIsLocationAvailable] = useState(false);
   const [initialLocationSet, setInitialLocationSet] = useState(false);
 
-  // Update origin when center prop changes
-  useEffect(() => {
-    if (center) {
-      setOrigin(center);
-    }
-  }, [center]);
-
   useEffect(() => {
     if (searchResults.length > 0) {
       const sellersWithCoordinates = searchResults.map((seller: any) => {
@@ -173,6 +173,17 @@ const Map = ({
         logger.warn('Map instance is not ready yet');
         return;
       }
+      // Set and zoom map center to search center if available
+      if (center){
+        console.log("initial map center is focus to user center:", center.toString())
+        mapInstance.setView(center, 8, { animate: true })
+      } else {
+        const worldCenter = mapRef.current?.getCenter()
+        console.log("initial map center focus to world:", worldCenter?.toString())
+        worldCenter 
+        ? mapInstance.setView(worldCenter, 2, { animate: false }) 
+        : mapRef.current = mapInstance;
+      }      
 
       const bounds = mapInstance.getBounds();
       if (bounds) {
@@ -203,32 +214,10 @@ const Map = ({
 
       logger.info('Fetched additional sellers:', { additionalSellers });
 
-      // Filter sellers within the new bounds, checking if coordinates are defined
-      const filteredSellers = additionalSellers.filter(
-        (seller) =>
-          seller.coordinates &&
-          newBounds.contains([seller.coordinates[0], seller.coordinates[1]])
-      );
-      logger.info('Filtered sellers within bounds', { filteredSellers });
-
-      // Filter out sellers that are not within the new bounds from the existing sellers
-      const remainingSellers = sellers.filter(
-        (seller) =>
-          seller.coordinates &&
-          newBounds.contains([seller.coordinates[0], seller.coordinates[1]])
-      );
-      logger.info('Remaining sellers within bounds:', { remainingSellers });
-
-      // Combine remaining and filtered sellers, remove duplicates, and cap at 36 sellers
-      const updatedSellers = removeDuplicates([...remainingSellers, ...filteredSellers]);
-
-      // Log the combined sellers before slicing
-      logger.info('Combined sellers (before capping at 36):', { updatedSellers });
-
-      setSellers(updatedSellers.slice(0, 36)); // Cap the total sellers to 36
+      setSellers(additionalSellers); // Cap the total sellers to 36
 
       logger.info('Sellers after capping at 36:', {
-        updatedSellers: updatedSellers.slice(0, 36),
+        additionalSellers: additionalSellers,
       });
 
     } catch (error) {
@@ -254,10 +243,8 @@ const Map = ({
         logger.info(`Location found: ${e.latlng.toString()}`);
         setPosition(e.latlng);
         setLocationError(false);
-        if (!initialLocationSet) {
-          map.setView(e.latlng, zoom, { animate: false });
-          setInitialLocationSet(true);
-          setIsLocationAvailable(true);
+        if (center) {
+          map.setView(center, zoom, { animate: false });
         }
       },
       locationerror() {
@@ -288,7 +275,7 @@ const Map = ({
       }
     }, [position, map, initialLocationSet]);
 
-    return position === null ? null : <Marker position={position} />;
+    return center === null ? null : <Marker position={center} icon={crosshairIcon} />;
   }
 
   // Define map boundaries
@@ -334,8 +321,8 @@ const Map = ({
         </div>
       ) : (
         <MapContainer
-          center={isLocationAvailable ? origin : [0, 0]}
-          zoom={isLocationAvailable ? zoom : 2}
+          center={center ? center : [0,0]}
+          zoom={center ? zoom : 2}
           zoomControl={false}
           minZoom={2}
           maxZoom={18}

src/components/shared/sidebar/sidebar.tsx

@@ -1,6 +1,6 @@
 import styles from './sidebar.module.css';
 
-import { useTranslations } from 'next-intl';
+import { useTranslations, useLocale } from 'next-intl';
 import { useTheme } from 'next-themes';
 import Image from 'next/image';
 import Link from 'next/link';
@@ -53,9 +53,10 @@ function isLanguageMenuItem(item: MenuItem): item is LanguageMenuItem {
 function Sidebar(props: any) {
   const t = useTranslations();
   const pathname = usePathname();
+  const local = useLocale();
   const router = useRouter();
 
-  const { currentUser, autoLoginUser } = useContext(AppContext);
+  const { currentUser, autoLoginUser, setReload } = useContext(AppContext);
   const [dbUserSettings, setDbUserSettings] = useState<IUserSettings | null>(null);
   // Initialize state with appropriate types
   const [formData, setFormData] = useState<{
@@ -249,6 +250,9 @@ function Sidebar(props: any) {
         setIsSaveEnabled(false);
         logger.info('User Settings saved successfully:', { data });
         toast.success(t('SIDE_NAVIGATION.VALIDATION.SUCCESSFUL_PREFERENCES_SUBMISSION'));
+        if (pathname === '/' || pathname === `/${local}`) {
+          setReload(true);
+        }
       }
     } catch (error) {
       logger.error('Error saving user settings:', { error });

src/constants/types.ts

@@ -61,6 +61,12 @@ export interface ReviewInt {
   image: string;
 }
 
+export enum DeviceLocationType {
+  Automatic = 'auto',
+  GPS = 'deviceGPS',
+  SearchCenter = 'searchCenter'
+}
+
 // Select specific fields from IUserSettings
 export type PartialUserSettings = Pick<IUserSettings, 'user_name' | 'email' | 'phone_number' | 'findme' | 'trust_meter_rating'>;
 
@@ -72,4 +78,5 @@ export type PartialReview = {
   receiver: string;
 }
 
-export interface IReviewOutput extends IReviewFeedback, PartialReview {}
+export interface IReviewOutput extends IReviewFeedback, PartialReview {}
+