111 lines
3.8 KiB
TypeScript
111 lines
3.8 KiB
TypeScript
import { useInfiniteQuery } from "@tanstack/react-query";
|
|
import { api } from "../api/ky";
|
|
import { IUnit } from "../types/IUnit";
|
|
import FlatCard from "../components/FlatCard";
|
|
import { useEffect, useRef, useState } from "react";
|
|
import SearchFilters from "../components/SearchFilters";
|
|
import { useNavigate, useSearchParams } from "react-router";
|
|
import Button from "../components/ui/Button";
|
|
import FiltersIcon from "../components/icons/FiltersIcon";
|
|
import RestartIcon from "../components/icons/RestartIcon";
|
|
|
|
const STEP = 12;
|
|
|
|
function SearchPage() {
|
|
const [searchParams] = useSearchParams();
|
|
const navigate = useNavigate();
|
|
|
|
const project = searchParams.get("project");
|
|
const unitTypes = searchParams.getAll("unitTypes");
|
|
const cost = searchParams.getAll("cost");
|
|
const floor = searchParams.getAll("floor");
|
|
const area = searchParams.getAll("area");
|
|
|
|
const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
|
|
useInfiniteQuery({
|
|
initialPageParam: 0,
|
|
queryKey: ["units", project, unitTypes, cost, floor, area],
|
|
queryFn: async ({ pageParam = 0 }) =>
|
|
await api
|
|
.get(
|
|
`units?offset=${pageParam}&limit=${STEP}${
|
|
project ? `&project=${project}` : ""
|
|
}${unitTypes.map((unitType) => `&unitTypes=${unitType}`).join("")}${
|
|
cost.length > 0 ? `&cost=${cost.join(",")}` : ""
|
|
}${floor.length > 0 ? `&floor=${floor.join(",")}` : ""}${
|
|
area.length > 0 ? `&area=${area.join(",")}` : ""
|
|
}`
|
|
)
|
|
.json<IUnit[]>(),
|
|
getNextPageParam: (lastPage, _, lastPageIndex) =>
|
|
lastPage.length < STEP ? undefined : lastPageIndex + STEP,
|
|
});
|
|
|
|
const filtersRef = useRef<HTMLDivElement>(null);
|
|
const observerRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (!hasNextPage || isFetchingNextPage) return;
|
|
const observerElement = observerRef.current;
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
if (entries[0].isIntersecting) fetchNextPage();
|
|
},
|
|
{ rootMargin: "-200px" }
|
|
);
|
|
if (observerElement) observer.observe(observerElement);
|
|
|
|
return () => {
|
|
if (observerElement) observer.unobserve(observerElement);
|
|
};
|
|
}, [hasNextPage, isFetchingNextPage, fetchNextPage]);
|
|
|
|
const [showButtons, setShowButtons] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const observerElement = filtersRef.current;
|
|
const observer = new IntersectionObserver((entries) =>
|
|
setShowButtons(!entries[0].isIntersecting)
|
|
);
|
|
if (observerElement) observer.observe(observerElement);
|
|
|
|
return () => {
|
|
if (observerElement) observer.unobserve(observerElement);
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<div className="2xl:pb-[2.222vw] md:max-2xl:pb-6 pb-4 relative">
|
|
<SearchFilters ref={filtersRef} />
|
|
<div className="2xl:grid-cols-4 md:max-2xl:grid-cols-2 grid 2xl:gap-[1.111vw] gap-4 2xl:pt-[1.111vw] pt-4">
|
|
{data?.pages.flat().map((unit) => (
|
|
<FlatCard key={unit.id} {...unit} />
|
|
))}
|
|
</div>
|
|
<div ref={observerRef} />
|
|
{showButtons && (
|
|
<div className="fixed 2xl:bottom-[2.222vw] left-1/2 -translate-x-1/2 flex 2xl:gap-[0.278vw] gap-2">
|
|
<Button>
|
|
<span className="2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4 text-white">
|
|
<FiltersIcon />
|
|
</span>
|
|
<span className="text-caption-m">Filters</span>
|
|
</Button>
|
|
<Button
|
|
variant="secondary"
|
|
className="2xl:!outline-[0.069vw] !outline !outline-[#E2E2DC]"
|
|
onClick={() => navigate("/search")}
|
|
>
|
|
<span className="2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4 text-[#0D1922]/70">
|
|
<RestartIcon />
|
|
</span>
|
|
<span className="text-caption-m">Reset</span>
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default SearchPage;
|