set and zoom map to search center as set in user preference settings

Author: adisa39

.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='/path/to/default/image.png'

src/app/[locale]/page.tsx

@@ -11,7 +11,8 @@ 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 { fetchUserLocation, fetchUserSettings } from '@/services/userSettingsApi';
+import { DeviceLocationType, IUserSettings } from '@/constants/types';
 
 import { AppContext } from '../../../context/AppContextProvider';
 import logger from '../../../logger.config.mjs';
@@ -27,35 +28,66 @@ export default function Index() {
     lat: 0,
     lng: 0,
   });
+  const [searchCenter, setSetSearchCenter] = useState<{ lat: number; lng: number }>({
+    lat: 0,
+    lng: 0,
+  });
+  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);
+  const { isSigningInUser, currentUser, autoLoginUser } = useContext(AppContext);
 
   // Default map center (example: New York City)
   const defaultMapCenter = { lat: 20, lng: -74.006 };
 
   useEffect(() => {
-    const fetchLocationOnLoad = async () => {
+    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) {
+          console.log('Fetched user settings data successfully: ', data.findme)
+          logger.info('Fetched user settings data successfully:', { data });
+          setDbUserSettings(data);
+          setSetSearchCenter(data.search_map_center.coordinates)
+        } else {
+          logger.warn('User Settings not found.');
+          setDbUserSettings(null);
+        }
       } catch (error) {
-        logger.error('Error getting location on initial load.', { error });
-        setMapCenter(defaultMapCenter);
-        setZoomLevel(2);
+        logger.error('Error fetching user settings data:', { error });
       }
     };
+    getUserSettingsData();
+  }, [currentUser]);
+
+  // useEffect(() => {
+  //   const fetchLocationOnLoad = async () => {
+  //     try {
+  //       const location = await fetchUserLocation();
+  //       setMapCenter(location.origin);
+  //       setZoomLevel(location.radius);
+  //       logger.info('User location obtained successfully on initial load:', {
+  //         location,
+  //       });
+  //     } catch (error) {
+  //       logger.error('Error getting location on initial load.', { error });
+  //       setMapCenter(defaultMapCenter);
+  //       setZoomLevel(2);
+  //     }
+  //   };
 
-    fetchLocationOnLoad();
-  }, [isSigningInUser]);
+  //   fetchLocationOnLoad();
+  // }, [isSigningInUser]);
 
   const handleLocationButtonClick = async () => {
     try {
@@ -95,7 +127,7 @@ export default function Index() {
   return (
     <>
       <DynamicMap
-        center={[mapCenter.lat, mapCenter.lng]}
+        center={searchCenter}
         zoom={zoomLevel}
         mapRef={mapRef}
         searchQuery={searchQuery}

src/components/shared/map/Map.tsx

@@ -72,6 +72,13 @@ 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);
@@ -173,6 +180,8 @@ const Map = ({
         logger.warn('Map instance is not ready yet');
         return;
       }
+      console.log("initial user center:", center.toString())
+      mapInstance.setView(center, 8, { animate: true })
 
       const bounds = mapInstance.getBounds();
       if (bounds) {
@@ -203,32 +212,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) {
@@ -351,6 +338,10 @@ const Map = ({
             url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
             noWrap={true}
           />
+          <Marker
+              position={center as LatLngExpression}
+              icon={crosshairIcon}
+            ></Marker>
           <LocationMarker />
           {sellers.map((seller) => (
             <Marker

src/components/shared/sidebar/sidebar.tsx

@@ -291,11 +291,11 @@ function Sidebar(props: any) {
 
   const translateFindMeOptions = [
     {
-      value: 'auto',
+      value: 'Auto',
       name: t('SIDE_NAVIGATION.FIND_ME_OPTIONS.PREFERRED_AUTO'),
     },
     {
-      value: 'deviceGPS',
+      value: 'GPS',
       name: t('SIDE_NAVIGATION.FIND_ME_OPTIONS.PREFERRED_DEVICE_GPS'),
     },
     {

src/constants/types.ts

@@ -72,4 +72,10 @@ export type PartialReview = {
   receiver: string;
 }
 
-export interface IReviewOutput extends IReviewFeedback, PartialReview {}
+export interface IReviewOutput extends IReviewFeedback, PartialReview {}
+
+export enum DeviceLocationType {
+  Automatic = 'Auto',
+  GPS = 'GPS',
+  SearchCenter = 'searchCenter'
+}