131 lines
4.0 KiB
JavaScript
131 lines
4.0 KiB
JavaScript
import { cn } from "@/lib/utils";
|
|
import { getCoutriesApi } from "@/utils/api";
|
|
import { Loader2, Minus, Plus } from "lucide-react";
|
|
import { useSearchParams } from "next/navigation";
|
|
import { useEffect, useState } from "react";
|
|
import { t } from "@/utils";
|
|
import CountryNode from "./CountryNode";
|
|
|
|
const LocationTree = () => {
|
|
const searchParams = useSearchParams();
|
|
const langCode = searchParams.get("lang");
|
|
|
|
const selectedCountry = searchParams.get("country") || "";
|
|
const selectedState = searchParams.get("state") || "";
|
|
const selectedCity = searchParams.get("city") || "";
|
|
const selectedArea = searchParams.get("area") || "";
|
|
const isAllSelected =
|
|
!selectedCountry && !selectedState && !selectedCity && !selectedArea;
|
|
|
|
const [countries, setCountries] = useState({
|
|
data: [],
|
|
currentPage: 1,
|
|
hasMore: false,
|
|
isLoading: false,
|
|
isLoadMore: false,
|
|
expanded: false,
|
|
});
|
|
|
|
useEffect(() => {
|
|
fetchCountries();
|
|
}, [langCode]);
|
|
|
|
const fetchCountries = async (page = 1) => {
|
|
try {
|
|
page > 1
|
|
? setCountries((prev) => ({ ...prev, isLoadMore: true }))
|
|
: setCountries((prev) => ({ ...prev, isLoading: true }));
|
|
|
|
const response = await getCoutriesApi.getCoutries({ page });
|
|
const newData = response?.data?.data?.data ?? [];
|
|
const currentPage = response?.data?.data?.current_page;
|
|
const lastPage = response?.data?.data?.last_page;
|
|
|
|
setCountries((prev) => ({
|
|
...prev,
|
|
data: page > 1 ? [...prev.data, ...newData] : newData,
|
|
currentPage,
|
|
hasMore: lastPage > currentPage,
|
|
expanded: true,
|
|
}));
|
|
|
|
|
|
} catch (error) {
|
|
console.log(error);
|
|
} finally {
|
|
setCountries((prev) => ({
|
|
...prev,
|
|
isLoading: false,
|
|
isLoadMore: false,
|
|
}));
|
|
}
|
|
};
|
|
|
|
const handleToggleExpand = () => {
|
|
setCountries((prev) => ({ ...prev, expanded: !prev.expanded }));
|
|
};
|
|
|
|
const handleAllLocationsClick = () => {
|
|
// Clear all location parameters
|
|
const newSearchParams = new URLSearchParams(searchParams);
|
|
newSearchParams.delete("country");
|
|
newSearchParams.delete("state");
|
|
newSearchParams.delete("city");
|
|
newSearchParams.delete("area");
|
|
newSearchParams.delete("lat");
|
|
newSearchParams.delete("lng");
|
|
newSearchParams.delete("km_range");
|
|
|
|
window.history.pushState(null, '', `/ads?${newSearchParams.toString()}`);
|
|
|
|
};
|
|
|
|
return (
|
|
<ul>
|
|
<li>
|
|
<div className="flex items-center rounded">
|
|
{countries?.isLoading ? (
|
|
<Loader2 className="size-[14px] animate-spin text-muted-foreground" />
|
|
) : (
|
|
<button
|
|
className="text-sm p-1 hover:bg-muted rounded-sm"
|
|
onClick={handleToggleExpand}
|
|
>
|
|
{countries.expanded ? <Minus size={14} /> : <Plus size={14} />}
|
|
</button>
|
|
)}
|
|
|
|
<button
|
|
onClick={handleAllLocationsClick}
|
|
className={cn(
|
|
"flex-1 ltr:text-left rtl:text-right py-1 px-2 rounded-sm",
|
|
isAllSelected && "border bg-muted"
|
|
)}
|
|
>
|
|
{t("allCountries")}
|
|
</button>
|
|
</div>
|
|
{countries.expanded && countries.data.length > 0 && (
|
|
<ul className="ltr:ml-3 rtl:mr-3 ltr:border-l rtl:border-r ltr:pl-2 rtl:pr-2 space-y-1">
|
|
{countries.data.map((country) => (
|
|
<CountryNode key={country.id + langCode} country={country} />
|
|
))}
|
|
|
|
{countries.hasMore && (
|
|
<button
|
|
onClick={() => fetchCountries(countries.currentPage + 1)}
|
|
className="text-primary text-center text-sm py-1 px-2"
|
|
disabled={countries.isLoadMore}
|
|
>
|
|
{countries.isLoadMore ? t("loading") : t("loadMore")}
|
|
</button>
|
|
)}
|
|
</ul>
|
|
)}
|
|
</li>
|
|
</ul>
|
|
);
|
|
};
|
|
|
|
export default LocationTree;
|