63 lines
2.4 KiB
TypeScript
63 lines
2.4 KiB
TypeScript
import { useDriverStore, useLocationStore } from "@/store";
|
|
import { calculateDriverTimes, calculateRegion, generateMarkersFromData } from "@/lib/map";
|
|
import MapView, { Marker, PROVIDER_DEFAULT } from "react-native-maps";
|
|
import tw from "twrnc";
|
|
import { useEffect, useState } from "react";
|
|
import { Driver, MarkerData } from "@/types/type";
|
|
import { icons } from "@/constants";
|
|
import { useFetch } from "@/lib/fetch";
|
|
import { ActivityIndicator, Text, View } from "react-native";
|
|
|
|
const Map = () => {
|
|
const { data: drivers, loading, error } = useFetch<Driver[]>("/(api)/driver");
|
|
const { userLongitude, userLatitude, destinationLatitude, destinationLongitude } = useLocationStore();
|
|
const { selectedDriver, setDrivers } = useDriverStore();
|
|
const [markers, setMarkers] = useState<MarkerData[]>([]);
|
|
const region = calculateRegion({
|
|
userLongitude, userLatitude, destinationLatitude, destinationLongitude,
|
|
});
|
|
useEffect(() => {
|
|
if (Array.isArray(drivers)) {
|
|
if (!userLatitude || !userLongitude) return;
|
|
const newMarkers = generateMarkersFromData({ data: drivers, userLatitude, userLongitude, });
|
|
setMarkers(newMarkers);
|
|
}
|
|
}, [drivers]);
|
|
useEffect(() => {
|
|
if (markers.length > 0 && destinationLatitude && destinationLongitude) {
|
|
calculateDriverTimes({ markers, userLongitude, userLatitude, destinationLatitude, destinationLongitude }).then((drivers) => {
|
|
setDrivers(drivers as MarkerData[]);
|
|
});
|
|
}
|
|
}, [markers, destinationLatitude, destinationLongitude]);
|
|
if (loading || !userLatitude || !userLongitude) {
|
|
return (
|
|
<View style={tw`flex justify-between items-center w-full`}>
|
|
<ActivityIndicator size="small" color="#000" />
|
|
</View>
|
|
);
|
|
}
|
|
if (error) {
|
|
return (
|
|
<View style={tw`flex justify-between items-center w-full`}>
|
|
<Text>Error:{error}</Text>
|
|
</View>
|
|
);
|
|
}
|
|
return (
|
|
<MapView provider={PROVIDER_DEFAULT} style={tw`w-full h-full rounded-2xl `} tintColor="black" mapType="standard" showsPointsOfInterest={false} initialRegion={region} showsUserLocation={true} userInterfaceStyle="light" >
|
|
{markers?.map((marker) => (
|
|
<Marker key={marker.id}
|
|
coordinate={{
|
|
latitude: marker.latitude,
|
|
longitude: marker.longitude,
|
|
}}
|
|
title={marker.title}
|
|
image={selectedDriver === marker.id ? icons.selectedMarker : icons.marker}
|
|
/>
|
|
))}
|
|
</MapView>
|
|
)
|
|
}
|
|
|
|
export default Map; |