579 lines
18 KiB
JavaScript
579 lines
18 KiB
JavaScript
import { useEffect, useRef, useState } from "react";
|
|
import { IoSearch } from "react-icons/io5";
|
|
import { t } from "@/utils";
|
|
import { MdArrowBack, MdOutlineKeyboardArrowRight } from "react-icons/md";
|
|
import { BiCurrentLocation } from "react-icons/bi";
|
|
import { DialogHeader, DialogTitle } from "../ui/dialog";
|
|
import { cn } from "@/lib/utils";
|
|
import { Skeleton } from "../ui/skeleton";
|
|
import NoData from "../EmptyStates/NoData";
|
|
import { Loader2, SearchIcon } from "lucide-react";
|
|
import { useInView } from "react-intersection-observer";
|
|
import {
|
|
getAreasApi,
|
|
getCitiesApi,
|
|
getCoutriesApi,
|
|
getStatesApi,
|
|
} from "@/utils/api";
|
|
import {
|
|
getIsBrowserSupported,
|
|
resetCityData,
|
|
saveCity,
|
|
setKilometerRange,
|
|
} from "@/redux/reducer/locationSlice";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { getMinRange } from "@/redux/reducer/settingSlice";
|
|
import { usePathname } from "next/navigation";
|
|
import { useDebounce } from "use-debounce";
|
|
import SearchAutocomplete from "./SearchAutocomplete";
|
|
import { CurrentLanguageData } from "@/redux/reducer/languageSlice";
|
|
import { useNavigate } from "../Common/useNavigate";
|
|
import useGetLocation from "../Layout/useGetLocation";
|
|
|
|
const LocationSelector = ({ OnHide, setSelectedCity, setIsMapLocation }) => {
|
|
const CurrentLanguage = useSelector(CurrentLanguageData);
|
|
const dispatch = useDispatch();
|
|
const { navigate } = useNavigate();
|
|
const pathname = usePathname();
|
|
const minLength = useSelector(getMinRange);
|
|
const { ref, inView } = useInView();
|
|
const IsBrowserSupported = useSelector(getIsBrowserSupported);
|
|
|
|
const viewHistory = useRef([]);
|
|
const skipNextSearchEffect = useRef(false);
|
|
|
|
const [search, setSearch] = useState("");
|
|
const [debouncedSearch] = useDebounce(search, 500);
|
|
const [locationStatus, setLocationStatus] = useState(null);
|
|
const [currentView, setCurrentView] = useState("countries");
|
|
const [selectedLocation, setSelectedLocation] = useState({
|
|
country: null,
|
|
state: null,
|
|
city: null,
|
|
area: null,
|
|
});
|
|
const [locationData, setLocationData] = useState({
|
|
items: [],
|
|
currentPage: 1,
|
|
hasMore: false,
|
|
isLoading: false,
|
|
isLoadMore: true,
|
|
});
|
|
|
|
const { fetchLocationData } = useGetLocation();
|
|
|
|
useEffect(() => {
|
|
if (skipNextSearchEffect.current) {
|
|
skipNextSearchEffect.current = false;
|
|
return;
|
|
}
|
|
fetchData(debouncedSearch);
|
|
}, [debouncedSearch]);
|
|
|
|
useEffect(() => {
|
|
if (inView && locationData?.hasMore && !locationData?.isLoading) {
|
|
fetchData(debouncedSearch, locationData?.currentPage + 1);
|
|
}
|
|
}, [inView]);
|
|
|
|
const handleSubmitLocation = () => {
|
|
minLength > 0
|
|
? dispatch(setKilometerRange(minLength))
|
|
: dispatch(setKilometerRange(0));
|
|
// avoid redirect if already on home page otherwise router.push triggering server side api calls
|
|
if (pathname !== "/") {
|
|
navigate("/");
|
|
}
|
|
};
|
|
|
|
const fetchData = async (
|
|
search = "",
|
|
page = 1,
|
|
view = currentView,
|
|
location = selectedLocation
|
|
) => {
|
|
try {
|
|
setLocationData((prev) => ({
|
|
...prev,
|
|
isLoading: page === 1,
|
|
isLoadMore: page > 1,
|
|
}));
|
|
|
|
let response;
|
|
|
|
const params = { page };
|
|
if (search) {
|
|
params.search = search;
|
|
}
|
|
|
|
switch (view) {
|
|
case "countries":
|
|
response = await getCoutriesApi.getCoutries(params);
|
|
break;
|
|
case "states":
|
|
response = await getStatesApi.getStates({
|
|
...params,
|
|
country_id: location.country.id,
|
|
});
|
|
break;
|
|
case "cities":
|
|
response = await getCitiesApi.getCities({
|
|
...params,
|
|
state_id: location.state.id,
|
|
});
|
|
break;
|
|
case "areas":
|
|
response = await getAreasApi.getAreas({
|
|
...params,
|
|
city_id: location.city.id,
|
|
});
|
|
break;
|
|
}
|
|
|
|
if (response.data.error === false) {
|
|
const items = response.data.data.data;
|
|
|
|
// MOD: if no results and not on countries, auto-save & close
|
|
if (items.length === 0 && view !== "countries" && !search) {
|
|
switch (view) {
|
|
case "states":
|
|
saveCity({
|
|
city: "",
|
|
state: "",
|
|
country: location.country.name,
|
|
lat: location.country.latitude,
|
|
long: location.country.longitude,
|
|
formattedAddress: location.country.translated_name,
|
|
});
|
|
break;
|
|
case "cities":
|
|
saveCity({
|
|
city: "",
|
|
state: location.state.name,
|
|
country: location.country.name,
|
|
lat: location.state.latitude,
|
|
long: location.state.longitude,
|
|
formattedAddress: [
|
|
location?.state.translated_name,
|
|
location?.country.translated_name,
|
|
]
|
|
.filter(Boolean)
|
|
.join(", "),
|
|
});
|
|
break;
|
|
case "areas":
|
|
saveCity({
|
|
city: location.city.name,
|
|
state: location.state.name,
|
|
country: location.country.name,
|
|
lat: location.city.latitude,
|
|
long: location.city.longitude,
|
|
formattedAddress: [
|
|
location?.city.translated_name,
|
|
location?.state.translated_name,
|
|
location?.country.translated_name,
|
|
]
|
|
.filter(Boolean)
|
|
.join(", "),
|
|
});
|
|
break;
|
|
}
|
|
|
|
handleSubmitLocation();
|
|
OnHide();
|
|
return; // stop further processing
|
|
}
|
|
setLocationData((prev) => ({
|
|
...prev,
|
|
items:
|
|
page > 1
|
|
? [...prev.items, ...response.data.data.data]
|
|
: response.data.data.data,
|
|
hasMore:
|
|
response.data.data.current_page < response.data.data.last_page,
|
|
currentPage: response.data.data.current_page,
|
|
}));
|
|
}
|
|
} catch (error) {
|
|
console.log(error);
|
|
} finally {
|
|
setLocationData((prev) => ({
|
|
...prev,
|
|
isLoading: false,
|
|
isLoadMore: false,
|
|
}));
|
|
}
|
|
};
|
|
|
|
const handleItemSelect = async (item) => {
|
|
// MOD: push current state onto history
|
|
viewHistory.current.push({
|
|
view: currentView,
|
|
location: selectedLocation,
|
|
dataState: locationData,
|
|
search: search,
|
|
});
|
|
|
|
let nextView = "";
|
|
let newLocation = {};
|
|
|
|
switch (currentView) {
|
|
case "countries":
|
|
newLocation = {
|
|
...selectedLocation,
|
|
country: item,
|
|
state: null,
|
|
city: null,
|
|
area: null,
|
|
};
|
|
nextView = "states";
|
|
break;
|
|
case "states":
|
|
newLocation = {
|
|
...selectedLocation,
|
|
state: item,
|
|
city: null,
|
|
area: null,
|
|
};
|
|
nextView = "cities";
|
|
break;
|
|
case "cities":
|
|
newLocation = {
|
|
...selectedLocation,
|
|
city: item,
|
|
area: null,
|
|
};
|
|
nextView = "areas";
|
|
break;
|
|
case "areas":
|
|
saveCity({
|
|
country: selectedLocation?.country?.name,
|
|
state: selectedLocation?.state?.name,
|
|
city: selectedLocation?.city?.name,
|
|
area: item?.name,
|
|
areaId: item?.id,
|
|
lat: item?.latitude,
|
|
long: item?.longitude,
|
|
formattedAddress: [
|
|
item?.translated_name,
|
|
selectedLocation?.city?.translated_name,
|
|
selectedLocation?.state?.translated_name,
|
|
selectedLocation?.country?.translated_name,
|
|
]
|
|
.filter(Boolean)
|
|
.join(", "),
|
|
});
|
|
handleSubmitLocation();
|
|
OnHide();
|
|
return;
|
|
}
|
|
setSelectedLocation(newLocation);
|
|
setCurrentView(nextView);
|
|
await fetchData("", 1, nextView, newLocation);
|
|
if (search) {
|
|
skipNextSearchEffect.current = true;
|
|
setSearch("");
|
|
}
|
|
};
|
|
|
|
const getPlaceholderText = () => {
|
|
switch (currentView) {
|
|
case "countries":
|
|
return `${t("search")} ${t("country")}`;
|
|
case "states":
|
|
return `${t("search")} ${t("state")}`;
|
|
case "cities":
|
|
return `${t("search")} ${t("city")}`;
|
|
case "areas":
|
|
return `${t("search")} ${t("area")}`;
|
|
default:
|
|
return `${t("search")} ${t("location")}`;
|
|
}
|
|
};
|
|
|
|
const getFormattedLocation = () => {
|
|
if (!selectedLocation) return t("location");
|
|
const parts = [];
|
|
if (selectedLocation.area?.translated_name)
|
|
parts.push(selectedLocation.area.translated_name);
|
|
if (selectedLocation.city?.translated_name)
|
|
parts.push(selectedLocation.city.translated_name);
|
|
if (selectedLocation.state?.translated_name)
|
|
parts.push(selectedLocation.state.translated_name);
|
|
if (selectedLocation.country?.translated_name)
|
|
parts.push(selectedLocation.country.translated_name);
|
|
|
|
return parts.length > 0 ? parts.join(", ") : t("location");
|
|
};
|
|
|
|
const handleBack = async () => {
|
|
const prev = viewHistory.current.pop();
|
|
if (!prev) return;
|
|
|
|
setCurrentView(prev.view);
|
|
setSelectedLocation(prev.location);
|
|
|
|
if (search !== prev.search) {
|
|
skipNextSearchEffect.current = true;
|
|
setSearch(prev.search);
|
|
}
|
|
if (prev.dataState) {
|
|
setLocationData(prev.dataState);
|
|
} else {
|
|
await fetchData(prev.search ?? "", 1, prev.view, prev.location);
|
|
}
|
|
};
|
|
|
|
const getTitle = () => {
|
|
switch (currentView) {
|
|
case "countries":
|
|
return t("country");
|
|
case "states":
|
|
return t("state");
|
|
case "cities":
|
|
return t("city");
|
|
case "areas":
|
|
return t("area");
|
|
}
|
|
};
|
|
|
|
const handleAllSelect = () => {
|
|
switch (currentView) {
|
|
case "countries":
|
|
resetCityData();
|
|
handleSubmitLocation();
|
|
OnHide();
|
|
break;
|
|
case "states":
|
|
saveCity({
|
|
city: "",
|
|
state: "",
|
|
country: selectedLocation?.country?.name,
|
|
lat: selectedLocation?.country?.latitude,
|
|
long: selectedLocation?.country?.longitude,
|
|
formattedAddress: selectedLocation?.country?.translated_name,
|
|
});
|
|
handleSubmitLocation();
|
|
OnHide();
|
|
break;
|
|
case "cities":
|
|
saveCity({
|
|
city: "",
|
|
state: selectedLocation?.state?.name,
|
|
country: selectedLocation?.country?.name,
|
|
lat: selectedLocation?.state?.latitude,
|
|
long: selectedLocation?.state?.longitude,
|
|
formattedAddress: [
|
|
selectedLocation?.state?.translated_name,
|
|
selectedLocation?.country?.translated_name,
|
|
]
|
|
.filter(Boolean)
|
|
.join(", "),
|
|
});
|
|
handleSubmitLocation();
|
|
OnHide();
|
|
break;
|
|
case "areas":
|
|
saveCity({
|
|
city: selectedLocation?.city?.name,
|
|
state: selectedLocation?.state?.name,
|
|
country: selectedLocation?.country?.name,
|
|
lat: selectedLocation?.city?.latitude,
|
|
long: selectedLocation?.city?.longitude,
|
|
formattedAddress: [
|
|
selectedLocation?.city?.translated_name,
|
|
selectedLocation?.state?.translated_name,
|
|
selectedLocation?.country?.translated_name,
|
|
]
|
|
.filter(Boolean)
|
|
.join(", "),
|
|
});
|
|
handleSubmitLocation();
|
|
OnHide();
|
|
break;
|
|
}
|
|
};
|
|
|
|
const getAllButtonTitle = () => {
|
|
switch (currentView) {
|
|
case "countries":
|
|
return t("allCountries");
|
|
case "states":
|
|
return `${t("allIn")} ${selectedLocation.country?.translated_name}`;
|
|
case "cities":
|
|
return `${t("allIn")} ${selectedLocation.state?.translated_name}`;
|
|
case "areas":
|
|
return `${t("allIn")} ${selectedLocation.city?.translated_name}`;
|
|
}
|
|
};
|
|
|
|
const getCurrentLocationUsingFreeApi = async (latitude, longitude) => {
|
|
try {
|
|
const data = await fetchLocationData({ lat: latitude, lng: longitude });
|
|
setSelectedCity(data);
|
|
setIsMapLocation(true);
|
|
setLocationStatus(null);
|
|
} catch (error) {
|
|
console.log(error);
|
|
setLocationStatus("error");
|
|
}
|
|
};
|
|
|
|
const getCurrentLocation = () => {
|
|
if (navigator.geolocation) {
|
|
setLocationStatus("fetching");
|
|
navigator.geolocation.getCurrentPosition(
|
|
async (position) => {
|
|
const { latitude, longitude } = position.coords;
|
|
await getCurrentLocationUsingFreeApi(latitude, longitude);
|
|
},
|
|
(error) => {
|
|
console.error("Geolocation error:", error);
|
|
if (error.code === error.PERMISSION_DENIED) {
|
|
setLocationStatus("denied");
|
|
} else {
|
|
setLocationStatus("error");
|
|
}
|
|
}
|
|
);
|
|
} else {
|
|
toast.error(t("geoLocationNotSupported"));
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<DialogHeader>
|
|
<DialogTitle className="flex items-center gap-2 text-xl ltr:text-left rtl:text-right">
|
|
{currentView !== "countries" && (
|
|
<button onClick={handleBack}>
|
|
<MdArrowBack size={20} className="rtl:scale-x-[-1]" />
|
|
</button>
|
|
)}
|
|
{getFormattedLocation()}
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
|
|
{currentView === "countries" ? (
|
|
<div className="flex items-center gap-2 border rounded-sm relative">
|
|
<SearchAutocomplete saveOnSuggestionClick={true} OnHide={OnHide} />
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center gap-2 border rounded-sm relative p-3 ltr:pl-9 rtl:pr-9">
|
|
<SearchIcon className="size-4 shrink-0 absolute left-3 text-muted-foreground" />
|
|
<input
|
|
type="text"
|
|
className="w-full outline-none text-sm"
|
|
placeholder={getPlaceholderText()}
|
|
value={search}
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
/>
|
|
</div >
|
|
)}
|
|
|
|
{/* Current Location Wrapper */}
|
|
|
|
{
|
|
IsBrowserSupported && (
|
|
<div className="flex items-center gap-2 border rounded p-2 px-4">
|
|
<BiCurrentLocation className="text-primary size-5 shrink-0" />
|
|
<button
|
|
className="flex flex-col items-start ltr:text-left rtl:text-right"
|
|
disabled={false}
|
|
onClick={getCurrentLocation}
|
|
>
|
|
<p className="text-sm font-medium text-primary">
|
|
{t("useCurrentLocation")}
|
|
</p>
|
|
<p className="text-xs font-normal m-0 text-gray-500">
|
|
{locationStatus === "fetching"
|
|
? t("gettingLocation")
|
|
: locationStatus === "denied"
|
|
? t("locationPermissionDenied")
|
|
: locationStatus === "error"
|
|
? t("error")
|
|
: t("automaticallyDetectLocation")}
|
|
</p>
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
<div className="border border-sm rounded-sm">
|
|
<button
|
|
className="flex items-center gap-1 p-3 text-sm font-medium justify-between w-full border-b ltr:text-left rtl:text-right"
|
|
onClick={handleAllSelect}
|
|
>
|
|
<span>{getAllButtonTitle()}</span>
|
|
<div className="bg-muted rounded-sm">
|
|
<MdOutlineKeyboardArrowRight
|
|
size={20}
|
|
className="rtl:scale-x-[-1]"
|
|
/>
|
|
</div>
|
|
</button>
|
|
<div className="overflow-y-auto h-[300px]">
|
|
{locationData.isLoading ? (
|
|
<PlacesSkeleton />
|
|
) : (
|
|
<>
|
|
{locationData.items.length > 0 ? (
|
|
locationData.items.map((item, index) => (
|
|
<button
|
|
className={cn(
|
|
"flex items-center ltr:text-left rtl:text-right gap-1 p-3 text-sm font-medium justify-between w-full",
|
|
index !== locationData.length - 1 && "border-b"
|
|
)}
|
|
onClick={() => handleItemSelect(item)}
|
|
key={item?.id}
|
|
ref={
|
|
index === locationData.items.length - 1 &&
|
|
locationData.hasMore
|
|
? ref
|
|
: null
|
|
}
|
|
>
|
|
<span>{item?.translated_name || item?.name}</span>
|
|
<div className="bg-muted rounded-sm">
|
|
<MdOutlineKeyboardArrowRight
|
|
size={20}
|
|
className="rtl:scale-x-[-1]"
|
|
/>
|
|
</div>
|
|
</button>
|
|
))
|
|
) : (
|
|
<NoData name={getTitle()} />
|
|
)}
|
|
{locationData.isLoadMore && (
|
|
<div className="p-4 flex justify-center">
|
|
<Loader2 className="size-4 animate-spin" />
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default LocationSelector;
|
|
|
|
const PlacesSkeleton = () => {
|
|
return (
|
|
<div className="space-y-2">
|
|
{Array.from({ length: 8 }).map((_, index) => (
|
|
<div key={index} className="flex items-center gap-3 p-3">
|
|
<Skeleton className="h-4 w-4 rounded-full" />
|
|
<div className="flex-1 space-y-2">
|
|
<Skeleton className="h-4 w-[85%]" />
|
|
<Skeleton className="h-3 w-[60%]" />
|
|
</div>
|
|
<Skeleton className="h-5 w-5 rounded-sm" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|