🐛 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,