🐛 Hide layer when adding a new love

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,

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'
 					/>

assets/PinIcon.tsx

@@ -6,6 +6,7 @@ const PinIcon = (props) => {
 			x='0px'
 			y='0px'
 			viewBox='0 0 100 100'
+			fill='#d94253'
 			{...props}
 		>
 			<g>