✨ Add & display loves on map

app/hooks/useData.ts

@@ -0,0 +1,119 @@
+import { IconLayer } from 'deck.gl';
+import { useEffect, useRef, useState } from 'react';
+import { StringifiedPinIcon } from '@/assets/PinIcon';
+
+export const useData = () => {
+	const deckRef = useRef(null);
+
+	const [canUseGeolocation, setCanUseGeolocation] = useState(false);
+	const [geoError, setGeoError] = useState(null);
+
+	const [layers, setLayers] = useState([]);
+
+	const [isAddLoveOpened, setIsAddLoveOpened] = useState(false);
+	const [isLoading, setIsLoading] = useState(false);
+	const [addLoveMessage, setAddLoveMessage] = useState(null);
+
+	const [viewState, setViewState] = useState<any>({
+		longitude: 2.209666999999996,
+		latitude: 46.232192999999995,
+		zoom: 5,
+	});
+
+	useEffect(() => {
+		if ('geolocation' in navigator == false) {
+			setCanUseGeolocation(false);
+			return;
+		}
+
+		setCanUseGeolocation(true);
+
+		navigator.geolocation.getCurrentPosition(
+			(position) => {
+				setViewState((prev) => ({
+					...prev,
+					latitude: position.coords.latitude,
+					longitude: position.coords.longitude,
+				}));
+			},
+			(error) => {
+				if (error.PERMISSION_DENIED) {
+					setGeoError('permission_denied');
+					console.warn(error.message);
+				}
+			}
+		);
+
+		(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]);
+		})();
+	}, []);
+
+	return {
+		deckRef,
+		viewState,
+		setViewState,
+		geoError,
+		layers,
+		canUseGeolocation,
+		isAddLoveOpened,
+		setIsAddLoveOpened,
+		isLoading,
+		setIsLoading,
+		addLoveMessage,
+		setAddLoveMessage,
+	};
+};
+
+const getDataset = async () => {
+	const token = localStorage.getItem('token');
+	const request = await fetch('/api/point', {
+		method: 'GET',
+		headers: {
+			Authorization: token,
+		},
+	});
+
+	const response = await request.json();
+
+	if (response) {
+		const formattedData = response.map((point) => {
+			const properties = { ...point };
+			delete properties.geopoint;
+
+			return {
+				type: 'Feature',
+				geometry: point.geopoint,
+				properties: properties,
+			};
+		});
+
+		return formattedData;
+	}
+
+	return [];
+};