🐛 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,9 +48,19 @@ export const useData = () => {
 		(async () => {
 			const dataset = await getDataset();
 
+			setSource(dataset);
+		})();
+	}, []);
+
+	useEffect(() => {
+		if (isAddLoveOpened) {
+			setLayers([]);
+			return;
+		}
+
 		const datasetLayer = new IconLayer({
 			id: 'lovePoints',
-				data: dataset,
+			data: source,
 			iconAtlas: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(
 				StringifiedPinIcon()
 			)}`,
@@ -70,8 +81,7 @@ export const useData = () => {
 		});
 
 		setLayers([datasetLayer]);
-		})();
+	}, [source, isAddLoveOpened]);
-	}, []);
 
 	return {
 		deckRef,

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
+					// <Image
-						src={pin}
+					// 	src={pin}
-						alt='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>