inmake/irth-new-client
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

upd

Browse Source
This commit is contained in:
Lanskikh
2025-04-30 18:23:46 +05:00
parent f70a59d8ba
commit cffb9dff36
5 changed files with 419 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/SearchPage.tsx
+85 -85
View File
@@ -1,23 +1,23 @@
import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query';
import { api } from '../api/ky';
import { IUnit } from '../types/IUnit';
import UnitCard from '../components/UnitCard';
import { useEffect, useRef, useState } from 'react';
import SearchFilters, { Filters } from '../components/SearchFilters';
import { useSearchParams } from 'react-router';
import Button from '../components/ui/Button';
import FiltersIcon from '../components/icons/FiltersIcon';
import RestartIcon from '../components/icons/RestartIcon';
import clsx from 'clsx';
import { AnimatePresence, motion } from 'motion/react';
import { useDebounce } from '../hooks/useDebounce';
import Select from '../components/ui/Select';
import { useInfiniteQuery } from "@tanstack/react-query";
import { api } from "../api/ky";
import { IUnit } from "../types/IUnit";
import UnitCard from "../components/UnitCard";
import { useEffect, useRef, useState } from "react";
import SearchFilters from "../components/SearchFilters";
import { useSearchParams } from "react-router";
import Button from "../components/ui/Button";
import FiltersIcon from "../components/icons/FiltersIcon";
import RestartIcon from "../components/icons/RestartIcon";
import clsx from "clsx";
import { AnimatePresence, motion } from "motion/react";
import { useDebounce } from "../hooks/useDebounce";
import Select from "../components/ui/Select";
const SORT_OPTIONS = {
'Sort by ascending price': 'cost asc',
'Sort by descending price': 'cost desc',
'Sort by ascending area': 'sqft asc',
'Sort by descending area': 'sqft desc',
"Sort by ascending price": "cost asc",
"Sort by descending price": "cost desc",
"Sort by ascending area": "sqft asc",
"Sort by descending area": "sqft desc",
};
const STEP = 12;
@@ -25,9 +25,9 @@ const STEP = 12;
function SearchPage() {
const [searchParams] = useSearchParams();
const project = searchParams.get('project');
const unitTypes = searchParams.getAll('unitTypes');
const view = searchParams.get('view');
const project = searchParams.get("project");
const unitTypes = searchParams.getAll("unitTypes");
const view = searchParams.get("view");
const [filtersInModal, setFiltersInModal] = useState(false);
@@ -35,19 +35,19 @@ function SearchPage() {
const [floor, setFloor] = useState<[number, number]>([-1, -1]);
const [area, setArea] = useState<[number, number]>([-1, -1]);
const debouncedCost = useDebounce(cost, 500);
const debouncedFloor = useDebounce(floor, 500);
const debouncedArea = useDebounce(area, 500);
const debouncedCost = useDebounce(cost, 1000);
const debouncedFloor = useDebounce(floor, 1000);
const debouncedArea = useDebounce(area, 1000);
const [sort, setSort] = useState<keyof typeof SORT_OPTIONS>(
'Sort by ascending price'
"Sort by ascending price"
);
const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
useInfiniteQuery({
initialPageParam: 0,
queryKey: [
'units',
"units",
project,
unitTypes,
view,
@@ -68,22 +68,22 @@ function SearchPage() {
await api
.get(
`units?offset=${pageParam}&limit=${STEP}${
project ? `&project=${project}` : ''
}${unitTypes.map((unitType) => `&unitTypes=${unitType}`).join('')}${
view ? `&view=${view}` : ''
project ? `&project=${project}` : ""
}${unitTypes.map((unitType) => `&unitTypes=${unitType}`).join("")}${
view ? `&view=${view}` : ""
}${
debouncedCost.length > 0
? `&cost=${debouncedCost.map(Math.round).join(',')}`
: ''
? `&cost=${debouncedCost.map(Math.round).join(",")}`
: ""
}${
debouncedFloor.length > 0
? `&floor=${debouncedFloor.map(Math.round).join(',')}`
: ''
? `&floor=${debouncedFloor.map(Math.round).join(",")}`
: ""
}${
debouncedArea.length > 0
? `&area=${debouncedArea.map(Math.round).join(',')}`
: ''
}${sort ? `&order=${SORT_OPTIONS[sort].split(' ').join(',')}` : ''}`
? `&area=${debouncedArea.map(Math.round).join(",")}`
: ""
}${sort ? `&order=${SORT_OPTIONS[sort].split(" ").join(",")}` : ""}`
)
.json<IUnit[]>(),
getNextPageParam: (lastPage, _, lastPageIndex) =>
@@ -100,7 +100,7 @@ function SearchPage() {
(entries) => {
if (entries[0].isIntersecting) fetchNextPage();
},
{ rootMargin: '-200px' }
{ rootMargin: "-200px" }
);
if (observerElement) observer.observe(observerElement);
@@ -126,7 +126,7 @@ function SearchPage() {
const [footerReached, setFooterReached] = useState(false);
useEffect(() => {
const footer = document.querySelector('footer');
const footer = document.querySelector("footer");
const observer = new IntersectionObserver((entries) =>
setFooterReached(entries[0].isIntersecting)
);
@@ -137,36 +137,36 @@ function SearchPage() {
};
}, []);
const [activeFiltersCount, setActiveFiltersCount] = useState(0);
// const [activeFiltersCount, setActiveFiltersCount] = useState(0);
const queryClient = useQueryClient();
// const queryClient = useQueryClient();
useEffect(() => {
const filters = queryClient.getQueryData<Filters>(['filters', project]);
if (filters) {
setActiveFiltersCount(
+!!view +
+!!unitTypes.length +
+(debouncedCost[0] !== filters.cost[0]) +
+(debouncedCost[1] !== filters.cost[1]) +
+(debouncedArea[0] !== filters.area[0]) +
+(debouncedArea[1] !== filters.area[1]) +
+(debouncedFloor[0] !== filters.floor[0]) +
+(debouncedFloor[1] !== filters.floor[1])
);
}
}, [
queryClient,
unitTypes,
view,
project,
debouncedCost,
cost,
debouncedArea,
area,
debouncedFloor,
floor,
]);
// useEffect(() => {
// const filters = queryClient.getQueryData<Filters>(["filters", project]);
// if (filters) {
// setActiveFiltersCount(
// +!!view +
// +!!unitTypes.length +
// +(debouncedCost[0] !== filters.minCost) +
// +(debouncedCost[1] !== filters.maxCost) +
// +(debouncedArea[0] !== filters.minArea) +
// +(debouncedArea[1] !== filters.maxArea) +
// +(debouncedFloor[0] !== filters.minFloor) +
// +(debouncedFloor[1] !== filters.maxFloor)
// );
// }
// }, [
// queryClient,
// unitTypes,
// view,
// project,
// debouncedCost,
// cost,
// debouncedArea,
// area,
// debouncedFloor,
// floor,
// ]);
return (
<>
@@ -176,15 +176,15 @@ function SearchPage() {
setInModal={setFiltersInModal}
{...{ area, cost, floor, setArea, setCost, setFloor }}
/>
<div className='2xl:p-[2.222vw] p-4 min-h-dvh 2xl:space-y-[1.111vw] space-y-4'>
<div className="2xl:p-[2.222vw] p-4 min-h-dvh 2xl:space-y-[1.111vw] space-y-4">
<Select
options={Object.keys(SORT_OPTIONS)}
defaultOption={sort}
onSelect={(opt) => setSort(opt as keyof typeof SORT_OPTIONS)}
className='2xl:max-w-[22.778vw] md:max-2xl:max-w-[45.833vw]'
className="2xl:max-w-[22.778vw] md:max-2xl:max-w-[45.833vw]"
/>
<hr className='2xl:h-[0.069vw] border-[#E2E2DC]' />
<AnimatePresence mode='wait'>
<hr className="2xl:h-[0.069vw] border-[#E2E2DC]" />
<AnimatePresence mode="wait">
{project &&
unitTypes &&
debouncedCost &&
@@ -204,7 +204,7 @@ function SearchPage() {
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
className='2xl:grid-cols-4 md:max-2xl:grid-cols-2 grid 2xl:gap-[1.111vw] gap-4'
className="2xl:grid-cols-4 md:max-2xl:grid-cols-2 grid 2xl:gap-[1.111vw] gap-4"
>
{data?.pages.map((page) =>
page.map((unit) => <UnitCard key={unit.id} unit={unit} />)
@@ -216,34 +216,34 @@ function SearchPage() {
{showButtons && (
<div
className={clsx(
'fixed left-1/2 -translate-x-1/2 flex justify-center 2xl:gap-[0.278vw] gap-2 transition-all',
"fixed left-1/2 -translate-x-1/2 flex justify-center 2xl:gap-[0.278vw] gap-2 transition-all",
footerReached && !hasNextPage
? 'top-[calc(100dvh-17.222vw)] translate-y-0'
: 'top-[calc(100dvh-2.222vw)] -translate-y-full'
? "top-[calc(100dvh-17.222vw)] translate-y-0"
: "top-[calc(100dvh-2.222vw)] -translate-y-full"
)}
>
<Button onClick={() => setFiltersInModal(true)} className='relative'>
<span className='2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4 text-white'>
<Button onClick={() => setFiltersInModal(true)} className="relative">
<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>
{!!activeFiltersCount && (
<div className='absolute 2xl:top-[0.139vw] 2xl:right-[0.139vw] top-0.5 right-0.5 rounded-full w-4 text-caption-s aspect-square bg-white text-[#00BED7]'>
<span className="text-caption-m">Filters</span>
{/* {!!activeFiltersCount && (
<div className="absolute 2xl:top-[0.139vw] 2xl:right-[0.139vw] top-0.5 right-0.5 rounded-full w-4 text-caption-s aspect-square bg-white text-[#00BED7]">
{activeFiltersCount}
</div>
)}
)} */}
</Button>
<Button
variant='secondary'
className='2xl:!outline-[0.069vw] !outline !outline-[#E2E2DC]'
variant="secondary"
className="2xl:!outline-[0.069vw] !outline !outline-[#E2E2DC]"
onClick={() => {
window.location.href = '/search';
window.location.href = "/search";
}}
>
<span className='2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4 text-[#0D1922]/70'>
<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>
<span className="text-caption-m">Reset</span>
</Button>
</div>
)}