140 lines
4.8 KiB
TypeScript
140 lines
4.8 KiB
TypeScript
import { MaterialCommunityIcons } from "@expo/vector-icons";
|
|
import { router } from "expo-router";
|
|
import { useEffect, useState } from "react";
|
|
import { ScrollView, Text, TouchableOpacity, View } from "react-native";
|
|
|
|
import { POI_CATEGORIES, searchNearby } from "@/lib/places";
|
|
import { useT } from "@/lib/i18n";
|
|
import { useLocationStore } from "@/store";
|
|
import type { NearbyPlace } from "@/types/type";
|
|
|
|
// Four quick destination chips: nearest mall / hospital / pharmacy / restaurant
|
|
// around the rider. Tapping one sets it as the destination and opens find-ride.
|
|
// Each chip resolves independently, so a category with no result nearby just
|
|
// shows "none nearby" instead of breaking the whole row.
|
|
type ChipState =
|
|
| { status: "loading" }
|
|
| { status: "empty" }
|
|
| { status: "ready"; place: NearbyPlace };
|
|
|
|
export const NearbySuggestions = () => {
|
|
const { userLatitude, userLongitude, setDestinationLocation } =
|
|
useLocationStore();
|
|
const t = useT();
|
|
const [chips, setChips] = useState<Record<string, ChipState>>({});
|
|
|
|
useEffect(() => {
|
|
if (userLatitude == null || userLongitude == null) return;
|
|
|
|
let cancelled = false;
|
|
setChips({});
|
|
|
|
// Resolve all four categories in parallel.
|
|
POI_CATEGORIES.forEach(async (category) => {
|
|
setChips((prev) => ({ ...prev, [category.id]: { status: "loading" } }));
|
|
const place = await searchNearby(category.googleType, {
|
|
latitude: userLatitude,
|
|
longitude: userLongitude,
|
|
});
|
|
if (cancelled) return;
|
|
setChips((prev) => ({
|
|
...prev,
|
|
[category.id]: place ? { status: "ready", place } : { status: "empty" },
|
|
}));
|
|
});
|
|
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [userLatitude, userLongitude]);
|
|
|
|
const select = (place: NearbyPlace) => {
|
|
setDestinationLocation({
|
|
latitude: place.latitude,
|
|
longitude: place.longitude,
|
|
address: place.name,
|
|
});
|
|
router.push("/(root)/find-ride");
|
|
};
|
|
|
|
return (
|
|
<View>
|
|
<Text className="text-base font-JakartaSemiBold mb-3 text-black dark:text-white">
|
|
{t("pois.nearbyTitle")}
|
|
</Text>
|
|
|
|
<ScrollView
|
|
horizontal
|
|
showsHorizontalScrollIndicator={false}
|
|
contentContainerStyle={{ gap: 10, paddingBottom: 4 }}
|
|
>
|
|
{POI_CATEGORIES.map((category) => {
|
|
const state = chips[category.id];
|
|
const ready = state?.status === "ready" ? state.place : null;
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
key={category.id}
|
|
disabled={!ready}
|
|
onPress={() => ready && select(ready)}
|
|
activeOpacity={0.8}
|
|
className={`flex-row items-center rounded-2xl border px-3 py-2.5 ${
|
|
ready
|
|
? "border-primary-500 bg-primary-500/10"
|
|
: "border-neutral-200 bg-neutral-100 dark:border-neutral-800 dark:bg-neutral-800"
|
|
}`}
|
|
style={{ minWidth: 150 }}
|
|
>
|
|
<MaterialCommunityIcons
|
|
name={category.icon as never}
|
|
size={20}
|
|
color={ready ? "#0286ff" : "#a3a3a3"}
|
|
/>
|
|
|
|
<View className="ml-2 flex-1">
|
|
<Text
|
|
className={`text-xs font-JakartaBold ${
|
|
ready ? "text-primary-500" : "text-neutral-400"
|
|
}`}
|
|
numberOfLines={1}
|
|
>
|
|
{t(category.labelKey)}
|
|
</Text>
|
|
<Text
|
|
className="text-[11px] text-general-200 dark:text-neutral-400"
|
|
numberOfLines={1}
|
|
>
|
|
{!state || state.status === "loading"
|
|
? t("pois.searching")
|
|
: state.status === "empty"
|
|
? t("pois.noneNearby")
|
|
: state.place.routeDistanceMeters != null
|
|
? t("pois.routeAway", {
|
|
km:
|
|
Math.round(
|
|
state.place.routeDistanceMeters / 100,
|
|
) / 10,
|
|
min: Math.max(
|
|
1,
|
|
Math.round(
|
|
(state.place.routeDurationSeconds ?? 0) / 60,
|
|
),
|
|
),
|
|
})
|
|
: state.place.distanceMeters != null
|
|
? t("pois.kmAway", {
|
|
km:
|
|
Math.round(state.place.distanceMeters / 100) /
|
|
10,
|
|
})
|
|
: state.place.name}
|
|
</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
);
|
|
})}
|
|
</ScrollView>
|
|
</View>
|
|
);
|
|
};
|