✨ Display & Delete in love list

app/hooks/useData.ts

@@ -1,12 +1,25 @@
+// ---------------------------------------------------------------------------------------------------------------------
+//!                                                      Imports
+// ---------------------------------------------------------------------------------------------------------------------
+
+// -------------------------------------------------- React & Next -----------------------------------------------------
 import { useEffect, useRef, useState } from 'react';
+// ---------------------------------------------------------------------------------------------------------------------
+
+// --------------------------------------------------- Components ------------------------------------------------------
 import { IconLayer, ScatterplotLayer } from 'deck.gl';
+// ---------------------------------------------------------------------------------------------------------------------
+
+// ------------------------------------------------- Assets & Styles ---------------------------------------------------
 import { StringifiedPinIcon } from '@/assets/PinIcon';
+import { getDataset } from '../request';
+// ---------------------------------------------------------------------------------------------------------------------
 
 export const useData = () => {
 	const deckRef = useRef(null);
 
-	const [canUseGeolocation, setCanUseGeolocation] = useState(false);
-	const [geoError, setGeoError] = useState(null);
+	const [canUseGeolocation, setCanUseGeolocation] = useState<boolean>(false);
+	const [geoError, setGeoError] = useState<string | null>(null);
 	const [userLocation, setUserLocation] = useState<{ [key: string]: number }>(
 		{}
 	);
@@ -14,9 +27,9 @@ export const useData = () => {
 	const [source, setSource] = useState([]);
 	const [layers, setLayers] = useState([]);
 
-	const [isAddLoveOpened, setIsAddLoveOpened] = useState(false);
-	const [isLoading, setIsLoading] = useState(false);
-	const [addLoveMessage, setAddLoveMessage] = useState(null);
+	const [isAddLoveOpened, setIsAddLoveOpened] = useState<boolean>(false);
+	const [isLoading, setIsLoading] = useState<boolean>(false);
+	const [addLoveMessage, setAddLoveMessage] = useState<string | null>(null);
 
 	const [viewState, setViewState] = useState<any>({
 		longitude: 2.209666999999996,
@@ -61,7 +74,18 @@ export const useData = () => {
 		(async () => {
 			const dataset = await getDataset();
 
-			setSource(dataset);
+			const formattedDataset = dataset.map((point) => {
+				const properties = { ...point };
+				delete properties.geopoint;
+
+				return {
+					type: 'Feature',
+					geometry: point.geopoint,
+					properties: properties,
+				};
+			});
+
+			setSource(formattedDataset);
 		})();
 	}, []);
 
@@ -127,32 +151,3 @@ export const useData = () => {
 		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 [];
-};