⚡ Removed tooltip for now

app/hooks/useActions.ts

@@ -1,10 +1,7 @@
-import { PickingInfo } from 'deck.gl';
+import { FormEvent } from 'react';
-import { FormEvent, useCallback } from 'react';
 
 export const useActions = ({
-	deckRef,
 	viewState,
-	setClickedItem,
 	setIsAddLoveOpened,
 	setIsLoading,
 	setAddLoveMessage,
@@ -75,30 +72,5 @@ export const useActions = ({
 		}
 	};
 
-	const onMapClick = useCallback(
+	return { toggleLoveMenu, addPoint };
-		(ev: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-			if (!deckRef.current) return;
-
-			const containerRect = ev.currentTarget.getBoundingClientRect();
-			const x = ev.clientX - containerRect.left;
-			const y = ev.clientY - containerRect.top;
-
-			const pickInfos: PickingInfo | null = deckRef.current.pickObject({
-				x,
-				y,
-				radius: 1,
-				depth: 5,
-			});
-			console.log('pickInfos: ', pickInfos);
-			if (!pickInfos) {
-				setClickedItem(null);
-				return;
-			}
-
-			setClickedItem(pickInfos);
-		},
-		[deckRef, setClickedItem]
-	);
-
-	return { toggleLoveMenu, addPoint, onMapClick };
 };

app/hooks/useData.ts

@@ -1,5 +1,5 @@
-import { IconLayer, ScatterplotLayer } from 'deck.gl';
 import { useEffect, useRef, useState } from 'react';
+import { IconLayer, ScatterplotLayer } from 'deck.gl';
 import { StringifiedPinIcon } from '@/assets/PinIcon';
 
 export const useData = () => {
@@ -24,8 +24,6 @@ export const useData = () => {
 		zoom: 5,
 	});
 
-	const [clickedItem, setClickedItem] = useState(null);
-
 	useEffect(() => {
 		if ('geolocation' in navigator == false) {
 			setCanUseGeolocation(false);
@@ -121,8 +119,6 @@ export const useData = () => {
 		geoError,
 		layers,
 		canUseGeolocation,
-		clickedItem,
-		setClickedItem,
 		isAddLoveOpened,
 		setIsAddLoveOpened,
 		isLoading,

app/page.tsx

@@ -6,7 +6,7 @@
 // --------------------------------------------------- Components ------------------------------------------------------
 import { DeckGL } from 'deck.gl';
 import { Map } from 'react-map-gl';
-import Image from 'next/image';
+import Input from '@/components/Input/Input';
 // ---------------------------------------------------------------------------------------------------------------------
 
 // -------------------------------------------------- Hooks & Utils ----------------------------------------------------
@@ -16,13 +16,12 @@ import { useActions } from './hooks/useActions';
 
 // ------------------------------------------------- Assets & Styles ---------------------------------------------------
 import HeartIcon from '@/assets/HeartIcon';
-import Input from '@/components/Input/Input';
 import CloseIcon from '@/assets/CloseIcon';
 import AddIcon from '@/assets/AddIcon';
-import 'mapbox-gl/dist/mapbox-gl.css';
-import './styles.scss';
 import Loader from '@/assets/Loader';
 import PinIcon from '@/assets/PinIcon';
+import 'mapbox-gl/dist/mapbox-gl.css';
+import './styles.scss';
 // ---------------------------------------------------------------------------------------------------------------------
 
 const Home = () => {
@@ -33,8 +32,6 @@ const Home = () => {
 		geoError,
 		canUseGeolocation,
 		layers,
-		clickedItem,
-		setClickedItem,
 		isAddLoveOpened,
 		setIsAddLoveOpened,
 		isLoading,
@@ -43,10 +40,8 @@ const Home = () => {
 		setAddLoveMessage,
 	} = useData();
 
-	const { toggleLoveMenu, addPoint, onMapClick } = useActions({
+	const { toggleLoveMenu, addPoint } = useActions({
-		deckRef,
 		viewState,
-		setClickedItem,
 		setIsAddLoveOpened,
 		setIsLoading,
 		setAddLoveMessage,
@@ -67,10 +62,7 @@ const Home = () => {
 
 	return (
 		<div className='page'>
-			<div
+			<div className='mapContainer'>
-				className='mapContainer'
-				onClick={onMapClick}
-			>
 				<DeckGL
 					ref={deckRef}
 					initialViewState={viewState}
@@ -94,23 +86,6 @@ const Home = () => {
 						}
 						preserveDrawingBuffer
 					></Map>
-					{clickedItem && clickedItem.object ? (
-						<div
-							className='mapTooltip'
-							style={{
-								position: 'absolute',
-								zIndex: 1,
-								pointerEvents: 'none',
-								left: clickedItem.x,
-								top: clickedItem.y,
-								backgroundColor: '#ffffff',
-							}}
-						>
-							{clickedItem.object.properties.location}
-						</div>
-					) : (
-						<></>
-					)}
 				</DeckGL>
 				{isAddLoveOpened && (
 					// <Image