From c7de74693bf7632c0b061fda3d93b56d59bba665 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Un=20=C3=89picier?= <alexisvasseur96@gmail.com>
Date: Tue, 1 Oct 2024 22:53:53 +0200
Subject: [PATCH] :bug: Hide layer when adding a new love

---
 app/hooks/useData.ts | 56 ++++++++++++++++++++++++++------------------
 app/page.tsx         | 12 ++++++----
 assets/PinIcon.tsx   |  1 +
 3 files changed, 42 insertions(+), 27 deletions(-)

diff --git a/app/hooks/useData.ts b/app/hooks/useData.ts
index 52ed6a6..7e9c8b8 100644
--- a/app/hooks/useData.ts
+++ b/app/hooks/useData.ts
@@ -8,6 +8,7 @@ export const useData = () => {
 	const [canUseGeolocation, setCanUseGeolocation] = useState(false);
 	const [geoError, setGeoError] = useState(null);
 
+	const [source, setSource] = useState([]);
 	const [layers, setLayers] = useState([]);
 
 	const [isAddLoveOpened, setIsAddLoveOpened] = useState(false);
@@ -47,32 +48,41 @@ export const useData = () => {
 		(async () => {
 			const dataset = await getDataset();
 
-			const datasetLayer = new IconLayer({
-				id: 'lovePoints',
-				data: dataset,
-				iconAtlas: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(
-					StringifiedPinIcon()
-				)}`,
-				iconMapping: {
-					marker: {
-						x: 0,
-						y: 0,
-						width: 100,
-						height: 100,
-						anchorY: 100,
-					},
-				},
-				getIcon: (d) => 'marker',
-				getSize: (d) => 35,
-				getPosition: (d) => d.geometry.coordinates,
-				billboard: true,
-				pickable: true,
-			});
-
-			setLayers([datasetLayer]);
+			setSource(dataset);
 		})();
 	}, []);
 
+	useEffect(() => {
+		if (isAddLoveOpened) {
+			setLayers([]);
+			return;
+		}
+
+		const datasetLayer = new IconLayer({
+			id: 'lovePoints',
+			data: source,
+			iconAtlas: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(
+				StringifiedPinIcon()
+			)}`,
+			iconMapping: {
+				marker: {
+					x: 0,
+					y: 0,
+					width: 100,
+					height: 100,
+					anchorY: 100,
+				},
+			},
+			getIcon: (d) => 'marker',
+			getSize: (d) => 35,
+			getPosition: (d) => d.geometry.coordinates,
+			billboard: true,
+			pickable: true,
+		});
+
+		setLayers([datasetLayer]);
+	}, [source, isAddLoveOpened]);
+
 	return {
 		deckRef,
 		viewState,
diff --git a/app/page.tsx b/app/page.tsx
index 3b676a8..ee6da45 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -19,10 +19,10 @@ import HeartIcon from '@/assets/HeartIcon';
 import Input from '@/components/Input/Input';
 import CloseIcon from '@/assets/CloseIcon';
 import AddIcon from '@/assets/AddIcon';
-import pin from '@/assets/pin.png';
 import 'mapbox-gl/dist/mapbox-gl.css';
 import './styles.scss';
 import Loader from '@/assets/Loader';
+import PinIcon from '@/assets/PinIcon';
 // ---------------------------------------------------------------------------------------------------------------------
 
 const Home = () => {
@@ -89,9 +89,13 @@ const Home = () => {
 					></Map>
 				</DeckGL>
 				{isAddLoveOpened && (
-					<Image
-						src={pin}
-						alt='pin'
+					// <Image
+					// 	src={pin}
+					// 	alt='pin'
+					// 	width={30}
+					// 	className='pinImage'
+					// />
+					<PinIcon
 						width={30}
 						className='pinImage'
 					/>
diff --git a/assets/PinIcon.tsx b/assets/PinIcon.tsx
index ad89bcd..917c7b4 100644
--- a/assets/PinIcon.tsx
+++ b/assets/PinIcon.tsx
@@ -6,6 +6,7 @@ const PinIcon = (props) => {
 			x='0px'
 			y='0px'
 			viewBox='0 0 100 100'
+			fill='#d94253'
 			{...props}
 		>
 			<g>