search pages with filters in process

src/pages/SearchPage.tsx

@@ -1,5 +1,110 @@
+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() {
-  return <div>SearchPage</div>;
+  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;