130 lines
2.6 KiB
TypeScript
130 lines
2.6 KiB
TypeScript
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 [source, setSource] = useState([]);
|
|
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();
|
|
|
|
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,
|
|
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 [];
|
|
};
|